feat: show live class joining and leaving time in attendance list

frontend/src/components/VideoBlock.vue

@@ -1,9 +1,6 @@
 <template>
 	<div>
-		<div
-			v-if="quizzes.length && !showQuiz && readOnly"
-			class="bg-surface-blue-2 space-y-1 py-3 px-4 rounded-md text-sm text-ink-blue-3 leading-5"
-		>
+		<div v-if="quizzes.length && !showQuiz && readOnly" class="leading-5">
 			{{
 				__('This video contains {0} {1}:').format(
 					quizzes.length,
@@ -12,8 +9,10 @@
 			}}
 
 			<div v-for="(quiz, index) in quizzes" class="pl-3 mt-1">
-				<span> {{ index + 1 }}. {{ quiz.quiz }} </span>
-				{{ __('at {0}').format(formatTimestamp(quiz.time)) }}
+				<span>
+					{{ index + 1 }}. <span class="font-semibold"> {{ quiz.quiz }} </span>
+				</span>
+				{{ __('at {0} minutes').format(formatTimestamp(quiz.time)) }}
 			</div>
 		</div>
 		<div
@@ -118,7 +117,7 @@
 	/>
 </template>
 <script setup>
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, watch, getCurrentInstance } from 'vue'
 import { Pause, Maximize, Volume2, VolumeX } from 'lucide-vue-next'
 import { Button } from 'frappe-ui'
 import { formatSeconds, formatTimestamp } from '@/utils'
@@ -133,9 +132,13 @@ let duration = ref(0)
 let muted = ref(false)
 const showQuizModal = ref(false)
 const showQuiz = ref(false)
+const showQuizLoader = ref(false)
+const quizLoadTimer = ref(0)
 const currentQuiz = ref(null)
 const nextQuiz = ref({})
-
+const app = getCurrentInstance()
+const { $dialog } = app.appContext.config.globalProperties
+console.log($dialog)
 const props = defineProps({
 	file: {
 		type: String,
@@ -175,12 +178,31 @@ const updateCurrentTime = () => {
 				playing.value = false
 				videoRef.value.onTimeupdate = null
 				currentQuiz.value = nextQuiz.value.quiz
-				showQuiz.value = true
+				quizLoadTimer.value = 5
 			}
 		}
 	}, 0)
 }
 
+watch(quizLoadTimer, () => {
+	console.log('watch start')
+	if (quizLoadTimer.value > 0) {
+		setTimeout(() => {
+			quizLoadTimer.value -= 1
+			if (quizLoadTimer.value === 0) {
+				showQuizLoader.value = false
+				showQuiz.value = true
+			} else {
+				$dialog({
+					message: __(
+						'Complete the upcoming quiz to continue watching the video. Quiz will open in {0} seconds.'
+					).format(quizLoadTimer.value),
+				})
+			}
+		}, 1000)
+	}
+})
+
 const resumeVideo = (restart = false) => {
 	showQuiz.value = false
 	currentQuiz.value = null