feat: show screenshots in app details

packages/web-app-app-store/src/components/AppImageGallery.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="app-image-wrapper">
+    <div class="app-image">
+      <oc-img v-if="currentImage?.url" :src="currentImage?.url" />
+      <div v-else class="fallback-icon">
+        <oc-icon name="computer" size="xxlarge" />
+      </div>
+    </div>
+    <ol v-if="hasPagination" class="app-image-pagination">
+      <li>
+        <oc-button class="oc-p-xs" @click="previousImage">
+          <oc-icon name="arrow-left-s" />
+        </oc-button>
+      </li>
+      <li v-for="(image, index) in images" :key="`gallery-page-${index}`">
+        <oc-button
+          class="oc-py-xs"
+          :disabled="index === currentImageIndex"
+          @click="setImageIndex(index)"
+        >
+          {{ index + 1 }}
+        </oc-button>
+      </li>
+      <li>
+        <oc-button class="oc-p-xs" @click="nextImage">
+          <oc-icon name="arrow-right-s" />
+        </oc-button>
+      </li>
+    </ol>
+  </div>
+</template>
+<script lang="ts">
+import { computed, defineComponent, PropType, ref, unref } from 'vue'
+import { App, AppImage } from '../types'
+
+export default defineComponent({
+  name: 'AppImageGallery',
+  props: {
+    app: {
+      type: Object as PropType<App>,
+      required: true
+    },
+    showPagination: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  setup(props) {
+    const images = computed(() => {
+      return [props.app.coverImage, ...props.app.screenshots]
+    })
+
+    const currentImageIndex = ref<number>(0)
+    const currentImage = computed<AppImage>(() => unref(images)[unref(currentImageIndex)])
+    const hasPagination = computed(() => props.showPagination && unref(images).length > 1)
+    const nextImage = () => {
+      currentImageIndex.value = (unref(currentImageIndex) + 1) % unref(images).length
+    }
+    const previousImage = () => {
+      currentImageIndex.value =
+        (unref(currentImageIndex) - 1 + unref(images).length) % unref(images).length
+    }
+    const setImageIndex = (index: number) => {
+      currentImageIndex.value = index
+    }
+
+    return {
+      currentImage,
+      currentImageIndex,
+      images,
+      hasPagination,
+      nextImage,
+      previousImage,
+      setImageIndex
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.app-image {
+  width: 100%;
+
+  img {
+    width: 100%;
+    max-width: 100%;
+    aspect-ratio: 3/2;
+    object-fit: cover;
+  }
+
+  .fallback-icon {
+    width: 100%;
+    aspect-ratio: 3/2;
+    background-color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+.app-image-pagination {
+  width: 100%;
+  padding: 0;
+  margin-top: var(--oc-space-small);
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+}
+</style>

packages/web-app-app-store/src/components/AppTile.vue

@@ -1,7 +1,7 @@
 <template>
   <li class="app-tile oc-card oc-card-default oc-card-rounded">
     <router-link :to="{ name: `${APPID}-details`, params: { appId: encodeURIComponent(app.id) } }">
-      <app-cover :app="app" />
+      <app-image-gallery :app="app" />
     </router-link>
     <div class="app-tile-body oc-card-body oc-p">
       <div class="app-content">
@@ -29,13 +29,13 @@
 import { defineComponent, type PropType } from 'vue'
 import { App } from '../types'
 import { APPID } from '../appid'
-import AppCover from './AppCover.vue'
 import AppTags from './AppTags.vue'
 import AppActions from './AppActions.vue'
+import AppImageGallery from './AppImageGallery.vue'
 
 export default defineComponent({
   name: 'AppTile',
-  components: { AppActions, AppTags, AppCover },
+  components: { AppImageGallery, AppActions, AppTags },
   props: {
     app: {
       type: Object as PropType<App>,

packages/web-app-app-store/src/types.ts

@@ -27,6 +27,7 @@ export const AppImageSchema = z.object({
   url: z.string(),
   caption: z.string().optional()
 })
+export type AppImage = z.infer<typeof AppImageSchema>
 
 export const AppResourceSchema = z.object({
   url: z.string(),

packages/web-app-app-store/src/views/AppDetails.vue

@@ -6,7 +6,7 @@
         <span v-text="$gettext('Back to list')" />
       </router-link>
     </div>
-    <app-cover :app="app" />
+    <app-image-gallery :app="app" :show-pagination="true" />
     <div class="app-content oc-card-body oc-p">
       <div class="oc-flex oc-flex-middle">
         <h2 class="oc-my-s oc-text-truncate">{{ app.name }}</h2>
@@ -45,14 +45,14 @@ import { App } from '../types'
 import { APPID } from '../appid'
 import { useRouteParam, useRouter } from '@ownclouders/web-pkg'
 import { useAppsStore } from '../piniaStores'
-import AppCover from '../components/AppCover.vue'
 import AppResources from '../components/AppResources.vue'
 import AppTags from '../components/AppTags.vue'
 import AppVersions from '../components/AppVersions.vue'
 import AppAuthors from '../components/AppAuthors.vue'
+import AppImageGallery from '../components/AppImageGallery.vue'
 
 export default defineComponent({
-  components: { AppAuthors, AppCover, AppResources, AppTags, AppVersions },
+  components: { AppImageGallery, AppAuthors, AppResources, AppTags, AppVersions },
   setup() {
     const appIdRouteParam = useRouteParam('appId')
     const appId = computed(() => {