Add menu actio to mark finished and enable group setup in properties

izderadicka · Oct 28, 2024 · 8de3c3d · 8de3c3d
1 parent 7106441
commit 8de3c3d
Show file tree

Hide file tree

Showing 10 changed files with 140 additions and 30 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,3 +10,5 @@
 .vscode
 public/*.map
 /dist
+
+/src-tauri
diff --git a/src/App.svelte b/src/App.svelte
@@ -22,6 +22,9 @@
     playItem,
     pendingDownloads,
     sleepTime,
+    positionsApi,
+    group,
+    positionWsApi,
   } from "./state/stores";
   import { onMount, setContext } from "svelte";
   import { Configuration, ResponseError } from "./client";
@@ -76,7 +79,7 @@
     new Configuration({
       basePath: API_BASE_URL,
       credentials: "include",
-    }),
+    })
   );
 
   let container: HTMLDivElement;
@@ -89,7 +92,7 @@
         console.debug("Got collections list", cols);
         $collections = cols;
         let parsedCollection: number = parseInt(
-          localStorage.getItem(StorageKeys.LAST_COLLECTION) || "0",
+          localStorage.getItem(StorageKeys.LAST_COLLECTION) || "0"
         );
         if (parsedCollection >= cols.names.length) parsedCollection = 0;
         $selectedCollection = parsedCollection;
@@ -104,6 +107,38 @@
     isInitialized = true;
   }
 
+  function markFolderAsRead() {
+    if (
+      $group &&
+      $currentFolder &&
+      $currentFolder.type === FolderType.REGULAR
+    ) {
+      let folder = $currentFolder.value;
+      if ($playItem && $playItem.path.startsWith(folder)) {
+        player.pause();
+        $positionWsApi.clearPendingPosition();
+      }
+      $positionsApi
+        .positionsGroupPost({
+          group: $group,
+          position: {
+            timestamp: new Date().getTime(),
+            collection: $selectedCollection,
+            folder: folder,
+            file: "",
+            position: 0,
+            folderFinished: true,
+          },
+        })
+        .then(() => {
+          console.debug("Marked folder as read", $currentFolder);
+        })
+        .catch((err) => {
+          console.error("Failed to mark folder as read", err);
+        });
+    }
+  }
+
   function actOnMenu(menuEvt) {
     const menuSelection: string = menuEvt.detail;
     console.debug("Menu selected", menuSelection);
@@ -131,6 +166,9 @@
       case "download":
         showComponent = "browser";
         downloadCurrentFolder();
+      case "mark-read":
+        markFolderAsRead();
+        break;
     }
   }
 
@@ -204,7 +242,7 @@
                 }
               }
             },
-            () => unsubscribeAuthentication(),
+            () => unsubscribeAuthentication()
           );
         } else {
           error = `Unexpected respose from server: ${e.response.status} ${e}`;

diff --git a/src/client-position/playback-sync.ts b/src/client-position/playback-sync.ts
@@ -6,7 +6,7 @@ interface LastPosition {
     timestamp: Date,
 }
 
-interface PendingPosition extends LastPosition{
+interface PendingPosition extends LastPosition {
     filePath: string
 }
 
@@ -60,7 +60,7 @@ export class PlaybackSync {
 
     onOnline() {
         console.debug(`PlaybackSync ${PlaybackSync.id} online `);
-        if (! this.active && this.failedPositions.hasSome()) {
+        if (!this.active && this.failedPositions.hasSome()) {
             this.try_open();
         }
     }
@@ -83,12 +83,12 @@ export class PlaybackSync {
 
     try_open() {
         if (this.pendingOpen != null || this.opening) return;
-        this.pendingOpen = window.setTimeout(()=> {
+        this.pendingOpen = window.setTimeout(() => {
             this.open();
             this.pendingOpen = null;
 
         },
-        Math.min(10_000, this.failures<3?0: (this.failures-2) * 500)) // throttle retries progressively
+            Math.min(10_000, this.failures < 3 ? 0 : (this.failures - 2) * 500)) // throttle retries progressively
     }
 
     open() {
@@ -156,11 +156,15 @@ export class PlaybackSync {
         this.socket = null;;
     }
 
-    enqueuePosition(filePath: string, position:number, timestamp: Date  = null) {
+    clearPendingPosition() {
         if (this.pendingPositionTimeout) {
             window.clearTimeout(this.pendingPositionTimeout);
             this.pendingPositionTimeout = null;
         }
+    }
+
+    enqueuePosition(filePath: string, position: number, timestamp: Date = null) {
+        this.clearPendingPosition();
         if (!this.groupPrefix) return;
         if (!this.active) {
             let pendingPosition = {
@@ -175,9 +179,9 @@ export class PlaybackSync {
         };
         filePath = this.groupPrefix + filePath;
         if (this.filePath && this.lastSend && filePath == this.filePath) {
-            const lastSendTime = (Date.now() - this.lastSend!.timestamp.getTime())/1000;
+            const lastSendTime = (Date.now() - this.lastSend!.timestamp.getTime()) / 1000;
             const lastSendPosition = Math.abs(position - this.lastSend.position);
-            if ( lastSendTime >= this.config.positionReportingPeriod ||
+            if (lastSendTime >= this.config.positionReportingPeriod ||
                 lastSendPosition > this.config.positionReportingPeriod) {
                 this.sendMessage(position);
             } else {
@@ -199,7 +203,7 @@ export class PlaybackSync {
             position = Math.round(position * 10) / 10;
             let msg = position.toString() + "|";
             if (filePath) msg += filePath;
-            if (timestamp) msg += '|' + Math.round(timestamp.getTime()/1000);
+            if (timestamp) msg += '|' + Math.round(timestamp.getTime() / 1000);
             this.socket.send(msg);
             this.lastSend = {
                 position,
@@ -288,10 +292,10 @@ export class PendingItems {
         // sort according to timestamp
         entries.sort((a, b) => a[1].timestamp.getTime() - b[1].timestamp.getTime());
         const evictedCount = entries.length - this.capacity;
-        for(let i = 0; i < evictedCount; i++) {
+        for (let i = 0; i < evictedCount; i++) {
             this.items.delete(entries[i][0]);
         }
-        
+
     }
 
     clear() {
@@ -302,7 +306,7 @@ export class PendingItems {
         // sorted list of items not older than timestamp
         const entries = Array.from(this.items.values());
         entries.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
-        const firstNewer =entries.findIndex(e => e.timestamp.getTime() >= timestamp.getTime());
+        const firstNewer = entries.findIndex(e => e.timestamp.getTime() >= timestamp.getTime());
         if (firstNewer < 0) {
             return [];
         }

diff --git a/src/components/Browser.svelte b/src/components/Browser.svelte
@@ -20,6 +20,7 @@
     colApi,
     collections,
     currentFolder,
+    currentFolderProperties,
     group,
     isAuthenticated,
     playItem,
@@ -63,7 +64,10 @@
   export const navigate = (where: NavigateTarget) => {
     if (!folderIsPlaying()) {
       $selectedCollection = $playList.collection;
-      $currentFolder = { value: $playList.folder, type: FolderType.REGULAR };
+      $currentFolder = {
+        value: $playList.folder,
+        type: FolderType.REGULAR,
+      };
     } else if (where === NavigateTarget.PLAY_ITEM) {
       const elem: HTMLElement = document.querySelector("div.item.active");
       if (elem != null) {
@@ -147,7 +151,7 @@
       });
       const cachedPaths = await cache?.getCachedPaths(
         $selectedCollection,
-        folder,
+        folder
       );
       console.debug("Cached files for this folder", cachedPaths);
 
@@ -182,14 +186,14 @@
         const prevFile = localStorage.getItem(StorageKeys.LAST_FILE);
         if (prevFile) {
           console.debug(
-            `Can try to play ${prevFile} in folder ${$currentFolder} in collection ${$selectedCollection}`,
+            `Can try to play ${prevFile} in folder ${$currentFolder} in collection ${$selectedCollection}`
           );
           const position = files.findIndex((f) => f.path === prevFile);
           if (position >= 0) {
             let time: number | undefined;
             try {
               time = parseFloat(
-                localStorage.getItem(StorageKeys.LAST_POSITION),
+                localStorage.getItem(StorageKeys.LAST_POSITION)
               );
             } catch (e) {
               console.warn("Invalid last position", e);
@@ -291,10 +295,10 @@
         }
         localStorage.setItem(
           StorageKeys.LAST_COLLECTION,
-          $selectedCollection.toString(),
+          $selectedCollection.toString()
         );
       }
-    }),
+    })
   );
 
   function folderIsPlaying(): boolean {
@@ -321,9 +325,15 @@
         // console.debug("History scroll to " + scrollTo);
         container.scrollTo({ top: scrollTo || 0 });
       }
+
+      onFolderLoaded();
     });
   }
 
+  function onFolderLoaded() {
+    $currentFolderProperties.hasFiles = files.length > 0;
+  }
+
   const globalPathPrefix = getLocationPath();
 
   function handleCacheEvent(evt: CacheEvent) {
@@ -461,7 +471,7 @@
             aria-label="Continue on last position in this folder"
             ><ContinuePlay size="2rem" />
             {sharePositionDisplayName} at {formatTime(
-              sharedPosition.position,
+              sharedPosition.position
             )}</button
           >
         </div>

diff --git a/src/components/ConfigEditor.svelte b/src/components/ConfigEditor.svelte
@@ -3,12 +3,14 @@
 
   import { get } from "svelte/store";
 
-  import { config } from "../state/stores";
+  import { config, group } from "../state/stores";
   import type { AppConfig } from "../types/types";
   import { saveConfig } from "../util/browser";
   import ClosableTitle from "./ClosableTitle.svelte";
+  import { setGroup } from "../util/auth";
 
   let currentConfig: AppConfig = get(config);
+  let currentGroup: string = get(group);
   let cache = getContext("cache");
 
   const dispatch = createEventDispatcher();
@@ -17,6 +19,7 @@
     dispatch("finished");
     saveConfig(currentConfig);
     config.set(currentConfig);
+    setGroup(currentGroup);
   };
   const cancel = () => {
     dispatch("finished");
@@ -26,6 +29,20 @@
 <div id="config-editor">
   <ClosableTitle on:close={cancel}>Audioserve Preferences</ClosableTitle>
   <form>
+    <label for="sync-group">Synchronization Group</label>
+    <input
+      id="sync-group"
+      aria-describedby="sync-group-desc"
+      type="text"
+      bind:value={currentGroup}
+    />
+    <p id="sync-group-desc">
+      If used synchronizes current playback position with server and position is
+      then available in other clients (if they set same group). Be aware that
+      group is available to anyone with access to server. If not set, then
+      synchronization is not used.
+    </p>
+
     {#if cache}
       <label for="cache-ahead">Files to Cache Ahead</label>
       <input

diff --git a/src/components/Login.svelte b/src/components/Login.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { apiConfig, group, isAuthenticated } from "../state/stores";
   import { AuthenticationApi } from "../client/apis";
-  import { encodeSecret } from "../util/auth";
+  import { encodeSecret, setGroup } from "../util/auth";
   import { Configuration } from "../client";
   import { StorageKeys } from "../types/enums";
   import { getContext } from "svelte";
@@ -29,12 +29,7 @@
               //accessToken: token // TBD enable access token
             })
         );
-        if (playbackGroup) {
-          localStorage.setItem(StorageKeys.GROUP, playbackGroup);
-          $group = playbackGroup;
-        } else {
-          localStorage.removeItem(StorageKeys.GROUP);
-        }
+        setGroup(playbackGroup);
       } catch (e) {
         console.error("Login error", e);
         loginError = true;

diff --git a/src/components/Menu.svelte b/src/components/Menu.svelte
@@ -1,9 +1,16 @@
 <script lang="ts">
   import { createEventDispatcher, getContext } from "svelte";
   import type { Transcoding } from "../client";
-  import { group, selectedTranscoding, transcodings } from "../state/stores";
+  import {
+    currentFolder,
+    currentFolderProperties,
+    group,
+    selectedTranscoding,
+    transcodings,
+  } from "../state/stores";
   import Menu from "svelte-material-icons/Menu.svelte";
   import {
+    FolderType,
     StorageKeys,
     TranscodingCode,
     transcodingCodeToName,
@@ -136,6 +143,16 @@
                 >
               </li>
             {/if}
+            {#if $group && $currentFolder && $currentFolder.type === FolderType.REGULAR && $currentFolder.value !== "" && $currentFolderProperties.hasFiles}
+              <li>
+                <a
+                  href="#"
+                  data-menu="mark-read"
+                  on:click|preventDefault={menuClick}
+                  >Mark Current Folder Finished</a
+                >
+              </li>
+            {/if}
             <li>
               <a href="#" data-menu="about" on:click|preventDefault={menuClick}
                 >About</a
@@ -182,4 +199,10 @@
   .dropdown a {
     background-color: transparent !important;
   }
+
+  @media only screen and (min-width: 768px) {
+    .dropdown-content {
+      min-width: 320px;
+    }
+  }
 </style>
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,3 +10,5 @@ @@
     .vscode
     public/*.map
     /dist
+    /src-tauri