Frontend: Add option to shuffle albums

AgustinSRG · Aug 8, 2024 · ea82b4f · ea82b4f
1 parent cc30d14
commit ea82b4f
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 41 deletions.
diff --git a/frontend/src/components/layout/PageContent.vue b/frontend/src/components/layout/PageContent.vue
@@ -17,7 +17,13 @@
                 <i class="fas fa-chevron-left"></i>
             </button>
             <div class="page-title" :title="renderTitle(page, search)"><i :class="getIcon(page)"></i> {{ renderTitle(page, search) }}</div>
-            <button v-if="page === 'random'" type="button" :title="$t('Refresh')" class="page-header-btn" @click="triggerRefresh">
+            <button
+                v-if="page === 'random' || (hasOrderAlbums(page) && order === 'rand')"
+                type="button"
+                :title="$t('Refresh')"
+                class="page-header-btn"
+                @click="triggerRefresh"
+            >
                 <i class="fas fa-sync-alt"></i>
             </button>
             <button
@@ -29,6 +35,15 @@
             >
                 <i class="fas fa-arrow-up-short-wide"></i>
             </button>
+            <button
+                v-if="hasOrderDate(page) && order !== 'desc'"
+                type="button"
+                :title="$t('Show most recent')"
+                class="page-header-btn"
+                @click="toggleOrder"
+            >
+                <i class="fas fa-arrow-down-short-wide"></i>
+            </button>
             <button
                 v-if="hasOrderAlbums(page) && order === 'desc'"
                 type="button"
@@ -39,16 +54,16 @@
                 <i class="fas fa-arrow-down-a-z"></i>
             </button>
             <button
-                v-if="hasOrderDate(page) && order !== 'desc'"
+                v-else-if="hasOrderAlbums(page) && order === 'asc'"
                 type="button"
-                :title="$t('Show most recent')"
+                :title="$t('Random')"
                 class="page-header-btn"
                 @click="toggleOrder"
             >
-                <i class="fas fa-arrow-down-short-wide"></i>
+                <i class="fas fa-shuffle"></i>
             </button>
             <button
-                v-if="hasOrderAlbums(page) && order !== 'desc'"
+                v-else-if="hasOrderAlbums(page)"
                 type="button"
                 :title="$t('Order by last modified date')"
                 class="page-header-btn"
@@ -250,20 +265,6 @@ export default defineComponent({
             AppStatus.ExpandPage();
         },
 
-        focusPage: function () {
-            nextTick(() => {
-                const page: any = document.querySelector(".page-content");
-                if (page) {
-                    const autoFocused = page.querySelector(".auto-focus");
-                    if (autoFocused) {
-                        autoFocused.focus();
-                    } else {
-                        page.focus();
-                    }
-                }
-            });
-        },
-
         closePage: function () {
             AppStatus.ClosePage();
             const player: any = document.querySelector(".player-container");
@@ -372,7 +373,12 @@ export default defineComponent({
 
         triggerRefresh: function () {
             AppEvents.Emit(EVENT_NAME_RANDOM_PAGE_REFRESH);
-            this.focusPage();
+            nextTick(() => {
+                const elementToFocus: any = document.querySelector(".page-content .search-results");
+                if (elementToFocus) {
+                    elementToFocus.focus();
+                }
+            });
         },
 
         openConfig: function () {
@@ -382,6 +388,8 @@ export default defineComponent({
         toggleOrder: function () {
             if (this.order === "desc") {
                 this.order = "asc";
+            } else if (this.order === "asc") {
+                this.order = "rand";
             } else {
                 this.order = "desc";
             }

diff --git a/frontend/src/components/pages/PageAlbums.vue b/frontend/src/components/pages/PageAlbums.vue
@@ -19,7 +19,7 @@
                 </div>
             </div>
 
-            <PageMenu v-if="total > 0" :page="page" :pages="totalPages" :min="min" @goto="changePage"></PageMenu>
+            <PageMenu v-if="total > 0 && order !== 'rand'" :page="page" :pages="totalPages" :min="min" @goto="changePage"></PageMenu>
 
             <div v-if="loading" class="search-results-loading-display">
                 <div v-for="f in pageSize" :key="f" class="search-result-item">
@@ -100,9 +100,9 @@
                 <div v-for="i in lastRowPadding" :key="'pad-last-' + i" class="search-result-item"></div>
             </div>
 
-            <PageMenu v-if="total > 0" :page="page" :pages="totalPages" :min="min" @goto="changePage"></PageMenu>
+            <PageMenu v-if="total > 0 && order !== 'rand'" :page="page" :pages="totalPages" :min="min" @goto="changePage"></PageMenu>
 
-            <div v-if="total > 0" class="search-results-total">{{ $t("Total") }}: {{ total }}</div>
+            <div v-if="total > 0 && order !== 'rand'" class="search-results-total">{{ $t("Total") }}: {{ total }}</div>
         </div>
 
         <AlbumCreateModal v-model:display="displayAlbumCreate" @new-album="onNewAlbum"></AlbumCreateModal>
@@ -125,10 +125,11 @@ import AlbumCreateModal from "../modals/AlbumCreateModal.vue";
 import { filterToWords, matchSearchFilter, normalizeString } from "@/utils/normalize";
 import { packSearchParams, unPackSearchParams } from "@/utils/search-params";
 import { AlbumListItem } from "@/api/models";
-import { PagesController } from "@/control/pages";
+import { EVENT_NAME_RANDOM_PAGE_REFRESH, PagesController } from "@/control/pages";
 import { getUniqueStringId } from "@/utils/unique-id";
 import { apiAlbumsGetAlbums } from "@/api/api-albums";
 import { isTouchDevice } from "@/utils/touch";
+import { shuffleArray } from "@/utils/shuffle";
 
 export default defineComponent({
     name: "PageAlbums",
@@ -311,24 +312,26 @@ export default defineComponent({
                 });
             }
 
-            if (this.order !== "asc") {
+            if (this.order === "asc") {
                 albumsList = albumsList.sort((a, b) => {
-                    if (a.lm > b.lm) {
+                    if (a.nameLowerCase < b.nameLowerCase) {
                         return -1;
-                    } else if (b.lm > a.lm) {
-                        return 1;
-                    } else if (a.id < b.id) {
-                        return 1;
                     } else {
-                        return -1;
+                        return 1;
                     }
                 });
+            } else if (this.order === "rand") {
+                albumsList = shuffleArray(albumsList);
             } else {
                 albumsList = albumsList.sort((a, b) => {
-                    if (a.nameLowerCase < b.nameLowerCase) {
+                    if (a.lm > b.lm) {
                         return -1;
-                    } else {
+                    } else if (b.lm > a.lm) {
                         return 1;
+                    } else if (a.id < b.id) {
+                        return 1;
+                    } else {
+                        return -1;
                     }
                 });
             }
@@ -343,7 +346,11 @@ export default defineComponent({
                 this.totalPages++;
             }
 
-            this.page = Math.max(0, Math.min(this.page, this.totalPages - 1));
+            if (this.order === "rand") {
+                this.page = 0;
+            } else {
+                this.page = Math.max(0, Math.min(this.page, this.totalPages - 1));
+            }
 
             const skip = pageSize * this.page;
 
@@ -381,7 +388,7 @@ export default defineComponent({
             return getAssetURL(thumb);
         },
 
-        goToAlbum: function (album, e) {
+        goToAlbum: function (album, e: Event) {
             if (e) {
                 e.preventDefault();
             }
@@ -466,6 +473,8 @@ export default defineComponent({
 
         this.$listenOnAppEvent(EVENT_NAME_ALBUMS_CHANGED, this.load.bind(this));
 
+        this.$listenOnAppEvent(EVENT_NAME_RANDOM_PAGE_REFRESH, this.updateList.bind(this));
+
         this.updateSearchParams();
         this.load();
 

diff --git a/frontend/src/components/pages/PageHome.vue b/frontend/src/components/pages/PageHome.vue
@@ -80,7 +80,7 @@ import PageMenu from "@/components/utils/PageMenu.vue";
 import { renderTimeSeconds } from "@/utils/time";
 import { MediaListItem } from "@/api/models";
 import { EVENT_NAME_TAGS_UPDATE, TagsController } from "@/control/tags";
-import { packSearchParams, unPackSearchParams } from "@/utils/search-params";
+import { orderSimple, packSearchParams, unPackSearchParams } from "@/utils/search-params";
 import {
     EVENT_NAME_MEDIA_DELETE,
     EVENT_NAME_MEDIA_METADATA_CHANGE,
@@ -311,7 +311,7 @@ export default defineComponent({
         updateSearchParams: function () {
             const params = unPackSearchParams(this.searchParams);
             this.page = params.page;
-            this.order = params.order;
+            this.order = orderSimple(params.order);
             this.updateLoadingFiller();
         },
 

diff --git a/frontend/src/components/pages/PageSearch.vue b/frontend/src/components/pages/PageSearch.vue
@@ -88,7 +88,7 @@ import PageMenu from "@/components/utils/PageMenu.vue";
 import { renderTimeSeconds } from "@/utils/time";
 import { MediaListItem } from "@/api/models";
 import { EVENT_NAME_TAGS_UPDATE, TagsController } from "@/control/tags";
-import { packSearchParams, unPackSearchParams } from "@/utils/search-params";
+import { orderSimple, packSearchParams, unPackSearchParams } from "@/utils/search-params";
 import {
     EVENT_NAME_MEDIA_DELETE,
     EVENT_NAME_MEDIA_METADATA_CHANGE,
@@ -329,7 +329,7 @@ export default defineComponent({
         updateSearchParams: function () {
             const params = unPackSearchParams(this.searchParams);
             this.page = params.page;
-            this.order = params.order;
+            this.order = orderSimple(params.order);
             this.updateLoadingFiller();
         },
 

diff --git a/frontend/src/utils/search-params.ts b/frontend/src/utils/search-params.ts
@@ -32,7 +32,7 @@ export interface SearchParams {
     /**
      * Order direction
      */
-    order: "asc" | "desc";
+    order: "asc" | "desc" | "rand";
 }
 
 /**
@@ -53,8 +53,24 @@ export function unPackSearchParams(params: string): SearchParams {
             res.page = 0;
         }
 
-        res.order = spl[1] !== "asc" ? "desc" : "asc";
+        switch (spl[1]) {
+            case "asc":
+            case "rand":
+                res.order = spl[1];
+                break;
+            default:
+                res.order = "desc";
+        }
     }
 
     return res;
 }
+
+/**
+ * Simplifies the order
+ * @param order Order parameter
+ * @returns Simplified order parameter
+ */
+export function orderSimple(order: "asc" | "desc" | "rand"): "asc" | "desc" {
+    return order === "asc" ? "asc" : "desc";
+}