fix: notification on quiz update and mention

frontend/src/components/Controls/Uploader.vue

@@ -2,18 +2,21 @@
 	<div class="mb-4">
 		<div v-if="label" class="text-xs text-ink-gray-5 mb-2">
 			{{ __(label) }}
-			<span class="text-ink-red-3">*</span>
+			<span v-if="required" class="text-ink-red-3">*</span>
 		</div>
 		<FileUploader
 			v-if="!modelValue"
-			:fileTypes="['image/*']"
-			:validateFile="validateFile"
-			@success="(file: File) => saveImage(file)"
+			:fileTypes="[fileType]"
+			:validateFile="(file: File) => validateFile(file, true, type)"
+			@success="(file: File) => saveFile(file)"
 		>
 			<template v-slot="{ file, progress, uploading, openFileSelector }">
 				<div class="flex items-center">
 					<div class="border rounded-md w-fit py-7 px-20">
-						<Image class="size-5 stroke-1 text-ink-gray-7" />
+						<component
+							:is="props.type === 'image' ? Image : Video"
+							class="size-5 stroke-1 text-ink-gray-7"
+						/>
 					</div>
 					<div class="ml-4">
 						<Button @click="openFileSelector">
@@ -28,7 +31,15 @@
 		</FileUploader>
 		<div v-else class="mb-4">
 			<div class="flex items-center">
-				<img :src="modelValue" class="border rounded-md w-44 h-auto" />
+				<img
+					v-if="type == 'image'"
+					:src="modelValue"
+					class="border rounded-md w-44 h-auto"
+				/>
+				<video v-else controls class="border rounded-md w-44 h-auto">
+					<source :src="modelValue" />
+					{{ __('Your browser does not support the video tag.') }}
+				</video>
 				<div class="ml-4">
 					<Button @click="removeImage()">
 						{{ __('Remove') }}
@@ -47,7 +58,8 @@
 <script setup lang="ts">
 import { validateFile } from '@/utils'
 import { Button, FileUploader } from 'frappe-ui'
-import { Image } from 'lucide-vue-next'
+import { Image, Video } from 'lucide-vue-next'
+import { computed } from 'vue'
 
 const emit = defineEmits<{
 	(e: 'update:modelValue', value: string): void
@@ -58,15 +70,23 @@ const props = withDefaults(
 		modelValue: string
 		label?: string
 		description?: string
+		type: 'image' | 'video'
+		required?: boolean
 	}>(),
 	{
 		modelValue: '',
 		label: '',
 		description: '',
+		type: 'image',
+		required: true,
 	}
 )
 
-const saveImage = (file: any) => {
+const fileType = computed(() => {
+	return props.type === 'image' ? 'image/*' : 'video/*'
+})
+
+const saveFile = (file: any) => {
 	emit('update:modelValue', file.file_url)
 }