feat: motion photo support

.woodpecker.env

@@ -1,3 +1,3 @@
 # The version of OpenCloud to use in pipelines
-OPENCLOUD_COMMITID=cd9095833af0ba1dc7449194e62799931d38a7b1
+OPENCLOUD_COMMITID=81536bbd0e10edfe7fc7ce8a7cee7fadf09c3316
 OPENCLOUD_BRANCH=main

.woodpecker.star

@@ -2,7 +2,7 @@ repo_slug = "opencloud-eu/web"
 docker_repo_slug = "opencloudeu/web"
 
 ALPINE_GIT = "alpine/git:latest"
-APACHE_TIKA = "apache/tika:2.8.0.0"
+APACHE_TIKA = "apache/tika:4.1.0-SNAPSHOT"
 
 # renovate: datasource=docker depName=collabora/code
 COLLABORA_CODE = "collabora/code:26.04.2.4.1"

dev/docker/opencloud/csp.yaml

@@ -35,6 +35,7 @@ directives:
     - '''self'''
   media-src:
     - '''self'''
+    - 'blob:'
   object-src:
     - '''self'''
     - 'blob:'

docker-compose.yml

@@ -304,7 +304,7 @@ services:
       - traefik
 
   tika:
-    image: apache/tika:3.3.1.0
+    image: apache/tika:4.1.0-SNAPSHOT
     container_name: web_tika
     ports:
       - 9998:9998

packages/web-app-files/src/components/SideBar/Details/FileDetails.vue

@@ -5,13 +5,20 @@
         class="relative flex items-center justify-center bg-role-surface-container rounded-xl p-4 mb-4"
       >
         <div v-if="preview" data-testid="preview">
-          <img
-            key="file-thumbnail"
-            :src="preview"
-            class="details-preview h-[160px]"
-            alt=""
-            decoding="async"
-          />
+          <motion-photo-overlay
+            :resource="resource"
+            :space="space"
+            badge-size-class="size-5"
+            badge-class="top-1 right-1"
+          >
+            <img
+              key="file-thumbnail"
+              :src="preview"
+              class="details-preview h-[160px]"
+              alt=""
+              decoding="async"
+            />
+          </motion-photo-overlay>
         </div>
         <resource-icon
           v-else
@@ -172,7 +179,7 @@ import {
   isTrashResource,
   ShareTypes
 } from '@opencloud-eu/web-client'
-import { useGetMatchingSpace } from '@opencloud-eu/web-pkg'
+import { MotionPhotoOverlay, useGetMatchingSpace } from '@opencloud-eu/web-pkg'
 import { formatFileSize, formatRelativeDateFromJSDate } from '@opencloud-eu/web-pkg'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
 import { useGettext } from 'vue3-gettext'

packages/web-app-preview/src/App.vue

@@ -40,6 +40,13 @@
             {{ $gettext('Failed to load "%{filename}"', { filename: activeMediaFile.name }) }}
           </p>
         </div>
+        <media-motion-photo
+          v-else-if="activeMediaFile.isMotionPhoto"
+          ref="motionPlayer"
+          :key="activeMediaFile.id"
+          :file="activeMediaFile"
+          :current-image-rotation="currentImageRotation"
+        />
         <media-image
           v-else-if="activeMediaFile.isImage"
           :file="activeMediaFile"
@@ -64,8 +71,11 @@
         :is-full-screen-mode-activated="isFullScreenModeActivated"
         :is-folder-loading="isFolderLoading"
         :show-image-controls="activeMediaFile?.isImage && !activeMediaFile?.isError"
+        :show-motion-control="activeMediaFile?.isMotionPhoto && !activeMediaFile?.isError"
+        :is-motion-playing="motionPlayer?.isPlaying"
         :current-image-rotation="currentImageRotation"
         :photo-roll-enabled="photoRollEnabled"
+        @toggle-motion="motionPlayer?.toggle()"
         @set-rotation-right="imageRotateRight"
         @set-rotation-left="imageRotateLeft"
         @set-zoom="imageZoom"
@@ -93,6 +103,7 @@ import {
   watch
 } from 'vue'
 import omit from 'lodash-es/omit'
+import isEmpty from 'lodash-es/isEmpty'
 import { IncomingShareResource, Resource } from '@opencloud-eu/web-client'
 import {
   createFileRouteOptions,
@@ -115,6 +126,7 @@ import {
 import MediaControls from './components/MediaControls.vue'
 import MediaAudio from './components/Sources/MediaAudio.vue'
 import MediaImage from './components/Sources/MediaImage.vue'
+import MediaMotionPhoto from './components/Sources/MediaMotionPhoto.vue'
 import MediaVideo from './components/Sources/MediaVideo.vue'
 import PhotoRoll from './components/PhotoRoll.vue'
 import { MediaFile } from './helpers/types'
@@ -172,6 +184,7 @@ const isAutoPlayEnabled = ref(true)
 const isAutoAdvancing = ref(false)
 const photoRollEnabled = ref(true)
 const preview = useTemplateRef<HTMLElement>('preview')
+const motionPlayer = useTemplateRef<{ isPlaying: boolean; toggle: () => void }>('motionPlayer')
 const keyBindings: string[] = []
 let loadPreviewImageController: AbortController = null
 
@@ -233,6 +246,7 @@ const buildMediaFiles = () => {
       isVideo: isFileTypeVideo(file),
       isImage: isFileTypeImage(file),
       isAudio: isFileTypeAudio(file),
+      isMotionPhoto: isFileTypeImage(file) && !isEmpty(file.motionPhoto),
       isLoading: true,
       isError: false,
       resource: file

packages/web-app-preview/src/components/MediaControls.vue

@@ -110,6 +110,17 @@
           />
         </oc-button>
       </div>
+      <oc-button
+        v-if="showMotionControl"
+        v-oc-tooltip="motionDescription"
+        class="preview-controls-motion raw-hover-surface p-1"
+        data-testid="motion-photo-toggle"
+        appearance="raw"
+        :aria-label="motionDescription"
+        @click="emit('toggleMotion')"
+      >
+        <oc-icon fill-type="line" :name="isMotionPlaying ? 'pause-circle' : 'play-circle'" />
+      </oc-button>
 
       <template v-if="showFavoriteButton || showDeleteButton">
         <span
@@ -163,13 +174,17 @@ const {
   isFullScreenModeActivated = false,
   isFolderLoading = false,
   showImageControls = false,
+  showMotionControl = false,
+  isMotionPlaying = false,
   currentImageRotation = 0
 } = defineProps<{
   files: MediaFile[]
   activeIndex?: number
   isFullScreenModeActivated?: boolean
   isFolderLoading?: boolean
   showImageControls?: boolean
+  showMotionControl?: boolean
+  isMotionPlaying?: boolean
   currentImageRotation?: number
   photoRollEnabled?: boolean
 }>()
@@ -187,6 +202,7 @@ const emit = defineEmits<{
   (e: 'resetImage'): void
   (e: 'deleteResource'): void
   (e: 'togglePhotoRoll'): void
+  (e: 'toggleMotion'): void
 }>()
 
 const { $gettext } = useGettext()
@@ -274,4 +290,7 @@ const imageRotateRightDescription = computed(() =>
 )
 const previousDescription = computed(() => $gettext('Show previous media file in folder'))
 const nextDescription = computed(() => $gettext('Show next media file in folder'))
+const motionDescription = computed(() =>
+  isMotionPlaying ? $gettext('Pause motion photo') : $gettext('Play motion photo')
+)
 </script>

packages/web-app-preview/src/components/PhotoRollItem.vue

@@ -12,17 +12,24 @@
       :aria-current="isActive ? 'true' : 'false'"
       @click="$emit('select')"
     >
-      <img
-        v-if="item && item.resource.thumbnail"
-        :src="item.resource.thumbnail"
-        class="object-cover h-25 rounded-md aspect-video"
-        :alt="item.name"
-        referrerpolicy="no-referrer"
-        decoding="async"
-      />
-      <div v-else class="aspect-video h-25 flex items-center justify-center">
-        <resource-icon class="aspect-video" :resource="iconResource" size-class="size-12" />
-      </div>
+      <motion-photo-overlay
+        class="mx-auto w-fit"
+        :resource="item.resource"
+        badge-class="top-0 right-0 m-1"
+        video-class="rounded-md"
+      >
+        <img
+          v-if="item && item.resource.thumbnail"
+          :src="item.resource.thumbnail"
+          class="object-cover h-25 rounded-md aspect-video"
+          :alt="item.name"
+          referrerpolicy="no-referrer"
+          decoding="async"
+        />
+        <div v-else class="aspect-video h-25 flex items-center justify-center">
+          <resource-icon class="aspect-video" :resource="iconResource" size-class="size-12" />
+        </div>
+      </motion-photo-overlay>
       <span class="w-full">
         <resource-name
           :name="item.resource.name"
@@ -43,7 +50,12 @@
 <script setup lang="ts">
 import { Resource } from '@opencloud-eu/web-client'
 import { MediaFile } from '../helpers/types'
-import { ResourceIcon, ResourceName, useResourcesStore } from '@opencloud-eu/web-pkg'
+import {
+  MotionPhotoOverlay,
+  ResourceIcon,
+  ResourceName,
+  useResourcesStore
+} from '@opencloud-eu/web-pkg'
 import { useIsVisible } from '@opencloud-eu/design-system/composables'
 import { computed, ref, useTemplateRef } from 'vue'
 

packages/web-app-preview/src/components/Sources/MediaImage.vue

@@ -10,6 +10,16 @@
       @loaded="initPanzoom"
     />
   </div>
+  <div
+    v-else-if="$slots.overlay"
+    ref="img"
+    :key="`media-image-wrapper-${file.id}`"
+    class="relative grid size-full grid-cols-[100%] grid-rows-[100%] place-items-center pt-4 [&>*]:[grid-area:1/1]"
+    :data-id="file.id"
+  >
+    <img :src="file.url" :alt="file.name" class="max-w-full max-h-full" />
+    <slot name="overlay" />
+  </div>
   <img
     v-else
     ref="img"
@@ -47,6 +57,8 @@ const { file, currentImageRotation } = defineProps<{
 
 const eventBus = useEventBus()
 
+// with an overlay slot this is a stage-filling wrapper around the still: a
+// content-sized wrapper would void the percentage max-w/max-h of its children
 const img = useTemplateRef<HTMLElement>('img')
 const panzoom = ref<PanzoomObject>()
 const isSvgImage = computed(() => file.mimeType === 'image/svg+xml')

packages/web-app-preview/src/components/Sources/MediaMotionPhoto.vue

@@ -0,0 +1,74 @@
+<template>
+  <media-image :file="file" :current-image-rotation="currentImageRotation">
+    <template #overlay>
+      <video
+        v-if="isPlaying"
+        :key="`motion-photo-video-${file.id}`"
+        :src="videoUrl"
+        :loop="looping"
+        muted
+        autoplay
+        playsinline
+        preload="auto"
+        class="max-w-full max-h-full object-contain"
+        data-testid="motion-photo-video"
+        @loadedmetadata="seekToStill"
+        @ended="onEnded"
+        @error="stop"
+      />
+      <oc-spinner
+        v-if="isLoading && !isPlaying"
+        class="absolute inset-0 m-auto"
+        size="large"
+        :aria-label="$gettext('Loading motion photo')"
+      />
+    </template>
+  </media-image>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, unref } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import { useGetMatchingSpace, useMotionPhotoPlayback } from '@opencloud-eu/web-pkg'
+import { MediaFile } from '../../helpers/types'
+import MediaImage from './MediaImage.vue'
+
+const { file, currentImageRotation } = defineProps<{
+  file: MediaFile
+  currentImageRotation: number
+}>()
+
+const { $gettext } = useGettext()
+const { getMatchingSpace } = useGetMatchingSpace()
+
+const { isPlaying, isLoading, videoUrl, play, stop, seekToStill } = useMotionPhotoPlayback(
+  () => file.resource,
+  () => getMatchingSpace(file.resource)
+)
+
+// auto-play on open runs once, playback started from the controls loops
+const looping = ref(false)
+
+const onEnded = () => {
+  if (!unref(looping)) {
+    stop()
+  }
+}
+
+const togglePlayback = () => {
+  if (unref(isPlaying)) {
+    looping.value = false
+    stop()
+  } else {
+    looping.value = true
+    play()
+  }
+}
+
+onMounted(() => {
+  looping.value = false
+  play()
+})
+
+defineExpose({ isPlaying, toggle: togglePlayback })
+</script>

packages/web-app-preview/src/helpers/types.ts

@@ -9,6 +9,7 @@ export type MediaFile = {
   isVideo: boolean
   isImage: boolean
   isAudio: boolean
+  isMotionPhoto: boolean
   isLoading: boolean
   isError: boolean
   resource: Resource