Concept: Unified Media Engine for Video/Audio (PoC)

frontend/src/components/CommonsMedia.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="commons-media-container" :style="{ width: width + 'px', maxWidth: '100%' }">
+    <video
+      v-if="mediaType === 'video'"
+      :src="mediaUrl"
+      controls
+      :class="imageClass"
+      :style="{ width: '100%', maxHeight: '80vh' }"
+      @loadeddata="handleLoad"
+      @error="handleError"
+    >
+      Your browser does not support the video tag.
+    </video>
+
+    <audio
+      v-else-if="mediaType === 'audio'"
+      :src="mediaUrl"
+      controls
+      :class="imageClass"
+      :style="{ width: '100%' }"
+      @loadeddata="handleLoad"
+      @error="handleError"
+    >
+      Your browser does not support the audio tag.
+    </audio>
+
+    <CommonsImage
+      v-else
+      :image="image"
+      :width="width"
+      :alt="alt"
+      :image-class="imageClass"
+      @load="handleLoad"
+      @error="handleError"
+      v-bind="$attrs"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import CommonsImage from './CommonsImage.vue'
+
+const props = defineProps({
+  image: {
+    type: [Object, String],
+    required: true
+  },
+  width: {
+    type: Number,
+    default: 1280
+  },
+  alt: {
+    type: String,
+    default: ''
+  },
+  imageClass: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['load', 'error'])
+
+const imageName = computed(() => {
+  return props.image?.entry?.name || props.image?.name || props.image
+})
+
+const encodedName = computed(() => {
+  return encodeURIComponent(imageName.value)
+})
+
+const mediaType = computed(() => {
+  if (!imageName.value) return 'image'
+  const name = imageName.value.toLowerCase()
+  if (name.endsWith('.mp4') || name.endsWith('.webm') || name.endsWith('.ogv')) {
+    return 'video'
+  }
+  if (name.endsWith('.mp3') || name.endsWith('.ogg') || name.endsWith('.wav') || name.endsWith('.flac') || name.endsWith('.oga')) {
+    return 'audio'
+  }
+  return 'image'
+})
+
+const mediaUrl = computed(() => {
+  return `//commons.wikimedia.org/w/index.php?title=Special:Redirect/file/${encodedName.value}`
+})
+
+const handleLoad = () => {
+  emit('load')
+}
+
+const handleError = () => {
+  emit('error')
+}
+</script>
+
+<style scoped>
+.commons-media-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+}
+</style>

frontend/src/components/Round/RoundNew.vue

@@ -312,19 +312,38 @@ const cancelRound = () => {
 
 const submitRound = () => {
   if (!formData.value.deadline_date) {
-    alertService.error({
-      message: $t('montage-required-voting-deadline')
-    })
+    alertService.error({ message: $t('montage-required-voting-deadline') })
     return
   }
 
-  if (!formData.value.name || (formData.value.quorum > 0 && formData.value.jurors.length === 0)) {
-    alertService.error({
-      message: $t('montage-required-fill-inputs')
-    })
+  if (!formData.value.name || formData.value.name.trim() === '') {
+    alertService.error({ message: $t('montage-required-fill-inputs') })
+    return
+  }
+
+  if (formData.value.quorum <= 0 || (formData.value.quorum > 0 && formData.value.jurors.length === 0)) {
+    alertService.error({ message: $t('montage-error-invalid-quorum') })
     return
   }
 
+  if (roundIndex === 0) {
+    // Validate Import Source for first round
+    if (selectedImportSource.value === 'category' && !importSourceValue.value.category) {
+      alertService.error({ message: $t('montage-error-missing-category') })
+      return
+    }
+    if (selectedImportSource.value === 'csv' && !importSourceValue.value.csv_url) {
+      alertService.error({ message: $t('montage-error-missing-csv') })
+      return
+    }
+  } else {
+    // Validate Thresholds for subsequent rounds
+    if (!formData.value.threshold) {
+      alertService.error({ message: $t('montage-error-missing-threshold') })
+      return
+    }
+  }
+
   // Check if the round is the first round
   if (roundIndex === 0) {
     const payload = {

frontend/src/components/Vote/ImageReviewDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="vote-image-review-dialog">
     <div class="vote-image-review-dialog-image-container">
-      <CommonsImage :image="image" :width="800" image-class="vote-image-review-dialog-image" />
+      <CommonsMedia :image="image" :width="800" image-class="vote-image-review-dialog-image" />
     </div>
     <div class="vote-image-review-dialog-review-section">
       <h3>{{ image.name.split('_').join(' ') }}</h3>
@@ -55,7 +55,7 @@ import { defineProps, defineExpose, ref, computed } from 'vue'
 // import { useI18n } from 'vue-i18n';
 import { CdxTextArea, CdxButton } from '@wikimedia/codex'
 import { getCommonsImageUrl } from '@/utils'
-import CommonsImage from '@/components/CommonsImage.vue'
+import CommonsMedia from '@/components/CommonsMedia.vue'
 
 import ImageIcon from 'vue-material-design-icons/Image.vue'
 import LinkIcon from 'vue-material-design-icons/Link.vue'