feat: show quiz in between videos
This commit is contained in:
Jannat Patel
167
frontend/src/components/Modals/QuizInVideo.vue
Normal file
167
frontend/src/components/Modals/QuizInVideo.vue
Normal file
@@ -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>
|
||||
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user