Merge branch 'develop' of https://github.com/frappe/lms into develop

frontend/src/pages/Lesson.vue

@@ -334,7 +334,6 @@ const props = defineProps({
 
 onMounted(() => {
 	startTimer()
-	enablePlyr()
 	document.addEventListener('fullscreenchange', attachFullscreenEvent)
 })
 
@@ -473,6 +472,7 @@ watch(
 	() => lesson.data,
 	(data) => {
 		setupLesson(data)
+		enablePlyr()
 	}
 )
 

frontend/src/utils/index.js

@@ -531,26 +531,28 @@ export const enablePlyr = () => {
 		const videoElement = document.getElementsByClassName('video-player')
 		if (videoElement.length === 0) return
 
-		const src = videoElement[0].getAttribute('src')
+		Array.from(videoElement).forEach((video) => {
-		if (src) {
+			const src = video.getAttribute('src')
-			let videoID = src.split('/').pop()
+			if (src) {
-			videoElement[0].setAttribute('data-plyr-embed-id', videoID)
+				let videoID = src.split('/').pop()
-		}
+				video.setAttribute('data-plyr-embed-id', videoID)
-		new Plyr('.video-player', {
+			}
-			youtube: {
+			new Plyr(video, {
-				noCookie: true,
+				youtube: {
-			},
+					noCookie: true,
-			controls: [
+				},
-				'play-large',
+				controls: [
-				'play',
+					'play-large',
-				'progress',
+					'play',
-				'current-time',
+					'progress',
-				'mute',
+					'current-time',
-				'volume',
+					'mute',
-				'fullscreen',
+					'volume',
-			],
+					'fullscreen',
-		})
+				],
-	}, 500)
+			})
+		}, 500)
+	})
 }
 
 export const openSettings = (category, close) => {