From 63f600d1dd2664eb7ef5728c69e47fc79043b034 Mon Sep 17 00:00:00 2001
From: Sanchitv3 <sanchitverma03032003@gmail.com>
Date: Thu, 16 Jan 2025 12:53:15 +0530
Subject: [PATCH 1/2] fix: fixed ytPlayer issue in Vadim's Stream

---
 .../nativewind/VadimStream.tsx                | 110 ++++++++++++------
 1 file changed, 73 insertions(+), 37 deletions(-)

diff --git a/example/storybook-nativewind/src/extra-components/nativewind/VadimStream.tsx b/example/storybook-nativewind/src/extra-components/nativewind/VadimStream.tsx
index 5f7cb872d..c46fcbf6d 100644
--- 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>
   );
 };

From 57061fd154109af269f54b5530de42e68238fbb6 Mon Sep 17 00:00:00 2001
From: Akash Gautam <akash3gtm@gmail.com>
Date: Thu, 16 Jan 2025 13:36:53 +0530
Subject: [PATCH 2/2] fix: ui changes

---
 .../nativewind/VadimStream.tsx                | 67 +++++++------------
 1 file changed, 23 insertions(+), 44 deletions(-)

diff --git a/example/storybook-nativewind/src/extra-components/nativewind/VadimStream.tsx b/example/storybook-nativewind/src/extra-components/nativewind/VadimStream.tsx
index c46fcbf6d..fc1fe0995 100644
--- a/example/storybook-nativewind/src/extra-components/nativewind/VadimStream.tsx
+++ b/example/storybook-nativewind/src/extra-components/nativewind/VadimStream.tsx
@@ -1,12 +1,6 @@
 'use client';
-import React from 'react';
-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';
+import { Box } from '@/components/ui/box';
+import React, { useEffect } from 'react';
 
 declare global {
   interface Window {
@@ -76,42 +70,27 @@ const VadimStream = () => {
   }, []);
 
   return (
-    <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 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>
     </Box>
   );
 };