Refresh the Spotify token when needed

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/cli-plugin-babel/preset'
   ]
 }

jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

package.json

@@ -9,21 +9,46 @@
     "start": "node server.js"
   },
   "dependencies": {
-    "core-js": "^2.6.5",
-    "express": "^4.16.4"
+    "core-js": "^3.38.1",
+    "express": "^4.19.2",
+    "vue": "^2.6.14"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.7.0",
-    "@vue/cli-service": "^3.7.0",
-    "axios": "^0.18.0",
-    "buefy": "^0.7.5",
-    "build-url": "^1.3.2",
-    "bulma": "^0.7.4",
-    "query-string": "^6.5.0",
-    "sass": "^1.18.0",
-    "sass-loader": "^7.1.0",
-    "vue": "^2.6.10",
+    "@babel/core": "^7.25.2",
+    "@babel/eslint-parser": "^7.25.1",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "axios": "^1.7.7",
+    "buefy": "^0.9.29",
+    "build-url": "^6.0.1",
+    "bulma": "^0.9.4",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.28.0",
+    "oauth-pkce": "^0.0.7",
+    "query-string": "^9.1.0",
+    "sass": "^1.78.0",
+    "sass-loader": "^16.0.1",
     "vue-router": "^3.0.3",
-    "vue-template-compiler": "^2.5.21"
-  }
+    "vue-template-compiler": "^2.7.16"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
 }

src/assets/scss/styles.scss

@@ -1,13 +1,17 @@
+// Import Bulma's core
+@import "~bulma/sass/utilities/_all";
+
 $gap: 200px;
 $speed-slow: 150ms !default;
 $speed-slower: 250ms !default;
 
 $primary: #1ed760;
 
-@import 'bulma';
-@import '~buefy/src/scss/components/switch';
+@import "~bulma";
+@import "~buefy/src/scss/components/switch";
 
-html, body {
+html,
+body {
   background: transparent;
   overflow: auto;
 }

src/components/LandingHead.vue

@@ -9,12 +9,8 @@
 
           <p class="is-size-3">Overlay for OBS &amp; XSplit</p>
 
-          <p
-            v-show="showLoginButton"
-          >
-            <a class="button is-success is-large is-rounded is-outlined"
-              :href="loginUri"
-            >
+          <p v-show="showLoginButton">
+            <a class="button is-success is-large is-rounded is-outlined" :href="loginUri" :disable="!loginUri">
               Login with Spotify
             </a>
           </p>

src/components/NowPlaying.vue

@@ -1,49 +1,46 @@
 <template>
-  <div class="media">
-    <div
-      class="media-left"
-      v-show="showAlbumArt"
-    >
-      <figure
-        class="image"
-        :class="{ 'is-64x64': showArtist, 'is-48x48': !showArtist }"
-      >
-        <PreloadedImage
-          v-if="albumArt"
-          :src="albumArt"
-          alt="Album Art"
-        />
-      </figure>
+  <div>
+    <div class="media" v-if="!canRefresh">
+      <div class="media-content">
+        <p class="is-size-4 has-text-white">
+          Please generate a new link
+        </p>
+
+        <p class="is-size-6">
+          <a class="has-text-white" :href="siteUrl">{{ siteUrl }}</a>
+        </p>
+      </div>
     </div>
 
-    <div class="media-content">
-      <p class="is-size-4 has-text-white">{{ trackName }}</p>
-
-      <p
-        class="is-size-6 has-text-white"
-        v-show="showArtist"
-      >
-        {{ artistName }}
-      </p>
-    </div>
-
-    <div
-      class="media-right"
-      v-show="showSpotifyLogo"
-    >
-      <figure class="image is-32x32">
-        <img src="@/assets/svg/spotify-logo-without-text.svg" alt="Spotify">
-      </figure>
+    <div class="media" v-else>
+      <div class="media-left" v-show="showAlbumArt">
+        <figure class="image" :class="{ 'is-64x64': showArtist, 'is-48x48': !showArtist }">
+          <PreloadedImage v-if="albumArt" :src="albumArt" alt="Album Art" />
+        </figure>
+      </div>
+
+      <div class="media-content">
+        <p class="is-size-4 has-text-white">{{ trackName }}</p>
+
+        <p class="is-size-6 has-text-white" v-show="showArtist">
+          {{ artistName }}
+        </p>
+      </div>
+
+      <div class="media-right" v-show="showSpotifyLogo">
+        <figure class="image is-32x32">
+          <img src="@/assets/svg/spotify-logo-without-text.svg" alt="Spotify">
+        </figure>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import axios from 'axios'
-
 import PreloadedImage from '@/components/PreloadedImage'
 
-const endpointUri = 'https://api.spotify.com/v1/me/player/currently-playing'
+const playingEndpointUri = 'https://api.spotify.com/v1/me/player/currently-playing'
+const refreshEndpointUri = 'https://accounts.spotify.com/api/token'
 
 export default {
   components: { PreloadedImage },
@@ -67,51 +64,108 @@ export default {
     accessToken: {
       type: String,
       default: null
+    },
+    refreshToken: {
+      type: String,
+      default: null
     }
   },
 
   data: () => ({
-    userPlayer: null
+    userPlayer: null,
+    newAccessToken: null,
+    newRefreshToken: null,
+    refreshTimer: null,
+    canRefresh: true,
   }),
 
   computed: {
-    trackName () {
+    trackName() {
       return this.userPlayer ? this.userPlayer.item.name : null
     },
 
-    artistName () {
+    artistName() {
       if (!this.userPlayer || this.userPlayer.item.artists.length == 0) {
         return null
       }
 
       return this.userPlayer.item.artists[0].name
     },
 
-    albumArt () {
+    albumArt() {
       if (!this.userPlayer || this.userPlayer.item.album.images.length == 0) {
         return null
       }
 
       return this.userPlayer.item.album.images[0].url
+    },
+
+    siteUrl() {
+      return window.location.origin;
     }
   },
 
-  mounted () {
+  created() {
+    this.newAccessToken = this.accessToken;
+    this.newRefreshToken = this.refreshToken;
+  },
+
+  mounted() {
     this.loadUserPlayer()
   },
 
   methods: {
-    loadUserPlayer () {
+    loadUserPlayer() {
       const headers = {
-        'Authorization': `Bearer ${this.accessToken}`
+        'Authorization': `Bearer ${this.newAccessToken}`
       }
 
-      this.$http.get(endpointUri, { headers })
+      this.$http.get(playingEndpointUri, { headers })
         .then(response => {
           this.userPlayer = response.data
 
-          setTimeout(this.loadUserPlayer, 5000)
+          if (!this.refreshTimer) {
+            setTimeout(this.loadUserPlayer, 5000)
+          }
         })
+        .catch((err) => {
+          if (err.status === 401) {
+            this.refreshAccessToken();
+          }
+        });
+    },
+    refreshAccessToken() {
+      if (!this.newRefreshToken) {
+        return;
+      }
+
+      const data = {
+        grant_type: "refresh_token",
+        refresh_token: this.refreshToken,
+        client_id: process.env.VUE_APP_SPOTIFY_CLIENT_ID
+      }
+      const headers = {
+        'Content-Type': `application/x-www-form-urlencoded`
+      }
+
+      this.$http.post(refreshEndpointUri, data, { headers })
+        .then(response => {
+          this.newAccessToken = response.data.access_token;
+          this.newRefreshToken = response.data.refresh_token;
+
+          if (!this.refreshTimer) {
+            setTimeout(this.loadUserPlayer, 5000)
+          }
+
+          const url = new URL(window.location)
+          url.searchParams.set("accessToken", this.newAccessToken)
+          url.searchParams.set("refreshToken", this.newRefreshToken)
+          window.location = url
+        }).catch((err) => {
+          if (err.status === 400) {
+            this.canRefresh = false;
+          }
+        });
     }
   }
 }

src/main.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import Switch from 'buefy/dist/components/switch'
+import Switch from 'buefy'
 
 import axios from 'axios'