From 93b5cb61612672570bed03ef7ec01ed1a29743e5 Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Wed, 23 Apr 2025 11:44:39 +0530 Subject: [PATCH 1/7] feat: zen mode --- frontend/src/pages/Lesson.vue | 327 ++++++++++++++++++++-------------- frontend/src/utils/index.js | 2 +- 2 files changed, 190 insertions(+), 139 deletions(-) diff --git a/frontend/src/pages/Lesson.vue b/frontend/src/pages/Lesson.vue index 01216a07..972572df 100644 --- a/frontend/src/pages/Lesson.vue +++ b/frontend/src/pages/Lesson.vue @@ -4,7 +4,16 @@ class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5" > - +
+ + + + +
@@ -33,146 +42,154 @@
- -
-
-
- {{ lesson.data.title }} -
-
- - - - - - - - - - - - -
-
- -
- - - - -
+
-
- {{ __('Instructor Notes') }} +
+
+ {{ lesson.data.title }} +
+
+ + + + + + + + + + + + +
+
+ +
+ + + +
-
-
- -
-
-
-
-
- -
-
- + v-if=" + lesson.data.instructor_content && + JSON.parse(lesson.data.instructor_content)?.blocks?.length > 1 && + allowInstructorContent() + " + class="bg-surface-gray-2 p-3 rounded-md mt-6" + > +
+ {{ __('Instructor Notes') }} +
+
+
+
+ +
+
+
+
+
+ +
+
+ +
@@ -202,7 +219,13 @@
+ diff --git a/frontend/src/pages/CourseDetail.vue b/frontend/src/pages/CourseDetail.vue index eaa9d7ac..842bf811 100644 --- a/frontend/src/pages/CourseDetail.vue +++ b/frontend/src/pages/CourseDetail.vue @@ -69,7 +69,7 @@
-
- {{ lesson.data.title }} +
+
+ {{ lesson.data.title }} +
+ +
+ + {{ lesson.data.chapter_title }} - + {{ lesson.data.course_title }} + + + +
-
+ +
+ - @@ -146,9 +174,6 @@ :instructors="lesson.data.instructors" />
-
- {{ lesson.data.chapter_title }} - {{ lesson.data.course_title }} -
-
+
{ const attachFullscreenEvent = () => { if (document.fullscreenElement) { zenModeEnabled.value = true + allowDiscussions.value = false } else { zenModeEnabled.value = false + if (!hasQuiz.value) { + allowDiscussions.value = true + } } } @@ -335,7 +376,6 @@ const enablePlyr = () => { const lesson = createResource({ url: 'lms.lms.utils.get_lesson', - cache: ['lesson', props.courseName, props.chapterNumber, props.lessonNumber], makeParams(values) { return { course: props.courseName, @@ -344,36 +384,37 @@ const lesson = createResource({ } }, auto: true, - onSuccess(data) { - if (Object.keys(data).length === 0) { - router.push({ - name: 'CourseDetail', - params: { courseName: props.courseName }, - }) - return - } - lessonProgress.value = data.membership?.progress - if (data.content) editor.value = renderEditor('editor', data.content) - if ( - data.instructor_content && - JSON.parse(data.instructor_content)?.blocks?.length > 1 - ) - instructorEditor.value = renderEditor( - 'instructor-content', - data.instructor_content - ) - editor.value?.isReady.then(() => { - checkIfDiscussionsAllowed() - }) - - if (!editor.value && data.body) { - const quizRegex = /\{\{ Quiz\(".*"\) \}\}/ - const hasQuiz = quizRegex.test(data.body) - if (!hasQuiz) allowDiscussions.value = true - } - }, }) +const setupLesson = (data) => { + if (Object.keys(data).length === 0) { + router.push({ + name: 'CourseDetail', + params: { courseName: props.courseName }, + }) + return + } + lessonProgress.value = data.membership?.progress + if (data.content) editor.value = renderEditor('editor', data.content) + if ( + data.instructor_content && + JSON.parse(data.instructor_content)?.blocks?.length > 1 + ) + instructorEditor.value = renderEditor( + 'instructor-content', + data.instructor_content + ) + editor.value?.isReady.then(() => { + checkIfDiscussionsAllowed() + }) + + if (!editor.value && data.body) { + const quizRegex = /\{\{ Quiz\(".*"\) \}\}/ + hasQuiz.value = quizRegex.test(data.body) + if (!hasQuiz.value) allowDiscussions.value = true + } +} + const renderEditor = (holder, content) => { // empty the holder if (document.getElementById(holder)) @@ -448,6 +489,13 @@ watch( } ) +watch( + () => lesson.data, + (data) => { + setupLesson(data) + } +) + const startTimer = () => { timerInterval = setInterval(() => { timer.value++ @@ -463,13 +511,13 @@ onBeforeUnmount(() => { }) const checkIfDiscussionsAllowed = () => { - let quizPresent = false JSON.parse(lesson.data?.content)?.blocks?.forEach((block) => { - if (block.type === 'quiz') quizPresent = true + if (block.type === 'quiz') hasQuiz.value = true }) if ( - !quizPresent && + !hasQuiz.value && + !zenModeEnabled.value && (lesson.data?.membership || user.data?.is_moderator || user.data?.is_instructor) @@ -525,6 +573,25 @@ const goFullScreen = () => { } } +const showDiscussionsInZenMode = () => { + if (allowDiscussions.value) { + allowDiscussions.value = false + } else { + allowDiscussions.value = true + scrollDiscussionsIntoView() + } +} + +const scrollDiscussionsIntoView = () => { + nextTick(() => { + discussionsContainer.value?.scrollIntoView({ + behavior: 'smooth', + block: 'center', + inline: 'nearest', + }) + }) +} + const redirectToLogin = () => { window.location.href = `/login?redirect-to=/lms/courses/${props.courseName}` } From 5893e02c481967cf7b1db222fed3a3efdebda0e5 Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Fri, 25 Apr 2025 17:49:07 +0530 Subject: [PATCH 7/7] fix: reduced the size of play button in video block --- frontend/package.json | 1 - frontend/src/components/Icons/Play.vue | 4 ++-- frontend/src/components/VideoBlock.vue | 6 +++--- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index e23e4b5a..fb393013 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -38,7 +38,6 @@ "vue": "^3.4.23", "vue-chartjs": "^5.3.0", "vue-draggable-next": "^2.2.1", - "vue-plyr": "^7.0.0", "vue-router": "^4.0.12", "vue3-apexcharts": "^1.8.0", "vuedraggable": "4.1.0" diff --git a/frontend/src/components/Icons/Play.vue b/frontend/src/components/Icons/Play.vue index b391ff66..5a3860ec 100644 --- a/frontend/src/components/Icons/Play.vue +++ b/frontend/src/components/Icons/Play.vue @@ -1,7 +1,7 @@