feat: show quiz in between videos

frontend/components.d.ts

@@ -81,6 +81,7 @@ declare module 'vue' {
     Question: typeof import('./src/components/Modals/Question.vue')['default']
     Quiz: typeof import('./src/components/Quiz.vue')['default']
     QuizBlock: typeof import('./src/components/QuizBlock.vue')['default']
+    QuizInVideo: typeof import('./src/components/Modals/QuizInVideo.vue')['default']
     Rating: typeof import('./src/components/Controls/Rating.vue')['default']
     ReviewModal: typeof import('./src/components/Modals/ReviewModal.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

frontend/src/components/Modals/QuizInVideo.vue

@@ -0,0 +1,167 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title: __('Add quiz to this video'),
+			size: 'xl',
+			actions: [
+				{
+					label: __('Save'),
+					variant: 'solid',
+					onClick({ close }) {
+						addQuizToVideo(close)
+					},
+				},
+			],
+		}"
+	>
+		<template #body-content>
+			<div class="text-base">
+				<div class="flex items-end gap-4">
+					<FormControl
+						:label="__('Time in Video (seconds)')"
+						v-model="quiz.time"
+						type="number"
+						placeholder="Time"
+						class="flex-1"
+					/>
+					<Link
+						v-model="quiz.quiz"
+						:label="__('Quiz')"
+						doctype="LMS Quiz"
+						class="flex-1"
+					/>
+					<Button @click="addQuiz()">
+						<template #prefix>
+							<Plus class="w-4 h-4 stroke-1.5" />
+						</template>
+						{{ __('Add') }}
+					</Button>
+				</div>
+
+				<ListView
+					v-if="quizzes.length"
+					class="mt-10"
+					:columns="columns"
+					:rows="allQuizzes"
+					row-key="name"
+					:options="{
+						showTooltip: false,
+						selectable: false,
+					}"
+				>
+					<ListHeader
+						class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+					>
+						<ListHeaderItem :item="item" v-for="item in columns">
+							<template #prefix="{ item }">
+								<component
+									v-if="item.icon"
+									:is="item.icon"
+									class="h-4 w-4 stroke-1.5 ml-4"
+								/>
+							</template>
+						</ListHeaderItem>
+					</ListHeader>
+
+					<ListRows>
+						<ListRow :row="row" v-for="row in allQuizzes">
+							<template #default="{ column, item }">
+								<ListRowItem :item="row[column.key]" :align="column.align">
+									<div class="leading-5 text-sm">
+										{{ row[column.key] }}
+									</div>
+								</ListRowItem>
+							</template>
+						</ListRow>
+					</ListRows>
+				</ListView>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import {
+	Dialog,
+	Button,
+	FormControl,
+	ListView,
+	ListHeader,
+	ListHeaderItem,
+	ListRows,
+	ListRow,
+	ListRowItem,
+	toast,
+} from 'frappe-ui'
+import { computed, reactive, ref, watch } from 'vue'
+import { Plus } from 'lucide-vue-next'
+import Link from '@/components/Controls/Link.vue'
+
+type Quiz = {
+	time: number
+	quiz: string
+}
+
+const show = defineModel()
+const allQuizzes = ref<Quiz[]>([])
+const quiz = reactive<Quiz>({
+	time: 0,
+	quiz: '',
+})
+
+const props = defineProps({
+	quizzes: {
+		type: Array as () => Quiz[],
+		default: () => [],
+	},
+	saveQuizzes: {
+		type: Function,
+		required: true,
+	},
+	duration: {
+		type: Number,
+		default: 0,
+	},
+})
+
+const addQuizToVideo = (close: () => void) => {
+	props.saveQuizzes(allQuizzes.value)
+	close()
+}
+
+const addQuiz = () => {
+	if (quiz.time > props.duration) {
+		toast.error(__('Time in video exceeds the total duration of the video.'))
+		return
+	}
+	allQuizzes.value.push({
+		time: quiz.time,
+		quiz: quiz.quiz,
+	})
+
+	quiz.time = 0
+	quiz.quiz = ''
+}
+
+watch(
+	() => props.quizzes,
+	(newQuizzes) => {
+		allQuizzes.value = newQuizzes
+	},
+	{ immediate: true }
+)
+
+const columns = computed(() => {
+	return [
+		{
+			key: 'quiz',
+			label: __('Quiz'),
+		},
+		{
+			key: 'time',
+			label: __('Time in Video (seconds)'),
+			align: 'center',
+		},
+	]
+})
+</script>

frontend/src/components/VideoBlock.vue

@@ -1,80 +1,103 @@
 <template>
-	<div ref="videoContainer" class="video-block relative group">
-		<video
-			@timeupdate="updateTime"
-			@ended="videoEnded"
-			@click="togglePlay"
-			oncontextmenu="return false"
-			class="rounded-md border border-gray-100 cursor-pointer"
-			ref="videoRef"
-		>
-			<source :src="fileURL" :type="type" />
-		</video>
-		<div
-			v-if="!playing"
-			class="absolute inset-0 flex items-center justify-center cursor-pointer"
-			@click="playVideo"
-		>
-			<div
-				class="rounded-full p-4 pl-4.5"
-				style="
-					background: radial-gradient(
-						circle,
-						rgba(0, 0, 0, 0.3) 0%,
-						rgba(0, 0, 0, 0.4) 50%
-					);
-				"
+	<div>
+		<div ref="videoContainer" class="video-block relative group">
+			<video
+				@timeupdate="updateTime"
+				@ended="videoEnded"
+				@click="togglePlay"
+				oncontextmenu="return false"
+				class="rounded-md border border-gray-100 cursor-pointer"
+				ref="videoRef"
 			>
-				<Play />
+				<source :src="fileURL" :type="type" />
+			</video>
+			<div
+				v-if="!playing"
+				class="absolute inset-0 flex items-center justify-center cursor-pointer"
+				@click="playVideo"
+			>
+				<div
+					class="rounded-full p-4 pl-4.5"
+					style="
+						background: radial-gradient(
+							circle,
+							rgba(0, 0, 0, 0.3) 0%,
+							rgba(0, 0, 0, 0.4) 50%
+						);
+					"
+				>
+					<Play />
+				</div>
+			</div>
+			<div
+				class="flex items-center space-x-2 py-2 px-1 text-ink-white bg-gradient-to-b from-transparent to-black/75 absolute bottom-0 left-0 right-0 mx-auto rounded-md"
+				:class="{
+					'invisible group-hover:visible': playing,
+				}"
+			>
+				<Button variant="ghost" class="hover:bg-transparent">
+					<template #icon>
+						<Play
+							v-if="!playing"
+							@click="playVideo"
+							class="size-4 text-ink-gray-9"
+						/>
+						<Pause v-else @click="pauseVideo" class="size-5 text-ink-white" />
+					</template>
+				</Button>
+				<input
+					type="range"
+					min="0"
+					:max="duration"
+					step="0.1"
+					v-model="currentTime"
+					@input="changeCurrentTime"
+					class="duration-slider w-full h-1"
+				/>
+				<span class="text-sm font-medium">
+					{{ formatSeconds(currentTime) }} / {{ formatSeconds(duration) }}
+				</span>
+				<Button
+					variant="ghost"
+					@click="toggleMute"
+					class="hover:bg-transparent"
+				>
+					<template #icon>
+						<Volume2 v-if="!muted" class="size-5 text-ink-white" />
+						<VolumeX v-else class="size-5 text-ink-white" />
+					</template>
+				</Button>
+				<Button
+					variant="ghost"
+					@click="toggleFullscreen"
+					class="hover:bg-transparent"
+				>
+					<template #icon>
+						<Maximize class="size-5 text-ink-white" />
+					</template>
+				</Button>
 			</div>
 		</div>
-		<div
-			class="flex items-center space-x-2 py-2 px-1 text-ink-white bg-gradient-to-b from-transparent to-black/75 absolute bottom-0 left-0 right-0 mx-auto rounded-md"
-			:class="{
-				'invisible group-hover:visible': playing,
-			}"
-		>
-			<Button variant="ghost">
-				<template #icon>
-					<Play
-						v-if="!playing"
-						@click="playVideo"
-						class="size-4 text-ink-gray-9"
-					/>
-					<Pause v-else @click="pauseVideo" class="size-5 text-ink-white" />
-				</template>
-			</Button>
-			<Button variant="ghost" @click="toggleMute">
-				<template #icon>
-					<Volume2 v-if="!muted" class="size-5 text-ink-white" />
-					<VolumeX v-else class="size-5 text-ink-white" />
-				</template>
-			</Button>
-			<input
-				type="range"
-				min="0"
-				:max="duration"
-				step="0.1"
-				v-model="currentTime"
-				@input="changeCurrentTime"
-				class="duration-slider w-full h-1"
-			/>
-			<span class="text-sm font-semibold">
-				{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
-			</span>
-			<Button variant="ghost" @click="toggleFullscreen">
-				<template #icon>
-					<Maximize class="size-5 text-ink-white" />
-				</template>
+		<div v-if="!readOnly" @click="showQuizModal = true">
+			<Button>
+				{{ __('Add Quiz to Video') }}
 			</Button>
 		</div>
 	</div>
+	<QuizInVideo
+		v-model="showQuizModal"
+		:quizzes="quizzes"
+		:saveQuizzes="saveQuizzes"
+		:duration="duration"
+	/>
 </template>
 <script setup>
 import { ref, onMounted, computed } from 'vue'
 import { Pause, Maximize, Volume2, VolumeX } from 'lucide-vue-next'
 import { Button } from 'frappe-ui'
+import { formatSeconds } from '@/utils'
 import Play from '@/components/Icons/Play.vue'
+import QuizInVideo from '@/components/Modals/QuizInVideo.vue'
 
 const videoRef = ref(null)
 const videoContainer = ref(null)
@@ -82,6 +105,7 @@ let playing = ref(false)
 let currentTime = ref(0)
 let duration = ref(0)
 let muted = ref(false)
+const showQuizModal = ref(false)
 
 const props = defineProps({
 	file: {
@@ -92,6 +116,17 @@ const props = defineProps({
 		type: String,
 		default: 'video/mp4',
 	},
+	readOnly: {
+		type: String,
+		default: true,
+	},
+	quizzes: {
+		type: Array,
+		default: () => [],
+	},
+	saveQuizzes: {
+		type: Function,
+	},
 })
 
 onMounted(() => {
@@ -151,12 +186,6 @@ const changeCurrentTime = () => {
 	videoRef.value.currentTime = currentTime.value
 }
 
-const formatTime = (time) => {
-	const minutes = Math.floor(time / 60)
-	const seconds = Math.floor(time % 60)
-	return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
-}
-
 const toggleFullscreen = () => {
 	if (document.fullscreenElement) {
 		document.exitFullscreen()

frontend/src/utils/index.js

@@ -28,20 +28,21 @@ export function timeAgo(date) {
 export function formatTime(timeString) {
 	if (!timeString) return ''
 	const [hour, minute] = timeString.split(':').map(Number)
-
-	// Create a Date object with dummy values for day, month, and year
 	const dummyDate = new Date(0, 0, 0, hour, minute)
-
-	// Use Intl.DateTimeFormat to format the time in 12-hour format
 	const formattedTime = new Intl.DateTimeFormat('en-US', {
 		hour: 'numeric',
 		minute: 'numeric',
 		hour12: true,
 	}).format(dummyDate)
-
 	return formattedTime
 }
 
+export const formatSeconds = (time) => {
+	const minutes = Math.floor(time / 60)
+	const seconds = Math.floor(time % 60)
+	return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
+}
+
 export function formatNumber(number) {
 	return number.toLocaleString('en-IN', {
 		maximumFractionDigits: 0,

frontend/src/utils/upload.js

@@ -46,7 +46,13 @@ export class Upload {
 		if (this.isVideo(file.file_type)) {
 			const app = createApp(VideoBlock, {
 				file: file.file_url,
+				readOnly: this.readOnly,
+				saveQuizzes: (quizzes) => {
+					if (this.readOnly) return
+					this.data.quizzes = quizzes
+				},
 			})
+			app.use(translationPlugin)
 			app.mount(this.wrapper)
 			return
 		} else if (this.isAudio(file.file_type)) {
@@ -93,6 +99,7 @@ export class Upload {
 		return {
 			file_url: this.data.file_url,
 			file_type: this.data.file_type,
+			quizzes: this.data.quizzes || [],
 		}
 	}
 

lms/patches/v2_0/move_zoom_settings.py

@@ -7,6 +7,10 @@ def execute():
 
 def create_settings():
 	current_settings = frappe.get_single("Zoom Settings")
+
+	if not current_settings.enable:
+		return
+
 	member = current_settings.owner
 	member_name = frappe.get_value("User", member, "full_name")