fix: fixed ytPlayer issue in Vadim's Stream

gluestack · Jan 16, 2025 · 63f600d · 63f600d
1 parent 1d30cb5
commit 63f600d
Showing 1 changed file with 73 additions and 37 deletions.
diff --git a/example/storybook-nativewind/src/extra-components/nativewind/VadimStream.tsx b/example/storybook-nativewind/src/extra-components/nativewind/VadimStream.tsx
@@ -1,6 +1,11 @@
 'use client';
 import React from 'react';
-import { Box } from '@/components/ui/box';
+import { Box } from '@/components/ui/box/';
+import { Heading } from '@/components/ui/heading/';
+import { Text } from '@/components/ui/text/';
+import { VStack } from '@/components/ui/vstack/';
+import { HStack } from '@/components/ui/hstack/';
+import { Span } from '@expo/html-elements';
 import { useEffect } from 'react';
 
 declare global {
@@ -12,70 +17,101 @@ declare global {
 
 const VadimStream = () => {
   useEffect(() => {
-    let player1: any = null;
-    let player2: any = null;
-
-    // Load the IFrame Player API code asynchronously
-    const loadYouTubeAPI = () => {
+    // Only load the API if it hasn't been loaded yet
+    if (!document.getElementById('youtube-api')) {
       const tag = document.createElement('script');
+      tag.id = 'youtube-api';
       tag.src = 'https://www.youtube.com/iframe_api';
       const firstScriptTag = document.getElementsByTagName('script')[0];
       firstScriptTag.parentNode?.insertBefore(tag, firstScriptTag);
-    };
+    }
 
-    // This function creates an <iframe> (and YouTube player) after the API code downloads
-    window.onYouTubeIframeAPIReady = () => {
-      player1 = new window.YT.Player('player1', {
-        height: '100%',
-        width: '100%',
-        videoId: 'FBXUPJ9_Xl0',
-        playerVars: {
-          playsinline: 1,
-        },
+    // Initialize players when API is ready
+    const initializePlayers = () => {
+      new window.YT.Player('player1', {
         events: {
           onStateChange: (event: any) => {
             if (event.data === window.YT.PlayerState.PLAYING) {
-              player2?.pauseVideo();
+              const player2Frame = document.getElementById(
+                'player2'
+              ) as HTMLIFrameElement;
+              player2Frame?.contentWindow?.postMessage(
+                '{"event":"command","func":"pauseVideo","args":""}',
+                '*'
+              );
             }
           },
         },
       });
 
-      player2 = new window.YT.Player('player2', {
-        height: '100%',
-        width: '100%',
-        videoId: '9ErkOcDWJxI',
-        playerVars: {
-          playsinline: 1,
-        },
+      new window.YT.Player('player2', {
         events: {
           onStateChange: (event: any) => {
             if (event.data === window.YT.PlayerState.PLAYING) {
-              player1?.pauseVideo();
+              const player1Frame = document.getElementById(
+                'player1'
+              ) as HTMLIFrameElement;
+              player1Frame?.contentWindow?.postMessage(
+                '{"event":"command","func":"pauseVideo","args":""}',
+                '*'
+              );
             }
           },
         },
       });
     };
 
-    loadYouTubeAPI();
+    // If API is already loaded, initialize players directly
+    if (window.YT && window.YT.Player) {
+      initializePlayers();
+    } else {
+      // Otherwise wait for API to load
+      window.onYouTubeIframeAPIReady = initializePlayers;
+    }
 
     return () => {
-      player1?.destroy();
-      player2?.destroy();
+      // Only reset the ready handler, don't remove the script
+      window.onYouTubeIframeAPIReady = () => {};
     };
   }, []);
 
   return (
-    <Box className="relative flex-1 w-full h-full gap-5 flex-col md:flex-row mb-auto">
-      <Box
-        className="flex-1 border border-outline-200 rounded-lg overflow-hidden aspect-video"
-        id="player1"
-      />
-      <Box
-        className="flex-1 border border-outline-200 rounded-lg overflow-hidden aspect-video"
-        id="player2"
-      />
+    <Box className="gap-20">
+      <VStack className="max-w-[1024px] mt-[120px] gap-3">
+        <Heading className="text-3xl font-roboto font-bold sm:leading-[54px] leading-9 text-typography-900 sm:text-4xl">
+          Learn about gluestack from Youtube guru{' '}
+          <Span className="text-3xl font-roboto font-bold sm:leading-[54px] leading-9 text-info-600 sm:text-4xl">
+            notJust.dev
+          </Span>
+        </Heading>
+        <Text className="text-lg font-roboto font-normal leading-[30px] lg:w-[75%]">
+          Vadim, popularly known as "just-not-dev" on YouTube, offers insightful
+          and practical videos that explore a wide range of developer tools and
+          frameworks, including Gluestack-UI.
+        </Text>
+      </VStack>
+      <HStack className="relative flex-1 w-full h-full gap-5 flex-col md:flex-row">
+        <Box className="flex-1 border border-outline-200 rounded-lg overflow-hidden aspect-video">
+          <iframe
+            id="player1"
+            width="100%"
+            height="100%"
+            src="https://www.youtube.com/embed/FBXUPJ9_Xl0?enablejsapi=1"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+          />
+        </Box>
+        <Box className="flex-1 border border-outline-200 rounded-lg overflow-hidden aspect-video">
+          <iframe
+            id="player2"
+            width="100%"
+            height="100%"
+            src="https://www.youtube.com/embed/9ErkOcDWJxI?enablejsapi=1"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+          />
+        </Box>
+      </HStack>
     </Box>
   );
 };