feat: implement e-learning classroom page with video player, lesson navigation, progress tracking, and announcements.

Frontend-Learner/components/classroom/VideoPlayer.vue

@@ -124,18 +124,33 @@ const stopYTTracking = () => {
     if (ytInterval) clearInterval(ytInterval);
 };
 
+const destroyYoutubePlayer = () => {
+    stopYTTracking();
+    if (ytPlayer) {
+        try {
+            if (ytPlayer.destroy) ytPlayer.destroy();
+        } catch (e) {
+            console.warn('Error destroying YT player:', e);
+        }
+        ytPlayer = null;
+    }
+};
+
 onMounted(() => {
     if (isYoutube.value) initYoutubeAPI();
 });
 
 onUnmounted(() => {
-    stopYTTracking();
+    destroyYoutubePlayer();
 });
 
 // Watch for src change to re-init
-watch(() => props.src, () => {
-    if (isYoutube.value) {
-        setTimeout(initYoutubeAPI, 500);
+watch(() => props.src, (newSrc, oldSrc) => {
+    if (newSrc !== oldSrc) {
+        destroyYoutubePlayer();
+        if (isYoutube.value) {
+            setTimeout(initYoutubeAPI, 300);
+        }
     }
 });