feat: zen mode

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"
 		>
 			<Breadcrumbs class="h-7" :items="breadcrumbs" />
+			<div class="flex items-center space-x-2">
+				<Tooltip :text="__('Zen Mode')">
+					<Button @click="goFullScreen()">
+						<template #icon>
+							<Focus class="w-4 h-4 stroke-2" />
+						</template>
+					</Button>
+				</Tooltip>
 				<CertificationLinks :courseName="courseName" />
+			</div>
 		</header>
 		<div class="grid md:grid-cols-[70%,30%] h-screen">
 			<div v-if="lesson.data.no_preview" class="border-r">
@@ -33,9 +42,16 @@
 					</Button>
 				</div>
 			</div>
-
-			<div v-else class="border-r container pt-5 pb-10 px-5">
-				<div class="flex flex-col md:flex-row md:items-center justify-between">
+			<div v-else ref="lessonContainer" class="bg-surface-white">
+				<div
+					class="border-r container pt-5 pb-10 px-5"
+					:class="{
+						'w-1/2 mx-auto border-none': zenModeEnabled,
+					}"
+				>
+					<div
+						class="flex flex-col md:flex-row md:items-center justify-between"
+					>
 						<div class="text-3xl font-semibold text-ink-gray-9">
 							{{ lesson.data.title }}
 						</div>
@@ -175,6 +191,7 @@
 						/>
 					</div>
 				</div>
+			</div>
 			<div class="sticky top-10">
 				<div class="bg-surface-menu-bar py-5 px-2 border-b">
 					<div class="text-lg font-semibold text-ink-gray-9">
@@ -202,7 +219,13 @@
 	</div>
 </template>
 <script setup>
-import { createResource, Breadcrumbs, Button, usePageMeta } from 'frappe-ui'
+import {
+	createResource,
+	Breadcrumbs,
+	Button,
+	Tooltip,
+	usePageMeta,
+} from 'frappe-ui'
 import { computed, watch, inject, ref, onMounted, onBeforeUnmount } from 'vue'
 import CourseOutline from '@/components/CourseOutline.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
@@ -212,6 +235,7 @@ import {
 	ChevronRight,
 	LockKeyholeIcon,
 	LogIn,
+	Focus,
 } from 'lucide-vue-next'
 import Discussions from '@/components/Discussions.vue'
 import { getEditorTools } from '../utils'
@@ -229,6 +253,8 @@ const allowDiscussions = ref(false)
 const editor = ref(null)
 const instructorEditor = ref(null)
 const lessonProgress = ref(0)
+const lessonContainer = ref(null)
+const zenModeEnabled = ref(false)
 const timer = ref(0)
 const { brand } = sessionStore()
 let timerInterval
@@ -250,6 +276,19 @@ const props = defineProps({
 
 onMounted(() => {
 	startTimer()
+	document.addEventListener('fullscreenchange', attachFullscreenEvent)
+})
+
+const attachFullscreenEvent = () => {
+	if (document.fullscreenElement) {
+		zenModeEnabled.value = true
+	} else {
+		zenModeEnabled.value = false
+	}
+}
+
+onBeforeUnmount(() => {
+	document.removeEventListener('fullscreenchange', attachFullscreenEvent)
 })
 
 const lesson = createResource({
@@ -431,6 +470,18 @@ const enrollStudent = () => {
 	)
 }
 
+const goFullScreen = () => {
+	if (lessonContainer.value.requestFullscreen) {
+		lessonContainer.value.requestFullscreen()
+	} else if (lessonContainer.value.mozRequestFullScreen) {
+		lessonContainer.value.mozRequestFullScreen()
+	} else if (lessonContainer.value.webkitRequestFullscreen) {
+		lessonContainer.value.webkitRequestFullscreen()
+	} else if (lessonContainer.value.msRequestFullscreen) {
+		lessonContainer.value.msRequestFullscreen()
+	}
+}
+
 const redirectToLogin = () => {
 	window.location.href = `/login?redirect-to=/lms/courses/${props.courseName}`
 }

frontend/src/utils/index.js

@@ -200,7 +200,7 @@ export function getEditorTools() {
 					youtube: {
 						regex: /(?:https?:\/\/)?(?:www\.)?(?:(?:youtu\.be\/)|(?:youtube\.com)\/(?:v\/|u\/\w\/|embed\/|watch))(?:(?:\?v=)?([^#&?=]*))?((?:[?&]\w*=\w*)*)/,
 						embedUrl:
-							'https://www.youtube.com/embed/<%= remote_id %>',
+							'https://www.youtube.com/embed/<%= remote_id %>?modestbranding=1&enablejsapi=1&widgetid=3&iv_load_policy=3&fs=0',
 						html: `<iframe style="width:100%; height: ${
 							window.innerWidth < 640 ? '15rem' : '30rem'
 						};" frameborder="0" allowfullscreen></iframe>`,