POC: Unified Media Engine (Audio/Video support)

frontend/src/components/Media/CommonsMedia.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="commons-media-container" :style="{ width: containerWidth }">
+
+    <!-- Error Fallback -->
+    <template v-if="hasError">
+      <div class="media-error-state">
+        <i class="fa fa-exclamation-triangle"></i>
+        <span>{{ $t('montage-media-load-error', 'Unable to load media.') }}</span>
+      </div>
+    </template>
+
+    <!-- Video Handler -->
+    <template v-else-if="isMediaVideo">
+
+      <video
+        @error="onMediaError"
+        ref="mediaElement"
+        controls
+        preload="metadata"
+        :poster="mediaUrl"
+        class="commons-media-content"
+        @error="onMediaError"
+      >
+        <source :src="fileUrl" :type="mimeType" />
+        <source v-if="majorMime === 'video' && minorMime === 'webm'" :src="fileUrl" type="video/webm" />
+        <source v-if="majorMime === 'video' && minorMime === 'mp4'" :src="fileUrl" type="video/mp4" />
+        {{ $t('montage-media-video-not-supported', 'Your browser does not support the video tag.') }}
+      </video>
+    </template>
+
+    <!-- Audio Handler -->
+    <template v-else-if="isMediaAudio">
+      <div class="audio-wrapper">
+        <audio
+          @error="onMediaError"
+          ref="mediaElement"
+          controls
+          class="commons-media-audio"
+        >
+          <source :src="fileUrl" :type="mimeType" />
+          {{ $t('montage-media-audio-not-supported', 'Your browser does not support the audio element.') }}
+        </audio>
+        <div v-if="showAudioThumbnail" class="audio-thumbnail">
+           <img :src="mediaUrl" :alt="filename" class="audio-preview-icon" />
+        </div>
+      </div>
+    </template>
+
+    <!-- Fallback Standard Image Handler -->
+    <template v-else>
+      <img
+        :src="mediaUrl"
+        :alt="filename"
+        class="commons-media-content"
+        @error="onMediaError"
+        :class="{ 'pixelated': !isHighRes }"
+        @click="emitClick"
+      />
+    </template>
+
+    <div v-if="showMetadata" class="media-metadata-overlay">
+      <span class="media-badge">{{ majorMime.toUpperCase() }}</span>
+      <span v-if="duration" class="media-duration">{{ formatDuration(duration) }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const hasError = ref(false)
+
+const onMediaError = () => {
+  hasError.value = true
+}
+
+const props = defineProps({
+  mediaUrl: {
+    type: String,
+    required: true
+  },
+  fileUrl: {
+    type: String,
+    default: ''
+  },
+  filename: {
+    type: String,
+    default: 'Wikimedia Commons Media'
+  },
+  majorMime: {
+    type: String,
+    default: 'image'
+  },
+  minorMime: {
+    type: String,
+    default: 'jpeg'
+  },
+  duration: {
+    type: Number,
+    default: null
+  },
+  width: {
+    type: [Number, String],
+    default: '100%'
+  },
+  showMetadata: {
+    type: Boolean,
+    default: false
+  },
+  showAudioThumbnail: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['media-click'])
+
+const isMediaVideo = computed(() => {
+  return props.majorMime.toLowerCase() === 'video'
+})
+
+const isMediaAudio = computed(() => {
+  return props.majorMime.toLowerCase() === 'audio'
+})
+
+const mimeType = computed(() => {
+  return `${props.majorMime}/${props.minorMime}`
+})
+
+const containerWidth = computed(() => {
+  return typeof props.width === 'number' ? `${props.width}px` : props.width
+})
+
+const isHighRes = computed(() => {
+  // Check if it's a heavily scaled thumbnail
+  return !props.mediaUrl.includes('120px-')
+})
+
+const formatDuration = (seconds) => {
+  if (!seconds) return ''
+  const m = Math.floor(seconds / 60)
+  const s = Math.floor(seconds % 60)
+  return `${m}:${s.toString().padStart(2, '0')}`
+}
+
+const emitClick = () => {
+  emit('media-click', { url: props.mediaUrl, type: props.majorMime })
+}
+</script>
+
+<style scoped>
+.commons-media-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  border-radius: 4px;
+  background-color: #f8f9fa;
+}
+
+.commons-media-content {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.pixelated {
+  image-rendering: pixelated;
+}
+
+.audio-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 16px;
+}
+
+.commons-media-audio {
+  width: 100%;
+  margin-top: 8px;
+}
+
+.audio-preview-icon {
+  max-height: 150px;
+  opacity: 0.8;
+}
+
+.media-metadata-overlay {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  display: flex;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.media-badge, .media-duration {
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.media-error-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2em;
+  color: #72777d;
+  background: #eaecf0;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.media-error-state i {
+  font-size: 2em;
+  margin-bottom: 8px;
+}
+
+</style>

frontend/src/components/__tests__/CommonsMedia.spec.js

@@ -0,0 +1,65 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import CommonsMedia from '@/components/Media/CommonsMedia.vue'
+
+describe('CommonsMedia.vue (GSoC Unified Media POC)', () => {
+  it('renders a standard image tag for image/jpeg combinations', () => {
+    const wrapper = mount(CommonsMedia, {
+      props: {
+        mediaUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/test.jpg',
+        fileUrl: 'https://upload.wikimedia.org/wikipedia/commons/test.jpg',
+        majorMime: 'image',
+        minorMime: 'jpeg'
+      },
+      global: {
+        mocks: { $t: (msg) => msg }
+      }
+    })
+
+    const img = wrapper.find('img')
+    expect(img.exists()).toBe(true)
+    const video = wrapper.find('video')
+    expect(video.exists()).toBe(false)
+  })
+
+  it('drops into HTML5 video bindings when confronting video/webm sources natively', () => {
+    const wrapper = mount(CommonsMedia, {
+      props: {
+        mediaUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/poster.jpg',
+        fileUrl: 'https://upload.wikimedia.org/wikipedia/commons/test.webm',
+        majorMime: 'video',
+        minorMime: 'webm'
+      },
+      global: {
+        mocks: { $t: (msg) => msg }
+      }
+    })
+
+    const video = wrapper.find('video')
+    expect(video.exists()).toBe(true)
+    const source = wrapper.find('source')
+    expect(source.exists()).toBe(true)
+    expect(source.attributes('type')).toBe('video/webm')
+    expect(video.attributes('poster')).toBe('https://upload.wikimedia.org/wikipedia/commons/thumb/poster.jpg')
+  })
+
+  it('synthesizes audio environments for audio/ogg contexts securely', () => {
+    const wrapper = mount(CommonsMedia, {
+      props: {
+        mediaUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/preview.jpg',
+        fileUrl: 'https://upload.wikimedia.org/wikipedia/commons/sound.ogg',
+        majorMime: 'audio',
+        minorMime: 'ogg',
+        showAudioThumbnail: true
+      },
+      global: {
+        mocks: { $t: (msg) => msg }
+      }
+    })
+
+    const audio = wrapper.find('audio')
+    expect(audio.exists()).toBe(true)
+    const source = wrapper.find('source')
+    expect(source.attributes('type')).toBe('audio/ogg')
+  })
+})