Implement proper youtube support

2025-03-01 12:58:33 +01:00
parent f00ca9ba7c
commit 206988f4b7
8 changed files with 585 additions and 38 deletions
--- a/client/src/components/YouTubePlayer/YouTubePlayer.jsx
+++ b/client/src/components/YouTubePlayer/YouTubePlayer.jsx
@ -0,0 +1,117 @@
+import React, { useEffect, useRef, useState } from 'react';
+import './styles.sass';
+
+const YouTubePlayer = ({ 
+  videoId, 
+  autoplay = false, 
+  volume = 50,
+  startTime = 45,
+  onReady = () => {},
+  onError = () => {},
+  className = ''
+}) => {
+  const iframeRef = useRef(null);
+  const playerRef = useRef(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+  
+  console.log("YouTubePlayer rendering with videoId:", videoId, "volume:", volume, "startTime:", startTime);
+
+  useEffect(() => {
+    if (!window.YT) {
+      const tag = document.createElement('script');
+      tag.src = 'https://www.youtube.com/iframe_api';
+
+      window.onYouTubeIframeAPIReady = () => {
+        console.log("YouTube API ready");
+      };
+      
+      const firstScriptTag = document.getElementsByTagName('script')[0];
+      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!videoId) return;
+
+    const createPlayer = () => {
+      if (!window.YT || !window.YT.Player) {
+        console.log("YouTube API not ready, waiting...");
+        setTimeout(createPlayer, 100);
+        return;
+      }
+
+      if (playerRef.current) {
+        playerRef.current.destroy();
+        playerRef.current = null;
+      }
+      
+      console.log("Creating YouTube player for video:", videoId);
+      
+      try {
+        playerRef.current = new window.YT.Player(iframeRef.current, {
+          height: '200',
+          width: '300',
+          videoId: videoId,
+          playerVars: {
+            'playsinline': 1,
+            'controls': 1,
+            'showinfo': 0,
+            'rel': 0,
+            'autoplay': autoplay ? 1 : 0,
+            'start': startTime
+          },
+          events: {
+            'onReady': (event) => {
+              console.log("YouTube player ready");
+              event.target.setVolume(volume);
+              if (autoplay) {
+                event.target.seekTo(startTime);
+                event.target.playVideo();
+              }
+              setIsLoaded(true);
+              onReady();
+            },
+            'onError': (event) => {
+              console.error("YouTube player error:", event);
+              onError(event);
+            }
+          }
+        });
+      } catch (error) {
+        console.error("Error creating YouTube player:", error);
+      }
+    };
+    
+    createPlayer();
+
+    return () => {
+      if (playerRef.current) {
+        try {
+          playerRef.current.destroy();
+          playerRef.current = null;
+        } catch (e) {
+          console.error("Error destroying player:", e);
+        }
+      }
+    };
+  }, [videoId, autoplay, onReady, onError, startTime]);
+
+  useEffect(() => {
+    if (playerRef.current && isLoaded) {
+      console.log("Setting YouTube volume to:", volume);
+      try {
+        playerRef.current.setVolume(volume);
+      } catch (error) {
+        console.error("Error setting volume:", error);
+      }
+    }
+  }, [volume, isLoaded]);
+
+  return (
+    <div className={`youtube-player-container ${className}`}>
+      <div ref={iframeRef} className="youtube-embed" />
+    </div>
+  );
+};
+
+export default YouTubePlayer;