feat: help guide videos

frontend/src/components/LessonHelp.vue

@@ -0,0 +1,74 @@
+<template>
+	<div class="space-y-5">
+		<div class="space-y-2">
+			<div
+				class="flex items-center text-sm font-medium space-x-2 cursor-pointer"
+				@click="openHelpDialog('quiz')"
+			>
+				<span>
+					{{ __('How to add a Quiz?') }}
+				</span>
+				<Info class="w-3 h-3 text-gray-700" />
+			</div>
+			<div class="text-xs text-gray-600 mb-1 leading-5">
+				{{
+					__(
+						'Click on the add icon in the editor and select Quiz from the menu. It opens up a dialog, where you can either select a quiz from the list or create a new quiz. When you select the Create New option it redirects you to the quiz creation page.'
+					)
+				}}
+			</div>
+		</div>
+
+		<div class="space-y-2">
+			<div
+				class="flex items-center text-sm font-medium space-x-2 cursor-pointer"
+				@click="openHelpDialog('upload')"
+			>
+				<span class="leading-5">
+					{{ __('How to upload content from your system?') }}
+				</span>
+				<Info class="w-3 h-3 text-gray-700" />
+			</div>
+			<div class="text-xs text-gray-600 mb-1 leading-5">
+				{{
+					__(
+						'To upload Image, Video, Audio or PDF from your system, click on the add icon and select upload from the menu. Then choose the file you want to add to the lesson and it gets added to your lesson.'
+					)
+				}}
+			</div>
+		</div>
+
+		<div class="space-y-2">
+			<div
+				class="flex items-center text-sm font-medium space-x-2 cursor-pointer"
+				@click="openHelpDialog('youtube')"
+			>
+				<span>
+					{{ __('How to add a YouTube Video?') }}
+				</span>
+				<Info class="w-3 h-3 text-gray-700" />
+			</div>
+			<div class="text-xs text-gray-600 mb-1 leading-5">
+				{{
+					__(
+						'Copy the URL of the video from YouTube and paste it in the editor.'
+					)
+				}}
+			</div>
+		</div>
+	</div>
+	<ExplanationVideos v-model="showExplanation" :type="type" />
+</template>
+<script setup>
+import { Info } from 'lucide-vue-next'
+import { ref } from 'vue'
+import ExplanationVideos from '@/components/Modals/ExplanationVideos.vue'
+
+const showExplanation = ref(false)
+const type = ref(null)
+
+const openHelpDialog = (contentType) => {
+	type.value = contentType
+	showExplanation.value = true
+}
+</script>

frontend/src/components/LessonPlugins.vue

@@ -1,175 +0,0 @@
-<template>
-	<div class="text-lg font-semibold">
-		{{ __('Components') }}
-	</div>
-	<div class="mt-5 space-y-4">
-		<Tooltip
-			:text="
-				__(
-					'Content such as quiz, video and image will be added in the editor you select.'
-				)
-			"
-			placement="bottom"
-		>
-			<div class="">
-				<div class="text-xs text-gray-600 mb-1">
-					{{ __('Select an Editor') }}
-				</div>
-				<Select v-model="currentEditor" :options="getEditorOptions()" />
-			</div>
-		</Tooltip>
-		<div class="flex">
-			<Link
-				:value="quiz"
-				class="flex-1"
-				doctype="LMS Quiz"
-				:label="__('Add an existing quiz')"
-				@change="(option) => addQuiz(option)"
-			/>
-			<router-link
-				:to="{
-					name: 'QuizCreation',
-					params: {
-						quizID: 'new',
-					},
-				}"
-				class="self-end ml-2"
-			>
-				<Button>
-					<template #icon>
-						<Plus class="h-4 w-4 stroke-1.5" />
-					</template>
-				</Button>
-			</router-link>
-		</div>
-		<div class="">
-			<div class="text-xs text-gray-600 mb-1">
-				{{ __('Add an image, video, pdf or audio.') }}
-			</div>
-			<div class="flex">
-				<FileUploader
-					v-if="!file"
-					:fileTypes="['image/*', 'video/*', 'audio/*', '.pdf']"
-					:validateFile="validateFile"
-					@success="(data) => addFile(data)"
-				>
-					<template v-slot="{ file, progress, uploading, openFileSelector }">
-						<div class="">
-							<Button @click="openFileSelector" :loading="uploading">
-								{{
-									uploading
-										? __('Uploading {0}%').format(progress)
-										: __('Upload a File')
-								}}
-							</Button>
-						</div>
-					</template>
-				</FileUploader>
-				<div v-else class="">
-					<div class="flex items-center">
-						<div class="border rounded-md p-2 mr-2">
-							<FileText class="h-4 w-4 stroke-1.5 text-gray-700" />
-						</div>
-						<div class="flex flex-col">
-							<span class="text-xs">
-								{{ file.file_name }}
-							</span>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="">
-			<div class="text-xs text-gray-600 mb-1">
-				{{
-					__(
-						'To add a YouTube video, paste the URL of the video in the editor.'
-					)
-				}}
-			</div>
-			<YouTubeExplanation>
-				<template v-slot="{ togglePopover }">
-					<div
-						@click="togglePopover()"
-						class="flex items-center text-sm underline cursor-pointer"
-					>
-						<Info class="w-3 h-3 stroke-1.5 text-gray-700 mr-1" />
-						{{ __('Learn More') }}
-					</div>
-				</template>
-			</YouTubeExplanation>
-		</div>
-	</div>
-</template>
-<script setup>
-import Link from '@/components/Controls/Link.vue'
-import { FileUploader, Button, Select, Tooltip } from 'frappe-ui'
-import { Plus, FileText, Info } from 'lucide-vue-next'
-import { ref, watch } from 'vue'
-import YouTubeExplanation from '@/components/Modals/YouTubeExplanation.vue'
-
-const quiz = ref(null)
-const file = ref(null)
-const lessonEditor = ref(null)
-const instructorEditor = ref(null)
-const currentEditor = ref('Lesson Content')
-
-const props = defineProps({
-	editor: {
-		required: true,
-	},
-	notesEditor: {
-		required: true,
-	},
-})
-
-const addQuiz = (value) => {
-	getCurrentEditor().caret.setToLastBlock('end', 0)
-	if (value) {
-		getCurrentEditor().blocks.insert('quiz', {
-			quiz: value,
-		})
-		quiz.value = null
-	}
-}
-
-const addFile = (data) => {
-	console.log(data)
-	getCurrentEditor().caret.setToLastBlock('end', 0)
-	getCurrentEditor().blocks.insert('upload', data)
-}
-
-const validateFile = (file) => {
-	let extension = file.name.split('.').pop().toLowerCase()
-	if (!['jpg', 'jpeg', 'png', 'mp4', 'mov', 'mp3', 'pdf'].includes(extension)) {
-		return 'Only image and video files are allowed.'
-	}
-}
-
-const getEditorOptions = () => {
-	return [
-		{
-			label: 'Lesson Content',
-			value: 'Lesson Content',
-		},
-		{
-			label: 'Instructor Content',
-			value: 'Instructor Content',
-		},
-	]
-}
-
-const getCurrentEditor = () => {
-	return currentEditor.value == 'Lesson Content'
-		? lessonEditor.value
-		: instructorEditor.value
-}
-
-watch(
-	() => [props.editor, props.notesEditor],
-	([newEditor, newNotesEditor], [oldEditor, oldNotesEditor]) => {
-		lessonEditor.value = newEditor
-		instructorEditor.value = newNotesEditor
-	}
-)
-</script>

frontend/src/components/Modals/ExplanationVideos.vue

@@ -0,0 +1,34 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			size: '4xl',
+		}"
+	>
+		<template #body>
+			<div class="p-4">
+				<VideoBlock :file="file" />
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import { Dialog } from 'frappe-ui'
+import { computed } from 'vue'
+import VideoBlock from '@/components/VideoBlock.vue'
+
+const show = defineModel()
+
+const props = defineProps({
+	type: {
+		type: [String, null],
+		required: true,
+	},
+})
+
+const file = computed(() => {
+	if (props.type == 'youtube') return '/Youtube.mp4'
+	if (props.type == 'quiz') return '/Quiz.mp4'
+	if (props.type == 'upload') return '/Upload.mp4'
+})
+</script>

frontend/src/components/Modals/YouTubeExplanation.vue

@@ -1,31 +0,0 @@
-<template>
-	<Popover transition="default">
-		<template #target="{ isOpen, togglePopover }" class="flex w-full">
-			<slot v-bind="{ isOpen, togglePopover }"></slot>
-		</template>
-		<template #body>
-			<div
-				class="absolute left-0 mt-3 w-[35rem] max-w-lg -translate-x-1/2 transform rounded-lg bg-white px-4 sm:px-0 lg:max-w-3xl"
-			>
-				<div
-					class="overflow-hidden rounded-lg p-3 shadow-2xl ring-1 ring-black ring-opacity-5"
-				>
-					<video
-						controls
-						autoplay
-						muted
-						width="100%"
-						controlsList="nodownload"
-						oncontextmenu="return false;"
-						class="rounded-sm"
-					>
-						<source src="/Youtube.mov" type="video/mp4" />
-					</video>
-				</div>
-			</div>
-		</template>
-	</Popover>
-</template>
-<script setup>
-import { Popover } from 'frappe-ui'
-</script>

frontend/src/components/QuizPlugin.vue

@@ -0,0 +1,58 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			size: 'xl',
+		}"
+	>
+		<template #body>
+			<div class="p-5 space-y-4">
+				<div class="text-lg font-semibold">
+					{{ __('Add a quiz to your lesson') }}
+				</div>
+				<div>
+					<Link
+						v-model="quiz"
+						doctype="LMS Quiz"
+						:label="__('Select a quiz')"
+						:onCreate="(value, close) => redirectToQuizForm()"
+					/>
+				</div>
+				<div class="flex justify-end space-x-2">
+					<Button variant="solid" @click="addQuiz()">
+						{{ __('Save') }}
+					</Button>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import { Dialog, Button } from 'frappe-ui'
+import { onMounted, ref, nextTick } from 'vue'
+import Link from '@/components/Controls/Link.vue'
+
+const show = ref(false)
+const quiz = ref(null)
+
+const props = defineProps({
+	onQuizAddition: {
+		type: Function,
+		required: true,
+	},
+})
+
+onMounted(async () => {
+	await nextTick()
+	show.value = true
+})
+
+const addQuiz = () => {
+	props.onQuizAddition(quiz.value)
+	show.value = false
+}
+
+const redirectToQuizForm = () => {
+	window.open('/lms/quizzes/new', '_blank')
+}
+</script>

frontend/src/components/UploadPlugin.vue

@@ -15,10 +15,6 @@ const fileUploader = ref(null)
 const emit = defineEmits(['fileUploaded'])
 
 const props = defineProps({
-	wrapper: {
-		type: Object,
-		required: true,
-	},
 	onFileUploaded: {
 		type: Function,
 		required: true,

frontend/src/components/VideoBlock.vue

@@ -4,6 +4,7 @@
 			@timeupdate="updateTime"
 			@ended="videoEnded"
 			class="rounded-lg border border-gray-100"
+			ref="videoRef"
 		>
 			<source :src="fileURL" :type="type" />
 		</video>
@@ -71,7 +72,6 @@ const props = defineProps({
 
 onMounted(() => {
 	setTimeout(() => {
-		videoRef.value = document.querySelector('video')
 		videoRef.value.onloadedmetadata = () => {
 			duration.value = videoRef.value.duration
 		}

frontend/src/pages/Lesson.vue

@@ -120,7 +120,7 @@
 				</div>
 				<div
 					v-if="
-						lesson.data.instructor_content?.blocks?.length &&
+						JSON.parse(lesson.data.instructor_content)?.blocks?.length > 1 &&
 						allowInstructorContent()
 					"
 					class="bg-gray-100 p-3 rounded-md mt-6"
@@ -244,7 +244,7 @@ const lesson = createResource({
 	onSuccess(data) {
 		lessonProgress.value = data.membership?.progress
 		if (data.content) editor.value = renderEditor('editor', data.content)
-		if (data.instructor_content?.blocks?.length)
+		if (JSON.parse(data.instructor_content)?.blocks?.length)
 			instructorEditor.value = renderEditor(
 				'instructor-content',
 				data.instructor_content
@@ -448,6 +448,10 @@ updateDocumentTitle(pageMeta)
 	max-width: unset;
 }
 
+.codex-editor__redactor {
+	padding-bottom: 0px !important;
+}
+
 .codeBoxHolder {
 	display: flex;
 	flex-direction: column;

frontend/src/pages/LessonForm.vue

@@ -62,7 +62,7 @@
 			</div>
 			<div class="">
 				<div class="sticky top-0 p-5">
-					<LessonPlugins :editor="editor" :notesEditor="instructorEditor" />
+					<LessonHelp />
 				</div>
 			</div>
 		</div>
@@ -79,7 +79,7 @@ import {
 	onBeforeUnmount,
 } from 'vue'
 import EditorJS from '@editorjs/editorjs'
-import LessonPlugins from '@/components/LessonPlugins.vue'
+import LessonHelp from '@/components/LessonHelp.vue'
 import { ChevronRight } from 'lucide-vue-next'
 import { updateDocumentTitle, createToast, getEditorTools } from '@/utils'
 import { capture } from '@/telemetry'
@@ -473,6 +473,10 @@ updateDocumentTitle(pageMeta)
 	max-width: none;
 }
 
+.codex-editor--narrow .ce-toolbar__actions {
+	right: 100%;
+}
+
 .ce-toolbar__content {
 	max-width: none;
 }

frontend/src/utils/quiz.js

@@ -1,7 +1,9 @@
 import QuizBlock from '@/components/QuizBlock.vue'
-import { createApp } from 'vue'
+import QuizPlugin from '@/components/QuizPlugin.vue'
+import { createApp, h } from 'vue'
 import { usersStore } from '../stores/user'
 import translationPlugin from '../translation'
+import { CircleHelp } from 'lucide-vue-next'
 
 export class Quiz {
 	constructor({ data, api, readOnly }) {
@@ -9,17 +11,31 @@ export class Quiz {
 		this.readOnly = readOnly
 	}
 
+	static get toolbox() {
+		const app = createApp({
+			render: () =>
+				h(CircleHelp, { size: 18, strokeWidth: 1.5, color: 'black' }),
+		})
+
+		const div = document.createElement('div')
+		app.mount(div)
+
+		return {
+			title: __('Quiz'),
+			icon: div.innerHTML,
+		}
+	}
+
 	static get isReadOnlySupported() {
 		return true
 	}
 
 	render() {
 		this.wrapper = document.createElement('div')
-		if (this.data) {
-			let renderedQuiz = this.renderQuiz(this.data.quiz)
-			if (!this.readOnly) {
-				this.wrapper.innerHTML = renderedQuiz
-			}
+		if (Object.keys(this.data).length) {
+			this.renderQuiz(this.data.quiz)
+		} else {
+			this.renderQuizModal()
 		}
 		return this.wrapper
 	}
@@ -27,7 +43,7 @@ export class Quiz {
 	renderQuiz(quiz) {
 		if (this.readOnly) {
 			const app = createApp(QuizBlock, {
-				quiz: quiz, // Pass quiz content as prop
+				quiz: quiz,
 			})
 			app.use(translationPlugin)
 			const { userResource } = usersStore()
@@ -35,11 +51,23 @@ export class Quiz {
 			app.mount(this.wrapper)
 			return
 		}
-		return `<div class='border rounded-md p-10 text-center mb-2'>
+		this.wrapper.innerHTML = `<div class='border rounded-md p-10 text-center mb-2'>
             <span class="font-medium">
                 Quiz: ${quiz}
             </span>
         </div>`
+		return
+	}
+
+	renderQuizModal() {
+		const app = createApp(QuizPlugin, {
+			onQuizAddition: (quiz) => {
+				this.data.quiz = quiz
+				this.renderQuiz(quiz)
+			},
+		})
+		app.use(translationPlugin)
+		app.mount(this.wrapper)
 	}
 
 	save(blockContent) {

frontend/src/utils/upload.js

@@ -1,7 +1,7 @@
 import AudioBlock from '@/components/AudioBlock.vue'
 import VideoBlock from '@/components/VideoBlock.vue'
 import UploadPlugin from '@/components/UploadPlugin.vue'
-import { h, createApp, inject } from 'vue'
+import { h, createApp } from 'vue'
 import { Upload as UploadIcon } from 'lucide-vue-next'
 import translationPlugin from '../translation'
 
@@ -70,7 +70,6 @@ export class Upload {
 
 	renderFileUploader() {
 		const app = createApp(UploadPlugin, {
-			wrapper: this.wrapper,
 			onFileUploaded: (file) => {
 				this.data.file_url = file.file_url
 				this.data.file_type = file.file_type