From 63319d32e865160ae0cdec96d1cdd09ec3e0f7e3 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Fri, 25 Apr 2025 11:18:19 +0530
Subject: [PATCH] fix: detect editor change to enable plyr on newly added
 videos

---
 frontend/src/pages/Lesson.vue      | 10 ++++-----
 frontend/src/pages/LessonForm.vue  | 33 +++++++++++++++++++++++++++++-
 frontend/src/pages/PersonaForm.vue |  1 -
 lms/lms/utils.py                   |  3 +++
 4 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/Lesson.vue b/frontend/src/pages/Lesson.vue
index 002f6c49..3dc63725 100644
--- a/frontend/src/pages/Lesson.vue
+++ b/frontend/src/pages/Lesson.vue
@@ -5,7 +5,7 @@
 		>
 			<Breadcrumbs class="h-7" :items="breadcrumbs" />
 			<div class="flex items-center space-x-2">
-				<Tooltip :text="__('Zen Mode')">
+				<Tooltip v-if="lesson.data?.membership" :text="__('Zen Mode')">
 					<Button @click="goFullScreen()">
 						<template #icon>
 							<Focus class="w-4 h-4 stroke-2" />
@@ -147,7 +147,7 @@
 						/>
 					</div>
 					<div v-else class="text-sm mt-1 text-ink-gray-7">
-						{{ lesson.data.course_title }}
+						{{ lesson.data.chapter_title }} - {{ lesson.data.course_title }}
 					</div>
 
 					<div
@@ -168,19 +168,19 @@
 					</div>
 					<div
 						v-else-if="lesson.data.instructor_notes"
-						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-10"
+						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-8"
 					>
 						<LessonContent :content="lesson.data.instructor_notes" />
 					</div>
 					<div
 						v-if="lesson.data.content"
-						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-10"
+						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-8"
 					>
 						<div id="editor"></div>
 					</div>
 					<div
 						v-else
-						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-10"
+						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-8"
 					>
 						<LessonContent
 							v-if="lesson.data?.body"
diff --git a/frontend/src/pages/LessonForm.vue b/frontend/src/pages/LessonForm.vue
index 44f9435a..1d5a5de7 100644
--- a/frontend/src/pages/LessonForm.vue
+++ b/frontend/src/pages/LessonForm.vue
@@ -97,10 +97,12 @@ import {
 import { sessionStore } from '../stores/session'
 import EditorJS from '@editorjs/editorjs'
 import LessonHelp from '@/components/LessonHelp.vue'
-import { ChevronRight } from 'lucide-vue-next'
+import { AppleIcon, ChevronRight } from 'lucide-vue-next'
 import { createToast, getEditorTools } from '@/utils'
 import { capture } from '@/telemetry'
 import { useOnboarding } from 'frappe-ui/frappe'
+import Plyr from 'plyr'
+import 'plyr/dist/plyr.css'
 
 const { brand } = sessionStore()
 const editor = ref(null)
@@ -143,6 +145,9 @@ const renderEditor = (holder) => {
 		tools: getEditorTools(true),
 		autofocus: true,
 		defaultBlock: 'markdown',
+		onChange: async (api, event) => {
+			enablePlyr()
+		},
 	})
 }
 
@@ -672,4 +677,30 @@ iframe {
 .ce-popover-item[data-item-name='markdown'] {
 	display: none !important;
 }
+
+.plyr__volume input[type='range'] {
+	display: none;
+}
+
+.plyr__control--overlaid {
+	background: radial-gradient(
+		circle,
+		rgba(0, 0, 0, 0.4) 0%,
+		rgba(0, 0, 0, 0.5) 50%
+	);
+}
+
+.plyr__control:hover {
+	background: none;
+}
+
+.plyr--video {
+	border: 1px solid theme('colors.gray.200');
+	border-radius: 8px;
+}
+
+:root {
+	--plyr-range-fill-background: white;
+	--plyr-video-control-background-hover: transparent;
+}
 </style>
diff --git a/frontend/src/pages/PersonaForm.vue b/frontend/src/pages/PersonaForm.vue
index 0ba7cf4d..9a6d92b8 100644
--- a/frontend/src/pages/PersonaForm.vue
+++ b/frontend/src/pages/PersonaForm.vue
@@ -87,7 +87,6 @@ import { sessionStore } from '@/stores/session'
 const user = inject('$user')
 const router = useRouter()
 const { brand } = sessionStore()
-console.log(user.data?.sitename)
 
 const persona = reactive({
 	role: null,
diff --git a/lms/lms/utils.py b/lms/lms/utils.py
index 83e219ec..a735d1c6 100644
--- a/lms/lms/utils.py
+++ b/lms/lms/utils.py
@@ -1313,6 +1313,9 @@ def get_lesson(course, chapter, lesson):
 	else:
 		progress = get_progress(course, lesson_details.name)
 
+	lesson_details.chapter_title = frappe.db.get_value(
+		"Course Chapter", chapter_name, "title"
+	)
 	lesson_details.rendered_content = render_html(lesson_details)
 	neighbours = get_neighbour_lesson(course, chapter, lesson)
 	lesson_details.next = neighbours["next"]