State management (#1169)

CHANGELOG.md

@@ -10,9 +10,11 @@ All notable changes to this project will be documented in this file. For commit
 
  **Notes**:
  - access management: specific folders/files with access are shown instead permission denied for parent folder
+ - navigation no longer appends last location hash which should fix some unwanted navation behavior #1070
+ - altered the context menu style and behavior.
 
  **BugFixes**:
- - access management: delay showing rule changes in the list fixed.
+ - access management: delay showing rule changes in the list fixed. #1131
  - Color names are not localized #1159
 
 ## v0.8.3-beta

backend/go.sum

@@ -395,6 +395,7 @@ github.com/golangci/go-printf-func-name v0.1.0 h1:dVokQP+NMTO7jwO4bwsRwLWeudOVUP
 github.com/golangci/go-printf-func-name v0.1.0/go.mod h1:wqhWFH5mUdJQhweRnldEywnR5021wTdZSNgwYceV14s=
 github.com/golangci/gofmt v0.0.0-20250106114630-d62b90e6713d h1:viFft9sS/dxoYY0aiOTsLKO2aZQAPT4nlQCsimGcSGE=
 github.com/golangci/gofmt v0.0.0-20250106114630-d62b90e6713d/go.mod h1:ivJ9QDg0XucIkmwhzCDsqcnxxlDStoTl89jDMIoNxKY=
+github.com/golangci/golangci-lint v1.64.8 h1:y5TdeVidMtBGG32zgSC7ZXTFNHrsJkDnpO4ItB3Am+I=
 github.com/golangci/golangci-lint/v2 v2.4.0 h1:qz6O6vr7kVzXJqyvHjHSz5fA3D+PM8v96QU5gxZCNWM=
 github.com/golangci/golangci-lint/v2 v2.4.0/go.mod h1:Oq7vuAf6L1iNL34uHDcsIF6Mnc0amOPdsT3/GlpHD+I=
 github.com/golangci/golines v0.0.0-20250217134842-442fd0091d95 h1:AkK+w9FZBXlU/xUmBtSJN1+tAI4FIvy5WtnUnY8e4p8=

frontend/src/components/ContextMenu.vue

@@ -14,15 +14,20 @@
       :class="{ 'dark-mode': isDarkMode, 'centered': centered }"
       :key="showCreate ? 'create-mode' : 'normal-mode'"
     >
-      <div v-if="selectedCount > 0" class="button selected-count-header">
-        <span>{{ selectedCount }} {{ $t("prompts.selected") }} </span>
+      <div class="context-menu-header">
+        <div
+          class="action button clickable"
+          v-if="!isSearchActive && userPerms.modify && !isShare"
+          @click="toggleShowCreate"
+        >
+          <i v-if="!showCreate" class="material-icons">add</i>
+          <i v-if="showCreate" class="material-icons">arrow_back</i>
+        </div>
+        <div v-if="selectedCount > 0" @mouseleave="hideTooltip" @mouseenter="showTooltip($event, $t('buttons.selectedCount'))" class="button selected-count-header">
+          <span>{{ selectedCount }}</span>
+        </div>
       </div>
-      <action
-        v-if="!showCreate && !isSearchActive && userPerms.modify && !isShare"
-        icon="add"
-        :label="$t('buttons.new')"
-        @action="startShowCreate"
-      />
+      <hr class="divider">
       <action
         v-if="showCreate && !isSearchActive && userPerms.modify"
         icon="create_new_folder"
@@ -306,6 +311,19 @@ export default {
     }
   },
   methods: {
+    hideTooltip() {
+      mutations.hideTooltip();
+    },
+    showTooltip(event, text) {
+      mutations.showTooltip({
+        content: text,
+        x: event.clientX,
+        y: event.clientY,
+      });
+    },
+    toggleShowCreate() {
+      this.showCreate = !this.showCreate;
+    },
     shouldShowParentFolder() {
       return this.isPreview && state.req.path != "/";
     },
@@ -381,6 +399,7 @@ export default {
       }, 300);
     },
     startShowCreate() {
+      console.log("startShowCreate");
       if (getters.isShare()) {
         return;
       }
@@ -538,4 +557,10 @@ export default {
   height: 0 !important;
   opacity: 0;
 }
+
+.context-menu-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 </style>

frontend/src/components/files/ListingItem.vue

@@ -465,19 +465,16 @@ export default {
       ) {
         mutations.resetSelected();
       }
-      // @ts-ignore
       mutations.addSelected(this.index);
       mutations.setLastSelectedIndex(this.index);
     },
     open() {
-      if (this.hash) {
-        const shareHash = this.hash;
-        url.goToItem(this.source, this.path, "", shareHash);
-        return;
-      }
-      // @ts-ignore
-      const previousHash = state.req.items[this.index].name;
-      url.goToItem(this.source, this.path, previousHash);
+      const previousHistoryItem = {
+        name: state.req.items[this.index].name,
+        source: state.req.source,
+        path: state.req.path,
+      };
+      url.goToItem(this.source, this.path, previousHistoryItem);
     },
   },
 };

frontend/src/components/sidebar/General.vue

@@ -3,7 +3,7 @@
     <div class="card-wrapper user-card">
       <div
         v-if="settingsAllowed && user.username !== 'anonymous'"
-        @click="navigateTo('/settings#profile-main')"
+        @click="navigateTo('/settings','#profile-main')"
         class="inner-card"
       >
         <button
@@ -218,17 +218,13 @@ export default {
       }
       mutations.updateCurrentUser({ stickySidebar: !state.user.stickySidebar });
     },
-    navigateTo(path) {
-      const hashIndex = path.indexOf("#");
-      if (hashIndex !== -1) {
-        // Extract the hash
-        const hash = path.substring(hashIndex);
-        // Remove the hash from the path
-        const cleanPath = path.substring(0, hashIndex);
-        this.$router.push({ path: cleanPath, hash: hash }, () => {});
-      } else {
-        this.$router.push({ path: path }, () => {});
-      }
+    navigateTo(path,hash) {
+      mutations.setPreviousHistoryItem({
+        name: state.req.name,
+        source: state.req.source,
+        path: state.req.path,
+      });
+      this.$router.push({ path: path, hash: hash });
       mutations.closeHovers();
     },
     navigateToLogin() {

frontend/src/css/media-player.css

@@ -1,222 +0,0 @@
-@import url("@skjnldsv/vue-plyr/dist/vue-plyr.css");
-
-.plyr {
-    --plyr-color-main: var(--primaryColor);
-    --plyr-video-background: rgba(0, 0, 0, 1);
-    --plyr-focus-visible-color: var(--primaryColor);
-    --plyr-audio-control-color: #ffffff;
-    --plyr-menu-background: rgba(0, 0, 0, 0.7);
-    --plyr-menu-color: #ffffff;
-    --plyr-menu-border-shadow-color: rgba(0, 0, 0, 0.5);
-    --plyr-menu-radius: 12px;
-    --plyr-menu-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-    --plyr-control-radius: 12px;
-    --plyr-control-icon-size: 16px;
-    --plyr-control-spacing: 8px;
-    --plyr-control-padding: 6px;
-    --plyr-tooltip-background: rgba(0, 0, 0, 0.8);
-    --plyr-tooltip-color: #ffffff;
-    --plyr-audio-controls-background: transparent;
-    --plyr-video-controls-background: linear-gradient(transparent,
-            rgba(0, 0, 0, 0.7));
-    border-radius: 12px;
-    overflow: visible;
-}
-
-.plyr.plyr--video {
-    width: 100%;
-    height: 100%;
-}
-
-.plyr.plyr--video .plyr__control[data-plyr="captions"],
-.plyr.plyr--video .plyr__control[data-plyr="pip"] {
-    display: block !important;
-}
-
-.plyr .plyr__controls {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-    padding: 10px;
-}
-
-/* Progress bar with full width */
-.plyr .plyr__progress__container {
-    flex: 100%;
-    margin: 0;
-}
-
-/* Buttons */
-.plyr .plyr__controls__items {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: nowrap;
-}
-
-/* Button styling */
-.plyr .plyr__control {
-    transition: all 0.2s ease;
-    flex-shrink: 0;
-    display: flex;
-    min-width: 2em;
-    justify-content: center;
-    align-items: center;
-}
-
-.plyr .plyr__control:hover {
-    background: var(--primaryColor);
-    transform: scale(1.05);
-}
-
-.plyr video {
-    border-radius: 12px;
-    width: 100%;
-    height: 100%;
-}
-
-/* Style for audio player */
-.plyr.plyr--audio {
-    background: rgba(40, 40, 55, 1);
-    border-radius: 16px;
-    padding: 15px;
-    max-width: 800px;
-    width: 90%;
-    max-height: 300px;
-    margin: auto auto;
-    position: absolute;
-    bottom: 40px;
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-.plyr--full-ui.plyr--video .plyr__control--overlaid {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.plyr__control--overlaid {
-    /* background: #00b2ff; */
-    background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #00b2ff)));
-    border: 0;
-    display: none;
-    position: fixed;
-    transition: .3s;
-    z-index: 2;
-    height: 4em;
-    transform: none;
-    padding: unset;
-    left: unset;
-    right: unset;
-    bottom: unset;
-    width: 4em !important;
-}
-
-/* Mobile */
-@media (max-width: 768px) {
-    .plyr.plyr--audio {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        width: 100%;
-        max-width: 100%;
-        max-height: 70px;
-        border-radius: 5px;
-        padding: 10px 15px;
-        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
-        margin: 0;
-        transform: none;
-    }
-
-    /* Made the buttons more "big" */
-    .plyr--audio .plyr__control {
-        min-width: 44px;
-        min-height: 44px;
-    }
-
-    .plyr--audio .plyr__progress__container {
-        margin: 10px 0;
-    }
-
-    .plyr--audio .plyr__controls {
-        padding: 0;
-        gap: 5px;
-    }
-
-    .plyr--audio .plyr__controls__items {
-        justify-content: center;
-        gap: 15px;
-    }
-
-    .plyr--audio .plyr__control--play {
-        transform: scale(1.2);
-    }
-
-    /* Hide some items on audio player*/
-    .plyr--audio .plyr__control[data-plyr="settings"],
-    .plyr--audio .plyr__control[data-plyr="pip"],
-    .plyr--audio .plyr__volume {
-        display: none;
-    }
-
-    /* Hide some items on video player*/
-    .plyr--video .plyr__control[data-plyr="pip"],
-    .plyr--video .plyr__volume {
-        display: none;
-    }
-
-    /* Time playing */
-    .plyr--audio .plyr__time {
-        font-size: 14px;
-        margin: 0 5px;
-    }
-}
-
-/* Loop toast */
-.loop-toast {
-    position: fixed;
-    bottom: 50px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: rgba(0, 0, 0, 0.8);
-    color: white;
-    padding: 15px 25px;
-    border-radius: 8px;
-    font-size: 1.1rem;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    z-index: 10000;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-
-.loop-toast.visible {
-    opacity: 1;
-}
-
-.loop-icon {
-    width: 24px;
-    height: 24px;
-    fill: white;
-}
-
-.status-indicator {
-    display: inline-block;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    margin-left: 10px;
-}
-
-.status-on {
-    background: #4caf50;
-}
-
-.status-off {
-    background: #f44336;
-}

frontend/src/css/styles.css

@@ -9,7 +9,6 @@
 @import "./dashboard.css";
 @import "./login.css";
 @import "./mobile.css";
-@import "./media-player.css";
 
 .link {
     color: var(--blue);
@@ -351,6 +350,7 @@ body.rtl .card.floating .card-content .file-list {
 }
 
 .clickable:hover,
+.plyr .plyr__control:hover,
 button:hover,
 .action:hover,
 .listing-item.drag-hover {
@@ -404,3 +404,8 @@ button:hover,
 .form-dropdown {
     width: unset !important;
 }
+
+.divider {
+    border-color: var(--divider);
+    width: 90%;
+}

frontend/src/i18n/ar.json

@@ -49,7 +49,8 @@
     "clearCompleted": "اكتمل المسح",
     "showMore": "اعرض المزيد",
     "showLess": "اعرض أقل",
-    "openParentFolder": "فتح المجلد الأصل"
+    "openParentFolder": "فتح المجلد الأصل",
+    "selectedCount": "عدد العناصر المحددة لتنفيذ إجراء ما"
   },
   "download": {
     "downloadFile": "Download File",
@@ -507,8 +508,8 @@
     "customTheme": "اختر المظهر الخاص بك",
     "showSelectMultiple": "إظهار تحديد متعدد في قائمة السياق على سطح المكتب",
     "showSelectMultipleDescription": "بشكل افتراضي، لا تحتوي قائمة سياق سطح المكتب على خيار \"تحديد متعدد\" مثل الهاتف المحمول. يظهر هذا الخيار دائمًا في قائمة السياق.",
-    "defaultMediaPlayer": "استخدم مشغل الوسائط الافتراضي للمتصفح",
-    "defaultMediaPlayerDescription": "استخدم مشغل الوسائط الافتراضي للمتصفح لملفات الفيديو والصوت بدلاً من مشغل وسائط html5."
+    "defaultMediaPlayer": "استخدم مشغل الوسائط الأصلي في متصفحك",
+    "defaultMediaPlayerDescription": "استخدم مشغل الوسائط الأصلي في متصفحك لملفات الفيديو والصوت بدلاً من مشغل الوسائط \"vue-plyr\" المضمن في متصفح FileBrowser."
   },
   "colors": {
     "red": "أحمر",

frontend/src/i18n/cz.json

@@ -49,7 +49,8 @@
     "clearCompleted": "Vymazání dokončeno",
     "showMore": "Zobrazit více",
     "showLess": "Zobrazit méně",
-    "openParentFolder": "Otevření nadřazené složky"
+    "openParentFolder": "Otevření nadřazené složky",
+    "selectedCount": "Počet položek vybraných k provedení akce"
   },
   "download": {
     "downloadFile": "Stáhnout soubor",
@@ -290,8 +291,8 @@
     "customTheme": "Vyberte si téma",
     "showSelectMultiple": "Zobrazení výběru více položek v kontextové nabídce na ploše",
     "showSelectMultipleDescription": "Ve výchozím nastavení nemá kontextová nabídka na ploše možnost \"vybrat více\" jako v mobilním telefonu. Tato možnost se v kontextové nabídce zobrazuje vždy.",
-    "defaultMediaPlayer": "Použití výchozího přehrávače médií v prohlížeči",
-    "defaultMediaPlayerDescription": "Pro video a zvukové soubory používejte výchozí přehrávač médií prohlížeče, nikoli přehrávač médií html5."
+    "defaultMediaPlayer": "Použití nativního přehrávače médií v prohlížeči",
+    "defaultMediaPlayerDescription": "Pro video a zvukové soubory používejte nativní přehrávač médií prohlížeče, nikoli přehrávač médií vue-plyr, který je součástí aplikace FileBrowser."
   },
   "settings": {
     "enterPassword": "Zadejte heslo",

frontend/src/i18n/de.json

@@ -49,7 +49,8 @@
     "clearCompleted": "Abgeschlossene löschen",
     "showMore": "Mehr anzeigen",
     "showLess": "Weniger anzeigen",
-    "openParentFolder": "Übergeordneten Ordner öffnen"
+    "openParentFolder": "Übergeordneten Ordner öffnen",
+    "selectedCount": "Anzahl der zur Durchführung einer Aktion ausgewählten Elemente"
   },
   "download": {
     "downloadFile": "Datei herunterladen",
@@ -515,8 +516,8 @@
     "customTheme": "Wählen Sie Ihr Thema",
     "showSelectMultiple": "Mehrfachauswahl im Kontextmenü auf dem Desktop anzeigen",
     "showSelectMultipleDescription": "Standardmäßig verfügt das Desktop-Kontextmenü nicht über die Option \"Mehrere auswählen\" wie bei mobilen Geräten. Diese Option wird immer im Kontextmenü angezeigt.",
-    "defaultMediaPlayer": "Verwenden Sie den Standard-Medienplayer des Browsers",
-    "defaultMediaPlayerDescription": "Verwenden Sie für Video- und Audiodateien den Standard-Media-Player des Browsers und nicht den html5-Media-Player."
+    "defaultMediaPlayer": "Verwenden Sie den nativen Media Player Ihres Browsers",
+    "defaultMediaPlayerDescription": "Verwenden Sie für Video- und Audiodateien den nativen Mediaplayer Ihres Browsers und nicht den in FileBrowser enthaltenen 'vue-plyr' Mediaplayer."
   },
   "editor": {
     "uninitialized": "Der Editor konnte nicht initialisiert werden. Bitte neu laden.",

frontend/src/i18n/el.json

@@ -49,7 +49,8 @@
     "clearCompleted": "Εκκαθάριση ολοκληρώθηκε",
     "showMore": "Εμφάνιση περισσότερων",
     "showLess": "Εμφάνιση λιγότερων",
-    "openParentFolder": "Άνοιγμα γονικού φακέλου"
+    "openParentFolder": "Άνοιγμα γονικού φακέλου",
+    "selectedCount": "Αριθμός επιλεγμένων στοιχείων για την εκτέλεση μιας ενέργειας"
   },
   "download": {
     "downloadFile": "Λήψη αρχείου",
@@ -515,8 +516,8 @@
     "customTheme": "Επιλέξτε το θέμα σας",
     "showSelectMultiple": "Εμφάνιση πολλαπλών επιλογών στο μενού περιβάλλοντος στην επιφάνεια εργασίας",
     "showSelectMultipleDescription": "Από προεπιλογή, το μενού περιβάλλοντος της επιφάνειας εργασίας δεν διαθέτει την επιλογή \"επιλογή πολλαπλών\" όπως το κινητό. Αυτή η επιλογή εμφανίζεται πάντα στο μενού περιβάλλοντος.",
-    "defaultMediaPlayer": "Χρήση του προεπιλεγμένου προγράμματος αναπαραγωγής πολυμέσων του προγράμματος περιήγησης",
-    "defaultMediaPlayerDescription": "Χρησιμοποιήστε το προεπιλεγμένο πρόγραμμα αναπαραγωγής πολυμέσων του προγράμματος περιήγησης για αρχεία βίντεο και ήχου αντί για το πρόγραμμα αναπαραγωγής πολυμέσων html5."
+    "defaultMediaPlayer": "Χρησιμοποιήστε το εγγενές πρόγραμμα αναπαραγωγής πολυμέσων του προγράμματος περιήγησής σας",
+    "defaultMediaPlayerDescription": "Χρησιμοποιήστε το εγγενές πρόγραμμα αναπαραγωγής πολυμέσων του προγράμματος περιήγησης για αρχεία βίντεο και ήχου αντί για το πρόγραμμα αναπαραγωγής πολυμέσων \"vue-plyr\" που περιλαμβάνεται στο FileBrowser."
   },
   "editor": {
     "uninitialized": "Απέτυχε η αρχικοποίηση του συντάκτη. Παρακαλούμε επαναφορτώστε.",

frontend/src/i18n/en.json

@@ -49,7 +49,8 @@
     "clearCompleted": "Clear completed",
     "showMore": "Show more",
     "showLess": "Show less",
-    "openParentFolder": "Open parent folder"
+    "openParentFolder": "Open parent folder",
+    "selectedCount": "Number of items selected to perform an action"
   },
   "download": {
     "downloadFile": "Download File",
@@ -241,8 +242,8 @@
     "helpText2": "The index: Search utilizes the index which automatically gets updated on the configured interval (default: 5 minutes). Searching when the program has just started may result in incomplete results."
   },
   "profileSettings": {
-    "defaultMediaPlayer": "Use browser's default media player",
-    "defaultMediaPlayerDescription": "Use the browser's default media player for video and audio files rather than the html5 media player.",
+    "defaultMediaPlayer": "Use your browser's native media player",
+    "defaultMediaPlayerDescription": "Use your browser's native media player for video and audio files rather than FileBrowser's included 'vue-plyr' media player.",
     "showSelectMultiple": "Show select multiple in context menu on desktop",
     "showSelectMultipleDescription": "By default, desktop context menu does not have \"select multiple\" option like mobile. This option always shows it in the context menu.",
     "customTheme": "Choose your theme",

frontend/src/i18n/es.json

@@ -49,7 +49,8 @@
     "clearCompleted": "Limpiar lista",
     "showMore": "Ver más",
     "showLess": "Mostrar menos",
-    "openParentFolder": "Abrir carpeta principal"
+    "openParentFolder": "Abrir carpeta principal",
+    "selectedCount": "Número de elementos seleccionados para realizar una acción"
   },
   "download": {
     "downloadFile": "Descargar archivo",
@@ -515,8 +516,8 @@
     "hideSidebarFileActions": "Ocultar el botón de acciones de archivo en la barra lateral",
     "deleteWithoutConfirming": "Eliminar archivos sin mensaje de confirmación",
     "deleteWithoutConfirmingDescription": "Eliminar archivos sin mensaje de confirmación. Esto sólo funcionará si el archivo es un archivo multimedia.",
-    "defaultMediaPlayer": "Utilizar el reproductor multimedia predeterminado del navegador",
-    "defaultMediaPlayerDescription": "Utilice el reproductor multimedia predeterminado del navegador para los archivos de vídeo y audio en lugar del reproductor multimedia html5."
+    "defaultMediaPlayer": "Utiliza el reproductor multimedia nativo de tu navegador",
+    "defaultMediaPlayerDescription": "Utiliza el reproductor multimedia nativo de tu navegador para los archivos de vídeo y audio en lugar del reproductor multimedia 'vue-plyr' incluido en FileBrowser."
   },
   "editor": {
     "uninitialized": "Error al inicializar el editor. Por favor, vuelva a cargar.",

frontend/src/i18n/fr.json

@@ -49,7 +49,8 @@
     "clearCompleted": "Effacement terminé",
     "showMore": "Afficher plus",
     "showLess": "Montrer moins",
-    "openParentFolder": "Ouvrir le dossier parent"
+    "openParentFolder": "Ouvrir le dossier parent",
+    "selectedCount": "Nombre d'éléments sélectionnés pour effectuer une action"
   },
   "download": {
     "downloadFile": "Télécharger le fichier",
@@ -515,8 +516,8 @@
     "customTheme": "Choisissez votre thème",
     "showSelectMultiple": "Afficher la sélection multiple dans le menu contextuel sur le bureau",
     "showSelectMultipleDescription": "Par défaut, le menu contextuel de l'ordinateur de bureau n'a pas l'option \"sélectionner plusieurs\" comme celui de l'ordinateur mobile. Cette option apparaît toujours dans le menu contextuel.",
-    "defaultMediaPlayer": "Utiliser le lecteur multimédia par défaut du navigateur",
-    "defaultMediaPlayerDescription": "Utilisez le lecteur multimédia par défaut du navigateur pour les fichiers vidéo et audio plutôt que le lecteur multimédia html5."
+    "defaultMediaPlayer": "Utilisez le lecteur multimédia natif de votre navigateur",
+    "defaultMediaPlayerDescription": "Utilisez le lecteur multimédia natif de votre navigateur pour les fichiers vidéo et audio plutôt que le lecteur multimédia \"vue-plyr\" inclus dans FileBrowser."
   },
   "editor": {
     "uninitialized": "Échec de l'initialisation de l'éditeur. Veuillez recharger.",

frontend/src/i18n/he.json

@@ -49,7 +49,8 @@
     "clearCompleted": "השלם",
     "showMore": "הצג עוד",
     "showLess": "הצג פחות",
-    "openParentFolder": "פתח את התיקייה הראשית"
+    "openParentFolder": "פתח את התיקייה הראשית",
+    "selectedCount": "מספר הפריטים שנבחרו לביצוע פעולה"
   },
   "download": {
     "downloadFile": "הורד קובץ",
@@ -515,8 +516,8 @@
     "customTheme": "בחר את הנושא שלך",
     "showSelectMultiple": "הצג בחירה מרובה בתפריט ההקשר בשולחן העבודה",
     "showSelectMultipleDescription": "כברירת מחדל, בתפריט ההקשר של שולחן העבודה אין אפשרות \"בחר מספר פריטים\" כמו במכשירים ניידים. אפשרות זו תמיד מוצגת בתפריט ההקשר.",
-    "defaultMediaPlayer": "השתמש בנגן המדיה המוגדר כברירת מחדל בדפדפן",
-    "defaultMediaPlayerDescription": "השתמש בנגן המדיה המוגדר כברירת מחדל בדפדפן עבור קבצי וידאו ואודיו, במקום בנגן המדיה html5."
+    "defaultMediaPlayer": "השתמש בנגן המדיה המובנה בדפדפן שלך",
+    "defaultMediaPlayerDescription": "השתמש בנגן המדיה המובנה בדפדפן שלך עבור קבצי וידאו ואודיו, במקום בנגן המדיה 'vue-plyr' הכלול ב-FileBrowser."
   },
   "editor": {
     "uninitialized": "לא ניתן לאתחל את העורך. אנא טען מחדש.",

frontend/src/i18n/hu.json

@@ -49,7 +49,8 @@
     "clearCompleted": "Tiszta befejezve",
     "showMore": "Többet mutasson",
     "showLess": "Kevesebb mutatása",
-    "openParentFolder": "Szülői mappa megnyitása"
+    "openParentFolder": "Szülői mappa megnyitása",
+    "selectedCount": "A művelet végrehajtásához kiválasztott elemek száma"
   },
   "download": {
     "downloadFile": "Fájl letöltése",
@@ -515,8 +516,8 @@
     "customTheme": "Válasszon témát",
     "showSelectMultiple": "Többszörös kijelölés megjelenítése az asztali kontextusmenüben",
     "showSelectMultipleDescription": "Alapértelmezés szerint az asztali kontextusmenü nem rendelkezik a \"többszörös kiválasztás\" opcióval, mint a mobilon. Ez az opció mindig megjelenik a kontextusmenüben.",
-    "defaultMediaPlayer": "A böngésző alapértelmezett médialejátszójának használata",
-    "defaultMediaPlayerDescription": "Használja a böngésző alapértelmezett médialejátszóját a videó- és hangfájlokhoz a html5 médialejátszó helyett."
+    "defaultMediaPlayer": "Használja a böngésző natív médialejátszóját",
+    "defaultMediaPlayerDescription": "Használja a böngésző natív médialejátszóját a videó- és hangfájlokhoz, nem pedig a FileBrowser mellékelt \"vue-plyr\" médialejátszóját."
   },
   "editor": {
     "uninitialized": "Nem sikerült inicializálni a szerkesztőt. Kérjük, töltse újra.",

frontend/src/i18n/it.json

@@ -49,7 +49,8 @@
     "clearCompleted": "Completato il lavoro di pulizia",
     "showMore": "Mostra di più",
     "showLess": "Mostra meno",
-    "openParentFolder": "Aprire la cartella madre"
+    "openParentFolder": "Aprire la cartella madre",
+    "selectedCount": "Numero di elementi selezionati per eseguire un'azione"
   },
   "download": {
     "downloadFile": "Scarica file",
@@ -515,8 +516,8 @@
     "customTheme": "Scegliete il vostro tema",
     "showSelectMultiple": "Mostra selezione multipla nel menu contestuale sul desktop",
     "showSelectMultipleDescription": "Per impostazione predefinita, il menu contestuale del desktop non dispone dell'opzione \"seleziona più\" come quello del cellulare. Questa opzione viene sempre visualizzata nel menu contestuale.",
-    "defaultMediaPlayer": "Utilizzare il lettore multimediale predefinito del browser",
-    "defaultMediaPlayerDescription": "Utilizzate il lettore multimediale predefinito del browser per i file video e audio piuttosto che il lettore multimediale html5."
+    "defaultMediaPlayer": "Utilizzare il lettore multimediale nativo del browser",
+    "defaultMediaPlayerDescription": "Utilizzate il lettore multimediale nativo del vostro browser per i file video e audio piuttosto che il lettore multimediale \"vue-plyr\" incluso in FileBrowser."
   },
   "editor": {
     "uninitialized": "Impossibile inizializzare l'editor. Ricaricare.",

frontend/src/i18n/ja.json

@@ -49,7 +49,8 @@
     "clearCompleted": "クリア完了",
     "showMore": "もっと見る",
     "showLess": "もっと見る",
-    "openParentFolder": "親フォルダを開く"
+    "openParentFolder": "親フォルダを開く",
+    "selectedCount": "アクションを実行するために選択された項目の数"
   },
   "download": {
     "downloadFile": "Download File",
@@ -515,8 +516,8 @@
     "customTheme": "テーマを選ぶ",
     "showSelectMultiple": "デスクトップのコンテキストメニューに複数選択を表示する",
     "showSelectMultipleDescription": "デフォルトでは、デスクトップのコンテキストメニューには、モバイルのような「複数選択」オプションはありません。このオプションは常にコンテキストメニューに表示されます。",
-    "defaultMediaPlayer": "ブラウザーのデフォルトのメディアプレーヤーを使用する",
-    "defaultMediaPlayerDescription": "動画や音声ファイルには、html5メディアプレーヤーではなく、ブラウザーのデフォルトのメディアプレーヤーを使用してください。"
+    "defaultMediaPlayer": "ブラウザのネイティブ・メディア・プレーヤーを使う",
+    "defaultMediaPlayerDescription": "ビデオやオーディオファイルには、FileBrowserに含まれる「vue-plyr」メディアプレーヤーではなく、ブラウザのネイティブメディアプレーヤーを使用してください。"
   },
   "editor": {
     "uninitialized": "エディタの初期化に失敗しました。再読み込みしてください。",

frontend/src/i18n/ko.json

@@ -49,7 +49,8 @@
     "clearCompleted": "완료 지우기",
     "showMore": "자세히 보기",
     "showLess": "덜 보기",
-    "openParentFolder": "상위 폴더 열기"
+    "openParentFolder": "상위 폴더 열기",
+    "selectedCount": "작업을 수행하기 위해 선택한 항목 수"
   },
   "download": {
     "downloadFile": "파일 다운로드",
@@ -516,7 +517,7 @@
     "showSelectMultiple": "데스크톱의 컨텍스트 메뉴에서 여러 개 선택 표시",
     "showSelectMultipleDescription": "기본적으로 데스크톱 컨텍스트 메뉴에는 모바일처럼 '여러 개 선택' 옵션이 없습니다. 이 옵션은 항상 컨텍스트 메뉴에 표시됩니다.",
     "defaultMediaPlayer": "브라우저의 기본 미디어 플레이어 사용",
-    "defaultMediaPlayerDescription": "비디오 및 오디오 파일에는 HTML5 미디어 플레이어 대신 브라우저의 기본 미디어 플레이어를 사용하세요."
+    "defaultMediaPlayerDescription": "비디오 및 오디오 파일은 FileBrowser에 포함된 'vue-plyr' 미디어 플레이어가 아닌 브라우저의 기본 미디어 플레이어를 사용하세요."
   },
   "editor": {
     "uninitialized": "편집기를 초기화하지 못했습니다. 다시 로드하세요.",

frontend/src/i18n/nl-be.json

@@ -49,7 +49,8 @@
     "clearCompleted": "Gereed",
     "showMore": "Meer tonen",
     "showLess": "Minder tonen",
-    "openParentFolder": "Bovenliggende map openen"
+    "openParentFolder": "Bovenliggende map openen",
+    "selectedCount": "Aantal items geselecteerd om een actie uit te voeren"
   },
   "download": {
     "downloadFile": "Bestand downloaden",
@@ -479,8 +480,8 @@
     "customTheme": "Kies je thema",
     "showSelectMultiple": "Meerdere selecteren tonen in contextmenu op bureaublad",
     "showSelectMultipleDescription": "Standaard heeft het contextmenu op de desktop geen optie \"meerdere selecteren\" zoals mobiel. Deze optie wordt altijd weergegeven in het contextmenu.",
-    "defaultMediaPlayer": "Gebruik de standaard mediaspeler van de browser",
-    "defaultMediaPlayerDescription": "Gebruik de standaard mediaspeler van de browser voor video- en audiobestanden in plaats van de html5 mediaspeler."
+    "defaultMediaPlayer": "Gebruik de ingebouwde mediaspeler van uw browser",
+    "defaultMediaPlayerDescription": "Gebruik de eigen mediaspeler van uw browser voor video- en audiobestanden in plaats van de meegeleverde 'vue-plyr' mediaspeler van FileBrowser."
   },
   "general": {
     "name": "Naam",

frontend/src/i18n/pl.json

@@ -49,7 +49,8 @@
     "clearCompleted": "Czyszczenie zakończone",
     "showMore": "Pokaż więcej",
     "showLess": "Pokaż mniej",
-    "openParentFolder": "Otwórz folder nadrzędny"
+    "openParentFolder": "Otwórz folder nadrzędny",
+    "selectedCount": "Liczba elementów wybranych do wykonania akcji"
   },
   "download": {
     "downloadFile": "Pobierz plik",
@@ -515,8 +516,8 @@
     "customTheme": "Wybierz motyw",
     "showSelectMultiple": "Wyświetlanie wyboru wielokrotnego w menu kontekstowym na pulpicie",
     "showSelectMultipleDescription": "Domyślnie menu kontekstowe pulpitu nie ma opcji \"wybierz wiele\", tak jak w przypadku urządzeń mobilnych. Opcja ta jest zawsze widoczna w menu kontekstowym.",
-    "defaultMediaPlayer": "Użyj domyślnego odtwarzacza multimediów przeglądarki",
-    "defaultMediaPlayerDescription": "Do odtwarzania plików wideo i audio należy używać domyślnego odtwarzacza multimediów przeglądarki, a nie odtwarzacza multimediów html5."
+    "defaultMediaPlayer": "Użyj natywnego odtwarzacza multimediów w przeglądarce",
+    "defaultMediaPlayerDescription": "Do odtwarzania plików wideo i audio należy używać natywnego odtwarzacza multimediów przeglądarki, a nie dołączonego do FileBrowser odtwarzacza multimediów \"vue-plyr\"."
   },
   "editor": {
     "uninitialized": "Nie udało się zainicjować edytora. Przeładuj ponownie.",

frontend/src/i18n/pt-br.json

@@ -49,7 +49,8 @@
     "clearCompleted": "Limpar concluído",
     "showMore": "Mostrar mais",
     "showLess": "Mostrar menos",
-    "openParentFolder": "Abrir a pasta principal"
+    "openParentFolder": "Abrir a pasta principal",
+    "selectedCount": "Número de itens selecionados para executar uma ação"
   },
   "download": {
     "downloadFile": "Baixar arquivo",
@@ -515,8 +516,8 @@
     "customTheme": "Escolha seu tema",
     "showSelectMultiple": "Mostrar seleção múltipla no menu de contexto na área de trabalho",
     "showSelectMultipleDescription": "Por padrão, o menu de contexto do desktop não tem a opção \"selecionar vários\" como no celular. Essa opção sempre a mostra no menu de contexto.",
-    "defaultMediaPlayer": "Use o reprodutor de mídia padrão do navegador",
-    "defaultMediaPlayerDescription": "Use o reprodutor de mídia padrão do navegador para arquivos de vídeo e áudio em vez do reprodutor de mídia html5."
+    "defaultMediaPlayer": "Use o reprodutor de mídia nativo do seu navegador",
+    "defaultMediaPlayerDescription": "Use o reprodutor de mídia nativo do seu navegador para arquivos de vídeo e áudio em vez do reprodutor de mídia 'vue-plyr' incluído no FileBrowser."
   },
   "editor": {
     "uninitialized": "Falha ao inicializar o editor. Favor recarregar.",

frontend/src/i18n/pt.json

@@ -49,7 +49,8 @@
     "clearCompleted": "Limpar concluído",
     "showMore": "Mostrar mais",
     "showLess": "Mostrar menos",
-    "openParentFolder": "Abrir a pasta principal"
+    "openParentFolder": "Abrir a pasta principal",
+    "selectedCount": "Número de itens selecionados para executar uma ação"
   },
   "download": {
     "downloadFile": "Descarregar ficheiro",
@@ -479,8 +480,8 @@
     "customTheme": "Escolha o seu tema",
     "showSelectMultiple": "Mostrar seleção múltipla no menu de contexto no ambiente de trabalho",
     "showSelectMultipleDescription": "Por predefinição, o menu de contexto do ambiente de trabalho não tem a opção \"selecionar vários\" como no telemóvel. Esta opção mostra-a sempre no menu de contexto.",
-    "defaultMediaPlayer": "Utilizar o leitor multimédia predefinido do navegador",
-    "defaultMediaPlayerDescription": "Utilize o leitor multimédia predefinido do navegador para ficheiros de vídeo e áudio em vez do leitor multimédia html5."
+    "defaultMediaPlayer": "Utilize o leitor multimédia nativo do seu navegador",
+    "defaultMediaPlayerDescription": "Utilize o leitor multimédia nativo do seu navegador para ficheiros de vídeo e áudio em vez do leitor multimédia 'vue-plyr' incluído no FileBrowser."
   },
   "general": {
     "name": "Nome",

frontend/src/i18n/ro.json

@@ -49,7 +49,8 @@
     "clearCompleted": "Golire finalizată",
     "showMore": "Arată mai multe",
     "showLess": "Arată mai puțin",
-    "openParentFolder": "Deschideți folderul părinte"
+    "openParentFolder": "Deschideți folderul părinte",
+    "selectedCount": "Numărul de elemente selectate pentru a efectua o acțiune"
   },
   "download": {
     "downloadFile": "Descarcă fișier",
@@ -515,8 +516,8 @@
     "customTheme": "Alege-ți tema",
     "showSelectMultiple": "Afișarea selecției multiple în meniul contextual de pe desktop",
     "showSelectMultipleDescription": "În mod implicit, meniul contextual de pe desktop nu are opțiunea \"select multiple\", ca pe mobil. Această opțiune se afișează întotdeauna în meniul contextual.",
-    "defaultMediaPlayer": "Utilizați playerul media implicit al browserului",
-    "defaultMediaPlayerDescription": "Utilizați playerul media implicit al browserului pentru fișierele video și audio, mai degrabă decât playerul media html5."
+    "defaultMediaPlayer": "Utilizați playerul media nativ al browserului dvs.",
+    "defaultMediaPlayerDescription": "Utilizați playerul media nativ al browserului dvs. pentru fișierele video și audio mai degrabă decât playerul media \"vue-plyr\" inclus în FileBrowser."
   },
   "editor": {
     "uninitialized": "Nu s-a reușit inițializarea editorului. Vă rugăm să reîncărcați.",

frontend/src/i18n/ru.json

@@ -49,7 +49,8 @@
     "clearCompleted": "Очистка завершена",
     "showMore": "Показать еще",
     "showLess": "Показать меньше",
-    "openParentFolder": "Откройте родительскую папку"
+    "openParentFolder": "Откройте родительскую папку",
+    "selectedCount": "Количество элементов, выбранных для выполнения действия"
   },
   "download": {
     "downloadFile": "Скачать файл",
@@ -515,8 +516,8 @@
     "customTheme": "Выберите тему",
     "showSelectMultiple": "Отображение выбора нескольких в контекстном меню на рабочем столе",
     "showSelectMultipleDescription": "По умолчанию в контекстном меню рабочего стола нет опции \"выбрать несколько\", как в мобильном. Эта опция всегда отображается в контекстном меню.",
-    "defaultMediaPlayer": "Используйте медиаплеер браузера по умолчанию",
-    "defaultMediaPlayerDescription": "Для воспроизведения видео- и аудиофайлов используйте медиаплеер браузера по умолчанию, а не медиаплеер html5."
+    "defaultMediaPlayer": "Используйте встроенный медиаплеер вашего браузера",
+    "defaultMediaPlayerDescription": "Для воспроизведения видео- и аудиофайлов используйте штатный медиаплеер браузера, а не медиаплеер 'vue-plyr', входящий в комплект поставки FileBrowser."
   },
   "editor": {
     "uninitialized": "Не удалось инициализировать редактор. Пожалуйста, перезагрузитесь.",

frontend/src/i18n/sk.json

@@ -49,7 +49,8 @@
     "clearCompleted": "Vyčistiť dokončené",
     "showMore": "Zobraziť viac",
     "showLess": "Zobraziť menej",
-    "openParentFolder": "Otvorenie nadradeného priečinka"
+    "openParentFolder": "Otvorenie nadradeného priečinka",
+    "selectedCount": "Počet položiek vybraných na vykonanie akcie"
   },
   "download": {
     "downloadFile": "Stiahnuť súbor",
@@ -515,8 +516,8 @@
     "customTheme": "Vyberte si tému",
     "showSelectMultiple": "Zobrazenie výberu viacerých v kontextovom menu na ploche",
     "showSelectMultipleDescription": "V predvolenom nastavení kontextová ponuka na ploche nemá možnosť \"vybrať viacero\" ako v mobilných zariadeniach. Táto možnosť sa v kontextovej ponuke zobrazuje vždy.",
-    "defaultMediaPlayer": "Použitie predvoleného prehrávača médií v prehliadači",
-    "defaultMediaPlayerDescription": "Pre video a audio súbory použite predvolený prehrávač médií prehliadača a nie prehrávač médií html5."
+    "defaultMediaPlayer": "Používanie natívneho prehrávača médií prehliadača",
+    "defaultMediaPlayerDescription": "Na prehrávanie video a zvukových súborov použite natívny prehrávač médií prehliadača, a nie mediálny prehrávač vue-plyr, ktorý je súčasťou aplikácie FileBrowser."
   },
   "editor": {
     "uninitialized": "Nepodarilo sa inicializovať editor. Prosím, načítajte ho znova.",

frontend/src/i18n/sv-se.json

@@ -49,7 +49,8 @@
     "clearCompleted": "Klart avslutat",
     "showMore": "Visa mer",
     "showLess": "Visa mindre",
-    "openParentFolder": "Öppna överordnad mapp"
+    "openParentFolder": "Öppna överordnad mapp",
+    "selectedCount": "Antal objekt som valts för att utföra en åtgärd"
   },
   "download": {
     "downloadFile": "Ladda ner fil",
@@ -479,8 +480,8 @@
     "customTheme": "Välj ditt tema",
     "showSelectMultiple": "Visa markera flera i snabbmenyn på skrivbordet",
     "showSelectMultipleDescription": "Som standard har snabbmenyn på skrivbordet inte alternativet \"välj flera\" som på mobilen. Det här alternativet visas alltid i snabbmenyn.",
-    "defaultMediaPlayer": "Använd webbläsarens standardmediaspelare",
-    "defaultMediaPlayerDescription": "Använd webbläsarens standardmediaspelare för video- och ljudfiler i stället för html5-mediaspelaren."
+    "defaultMediaPlayer": "Använd den inbyggda mediaspelaren i din webbläsare",
+    "defaultMediaPlayerDescription": "Använd webbläsarens inbyggda mediaspelare för video- och ljudfiler i stället för FileBrowsers medföljande \"vue-plyr\"-mediaspelare."
   },
   "general": {
     "name": "Namn",

frontend/src/i18n/tr.json

@@ -49,7 +49,8 @@
     "clearCompleted": "Temizleme tamamlandı",
     "showMore": "Daha fazla göster",
     "showLess": "Daha az göster",
-    "openParentFolder": "Üst klasörü açın"
+    "openParentFolder": "Üst klasörü açın",
+    "selectedCount": "Bir eylemi gerçekleştirmek için seçilen öğe sayısı"
   },
   "download": {
     "downloadFile": "Dosyayı indir",
@@ -515,8 +516,8 @@
     "customTheme": "Temanızı seçin",
     "showSelectMultiple": "Masaüstündeki bağlam menüsünde çoklu seçmeyi göster",
     "showSelectMultipleDescription": "Varsayılan olarak, masaüstü içerik menüsünde mobil cihazlardaki gibi \"çoklu seç\" seçeneği yoktur. Bu seçenek her zaman içerik menüsünde gösterilir.",
-    "defaultMediaPlayer": "Tarayıcının varsayılan medya oynatıcısını kullanma",
-    "defaultMediaPlayerDescription": "Video ve ses dosyaları için html5 medya oynatıcı yerine tarayıcının varsayılan medya oynatıcısını kullanın."
+    "defaultMediaPlayer": "Tarayıcınızın yerel medya oynatıcısını kullanın",
+    "defaultMediaPlayerDescription": "Video ve ses dosyaları için FileBrowser'ın dahil ettiği 'vue-plyr' medya oynatıcısı yerine tarayıcınızın yerel medya oynatıcısını kullanın."
   },
   "editor": {
     "uninitialized": "Düzenleyici başlatılamadı. Lütfen yeniden yükleyin.",

frontend/src/i18n/ua.json

@@ -49,7 +49,8 @@
     "clearCompleted": "Очищення завершено",
     "showMore": "Показати більше",
     "showLess": "Показати менше",
-    "openParentFolder": "Відкрийте батьківську папку"
+    "openParentFolder": "Відкрийте батьківську папку",
+    "selectedCount": "Кількість елементів, вибраних для виконання дії"
   },
   "download": {
     "downloadFile": "Завантажити файл",
@@ -479,8 +480,8 @@
     "customTheme": "Виберіть свою тему",
     "showSelectMultiple": "Показувати вибране кілька в контекстному меню на робочому столі",
     "showSelectMultipleDescription": "За замовчуванням, контекстне меню десктопа не має опції \"вибрати декілька\", як у мобільному. Ця опція завжди відображається у контекстному меню.",
-    "defaultMediaPlayer": "Використовуйте медіаплеєр за замовчуванням у браузері",
-    "defaultMediaPlayerDescription": "Використовуйте медіаплеєр браузера за замовчуванням для відео- та аудіофайлів, а не медіаплеєр html5."
+    "defaultMediaPlayer": "Використовуйте вбудований медіаплеєр вашого браузера",
+    "defaultMediaPlayerDescription": "Використовуйте власний медіаплеєр вашого браузера для відео- та аудіофайлів, а не медіаплеєр \"vue-plyr\", що входить до складу FileBrowser."
   },
   "general": {
     "name": "Ім'я",

frontend/src/i18n/zh-cn.json

@@ -49,7 +49,8 @@
     "clearCompleted": "清除完毕",
     "showMore": "显示更多",
     "showLess": "显示更少",
-    "openParentFolder": "打开父文件夹"
+    "openParentFolder": "打开父文件夹",
+    "selectedCount": "选择执行操作的项目数"
   },
   "download": {
     "downloadFile": "下载文件",
@@ -479,8 +480,8 @@
     "customTheme": "选择主题",
     "showSelectMultiple": "在桌面右键菜单中显示多个选择",
     "showSelectMultipleDescription": "默认情况下，桌面右键菜单不像手机那样有 \"选择多个 \"选项。该选项始终显示在右键菜单中。",
-    "defaultMediaPlayer": "使用浏览器的默认媒体播放器",
-    "defaultMediaPlayerDescription": "使用浏览器的默认媒体播放器播放视频和音频文件，而不是 html5 媒体播放器。"
+    "defaultMediaPlayer": "使用浏览器的本地媒体播放器",
+    "defaultMediaPlayerDescription": "使用浏览器的本地媒体播放器播放视频和音频文件，而不是 FileBrowser 附带的 \"vue-plyr \"媒体播放器。"
   },
   "general": {
     "name": "名称",

frontend/src/i18n/zh-tw.json

@@ -49,7 +49,8 @@
     "clearCompleted": "清除完成",
     "showMore": "顯示更多",
     "showLess": "顯示更少",
-    "openParentFolder": "開啟父資料夾"
+    "openParentFolder": "開啟父資料夾",
+    "selectedCount": "選取執行動作的項目數量"
   },
   "download": {
     "downloadFile": "下載檔案",
@@ -453,8 +454,8 @@
     "customTheme": "選擇您的主題",
     "showSelectMultiple": "在桌面的上下文功能表中顯示多重選擇",
     "showSelectMultipleDescription": "預設情況下，桌上型電腦的上下文功能表不像行動裝置一樣有「選取多個」選項。此選項總是在上下文功能表中顯示。",
-    "defaultMediaPlayer": "使用瀏覽器的預設媒體播放器",
-    "defaultMediaPlayerDescription": "使用瀏覽器的預設媒體播放器來播放視訊和音訊檔案，而不是使用 html5 媒體播放器。"
+    "defaultMediaPlayer": "使用瀏覽器的本機媒體播放器",
+    "defaultMediaPlayerDescription": "使用瀏覽器的本機媒體播放器來播放視訊和音訊檔案，而非 FileBrowser 隨附的「vue-plyr」媒體播放器。"
   },
   "otp": {
     "name": "雙因素驗證",

frontend/src/store/mutations.js

@@ -7,6 +7,13 @@ import { sortedItems } from "@/utils/sort.js";
 import { serverHasMultipleSources } from "@/utils/constants.js";
 
 export const mutations = {
+  setPreviousHistoryItem: (value) => {
+    if (value == state.previousHistoryItem) {
+      return;
+    }
+    state.previousHistoryItem = value;
+    emitStateChanged();
+  },
   setContextMenuHasItems: (value) => {
     if (value == state.contextMenuHasItems) {
       return;

frontend/src/store/state.js

@@ -8,9 +8,13 @@ export const state = reactive({
     x: 0,
     y: 0,
   },
+  previousHistoryItem: {
+    name: "",
+    source: "",
+    path: "",
+  },
   contextMenuHasItems: false,
   deletedItem: false,
-  previousHash: "",
   showOverflowMenu: false,
   sessionId: "",
   isSafari: /^((?!chrome|android).)*safari/i.test(navigator.userAgent),

frontend/src/utils/url.js

@@ -157,11 +157,9 @@ export function encodedPath(path) {
 }
 
 // assume non-encoded input path and source
-export function goToItem(source, path, previousHash) {
+export function goToItem(source, path, previousHistoryItem) {
   mutations.resetAll()
-  if (previousHash) {
-    location.hash = previousHash;
-  }
+  mutations.setPreviousHistoryItem(previousHistoryItem);
   let newPath = encodedPath(path);
   let fullPath;
   if (shareInfo.isShare) {

frontend/src/views/Files.vue

@@ -132,9 +132,15 @@ export default {
   },
   methods: {
     scrollToHash() {
-      if (window.location.hash === this.lastHash) return;
+      let scrollToId = "";
+      // scroll to previous item either from location hash or from previousItemHashId state
+      // prefers location hash
+      const noHashChange = window.location.hash === this.lastHash
+      console.log("noHashChange", noHashChange, state.previousItemHashId);
+      if (noHashChange && state.previousItemHashId === "") return;
       this.lastHash = window.location.hash;
       if (window.location.hash) {
+        console.log("scroll to hash based on location hash", window.location.hash);
         const rawHash = window.location.hash.slice(1);
         let decodedName = rawHash;
         try {
@@ -143,8 +149,14 @@ export default {
           // If the hash contains malformed escape sequences, fall back to raw
           decodedName = rawHash;
         }
-        const id = url.base64Encode(encodeURIComponent(decodedName));
-        const element = document.getElementById(id);
+        scrollToId = url.base64Encode(encodeURIComponent(decodedName));
+
+      } else if (state.previousItemHashId) {
+        console.log("scroll to hash based on previousItemHashId", state.previousItemHashId);
+        scrollToId = url.base64Encode(encodeURIComponent(state.previousItemHashId));
+      }
+      console.log("scrollToId", scrollToId);
+      const element = document.getElementById(scrollToId);
         if (element) {
           element.scrollIntoView({
             behavior: "instant",
@@ -157,7 +169,6 @@ export default {
             element.classList.remove('scroll-glow');
           }, 1000);
         }
-      }
     },
     async fetchData() {
       if (state.deletedItem || getters.isInvalidShare()) {

frontend/src/views/bars/Default.vue

@@ -45,6 +45,7 @@ import { getters, state, mutations } from "@/store";
 import Action from "@/components/Action.vue";
 import Search from "@/components/Search.vue";
 import { disableNavButtons, shareInfo } from "@/utils/constants";
+import { url } from "@/utils";
 
 export default {
   name: "UnifiedHeader",
@@ -169,10 +170,15 @@ export default {
       } else {
         mutations.closeHovers();
         if (listingView === "settings") {
+          if (state.previousHistoryItem.name) {
+            url.goToItem(state.previousHistoryItem.source, state.previousHistoryItem.path, {});
+            return;
+          }
           router.push({ path: "/files" });
           return;
         }
         mutations.replaceRequest({});
+
         router.go(-1);
       }
     },

frontend/src/views/files/Preview.vue

@@ -675,7 +675,20 @@ export default {
 };
 </script>
 
-<style scoped>
+<style>
+@import url("@skjnldsv/vue-plyr/dist/vue-plyr.css");
+.clickable:hover,
+.plyr .plyr__control:hover,
+button:hover,
+.action:hover,
+.listing-item.drag-hover {
+    box-shadow:
+        inset 0 -3em 3em rgba(217, 217, 217, 0.211),
+        0 0 0 2px var(--alt-background) !important;
+    /* Adjust shadow values as needed */
+    transform: scale(1.02);
+    /* Slightly enlarges the element */
+}
 .pdf-wrapper {
     position: relative;
     width: 100%;
@@ -696,4 +709,220 @@ export default {
 .pdf-wrapper .floating-btn:hover {
     background: rgba(0, 0, 0, 0.7);
 }
+
+.plyr {
+    --plyr-color-main: var(--primaryColor);
+    --plyr-video-background: rgba(0, 0, 0, 1);
+    --plyr-focus-visible-color: var(--primaryColor);
+    --plyr-audio-control-color: #ffffff;
+    --plyr-menu-background: rgba(0, 0, 0, 0.7);
+    --plyr-menu-color: #ffffff;
+    --plyr-menu-border-shadow-color: rgba(0, 0, 0, 0.5);
+    --plyr-menu-radius: 12px;
+    --plyr-menu-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+    --plyr-control-radius: 12px;
+    --plyr-control-icon-size: 16px;
+    --plyr-control-spacing: 8px;
+    --plyr-control-padding: 6px;
+    --plyr-tooltip-background: rgba(0, 0, 0, 0.8);
+    --plyr-tooltip-color: #ffffff;
+    --plyr-audio-controls-background: transparent;
+    --plyr-video-controls-background: linear-gradient(transparent,
+            rgba(0, 0, 0, 0.7));
+    border-radius: 12px;
+    overflow: visible;
+}
+
+.plyr.plyr--video {
+    width: 100%;
+    height: 100%;
+}
+
+.plyr.plyr--video .plyr__control[data-plyr="captions"],
+.plyr.plyr--video .plyr__control[data-plyr="pip"] {
+    display: block !important;
+}
+
+.plyr .plyr__controls {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+}
+
+/* Progress bar with full width */
+.plyr .plyr__progress__container {
+    flex: 100%;
+    margin: 0;
+}
+
+/* Buttons */
+.plyr .plyr__controls__items {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+}
+
+/* Button styling */
+.plyr .plyr__control {
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+    display: flex;
+    min-width: 2em;
+    justify-content: center;
+    align-items: center;
+}
+
+.plyr video {
+    border-radius: 12px;
+    width: 100%;
+    height: 100%;
+}
+
+/* Style for audio player */
+.plyr.plyr--audio {
+    background: rgba(40, 40, 55, 1);
+    border-radius: 16px;
+    padding: 15px;
+    max-width: 800px;
+    width: 90%;
+    max-height: 300px;
+    margin: auto auto;
+    position: absolute;
+    bottom: 40px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.plyr--full-ui.plyr--video .plyr__control--overlaid {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.plyr__control--overlaid {
+    /* background: #00b2ff; */
+    background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #00b2ff)));
+    border: 0;
+    display: none;
+    position: fixed;
+    transition: .3s;
+    z-index: 2;
+    height: 4em;
+    transform: none;
+    padding: unset;
+    left: unset;
+    right: unset;
+    bottom: unset;
+    width: 4em !important;
+    border-radius: 5em !important
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+    .plyr.plyr--audio {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        max-width: 100%;
+        max-height: 70px;
+        border-radius: 5px;
+        padding: 10px 15px;
+        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
+        margin: 0;
+        transform: none;
+    }
+
+    /* Made the buttons more "big" */
+    .plyr--audio .plyr__control {
+        min-width: 44px;
+        min-height: 44px;
+    }
+
+    .plyr--audio .plyr__progress__container {
+        margin: 10px 0;
+    }
+
+    .plyr--audio .plyr__controls {
+        padding: 0;
+        gap: 5px;
+    }
+
+    .plyr--audio .plyr__controls__items {
+        justify-content: center;
+        gap: 15px;
+    }
+
+    .plyr--audio .plyr__control--play {
+        transform: scale(1.2);
+    }
+
+    /* Hide some items on audio player*/
+    .plyr--audio .plyr__control[data-plyr="settings"],
+    .plyr--audio .plyr__control[data-plyr="pip"],
+    .plyr--audio .plyr__volume {
+        display: none;
+    }
+
+    /* Hide some items on video player*/
+    .plyr--video .plyr__control[data-plyr="pip"],
+    .plyr--video .plyr__volume {
+        display: none;
+    }
+
+    /* Time playing */
+    .plyr--audio .plyr__time {
+        font-size: 14px;
+        margin: 0 5px;
+    }
+}
+
+/* Loop toast */
+.loop-toast {
+    position: fixed;
+    bottom: 50px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 15px 25px;
+    border-radius: 8px;
+    font-size: 1.1rem;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    z-index: 10000;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.loop-toast.visible {
+    opacity: 1;
+}
+
+.loop-icon {
+    width: 24px;
+    height: 24px;
+    fill: white;
+}
+
+.status-indicator {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    margin-left: 10px;
+}
+
+.status-on {
+    background: #4caf50;
+}
+
+.status-off {
+    background: #f44336;
+}
 </style>

frontend/tests/playwright/general/file-actions.spec.ts

@@ -7,7 +7,7 @@ test("info from listing", async({ page, checkForErrors, context }) => {
   await page.locator('a[aria-label="file.tar.gz"]').waitFor({ state: 'visible' });
   await page.locator('a[aria-label="file.tar.gz"]').click( { button: "right" });
   await page.locator('.selected-count-header').waitFor({ state: 'visible' });
-  await expect(page.locator('.selected-count-header')).toHaveText('1 selected');
+  await expect(page.locator('.selected-count-header')).toHaveText('1');
   await page.locator('button[aria-label="Info"]').click();
   await expect(page.locator('.break-word')).toHaveText('Display Name: file.tar.gz');
   checkForErrors();
@@ -21,7 +21,7 @@ test("info from search", async({ page, checkForErrors, context }) => {
   await expect(page.locator('#result-list')).toHaveCount(1);
   await page.locator('li[aria-label="file.tar.gz"]').click({ button: "right" });
   await page.locator('.selected-count-header').waitFor({ state: 'visible' });
-  await expect(page.locator('.selected-count-header')).toHaveText('1 selected');
+  await expect(page.locator('.selected-count-header')).toHaveText('1');
   await page.locator('button[aria-label="Info"]').click();
   await expect(page.locator('.break-word')).toHaveText('Display Name: file.tar.gz');
   checkForErrors();
@@ -69,7 +69,7 @@ test("2x copy from listing to new folder", async({ page, checkForErrors, context
   await page.locator('a[aria-label="copyme.txt"]').waitFor({ state: 'visible' });
   await page.locator('a[aria-label="copyme.txt"]').click( { button: "right" });
   await page.locator('.selected-count-header').waitFor({ state: 'visible' });
-  await expect(page.locator('.selected-count-header')).toHaveText('1 selected');
+  await expect(page.locator('.selected-count-header')).toHaveText('1');
   await page.locator('button[aria-label="Copy file"]').click();
   await expect(page.locator('div[aria-label="filelist-path"]')).toHaveText('Path: /');
   await expect(page.locator('li[aria-selected="true"]')).toHaveCount(0);
@@ -97,7 +97,7 @@ test("2x copy from listing to new folder", async({ page, checkForErrors, context
 
   await page.locator('a[aria-label="copyme.txt"]').click( { button: "right" });
   await page.locator('.selected-count-header').waitFor({ state: 'visible' });
-  await expect(page.locator('.selected-count-header')).toHaveText('1 selected');
+  await expect(page.locator('.selected-count-header')).toHaveText('1');
   await page.locator('button[aria-label="Copy file"]').click();
   await expect(page.locator('div[aria-label="filelist-path"]')).toHaveText('Path: /myfolder');
   await page.locator('li[aria-label="newfolder"]').click();
@@ -114,7 +114,7 @@ test("delete file", async({ page, checkForErrors, context }) => {
   await page.locator('a[aria-label="deleteme.txt"]').waitFor({ state: 'visible' });
   await page.locator('a[aria-label="deleteme.txt"]').click({ button: "right" });
   await page.locator('.selected-count-header').waitFor({ state: 'visible' });
-  await expect(page.locator('.selected-count-header')).toHaveText('1 selected');
+  await expect(page.locator('.selected-count-header')).toHaveText('1');
   await page.locator('button[aria-label="Delete"]').click();
   await expect( page.locator('.card-content')).toHaveText('Are you sure you want to delete this file/folder?/deleteme.txt');
   await expect(page.locator('div[aria-label="delete-path"]')).toHaveText('/deleteme.txt');
@@ -131,7 +131,7 @@ test("delete nested file prompt", async({ page, checkForErrors, context }) => {
   await page.locator('a[aria-label="file#.sh"]').waitFor({ state: 'visible' });
   await page.locator('a[aria-label="file#.sh"]').click({ button: "right" });
   await page.locator('.selected-count-header').waitFor({ state: 'visible' });
-  await expect(page.locator('.selected-count-header')).toHaveText('1 selected');
+  await expect(page.locator('.selected-count-header')).toHaveText('1');
   await page.locator('button[aria-label="Delete"]').click();
   await expect(page.locator('.card-content')).toHaveText('Are you sure you want to delete this file/folder?/folder#hash/file#.sh');
   await expect(page.locator('div[aria-label="delete-path"]')).toHaveText('/folder#hash/file#.sh');

frontend/tests/playwright/global-setup.ts

@@ -22,7 +22,7 @@ async function globalSetup() {
   await page.locator('a[aria-label="myfolder"]').waitFor({ state: 'visible' });
   await page.locator('a[aria-label="myfolder"]').click({ button: "right" });
   await page.locator('.selected-count-header').waitFor({ state: 'visible' });
-  await expect(page.locator('.selected-count-header')).toHaveText('1 selected');
+  await expect(page.locator('.selected-count-header')).toHaveText('1');
   await page.locator('button[aria-label="Share"]').click();
   await expect(page.locator('div[aria-label="share-path"]')).toHaveText('Path: /myfolder');
   await page.locator('button[aria-label="Share-Confirm"]').click();
@@ -41,7 +41,7 @@ async function globalSetup() {
   await page.locator('a[aria-label="1file1.txt"]').waitFor({ state: 'visible' });
   await page.locator('a[aria-label="1file1.txt"]').click({ button: "right" });
   await page.locator('.selected-count-header').waitFor({ state: 'visible' });
-  await expect(page.locator('.selected-count-header')).toHaveText('1 selected');
+  await expect(page.locator('.selected-count-header')).toHaveText('1');
   await page.locator('button[aria-label="Share"]').click();
   await expect(page.locator('div[aria-label="share-path"]')).toHaveText('Path: /1file1.txt');
   await page.locator('button[aria-label="Share-Confirm"]').click();
@@ -60,7 +60,7 @@ async function globalSetup() {
   await page.locator('a[aria-label="share"]').waitFor({ state: 'visible' });
   await page.locator('a[aria-label="share"]').click({ button: "right" });
   await page.locator('.selected-count-header').waitFor({ state: 'visible' });
-  await expect(page.locator('.selected-count-header')).toHaveText('1 selected');
+  await expect(page.locator('.selected-count-header')).toHaveText('1');
   await page.locator('button[aria-label="Share"]').click();
   await expect(page.locator('div[aria-label="share-path"]')).toHaveText('Path: /share');
   await page.locator('button[aria-label="Share-Confirm"]').click();

frontend/tests/playwright/noauth-setup.ts

@@ -13,7 +13,7 @@ async function globalSetup() {
   await page.locator('a[aria-label="myfolder"]').waitFor({ state: 'visible' });
   await page.locator('a[aria-label="myfolder"]').click({ button: "right" });
   await page.locator('.selected-count-header').waitFor({ state: 'visible' });
-  await expect(page.locator('.selected-count-header')).toHaveText('1 selected');
+  await expect(page.locator('.selected-count-header')).toHaveText('1');
   await page.locator('button[aria-label="Share"]').click();
   await expect(page.locator('div[aria-label="share-path"]')).toHaveText('Path: /myfolder');
   await page.locator('button[aria-label="Share-Confirm"]').click();
@@ -32,7 +32,7 @@ async function globalSetup() {
   await page.locator('a[aria-label="1file1.txt"]').waitFor({ state: 'visible' });
   await page.locator('a[aria-label="1file1.txt"]').click({ button: "right" });
   await page.locator('.selected-count-header').waitFor({ state: 'visible' });
-  await expect(page.locator('.selected-count-header')).toHaveText('1 selected');
+  await expect(page.locator('.selected-count-header')).toHaveText('1');
   await page.locator('button[aria-label="Share"]').click();
   await expect(page.locator('div[aria-label="share-path"]')).toHaveText('Path: /1file1.txt');
   await page.locator('button[aria-label="Share-Confirm"]').click();

frontend/tests/playwright/noauth/file-actions.spec.ts

@@ -7,7 +7,7 @@ test("info from listing", async({ page, checkForErrors, context }) => {
   await page.locator('a[aria-label="file.tar.gz"]').waitFor({ state: 'visible' });
   await page.locator('a[aria-label="file.tar.gz"]').click( { button: "right" });
   await page.locator('.selected-count-header').waitFor({ state: 'visible' });
-  await expect(page.locator('.selected-count-header')).toHaveText('1 selected');
+  await expect(page.locator('.selected-count-header')).toHaveText('1');
   await page.locator('button[aria-label="Info"]').click();
   await expect(page.locator('.break-word')).toHaveText('Display Name: file.tar.gz');
   checkForErrors();
@@ -21,7 +21,7 @@ test("info from search", async({ page, checkForErrors, context }) => {
   await expect(page.locator('#result-list')).toHaveCount(1);
   await page.locator('li[aria-label="file.tar.gz"]').click({ button: "right" });
   await page.locator('.selected-count-header').waitFor({ state: 'visible' });
-  await expect(page.locator('.selected-count-header')).toHaveText('1 selected');
+  await expect(page.locator('.selected-count-header')).toHaveText('1');
   await page.locator('button[aria-label="Info"]').click();
   await expect(page.locator('.break-word')).toHaveText('Display Name: file.tar.gz');
   checkForErrors();
@@ -45,7 +45,7 @@ test("2x copy from listing to new folder", async({ page, checkForErrors, context
   await page.locator('a[aria-label="copyme.txt"]').waitFor({ state: 'visible' });
   await page.locator('a[aria-label="copyme.txt"]').click( { button: "right" });
   await page.locator('.selected-count-header').waitFor({ state: 'visible' });
-  await expect(page.locator('.selected-count-header')).toHaveText('1 selected');
+  await expect(page.locator('.selected-count-header')).toHaveText('1');
   await page.locator('button[aria-label="Copy file"]').click();
   await expect(page.locator('div[aria-label="filelist-path"]')).toHaveText('Path: /');
   await expect(page.locator('li[aria-selected="true"]')).toHaveCount(0);
@@ -73,7 +73,7 @@ test("2x copy from listing to new folder", async({ page, checkForErrors, context
 
   await page.locator('a[aria-label="copyme.txt"]').click( { button: "right" });
   await page.locator('.selected-count-header').waitFor({ state: 'visible' });
-  await expect(page.locator('.selected-count-header')).toHaveText('1 selected');
+  await expect(page.locator('.selected-count-header')).toHaveText('1');
   await page.locator('button[aria-label="Copy file"]').click();
   await expect(page.locator('div[aria-label="filelist-path"]')).toHaveText('Path: /myfolder');
   await page.locator('li[aria-label="newfolder"]').click();
@@ -90,7 +90,7 @@ test("delete file", async({ page, checkForErrors, context }) => {
   await page.locator('a[aria-label="deleteme.txt"]').waitFor({ state: 'visible' });
   await page.locator('a[aria-label="deleteme.txt"]').click({ button: "right" });
   await page.locator('.selected-count-header').waitFor({ state: 'visible' });
-  await expect(page.locator('.selected-count-header')).toHaveText('1 selected');
+  await expect(page.locator('.selected-count-header')).toHaveText('1');
   await page.locator('button[aria-label="Delete"]').click();
   await expect( page.locator('.card-content')).toHaveText('Are you sure you want to delete this file/folder?/deleteme.txt');
   await expect(page.locator('div[aria-label="delete-path"]')).toHaveText('/deleteme.txt');
@@ -108,7 +108,7 @@ test("delete nested file prompt", async({ page, checkForErrors, context }) => {
   await page.locator('a[aria-label="file#.sh"]').waitFor({ state: 'visible' });
   await page.locator('a[aria-label="file#.sh"]').click({ button: "right" });
   await page.locator('.selected-count-header').waitFor({ state: 'visible' });
-  await expect(page.locator('.selected-count-header')).toHaveText('1 selected');
+  await expect(page.locator('.selected-count-header')).toHaveText('1');
   await page.locator('button[aria-label="Delete"]').click();
   await expect(page.locator('.card-content')).toHaveText('Are you sure you want to delete this file/folder?/folder#hash/file#.sh');
   await expect(page.locator('div[aria-label="delete-path"]')).toHaveText('/folder#hash/file#.sh');

frontend/tests/playwright/noauth/share.mobile.spec.ts

@@ -23,7 +23,7 @@ test("share download multiple files", async ({ page, checkForErrors, context })
   await page.locator('a[aria-label="gray-sample.jpg"]').click({ button: "right" });
 
   await page.locator('.selected-count-header').waitFor({ state: 'visible' });
-  await expect(page.locator('.selected-count-header')).toHaveText('3 selected');
+  await expect(page.locator('.selected-count-header')).toHaveText('3');
 
   await page.locator('button[aria-label="Download"]').waitFor({ state: 'visible' });
   await page.locator('button[aria-label="Download"]').click();

frontend/tests/playwright/sharing/share.mobile.spec.ts

@@ -39,7 +39,7 @@ test("share download multiple files", async ({ page, checkForErrors, context })
   await page.locator('a[aria-label="gray-sample.jpg"]').click({ button: "right" });
 
   await page.locator('.selected-count-header').waitFor({ state: 'visible' });
-  await expect(page.locator('.selected-count-header')).toHaveText('3 selected');
+  await expect(page.locator('.selected-count-header')).toHaveText('3');
 
   await page.locator('button[aria-label="Download"]').waitFor({ state: 'visible' });
   await page.locator('button[aria-label="Download"]').click();