From 231f2cbc14d8652c3601a3e80666ef8c80f2fb8a Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Wed, 12 Jun 2024 10:27:33 +0530
Subject: [PATCH 1/5] feat: video player

---
 frappe-ui                              |   2 +-
 frontend/src/components/AudioBlock.vue | 117 +++++++++++++++++++++
 frontend/src/components/VideoBlock.vue | 137 +++++++++++++++++++++++++
 frontend/src/utils/upload.js           |  22 ++--
 4 files changed, 270 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/components/AudioBlock.vue
 create mode 100644 frontend/src/components/VideoBlock.vue

diff --git a/frappe-ui b/frappe-ui
index 38728b80..aa44431c 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 38728b80aaf0cf0a74b2f10e778363c9308c3a1e
+Subproject commit aa44431c185b1e4563f2ebf6af380c7743d2cd4c
diff --git a/frontend/src/components/AudioBlock.vue b/frontend/src/components/AudioBlock.vue
new file mode 100644
index 00000000..d8904905
--- /dev/null
+++ b/frontend/src/components/AudioBlock.vue
@@ -0,0 +1,117 @@
+<template>
+	<div>
+		<audio width="100%" controls controlsList="nodownload" class="mb-4">
+			<source :src="encodeURI(file)" type="audio/mp3" />
+		</audio>
+		<audio width="100%" controlsList="nodownload" class="mb-4">
+			<source :src="encodeURI(file)" type="audio/mp3" />
+		</audio>
+		<div class="flex items-center space-x-4 p-2 shadow rounded-2xl">
+			<Button variant="ghost" @click="togglePlay">
+				<template #icon>
+					<Play v-if="!isPlaying" class="w-4 h-4 fill-gray-900" />
+					<Pause v-else class="w-4 h-4 fill-gray-900" />
+				</template>
+			</Button>
+
+			<input
+				type="range"
+				min="0"
+				:max="duration"
+				step="0.1"
+				v-model="currentTime"
+				@input="changeCurrentTime"
+				class="duration-slider"
+			/>
+			<span class="text-xs text-gray-900 font-medium"
+				>{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</span
+			>
+			<Button variant="ghost" @click="toggleMute">
+				<template #icon>
+					<Volume2 v-if="!isMuted" class="w-4 h-4 fill-gray-900" />
+					<VolumeX v-else class="w-4 h-4 fill-gray-900" />
+				</template>
+			</Button>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import { Play, Pause, Volume2, VolumeX } from 'lucide-vue-next'
+import { Button } from 'frappe-ui'
+
+const isPlaying = ref(false)
+const audio = ref(null)
+let isMuted = ref(false)
+let volume = ref(1)
+let currentTime = ref(0)
+let duration = ref(0)
+
+const props = defineProps({
+	file: {
+		type: String,
+		required: true,
+	},
+})
+
+onMounted(() => {
+	setTimeout(() => {
+		audio.value = document.querySelector('audio')
+		console.log(audio.value)
+		audio.value.onloadedmetadata = () => {
+			console.log(audio.value.duration)
+			duration.value = audio.value.duration
+		}
+		audio.value.ontimeupdate = () => {
+			currentTime.value = audio.value.currentTime
+		}
+	}, 0)
+})
+
+const togglePlay = () => {
+	if (audio.value.paused) {
+		audio.value.play()
+		isPlaying.value = true
+	} else {
+		audio.value.pause()
+		isPlaying.value = false
+	}
+}
+
+const toggleMute = () => {
+	audio.value.muted = !audio.value.muted
+	isMuted.value = audio.value.muted
+}
+
+const changeCurrentTime = () => {
+	audio.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}`
+}
+
+watch(isPlaying, (newVal) => {
+	if (newVal) {
+		audio.value.play()
+	} else {
+		audio.value.pause()
+	}
+})
+</script>
+<style>
+.duration-slider {
+	flex: 1;
+	height: 0.25rem;
+	-webkit-appearance: none;
+	appearance: none;
+	background-color: theme('colors.gray.400');
+}
+
+.duration-slider::-moz-range-track {
+	background: theme('colors.gray.900');
+}
+</style>
diff --git a/frontend/src/components/VideoBlock.vue b/frontend/src/components/VideoBlock.vue
new file mode 100644
index 00000000..d9d5a36c
--- /dev/null
+++ b/frontend/src/components/VideoBlock.vue
@@ -0,0 +1,137 @@
+<template>
+	<div ref="videoContainer" class="video-block group relative">
+		<video @ended="videoEnded" class="rounded-lg">
+			<source :src="file" type="video/mp4" />
+		</video>
+		<div
+			class="flex items-center space-x-4 bg-gray-200 rounded-2xl p-0.5 absolute bottom-3 w-[98%] invisible group-hover:visible left-0 right-0 mx-auto"
+		>
+			<Button variant="ghost">
+				<template #icon>
+					<Play
+						v-if="!playing"
+						@click="playVideo"
+						class="w-4 h-4 fill-gray-900"
+					/>
+					<Pause v-else @click="pauseVideo" class="w-4 h-4 fill-gray-900" />
+				</template>
+			</Button>
+			<span class="text-xs font-medium">
+				{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
+			</span>
+			<input
+				type="range"
+				min="0"
+				:max="duration"
+				step="0.1"
+				v-model="currentTime"
+				@input="changeTime"
+				class="duration-slider"
+			/>
+			<Button variant="ghost" @click="toggleMute">
+				<template #icon>
+					<Volume2 v-if="!muted" class="w-4 h-4 fill-gray-900" />
+					<VolumeX v-else class="w-4 h-4 fill-gray-900" />
+				</template>
+			</Button>
+			<Button variant="ghost" @click="toggleFullscreen">
+				<template #icon>
+					<Maximize class="w-4 h-4 fill-gray-900" />
+				</template>
+			</Button>
+		</div>
+	</div>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue'
+import { Play, Pause, Maximize, Volume2, VolumeX } from 'lucide-vue-next'
+import { Button } from 'frappe-ui'
+
+const videoRef = ref(null)
+const videoContainer = ref(null)
+let playing = ref(false)
+let currentTime = ref(0)
+let duration = ref(0)
+let muted = ref(false)
+
+const props = defineProps({
+	file: {
+		type: String,
+		required: true,
+	},
+})
+
+onMounted(() => {
+	setTimeout(() => {
+		videoRef.value = document.querySelector('video')
+		videoRef.value.onloadedmetadata = loadedMetaData
+		videoRef.value.ontimeupdate = updateTime
+	}, 0)
+})
+
+const playVideo = () => {
+	videoRef.value.play()
+	playing.value = true
+}
+
+const pauseVideo = () => {
+	videoRef.value.pause()
+	playing.value = false
+}
+
+const videoEnded = () => {
+	playing.value = false
+}
+
+const toggleMute = () => {
+	videoRef.value.muted = !videoRef.value.muted
+	muted.value = videoRef.value.muted
+}
+
+const changeTime = () => {
+	videoRef.value.currentTime = currentTime.value
+}
+
+const loadedMetaData = () => {
+	duration.value = videoRef.value.duration
+}
+
+const updateTime = () => {
+	currentTime.value = videoRef.value.currentTime
+}
+
+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()
+	} else {
+		videoContainer.value.requestFullscreen()
+	}
+}
+</script>
+
+<style scoped>
+.video-block {
+	width: 100%;
+	max-width: 900px;
+	margin: 0 auto;
+}
+
+.video-block video {
+	width: 100%;
+	height: auto;
+}
+
+.duration-slider {
+	flex: 1;
+	height: 0.25rem;
+	-webkit-appearance: none;
+	appearance: none;
+	background-color: theme('colors.gray.400');
+}
+</style>
diff --git a/frontend/src/utils/upload.js b/frontend/src/utils/upload.js
index fbe607d1..939c3999 100644
--- a/frontend/src/utils/upload.js
+++ b/frontend/src/utils/upload.js
@@ -1,3 +1,7 @@
+import AudioBlock from '@/components/AudioBlock.vue'
+import VideoBlock from '@/components/VideoBlock.vue'
+import { createApp } from 'vue'
+
 export class Upload {
 	constructor({ data, api, readOnly }) {
 		this.data = data
@@ -10,19 +14,23 @@ export class Upload {
 
 	render() {
 		this.wrapper = document.createElement('div')
-		this.wrapper.innerHTML = this.renderUpload(this.data)
+		this.renderUpload(this.data)
 		return this.wrapper
 	}
 
 	renderUpload(file) {
 		if (this.isVideo(file.file_type)) {
-			return `<video controls width='100%' controlsList='nodownload' class="mb-4" oncontextmenu="return false;">
-				<source src=${encodeURI(file.file_url)} type='video/mp4'>
-			</video>`
+			const app = createApp(VideoBlock, {
+				file: file.file_url,
+			})
+			app.mount(this.wrapper)
+			return
 		} else if (this.isAudio(file.file_type)) {
-			return `<audio controls width='100%' controls controlsList='nodownload' class="mb-4">
-				<source src=${encodeURI(file.file_url)} type='audio/mp3'>
-			</audio>`
+			const app = createApp(AudioBlock, {
+				file: file.file_url,
+			})
+			app.mount(this.wrapper)
+			return
 		} else if (file.file_type == 'pdf') {
 			return `<iframe src="${encodeURI(
 				file.file_url

From 05e8513ad11844c7f8d62689a0e1f0aaab15178f Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Thu, 20 Jun 2024 16:46:50 +0530
Subject: [PATCH 2/5] feat: video player

---
 frontend/src/components/AudioBlock.vue |  58 +++++++++-----
 frontend/src/components/VideoBlock.vue | 101 +++++++++++++++++--------
 frontend/src/stores/user.js            |   1 +
 frontend/src/utils/customEmbed.js      |  32 ++++++++
 frontend/src/utils/index.js            |  18 ++++-
 5 files changed, 159 insertions(+), 51 deletions(-)
 create mode 100644 frontend/src/utils/customEmbed.js

diff --git a/frontend/src/components/AudioBlock.vue b/frontend/src/components/AudioBlock.vue
index d8904905..36303b7f 100644
--- a/frontend/src/components/AudioBlock.vue
+++ b/frontend/src/components/AudioBlock.vue
@@ -1,19 +1,20 @@
 <template>
 	<div>
-		<audio width="100%" controls controlsList="nodownload" class="mb-4">
+		<!-- <audio width="100%" controls controlsList="nodownload" class="mb-4">
+			<source :src="encodeURI(file)" type="audio/mp3" />
+		</audio> -->
+		<audio @ended="handleAudioEnd" controlsList="nodownload" class="mb-4">
 			<source :src="encodeURI(file)" type="audio/mp3" />
 		</audio>
-		<audio width="100%" controlsList="nodownload" class="mb-4">
-			<source :src="encodeURI(file)" type="audio/mp3" />
-		</audio>
-		<div class="flex items-center space-x-4 p-2 shadow rounded-2xl">
+		<div
+			class="flex items-center space-x-2 shadow rounded-lg p-1 w-1/2 mx-auto"
+		>
 			<Button variant="ghost" @click="togglePlay">
 				<template #icon>
-					<Play v-if="!isPlaying" class="w-4 h-4 fill-gray-900" />
-					<Pause v-else class="w-4 h-4 fill-gray-900" />
+					<Play v-if="!isPlaying" class="w-4 h-4 text-gray-900" />
+					<Pause v-else class="w-4 h-4 text-gray-900" />
 				</template>
 			</Button>
-
 			<input
 				type="range"
 				min="0"
@@ -21,15 +22,15 @@
 				step="0.1"
 				v-model="currentTime"
 				@input="changeCurrentTime"
-				class="duration-slider"
+				class="duration-slider w-full h-1"
 			/>
-			<span class="text-xs text-gray-900 font-medium"
-				>{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</span
-			>
+			<span class="text-xs text-gray-900 font-medium">
+				{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
+			</span>
 			<Button variant="ghost" @click="toggleMute">
 				<template #icon>
-					<Volume2 v-if="!isMuted" class="w-4 h-4 fill-gray-900" />
-					<VolumeX v-else class="w-4 h-4 fill-gray-900" />
+					<Volume2 v-if="!isMuted" class="w-4 h-4 text-gray-900" />
+					<VolumeX v-else class="w-4 h-4 text-gray-900" />
 				</template>
 			</Button>
 		</div>
@@ -44,7 +45,6 @@ import { Button } from 'frappe-ui'
 const isPlaying = ref(false)
 const audio = ref(null)
 let isMuted = ref(false)
-let volume = ref(1)
 let currentTime = ref(0)
 let duration = ref(0)
 
@@ -60,7 +60,6 @@ onMounted(() => {
 		audio.value = document.querySelector('audio')
 		console.log(audio.value)
 		audio.value.onloadedmetadata = () => {
-			console.log(audio.value.duration)
 			duration.value = audio.value.duration
 		}
 		audio.value.ontimeupdate = () => {
@@ -88,6 +87,10 @@ const changeCurrentTime = () => {
 	audio.value.currentTime = currentTime.value
 }
 
+const handleAudioEnd = () => {
+	isPlaying.value = false
+}
+
 const formatTime = (time) => {
 	const minutes = Math.floor(time / 60)
 	const seconds = Math.floor(time % 60)
@@ -105,13 +108,30 @@ watch(isPlaying, (newVal) => {
 <style>
 .duration-slider {
 	flex: 1;
-	height: 0.25rem;
 	-webkit-appearance: none;
 	appearance: none;
 	background-color: theme('colors.gray.400');
+	cursor: pointer;
 }
 
-.duration-slider::-moz-range-track {
-	background: theme('colors.gray.900');
+.duration-slider::-webkit-slider-thumb {
+	height: 10px;
+	width: 10px;
+	-webkit-appearance: none;
+	background-color: theme('colors.gray.900');
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+	input[type='range'] {
+		overflow: hidden;
+		width: 150px;
+		-webkit-appearance: none;
+	}
+
+	input[type='range']::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		cursor: pointer;
+		box-shadow: -150px 0 0 150px theme('colors.gray.900');
+	}
 }
 </style>
diff --git a/frontend/src/components/VideoBlock.vue b/frontend/src/components/VideoBlock.vue
index d9d5a36c..7a0f463d 100644
--- a/frontend/src/components/VideoBlock.vue
+++ b/frontend/src/components/VideoBlock.vue
@@ -1,49 +1,49 @@
 <template>
 	<div ref="videoContainer" class="video-block group relative">
-		<video @ended="videoEnded" class="rounded-lg">
-			<source :src="file" type="video/mp4" />
+		<video @timeupdate="updateTime" @ended="videoEnded" class="rounded-lg">
+			<source :src="fileURL" :type="type" />
 		</video>
 		<div
-			class="flex items-center space-x-4 bg-gray-200 rounded-2xl p-0.5 absolute bottom-3 w-[98%] invisible group-hover:visible left-0 right-0 mx-auto"
+			class="flex items-center space-x-2 bg-gray-200 rounded-lg p-0.5 absolute bottom-3 w-[98%] left-0 right-0 mx-auto"
 		>
 			<Button variant="ghost">
 				<template #icon>
 					<Play
 						v-if="!playing"
 						@click="playVideo"
-						class="w-4 h-4 fill-gray-900"
+						class="w-4 h-4 text-gray-900"
 					/>
-					<Pause v-else @click="pauseVideo" class="w-4 h-4 fill-gray-900" />
+					<Pause v-else @click="pauseVideo" class="w-4 h-4 text-gray-900" />
+				</template>
+			</Button>
+			<Button variant="ghost" @click="toggleMute">
+				<template #icon>
+					<Volume2 v-if="!muted" class="w-4 h-4 text-gray-900" />
+					<VolumeX v-else class="w-4 h-4 text-gray-900" />
 				</template>
 			</Button>
-			<span class="text-xs font-medium">
-				{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
-			</span>
 			<input
 				type="range"
 				min="0"
 				:max="duration"
 				step="0.1"
 				v-model="currentTime"
-				@input="changeTime"
-				class="duration-slider"
+				@input="changeCurrentTime"
+				class="duration-slider w-full h-1"
 			/>
-			<Button variant="ghost" @click="toggleMute">
-				<template #icon>
-					<Volume2 v-if="!muted" class="w-4 h-4 fill-gray-900" />
-					<VolumeX v-else class="w-4 h-4 fill-gray-900" />
-				</template>
-			</Button>
+			<span class="text-xs font-medium">
+				{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
+			</span>
 			<Button variant="ghost" @click="toggleFullscreen">
 				<template #icon>
-					<Maximize class="w-4 h-4 fill-gray-900" />
+					<Maximize class="w-4 h-4 text-gray-900" />
 				</template>
 			</Button>
 		</div>
 	</div>
 </template>
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { Play, Pause, Maximize, Volume2, VolumeX } from 'lucide-vue-next'
 import { Button } from 'frappe-ui'
 
@@ -59,16 +59,39 @@ const props = defineProps({
 		type: String,
 		required: true,
 	},
+	type: {
+		type: String,
+		default: 'video/mp4',
+	},
 })
 
 onMounted(() => {
 	setTimeout(() => {
 		videoRef.value = document.querySelector('video')
-		videoRef.value.onloadedmetadata = loadedMetaData
-		videoRef.value.ontimeupdate = updateTime
+		videoRef.value.onloadedmetadata = () => {
+			duration.value = videoRef.value.duration
+		}
+		videoRef.value.ontimeupdate = () => {
+			currentTime.value = videoRef.value.currentTime
+		}
 	}, 0)
 })
 
+const fileURL = computed(() => {
+	if (isYoutube) {
+		let url = props.file
+		if (url.includes('watch?v=')) {
+			url = url.replace('watch?v=', 'embed/')
+		}
+		return `${url}?autoplay=0&controls=0&disablekb=1&playsinline=1&cc_load_policy=1&cc_lang_pref=auto`
+	}
+	return props.file
+})
+
+const isYoutube = computed(() => {
+	return props.type == 'video/youtube'
+})
+
 const playVideo = () => {
 	videoRef.value.play()
 	playing.value = true
@@ -88,18 +111,10 @@ const toggleMute = () => {
 	muted.value = videoRef.value.muted
 }
 
-const changeTime = () => {
+const changeCurrentTime = () => {
 	videoRef.value.currentTime = currentTime.value
 }
 
-const loadedMetaData = () => {
-	duration.value = videoRef.value.duration
-}
-
-const updateTime = () => {
-	currentTime.value = videoRef.value.currentTime
-}
-
 const formatTime = (time) => {
 	const minutes = Math.floor(time / 60)
 	const seconds = Math.floor(time % 60)
@@ -127,11 +142,37 @@ const toggleFullscreen = () => {
 	height: auto;
 }
 
+iframe {
+	width: 100%;
+	min-height: 500px;
+}
+
 .duration-slider {
 	flex: 1;
-	height: 0.25rem;
 	-webkit-appearance: none;
 	appearance: none;
 	background-color: theme('colors.gray.400');
+	cursor: pointer;
+}
+
+.duration-slider::-webkit-slider-thumb {
+	height: 10px;
+	width: 10px;
+	-webkit-appearance: none;
+	background-color: theme('colors.gray.900');
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+	input[type='range'] {
+		overflow: hidden;
+		width: 150px;
+		-webkit-appearance: none;
+	}
+
+	input[type='range']::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		cursor: pointer;
+		box-shadow: -500px 0 0 500px theme('colors.gray.900');
+	}
 }
 </style>
diff --git a/frontend/src/stores/user.js b/frontend/src/stores/user.js
index 1c1c6c02..6133b8a5 100644
--- a/frontend/src/stores/user.js
+++ b/frontend/src/stores/user.js
@@ -15,6 +15,7 @@ export const usersStore = defineStore('lms-users', () => {
 	const allUsers = createResource({
 		url: 'lms.lms.api.get_all_users',
 		cache: ['allUsers'],
+		auto: true,
 	})
 
 	return {
diff --git a/frontend/src/utils/customEmbed.js b/frontend/src/utils/customEmbed.js
new file mode 100644
index 00000000..9cd297c0
--- /dev/null
+++ b/frontend/src/utils/customEmbed.js
@@ -0,0 +1,32 @@
+import Embed from '@editorjs/embed'
+import VideoBlock from '@/components/VideoBlock.vue'
+import { createApp } from 'vue'
+
+export class CustomEmbed extends Embed {
+	render() {
+		const container = super.render()
+		const { service, source, embed } = this.data
+
+		if (service === 'youtube' || service === 'vimeo') {
+			// Remove the iframe or existing embed content
+			container.innerHTML = ''
+
+			// Create a placeholder element for Vue component
+			const vueContainer = document.createElement('div')
+			vueContainer.setAttribute('data-service', service)
+			vueContainer.setAttribute('data-video-id', this.data.source)
+
+			// Append the Vue placeholder
+			container.appendChild(vueContainer)
+			console.log(source)
+			// Mount the Vue component (using a global Vue instance)
+			const app = createApp(VideoBlock, {
+				file: source,
+				type: 'video/youtube',
+			})
+			app.mount(vueContainer)
+		}
+
+		return container
+	}
+}
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 59f5856d..f4d6a130 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -4,12 +4,12 @@ import { Quiz } from '@/utils/quiz'
 import { Upload } from '@/utils/upload'
 import Header from '@editorjs/header'
 import Paragraph from '@editorjs/paragraph'
-import Embed from '@editorjs/embed'
 import { CodeBox } from '@/utils/code'
 import NestedList from '@editorjs/nested-list'
 import InlineCode from '@editorjs/inline-code'
-import { watch } from 'vue'
+import { watch, createApp } from 'vue'
 import dayjs from '@/utils/dayjs'
+import Embed from '@editorjs/embed'
 
 export function createToast(options) {
 	toast({
@@ -179,6 +179,20 @@ export function getEditorTools() {
 	}
 }
 
+function getVideoBlockHtml(medium) {
+	let regex
+	if (medium === 'youtube') {
+		regex =
+			/(?:https?:\/\/)?(?:www\.)?(?:(?:youtu\.be\/)|(?:youtube\.com)\/(?:v\/|u\/\w\/|embed\/|watch))(?:(?:\?v=)?([^#&?=]*))?((?:[?&]\w*=\w*)*)/
+		regex.exec(url)?.slice(1)
+	}
+	const wrapper = document.createElement('div')
+	const app = createApp(VideoBlock, {
+		file: file.file_url,
+	})
+	app.mount(wrapper)
+}
+
 export function getTimezones() {
 	return [
 		'Pacific/Midway',

From ed7c30057cc84c3174a280d8e2fb2fc11a5df45e Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Fri, 21 Jun 2024 10:36:26 +0530
Subject: [PATCH 3/5] test: increase wait time when lesson is opened

---
 cypress.config.js                 | 2 +-
 cypress/e2e/course_creation.cy.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress.config.js b/cypress.config.js
index 04ebc494..d93eac9e 100644
--- a/cypress.config.js
+++ b/cypress.config.js
@@ -13,6 +13,6 @@ module.exports = defineConfig({
 		openMode: 0,
 	},
 	e2e: {
-		baseUrl: "http://pyp:8000",
+		baseUrl: "http://test_site_ui:8000",
 	},
 });
diff --git a/cypress/e2e/course_creation.cy.js b/cypress/e2e/course_creation.cy.js
index 142b2f13..63d62436 100644
--- a/cypress/e2e/course_creation.cy.js
+++ b/cypress/e2e/course_creation.cy.js
@@ -108,7 +108,7 @@ describe("Course Creation", () => {
 		cy.get("[id^=headlessui-disclosure-panel-").within(() => {
 			cy.get("div").contains("Test Lesson").click();
 		});
-		cy.wait(1000);
+		cy.wait(3000);
 
 		// View Lesson
 		cy.url().should("include", "/learn/1-1");

From b5a904354a980091b9c1e33a2463699cdcbe4cbf Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Fri, 21 Jun 2024 11:24:28 +0530
Subject: [PATCH 4/5] test: fix lesson content

---
 cypress/e2e/course_creation.cy.js | 7 ++++---
 lms/public/frontend/index.html    | 6 +++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/cypress/e2e/course_creation.cy.js b/cypress/e2e/course_creation.cy.js
index 63d62436..33f6eee9 100644
--- a/cypress/e2e/course_creation.cy.js
+++ b/cypress/e2e/course_creation.cy.js
@@ -113,9 +113,6 @@ describe("Course Creation", () => {
 		// View Lesson
 		cy.url().should("include", "/learn/1-1");
 		cy.get("div").contains("Test Lesson");
-		cy.get("div").contains(
-			"This is an extremely big paragraph that is meant to test the UI. This is a very long paragraph. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now. "
-		);
 
 		cy.get("video")
 			.should("be.visible")
@@ -123,6 +120,10 @@ describe("Course Creation", () => {
 			.invoke("attr", "src")
 			.should("include", "/files/Youtube");
 
+		cy.get("div").contains(
+			"This is an extremely big paragraph that is meant to test the UI. This is a very long paragraph. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
+		);
+
 		// Add Discussion
 		cy.button("New Question").click();
 		cy.wait(500);
diff --git a/lms/public/frontend/index.html b/lms/public/frontend/index.html
index 172e5935..67e382c8 100644
--- a/lms/public/frontend/index.html
+++ b/lms/public/frontend/index.html
@@ -15,10 +15,10 @@
 		<meta name="twitter:title" content="{{ meta.title }}" />
 		<meta name="twitter:image" content="{{ meta.image }}" />
 		<meta name="twitter:description" content="{{ meta.description }}" />
-		<script type="module" crossorigin src="/assets/lms/frontend/assets/index-kSywU9PY.js"></script>
-		<link rel="modulepreload" crossorigin href="/assets/lms/frontend/assets/frappe-ui-vM9kBbGH.js">
+		<script type="module" crossorigin src="/assets/lms/frontend/assets/index-HOvpvn4K.js"></script>
+		<link rel="modulepreload" crossorigin href="/assets/lms/frontend/assets/frappe-ui-0rNYcqgR.js">
 		<link rel="stylesheet" crossorigin href="/assets/lms/frontend/assets/frappe-ui-DzKBfka9.css">
-		<link rel="stylesheet" crossorigin href="/assets/lms/frontend/assets/index-CxRhs9Fi.css">
+		<link rel="stylesheet" crossorigin href="/assets/lms/frontend/assets/index-DOZMTxMe.css">
 	</head>
 	<body>
 		<div id="app">

From f783b981e5b26f3e458c5b76a0153f0ed6ad6cf6 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Fri, 21 Jun 2024 11:38:30 +0530
Subject: [PATCH 5/5] feat: added support to embed aparat

---
 frontend/src/utils/index.js    | 15 +--------------
 lms/public/frontend/index.html |  2 +-
 2 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index f4d6a130..19441c33 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -167,6 +167,7 @@ export function getEditorTools() {
 					youtube: true,
 					vimeo: true,
 					codepen: true,
+					aparat: true,
 					slides: {
 						regex: /https:\/\/docs\.google\.com\/presentation\/d\/e\/([A-Za-z0-9_-]+)\/pub/,
 						embedUrl:
@@ -179,20 +180,6 @@ export function getEditorTools() {
 	}
 }
 
-function getVideoBlockHtml(medium) {
-	let regex
-	if (medium === 'youtube') {
-		regex =
-			/(?:https?:\/\/)?(?:www\.)?(?:(?:youtu\.be\/)|(?:youtube\.com)\/(?:v\/|u\/\w\/|embed\/|watch))(?:(?:\?v=)?([^#&?=]*))?((?:[?&]\w*=\w*)*)/
-		regex.exec(url)?.slice(1)
-	}
-	const wrapper = document.createElement('div')
-	const app = createApp(VideoBlock, {
-		file: file.file_url,
-	})
-	app.mount(wrapper)
-}
-
 export function getTimezones() {
 	return [
 		'Pacific/Midway',
diff --git a/lms/public/frontend/index.html b/lms/public/frontend/index.html
index 67e382c8..c7b3af45 100644
--- a/lms/public/frontend/index.html
+++ b/lms/public/frontend/index.html
@@ -15,7 +15,7 @@
 		<meta name="twitter:title" content="{{ meta.title }}" />
 		<meta name="twitter:image" content="{{ meta.image }}" />
 		<meta name="twitter:description" content="{{ meta.description }}" />
-		<script type="module" crossorigin src="/assets/lms/frontend/assets/index-HOvpvn4K.js"></script>
+		<script type="module" crossorigin src="/assets/lms/frontend/assets/index-Cjguiv45.js"></script>
 		<link rel="modulepreload" crossorigin href="/assets/lms/frontend/assets/frappe-ui-0rNYcqgR.js">
 		<link rel="stylesheet" crossorigin href="/assets/lms/frontend/assets/frappe-ui-DzKBfka9.css">
 		<link rel="stylesheet" crossorigin href="/assets/lms/frontend/assets/index-DOZMTxMe.css">