fix: improve Video details component

Author: farnabaz

src/app/src/components/media/MediaEditor.vue

@@ -32,7 +32,8 @@ const isAudio = computed(() => isAudioFile(props.mediaItem?.path || ''))
     />
     <MediaEditorVideo
       v-else-if="isVideo"
-      :src="mediaItem.path!"
+      :media-item="mediaItem"
+      :remote-file="remoteFile"
     />
     <MediaEditorAudio
       v-else-if="isAudio"

src/app/src/components/media/MediaEditorVideo.vue

@@ -1,64 +1,186 @@
-<template>
-  <div class="relative w-full max-w-4xl mx-auto overflow-hidden bg-black aspect-video">
-    <div
-      v-if="!isPlaying"
-      class="absolute inset-0 flex items-center justify-center bg-black/50 cursor-pointer z-10 transition-opacity hover:bg-black/60"
-      @click="handlePlay"
-    >
-      <UButton
-        icon="i-lucide-play"
-        size="xl"
-        color="neutral"
-        variant="link"
-        class="w-32 h-32 rounded-full flex items-center justify-center"
-        :ui="{ leadingIcon: 'w-16 h-16', trailingIcon: 'w-16 h-16' }"
-      >
-        <template #default>
-          <span class="sr-only">{{ $t('studio.media.playVideo') }}</span>
-        </template>
-      </UButton>
-    </div>
-
-    <video
-      v-if="loaded"
-      ref="videoRef"
-      class="w-full aspect-video"
-      :class="{ 'opacity-50': !isPlaying }"
-      controls
-      autoplay
-      @play="isPlaying = true"
-      @pause="isPlaying = false"
-      @ended="isPlaying = false"
-    >
-      <source
-        :src="src"
-        type="video/mp4"
-      >
-      {{ $t('studio.media.videoTagNotSupported') }}
-    </video>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import type { PropType } from 'vue'
+import { formatBytes, getFileExtension } from '../../utils/file'
+import type { MediaItem, GitFile } from '../../types'
+import { useStudio } from '../../composables/useStudio'
+import { joinURL } from 'ufo'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  mediaItem: {
+    type: Object as PropType<MediaItem>,
+    required: true,
+  },
+  remoteFile: {
+    type: Object as PropType<GitFile>,
+    default: null,
+  },
+})
 
-defineProps<{
-  src: string
-}>()
+const { gitProvider } = useStudio()
+const { t } = useI18n()
 
 const videoRef = ref<HTMLVideoElement | null>(null)
-const loaded = ref(false)
-const isPlaying = ref(false)
+const videoDimensions = ref({ width: 0, height: 0 })
+const duration = ref(0)
 
-const handlePlay = () => {
-  if (!loaded.value) {
-    loaded.value = true
-    return
+onMounted(() => {
+  if (videoRef.value) {
+    videoRef.value.onloadedmetadata = () => {
+      console.log('videoRef.value', videoRef.value)
+      videoDimensions.value = {
+        width: videoRef.value?.videoWidth || 0,
+        height: videoRef.value?.videoHeight || 0,
+      }
+      duration.value = videoRef.value?.duration || 0
+    }
   }
+})
 
-  if (videoRef.value) {
-    videoRef.value.play()
-    isPlaying.value = true
+const fileExtension = computed(() => getFileExtension(props.mediaItem.path || '').toUpperCase())
+const fileName = computed(() => {
+  if (props.remoteFile?.name) {
+    return props.remoteFile.name
+  }
+  if (props.mediaItem.stem) {
+    const ext = props.mediaItem.extension ? `.${props.mediaItem.extension}` : ''
+    return `${props.mediaItem.stem}${ext}`
+  }
+  return props.mediaItem.path || 'video'
+})
+
+
+const formattedDuration = computed(() => {
+  if (!duration.value) {
+    return '0s'
   }
-}
+  const totalSeconds = Math.round(duration.value)
+  const minutes = Math.floor(totalSeconds / 60)
+  const seconds = totalSeconds % 60
+  if (minutes === 0) {
+    return `${seconds}s`
+  }
+  return `${minutes}m ${seconds.toString().padStart(2, '0')}s`
+})
+
+const videoInfo = computed(() => {
+  const info = [
+    { label: t('studio.media.metaWidth'), value: `${videoDimensions.value.width}px` },
+    { label: t('studio.media.metaHeight'), value: `${videoDimensions.value.height}px` },
+    { label: t('studio.media.metaType'), value: fileExtension.value },
+    { label: 'Duration', value: formattedDuration.value },
+  ]
+
+  if (props.remoteFile) {
+    info.push({ label: t('studio.media.metaSize'), value: formatBytes(props.remoteFile.size) })
+  }
+
+  return info
+})
+
+const markdownCode = computed(() => {
+  return `<video src="${props.mediaItem.path}" controls />`
+})
+
+const remotePath = computed(() => {
+  if (!props.remoteFile?.path) {
+    return ''
+  }
+  return joinURL(gitProvider.api.getBranchUrl(), props.remoteFile.path)
+})
 </script>
+
+<template>
+  <div class="flex flex-col h-full gap-4 p-4">
+    <div class="flex items-center justify-center rounded-lg border border-default overflow-hidden max-h-[350px] bg-black">
+      <video
+        ref="videoRef"
+        :src="mediaItem.path"
+        class="max-w-full max-h-full"
+        controls
+      >
+        {{ $t('studio.media.videoTagNotSupported') }}
+      </video>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div
+        v-for="info in videoInfo"
+        :key="info.label"
+        class="p-3 rounded-lg bg-default border border-muted"
+      >
+        <p class="text-xs text-muted mb-1">
+          {{ info.label }}
+        </p>
+        <p class="text-sm font-semibold text-highlighted">
+          {{ info.value }}
+        </p>
+      </div>
+    </div>
+
+    <div class="p-3 rounded-lg bg-default border border-muted">
+      <div class="flex items-center gap-1 text-xs text-muted mb-2">
+        <UIcon
+          name="i-lucide-file"
+          class="w-3.5 h-3.5"
+        />
+        <span>{{ $t('studio.media.fileName') }}</span>
+      </div>
+      <p class="text-xs font-mono text-highlighted truncate">
+        {{ fileName }}
+      </p>
+    </div>
+
+    <div class="p-3 rounded-lg bg-default border border-muted relative">
+      <div class="absolute top-3 right-3">
+        <CopyButton :content="mediaItem.path!" />
+      </div>
+      <div class="flex items-center gap-1 text-xs text-muted mb-2">
+        <UIcon
+          name="i-lucide-globe"
+          class="w-3.5 h-3.5"
+        />
+        <span>{{ $t('studio.media.publicPath') }}</span>
+      </div>
+      <p class="text-xs font-mono text-highlighted truncate">
+        {{ mediaItem.path }}
+      </p>
+    </div>
+
+    <div
+      v-if="remoteFile?.path"
+      class="p-3 rounded-lg bg-default border border-muted relative"
+    >
+      <div class="absolute top-3 right-3">
+        <CopyButton :content="remotePath" />
+      </div>
+      <div class="flex items-center gap-1 text-xs text-muted mb-2">
+        <UIcon
+          :name="gitProvider.icon"
+          class="w-3.5 h-3.5"
+        />
+        <span>{{ $t('studio.media.providerPath', { providerName: gitProvider.name }) }}</span>
+      </div>
+      <p class="text-xs font-mono text-highlighted truncate">
+        {{ remoteFile.path }}
+      </p>
+    </div>
+
+    <div class="p-3 rounded-lg bg-default border border-muted relative">
+      <div class="absolute top-3 right-3">
+        <CopyButton :content="markdownCode" />
+      </div>
+      <div class="flex items-center gap-1 text-xs text-muted mb-2">
+        <UIcon
+          name="i-simple-icons:markdown"
+          class="w-3.5 h-3.5"
+        />
+        <span>{{ $t('studio.media.markdown') }}</span>
+      </div>
+      <p class="text-xs font-mono text-highlighted truncate">
+        {{ markdownCode }}
+      </p>
+    </div>
+  </div>
+</template>

src/app/src/locales/bg.json

@@ -102,6 +102,7 @@
       "metaWidth": "Ширина",
       "metaHeight": "Височина",
       "metaType": "Тип",
+      "metaDuration": "Продължителност",
       "metaSize": "Размер",
       "fileName": "Име на файл",
       "publicPath": "Публичен път",

src/app/src/locales/de.json

@@ -102,6 +102,7 @@
       "metaWidth": "Breite",
       "metaHeight": "Höhe",
       "metaType": "Typ",
+      "metaDuration": "Dauer",
       "metaSize": "Größe",
       "fileName": "Dateiname",
       "publicPath": "Öffentlicher Pfad",

src/app/src/locales/en.json

@@ -102,6 +102,7 @@
       "metaWidth": "Width",
       "metaHeight": "Height",
       "metaType": "Type",
+      "metaDuration": "Duration",
       "metaSize": "Size",
       "fileName": "File name",
       "publicPath": "Public path",

src/app/src/locales/es.json

@@ -102,6 +102,7 @@
       "metaWidth": "Ancho",
       "metaHeight": "Alto",
       "metaType": "Tipo",
+      "metaDuration": "Duración",
       "metaSize": "Tamaño",
       "fileName": "Nombre del archivo",
       "publicPath": "Ruta pública",

src/app/src/locales/fa.json

@@ -102,6 +102,7 @@
       "metaWidth": "عرض",
       "metaHeight": "ارتفاع",
       "metaType": "نوع",
+      "metaDuration": "مدت",
       "metaSize": "اندازه",
       "fileName": "نام فایل",
       "publicPath": "مسیر عمومی",

src/app/src/locales/fi.json

@@ -102,6 +102,7 @@
         "metaWidth": "Leveys",
         "metaHeight": "Korkeus",
         "metaType": "Tyyppi",
+      "metaDuration": "Kesto",
         "metaSize": "Koko",
         "fileName": "Tiedostonimi",
         "publicPath": "Julkinen polky",

src/app/src/locales/fr.json

@@ -102,6 +102,7 @@
       "metaWidth": "Largeur",
       "metaHeight": "Hauteur",
       "metaType": "Type",
+      "metaDuration": "Durée",
       "metaSize": "Taille",
       "fileName": "Nom du fichier",
       "publicPath": "Chemin public",

src/app/src/locales/id.json

@@ -102,6 +102,7 @@
       "metaWidth": "Lebar",
       "metaHeight": "Tinggi",
       "metaType": "Tipe",
+      "metaDuration": "Durasi",
       "metaSize": "Ukuran",
       "fileName": "Nama berkas",
       "publicPath": "Path publik",