Merge pull request #2330 from rommapp/jump-prev-next-game

Jump to previous/next game

frontend/src/components/Details/BackgroundHeader.vue

@@ -3,9 +3,14 @@ import storeRoms from "@/stores/roms";
 import { getMissingCoverImage, getUnmatchedCoverImage } from "@/utils/covers";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
+import { useRouter } from "vue-router";
+import { useDisplay } from "vuetify";
 
 const romsStore = storeRoms();
-const { currentRom } = storeToRefs(romsStore);
+const { currentRom, filteredRoms } = storeToRefs(romsStore);
+const router = useRouter();
+const { smAndUp } = useDisplay();
+
 const missingCoverImage = computed(() =>
   getMissingCoverImage(
     currentRom.value?.name || currentRom.value?.fs_name || "",
@@ -16,6 +21,22 @@ const unmatchedCoverImage = computed(() =>
     currentRom.value?.name || currentRom.value?.fs_name || "",
   ),
 );
+
+const currentRomIndex = computed(() =>
+  filteredRoms.value.findIndex((rom) => rom.id === currentRom.value?.id),
+);
+
+function previousRom() {
+  if (currentRomIndex.value > 0) {
+    router.push(`/rom/${filteredRoms.value[currentRomIndex.value - 1].id}`);
+  }
+}
+
+function nextRom() {
+  if (currentRomIndex.value < filteredRoms.value.length - 1) {
+    router.push(`/rom/${filteredRoms.value[currentRomIndex.value + 1].id}`);
+  }
+}
 </script>
 
 <template>
@@ -38,6 +59,29 @@ const unmatchedCoverImage = computed(() =>
         <v-skeleton-loader class="background-skeleton" type="image" />
       </template>
     </v-img>
+    <v-btn-group
+      v-if="filteredRoms.length > 1"
+      density="compact"
+      class="justify-center mb-2 px-2 position-absolute bottom-0 right-0"
+      :class="{ 'd-flex justify-space-between w-100': !smAndUp }"
+    >
+      <v-btn
+        size="small"
+        density="compact"
+        :disabled="currentRomIndex <= 0"
+        @click="previousRom"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-btn
+        size="small"
+        density="compact"
+        :disabled="currentRomIndex === filteredRoms.length - 1"
+        @click="nextRom"
+      >
+        <v-icon>mdi-arrow-right</v-icon>
+      </v-btn>
+    </v-btn-group>
   </v-card>
 </template>
 

frontend/src/components/Details/Info/GameInfo.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { type FilterType } from "@/stores/galleryFilter";
 import RDialog from "@/components/common/RDialog.vue";
-import RAvatar from "@/components/common/Collection/RAvatar.vue";
-import type { DetailedRom } from "@/stores/roms";
+import { type DetailedRom } from "@/stores/roms";
 import { ROUTES } from "@/plugins/router";
 import { computed, ref } from "vue";
 import { useRouter } from "vue-router";

frontend/src/views/GameDetails.vue

@@ -21,6 +21,7 @@ import { inject, onBeforeMount, ref, watch, defineAsyncComponent } from "vue";
 import { useRoute } from "vue-router";
 import { useDisplay } from "vuetify";
 import { useI18n } from "vue-i18n";
+
 // Dynamic import for PDFViewer
 const PdfViewer = defineAsyncComponent(
   () => import("@/components/Details/PDFViewer.vue"),