make this code its highest optimisation

LALIT KISHOR answered on October 4, 2023 Popularity 1/10 Helpfulness 1/10

answer make this code its highest optimisation

make this code its highest optimisation

Comment

import React, { useEffect, useRef, useState } from 'react';

function App() {
  const [players, setPlayers] = useState([]);
  const iframeRefs = [useRef(null), useRef(null)];

  useEffect(() => {
    // Load the YouTube API script
    const script = document.createElement('script');
    script.src = 'https://www.youtube.com/iframe_api';
    script.async = true;
    script.defer = true;

    script.onload = () => {
      // Initialize the YouTube players
      setPlayers([
        new window.YT.Player(iframeRefs[0].current),
        new window.YT.Player(iframeRefs[1].current),
      ]);
    };

    document.body.appendChild(script);

    return () => {
      // Cleanup: Remove the script when the component unmounts
      document.body.removeChild(script);
    };
  }, []);

  // Function to sync both videos to the same playback time
  const syncVideos = (currentTime) => {
    players.forEach((player) => {
      player.seekTo(currentTime);
    });
  };

  // Function to play both videos together
  const playBothVideos = () => {
    players.forEach((player) => {
      player.playVideo();
    });
  };

  return (
    <div className="container">
      <div className="video-container">
        <iframe
          title="Video 1"
          width="640"
          height="360"
          src="https://www.youtube.com/embed/aMn7sO1d4Yc"
          frameBorder="0"
          ref={iframeRefs[0]}
          allowFullScreen
        ></iframe>
      </div>
      <div className="video-container">
        <iframe
          title="Video 2"
          width="640"
          height="360"
          src="https://www.youtube.com/embed/8Pv96bvBJL4"
          frameBorder="0"
          ref={iframeRefs[1]}
          allowFullScreen
        ></iframe>
      </div>
      <button onClick={playBothVideos}>Play Both Videos</button>
      <button onClick={() => syncVideos(30)}>Sync to 30s</button>
    </div>
  );
}

export default App;

Popularity 1/10 Helpfulness 1/10 Language typescript

Source: chat.openai.com

Tags: highest this typescript

Link to this answer
Share Copy Link

Contributed on Oct 04 2023

LALIT KISHOR

0 Answers Avg Quality 2/10

make this code its highest optimisation

Contents

More Related Answers

make this code its highest optimisation

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.