From a633ff517457059208cb3d9a8e866a9403404b68 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Thu, 24 Apr 2025 12:06:57 +0530
Subject: [PATCH] fix: check if youtube or vimeo video exists before enabling
 plyr

---
 frontend/src/pages/Lesson.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/Lesson.vue b/frontend/src/pages/Lesson.vue
index e477f074..4543fc30 100644
--- a/frontend/src/pages/Lesson.vue
+++ b/frontend/src/pages/Lesson.vue
@@ -296,7 +296,10 @@ onBeforeUnmount(() => {
 
 const enablePlyr = () => {
 	setTimeout(() => {
-		let src = document
+		const videoElement = document.getElementsByClassName('video-player')
+		if (videoElement.length === 0) return
+
+		const src = document
 			.getElementsByClassName('video-player')[0]
 			.getAttribute('src')
 		if (src) {
@@ -689,5 +692,18 @@ usePageMeta(() => {
 }
 
 .plyr__control--overlaid {
+	background: radial-gradient(
+		circle,
+		rgba(0, 0, 0, 0.4) 0%,
+		rgba(0, 0, 0, 0.5) 50%
+	);
+}
+
+:root {
+	--plyr-video-controls-background: radial-gradient(
+		circle,
+		rgba(0, 0, 0, 0.4) 0%,
+		rgba(0, 0, 0, 0.5) 50%
+	);
 }
 </style>