react-native-vimeo-bridge/lib/module/VimeoView.web.js

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

"use strict";

import { useEffect, useRef, useState } from 'react';
import { useWindowDimensions } from 'react-native';
import WebVimeoPlayerController from "./module/WebVimeoPlayerController.js";
import { INTERNAL_SET_CONTROLLER_INSTANCE } from "./symbol.js";
import VimeoViewWrapper from "./VimeoViewWrapper.js";
import { jsx as _jsx } from "react/jsx-runtime";
function VimeoView({
  player,
  height = 200,
  width,
  style,
  iframeStyle
}) {
  const containerRef = useRef(null);
  const playerRef = useRef(null);
  const [isInitialized, setIsInitialized] = useState(false);
  const {
    width: screenWidth
  } = useWindowDimensions();
  useEffect(() => {
    WebVimeoPlayerController.initialize().then(() => {
      setIsInitialized(true);
      playerRef.current = WebVimeoPlayerController.createInstance();
    });
  }, []);
  useEffect(() => {
    const source = player.getSource();
    if (isInitialized && containerRef.current && source) {
      const containerId = `vimeo-player-${Math.random().toString(36).substring(2, 15)}`;
      containerRef.current.id = containerId;
      const options = player.getOptions();
      playerRef.current?.createPlayer(containerId, {
        url: source,
        ...options
      });
      const vimeoPlayer = playerRef.current?.getVimeoPlayer();
      const listeners = player.getListeners();
      vimeoPlayer?.on('loaded', data => {
        const iframe = document.getElementById(containerId)?.querySelector('iframe');
        if (iframe) {
          iframe.style.width = '100%';
          iframe.style.height = '100%';
        }
        if (listeners.has('loaded')) {
          player.emit('loaded', data);
        }
        listeners.keys().forEach(event => {
          if (event !== 'loaded') {
            vimeoPlayer?.on(event, data => {
              player.emit(event, data);
            });
          }
        });
      });
      player[INTERNAL_SET_CONTROLLER_INSTANCE](playerRef.current);
    }
  }, [isInitialized, player]);
  useEffect(() => {
    return () => {
      if (playerRef.current) {
        playerRef.current = null;
      }
    };
  }, []);
  return /*#__PURE__*/_jsx(VimeoViewWrapper, {
    width: width ?? screenWidth,
    height: height,
    style: style,
    children: /*#__PURE__*/_jsx("div", {
      ref: containerRef,
      style: {
        width: '100%',
        height: '100%',
        ...iframeStyle
      }
    })
  });
}
export default VimeoView;
//# sourceMappingURL=VimeoView.web.js.map