Release 1.3.0

- Send the play queue ID (X-Queue-Id) with every request, and keep the
  queue across page reloads.
- Bypass browser caches for random songs.
- Start the sync time at 00:00, to match the server's minutes and seconds.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

README.md

@@ -25,7 +25,7 @@ The Docker image writes `config.js` from `public/config.template.js` when the co
 
 | Variable | Description |
 |---|---|
-| `API_HOSTNAME` | URL of the MusicServer, for example `https://music.example.com`. Empty to use the same host as the frontend. |
+| `API_HOSTNAME` | URL of the MusicServer, for example `https://music.example.com`. Empty to use the same host as the frontend. On another host, add the frontend's origin to the server's `CORS_ALLOWED_ORIGINS`. |
 | `API_PASSWORD` | The MusicServer's `API_PASSWORD`, used to get an API token. Empty if the server has no password. Anyone who can open the frontend can read it. |
 
 For `npm run serve`, create `public/config.js` (ignored by git):

package-lock.json

@@ -1,12 +1,12 @@
 {
    "name": "music-randomizer-vue",
-   "version": "1.2.0",
+   "version": "1.3.0",
    "lockfileVersion": 3,
    "requires": true,
    "packages": {
       "": {
          "name": "music-randomizer-vue",
-         "version": "1.2.0",
+         "version": "1.3.0",
          "dependencies": {
             "axios": "^1.7.2",
             "core-js": "^3.37.1",

package.json

@@ -1,6 +1,6 @@
 {
    "name": "music-randomizer-vue",
-   "version": "1.2.0",
+   "version": "1.3.0",
    "private": true,
    "scripts": {
       "serve": "vue-cli-service serve",
@@ -43,7 +43,9 @@
             "jsx": true
          },
          "babelOptions": {
-             "presets": ["@babel/preset-env"]
+            "presets": [
+               "@babel/preset-env"
+            ]
          }
       },
       "rules": {

src/api.js

@@ -12,6 +12,35 @@ export const api = axios.create({ baseURL: `${hostname}/api/v1` });
 // Client for the server routes outside /api/v1 (the /find search).
 export const legacyApi = axios.create({ baseURL: hostname });
 
+// The server keeps a play queue per client, identified by this header. Every music
+// response returns the queue's ID (a new one after a reset or a sync), and it is sent
+// back with every request. It is stored so a page reload keeps the same queue.
+const QUEUE_HEADER = "X-Queue-Id";
+const QUEUE_STORAGE_KEY = "queueId";
+
+let queueId = readQueueId();
+
+function readQueueId() {
+    try {
+        return localStorage.getItem(QUEUE_STORAGE_KEY);
+    } catch {
+        return null;
+    }
+}
+
+function rememberQueueId(response) {
+    const id = response?.headers?.[QUEUE_HEADER.toLowerCase()];
+    if (!id || id === queueId) {
+        return;
+    }
+    queueId = id;
+    try {
+        localStorage.setItem(QUEUE_STORAGE_KEY, id);
+    } catch {
+        // Without storage the queue still works until the page is reloaded.
+    }
+}
+
 let token = null;
 let expiresAt = 0;
 let pendingToken = null;
@@ -45,9 +74,26 @@ api.interceptors.request.use(async (request) => {
     if (!isTokenRequest(request)) {
         request.headers.Authorization = `Bearer ${await getToken()}`;
     }
+    if (queueId) {
+        request.headers[QUEUE_HEADER] = queueId;
+    }
+    // Random songs come from the same URL every time. Browsers that cached one before
+    // the server sent Cache-Control: no-store would otherwise replay it.
+    request.headers["Cache-Control"] = "no-cache";
     return request;
 });
 
+api.interceptors.response.use(
+    (response) => {
+        rememberQueueId(response);
+        return response;
+    },
+    (error) => {
+        rememberQueueId(error.response);
+        return Promise.reject(error);
+    }
+);
+
 // On 401 the token is no longer valid (for example after a server restart):
 // get a new one and retry the request once.
 api.interceptors.response.use(undefined, (error) => {

src/components/items/SyncProgressModal.vue

@@ -81,7 +81,7 @@ export default {
     data() {
         return {
             progress: 0,
-            timeSpent: "00:00:00",
+            timeSpent: "00:00",
             syncComplete: false,
             syncData: {
                 soundtracks_added: [],
@@ -181,7 +181,7 @@ export default {
                 if (this.syncInProgress) {
                     // New sync in progress - start polling
                     this.progress = 0;
-                    this.timeSpent = "00:00:00";
+                    this.timeSpent = "00:00";
                     this.syncComplete = false;
                     this.syncData = {
                         soundtracks_added: [],