react-tcplayer/src/reactTcplayer.js

react-tcplayer

import React, { useRef, useEffect, useState } from 'react';
import bgImg from './img/smallScreen_bg.png';

const checkFlash = () => {
  let swf = navigator.plugins['Shockwave Flash'];
  return swf ? true : false;
};

const ReactTcplayer = (props) => {
  const playerDom = useRef();
  const { src, poster } = props;
  let [inited, setInited] = useState(false);
  let [nowSrc, setNowSrc] = useState();
  let [hasFlash, setHasFlash] = useState(false);
  let [myTcplayer, setMyTcplayer] = useState(myTcplayer);

  useEffect(() => {
    setHasFlash(checkFlash());

    return () => {
      if (this.myTcplayer) {
        this.myTcplayer.destroy();
      }
    };
  }, []);

  useEffect(() => {
    if (playerDom && playerDom.current) {
      if (!window._TCPLAYERID) {
        window._TCPLAYERID = 0;
      }
      let id = `tcplayer_${window._TCPLAYERID}`;
      playerDom.current.id = id;
      window._TCPLAYERID = window._TCPLAYERID + 1;
    }
  }, [playerDom]);

  useEffect(() => {
    if (hasFlash && playerDom && playerDom.current && src && src !== nowSrc) {
      if (myTcplayer) {
        myTcplayer.destroy();
      }
      let isRtmp = src.indexOf('rtmp') === 0;
      let params = {
        width: playerDom.current.parentNode.clientWidth,
        height: playerDom.current.parentNode.clientHeight,
        flash: isRtmp,
        poster: poster || { style: 'stretch', src: bgImg },
        live: true,
        autoplay: true,
        controls: 'none',
      };
      if (isRtmp) {
        params.rtmp = src;
      } else {
        params.m3u8 = src;
      }
      setNowSrc(src);
      try {
        setMyTcplayer(new window.TcPlayer(playerDom.current.id, params));
      } catch {}
    }
  }, [playerDom, hasFlash, myTcplayer, src, poster]);

  return (
    <div ref={playerDom}>
      {!hasFlash ? (
        <object
          classID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
          width="100"
          height="100"
          codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
        >
          <param name="wmode" value="transparent" />
        </object>
      ) : null}
    </div>
  );
};

export default ReactTcplayer;