react-native-youtube-bridge/lib/module/YoutubeView.web.js

🎥 Easy-to-use YouTube player for React Native with cross-platform support

"use strict";

import { useEffect, useRef, useState } from 'react';
import { useWindowDimensions } from 'react-native';
import { WebYoutubePlayerController } from '@react-native-youtube-bridge/core';
import { INTERNAL_SET_CONTROLLER_INSTANCE, INTERNAL_UPDATE_PROGRESS_INTERVAL } from "./modules/YoutubePlayer.js";
import YoutubeViewWrapper from "./YoutubeViewWrapper.js";
import { jsx as _jsx } from "react/jsx-runtime";
function YoutubeView({
  player,
  height,
  width,
  style,
  iframeStyle
}) {
  const {
    width: screenWidth
  } = useWindowDimensions();
  const containerRef = useRef(null);
  const playerRef = useRef(null);
  const [isInitialized, setIsInitialized] = useState(false);
  useEffect(() => {
    WebYoutubePlayerController.initialize().then(() => {
      setIsInitialized(true);
    });
  }, []);
  useEffect(() => {
    if (!isInitialized || !containerRef.current || !player) {
      return;
    }
    const videoId = player.getVideoId();
    if (!videoId) {
      return;
    }
    const containerId = `youtube-player-${videoId}`;
    containerRef.current.id = containerId;
    const options = player.getOptions();
    const controller = WebYoutubePlayerController.createInstance();
    playerRef.current = controller;
    player[INTERNAL_SET_CONTROLLER_INSTANCE](playerRef.current);
    player[INTERNAL_UPDATE_PROGRESS_INTERVAL]();
    playerRef.current?.updateCallbacks({
      onReady: playerInfo => {
        player.emit('ready', playerInfo);
      },
      onStateChange: state => {
        player.emit('stateChange', state);
      },
      onError: error => {
        player.emit('error', error);
      },
      onPlaybackRateChange: playbackRate => {
        player.emit('playbackRateChange', playbackRate);
      },
      onPlaybackQualityChange: playbackQuality => {
        player.emit('playbackQualityChange', playbackQuality);
      },
      onAutoplayBlocked: () => {
        player.emit('autoplayBlocked', undefined);
      },
      onProgress: progress => {
        player.emit('progress', progress);
      }
    });
    playerRef.current?.createPlayer(containerId, {
      videoId,
      ...options
    });
    return () => {
      if (playerRef.current) {
        playerRef.current.destroy();
        playerRef.current = null;
      }
    };
  }, [isInitialized, player]);
  return /*#__PURE__*/_jsx(YoutubeViewWrapper, {
    width: width ?? screenWidth,
    height: height ?? 200,
    style: style,
    children: /*#__PURE__*/_jsx("div", {
      ref: containerRef,
      style: {
        width: '100%',
        height: '100%',
        ...iframeStyle
      }
    })
  });
}
export default YoutubeView;
//# sourceMappingURL=YoutubeView.web.js.map