K suond project test

src/components/Authorise.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="authorise">
-    <h1 class="authorise__heading">Nowify</h1>
+    <h1 class="authorise__heading">Krokify Pro</h1>
 
     <p class="authorise__copy">
-      Nowify is a simple Spotify 'Now Playing' screen designed for the Raspberry
-      Pi. Login with Spotify below and start playing some music!
+     Loggati, al resto ci penso io :)
     </p>
 
     <button
@@ -15,7 +14,7 @@
     </button>
 
     <p class="authorise__credit">
-      <a href="https://github.com/jonashcroft/Nowify">View on GitHub</a>
+      <a href="https://github.com/jonashcroft/Nowify">Onore al creatore</a>
     </p>
   </div>
 </template>
@@ -39,7 +38,6 @@ export default {
   data() {
     return {}
   },
-
   computed: {},
 
   mounted() {
@@ -62,6 +60,8 @@ export default {
      * Spotify to grant app consent, user will
      * be redirected back to the app.
      */
+
+
     initAuthorise() {
       this.setAuthUrl()
       window.location.href = `${this.endpoints.auth}?${searchParams.toString()}`
@@ -204,7 +204,7 @@ export default {
       return `${this.endpoints.auth}?${searchParams.toString()}`
     }
   },
-
+  
   watch: {
     /**
      * Watch authorisation code.

src/components/NowPlaying.vue

@@ -15,15 +15,19 @@
       <div class="now-playing__details">
         <h1 class="now-playing__track" v-text="player.trackTitle"></h1>
         <h2 class="now-playing__artists" v-text="getTrackArtists"></h2>
+        <h3 class="now-playing__album" v-text="player.trackAlbumName"></h3>
+        <h3 class="now-playing__year" v-text="player.trackYear"></h3>
       </div>
     </div>
     <div v-else class="now-playing" :class="getNowPlayingClass()">
-      <h1 class="now-playing__idle-heading">No music is playing 😔</h1>
+      <font size="55"> <h4 class="now-playing__idle-heading"> {{ currentTime }} </h4></font>
+      <h1 class="now-playing__idle-heading"> {{ currentDate }}</h1>
     </div>
   </div>
 </template>
 
 <script>
+
 import * as Vibrant from 'node-vibrant'
 
 import props from '@/utils/props.js'
@@ -43,7 +47,9 @@ export default {
       playerResponse: {},
       playerData: this.getEmptyPlayer(),
       colourPalette: '',
-      swatches: []
+      swatches: [],
+      currentDate: '',
+      currentTime: ''
     }
   },
 
@@ -58,7 +64,9 @@ export default {
   },
 
   mounted() {
-    this.setDataInterval()
+    this.setDataInterval();
+    this.updateDatetime();
+    setInterval(this.updateDatetime, 1000);
   },
 
   beforeDestroy() {
@@ -70,6 +78,18 @@ export default {
      * Make the network request to Spotify to
      * get the current played track.
      */
+
+     updateDatetime() {
+      // Get the current date and time
+      const now = new Date();
+      // Format the date and time
+      const formattedDate = now.toLocaleString('it-IT', {timeZone: 'CET', weekday: 'long', month: 'long', day: 'numeric'});
+      const formattedTime = now.toLocaleTimeString('it-IT', { hour: "2-digit", minute: "2-digit" });
+      // Update the currentDatetime property
+      this.currentDate = formattedDate;
+      this.currentTime = formattedTime
+    },
+
     async getNowPlaying() {
       let data = {}
 
@@ -161,7 +181,9 @@ export default {
         trackAlbum: {},
         trackArtists: [],
         trackId: '',
-        trackTitle: ''
+        trackTitle: '',
+        trackYear: '',
+        trackAlbumName: ''
       }
     },
 
@@ -230,6 +252,8 @@ export default {
         ),
         trackTitle: this.playerResponse.item.name,
         trackId: this.playerResponse.item.id,
+        trackYear: this.playerResponse.item.album.release_date.substring(0,4),
+        trackAlbumName: this.playerResponse.item.album.name,
         trackAlbum: {
           title: this.playerResponse.item.album.name,
           image: this.playerResponse.item.album.images[0].url

src/styles/components/now-playing.scss

@@ -40,7 +40,7 @@
   }
 
   &__artists {
-    opacity: 0.8;
+    opacity: 0.85;
   }
 
   &--active {
@@ -50,7 +50,6 @@
 
   &--idle {
     display: flex;
-    align-items: center;
     justify-content: center;
   }
 
@@ -68,4 +67,4 @@
       text-align: left;
     }
   }
-}
+}

src/styles/global/typography.scss

@@ -3,22 +3,37 @@
  * -----------------------------------------------------------------------------
  */
 h1 {
-  font-size: 2em;
+  font-size: 2.5em;
   font-weight: var(--font-weight-heading);
   letter-spacing: -1.25px;
   margin: 0 0 var(--spacing-m) 0;
   word-break: break-word;
 }
 
 h2 {
+  font-size: 2em;
+  font-weight: var(--font-weight-body);
+  letter-spacing: -0.5px;
+  margin: 0;
+  word-break: break-word;
+}
+
+h3 {
   font-size: 1.5em;
   font-weight: var(--font-weight-body);
   letter-spacing: -0.5px;
   margin: 0;
   word-break: break-word;
 }
 
+h4 {
+  font-size: 3em;
+  font-weight: var(--font-weight-heading);
+  letter-spacing: -1.5px;
+  margin: 0 0 var(--spacing-m) 0;
+}
+
 p {
-  font-size: 1.2em;
+  font-size: 2em;
   line-height: 1.4;
-}
+}