Блог

Мне нужно показать видео на Youtube, поэтому я использую React Player. Один щелчок по моему видео, я должен отобразить его на весь экран. Вот мой код:

 import ReactPlayer from 'react-player/lazy';
import { SerializedStyles } from '@emotion/core';
import _pick from 'lodash/pick';

import { StyledPlayerContainer, StyledContainer } from './style';

export const PROPS_TO_PICK_FOR_REACT_PLAYER = [
  'controls',
  'loop',
  'muted',
  'height',
  'width',
  'url'
];

export interface Props {
  autoPlay?: boolean;
  controls?: boolean;
  loop?: boolean;
  muted?: boolean;
  height?: string;
  width?: string;
  url: string;
  containerStyles?: SerializedStyles;
  playerContainerStyles?: SerializedStyles;
  onClick: (e: MouseEvent) => void;
}

const Wrapper = ({ children }) => <div>{children}</div>

const Player: React.FC<Props> = (props) => {
  const { onClick, containerStyles, autoPlay, playerContainerStyles } = props;
  return(
    <StyledContainer css={containerStyles}>
       <StyledPlayerContainer css={playerContainerStyles}>
        <ReactPlayer
          {..._pick(props, PROPS_TO_PICK_FOR_REACT_PLAYER)}
          playing={autoPlay}
          onClick={onClick}
          wrapper={Wrapper}
        />
     </StyledPlayerContainer>
    </StyledContainer>
  )
}

Player.defaultProps = {
  controls: true,
  height: '100%',
  width: '100%',
  loop: false,
  muted: false,
  autoPlay: true,
};

export default Player;
  

Согласно документам React-Player, я могу передать оболочку, а onClick в react player и onClick будут переданы моей оболочке.
Как проверено в devtools, обработчик щелчков привязывается к моей оболочке, но он не вызывается.
Попытался применить onClick также к StyledContainer и StyledPlayerContainer, но он не вызывается.

onClick никогда не будет работать при передаче в оболочку react-player, потому что react-player монтирует iframe для youtube. Iframe действует как отдельный документ, поэтому события начинаются с iframe и заканчиваются в iframe, означает, что захват начинается с iframe, а распространение заканчивается только в iframe, поэтому onClick обертки никогда не вызывается.