content: import React from 'react';
  
  import {MediaPlayer} from '../MediaPlayer';
  import {useTextTracks} from '../useTextTracks';
  import {useMediaMuted} from '../useMediaMuted';
  import {useVideoQualitySetting} from '../useVideoQualitySetting';
  import {sources} from './sources'
  import {VideoStructuredData} from './VideoStructuredData';
  
  /**
   * Render video file in MediaPlayer.
   *
   * @param {Object} props
   * @param {Object} props.videoFile - Video file obtained via `useFile`.
   * @param {number} [props.posterImageFile] - Poster image file obtained via `useFile`.
   * @param {number} [props.defaultTextTrackFileId] - Perma id of default text track file.
   * @param {string} [props.load] - Control lazy loading. `"auto"` (default), `"poster"` or `"none"`.
   * @param {String} [props.fit] - `"contain"` (default) or `"cover"`.
   */
  export function VideoPlayer({videoFile, posterImageFile, ...props}) {
    const [activeQuality] = useVideoQualitySetting();
    const textTracks = useTextTracks({
      file: videoFile,
      defaultTextTrackFilePermaId: props.defaultTextTrackFilePermaId,
      captionsByDefault: useMediaMuted()
    });
  
    if (videoFile && videoFile.isReady) {
      return (
        <>
          <MediaPlayer type={'video'}
                       fit={props.fit}
                       textTracks={textTracks}
                       filePermaId={videoFile.permaId}
                       sources={sources(videoFile, activeQuality)}
                       textTracksInset={true}
                       posterImageUrl={posterImageFile && posterImageFile.isReady ?
                                       posterImageFile.urls.large : videoFile.urls.posterLarge}
                       altText={videoFile.configuration.alt}
                       objectPosition={props.fit === 'cover' ? videoFile.cropPosition : undefined}
                       {...props} />
          <VideoStructuredData file={videoFile} />
        </>
      );
    }
  
    return null;
  }
  
  VideoPlayer.defaultProps = {
    fit: 'contain',
    controls: true
  };
  