feat: Keep a backup from old videojs files

frontend/src/static/js/components/__OLD_VIDEOJS__video-player/VideoPlayer.jsx

@@ -0,0 +1,257 @@
+import React, { useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import urlParse from 'url-parse';
+
+import MediaPlayer from 'mediacms-player/dist/mediacms-player.js';
+import 'mediacms-player/dist/mediacms-player.css';
+
+import './VideoPlayer.scss';
+
+export function formatInnerLink(url, baseUrl) {
+    let link = urlParse(url, {});
+
+    if ('' === link.origin || 'null' === link.origin || !link.origin) {
+        link = urlParse(baseUrl + '/' + url.replace(/^\//g, ''), {});
+    }
+
+    return link.toString();
+}
+
+export function VideoPlayerError(props) {
+    return (
+        <div className="error-container">
+            <div className="error-container-inner">
+                <span className="icon-wrap">
+                    <i className="material-icons">error_outline</i>
+                </span>
+                <span className="msg-wrap">{props.errorMessage}</span>
+            </div>
+        </div>
+    );
+}
+
+VideoPlayerError.propTypes = {
+    errorMessage: PropTypes.string.isRequired,
+};
+
+export function VideoPlayer(props) {
+    const videoElemRef = useRef(null);
+
+    let player = null;
+
+    const playerStates = {
+        playerVolume: props.playerVolume,
+        playerSoundMuted: props.playerSoundMuted,
+        videoQuality: props.videoQuality,
+        videoPlaybackSpeed: props.videoPlaybackSpeed,
+        inTheaterMode: props.inTheaterMode,
+    };
+
+    playerStates.playerVolume =
+        null === playerStates.playerVolume ? 1 : Math.max(Math.min(Number(playerStates.playerVolume), 1), 0);
+    playerStates.playerSoundMuted = null !== playerStates.playerSoundMuted ? playerStates.playerSoundMuted : !1;
+    playerStates.videoQuality = null !== playerStates.videoQuality ? playerStates.videoQuality : 'Auto';
+    playerStates.videoPlaybackSpeed = null !== playerStates.videoPlaybackSpeed ? playerStates.videoPlaybackSpeed : !1;
+    playerStates.inTheaterMode = null !== playerStates.inTheaterMode ? playerStates.inTheaterMode : !1;
+
+    function onClickNext() {
+        if (void 0 !== props.onClickNextCallback) {
+            props.onClickNextCallback();
+        }
+    }
+
+    function onClickPrevious() {
+        if (void 0 !== props.onClickPreviousCallback) {
+            props.onClickPreviousCallback();
+        }
+    }
+
+    function onPlayerStateUpdate(newState) {
+        if (playerStates.playerVolume !== newState.volume) {
+            playerStates.playerVolume = newState.volume;
+        }
+
+        if (playerStates.playerSoundMuted !== newState.soundMuted) {
+            playerStates.playerSoundMuted = newState.soundMuted;
+        }
+
+        if (playerStates.videoQuality !== newState.quality) {
+            playerStates.videoQuality = newState.quality;
+        }
+
+        if (playerStates.videoPlaybackSpeed !== newState.playbackSpeed) {
+            playerStates.videoPlaybackSpeed = newState.playbackSpeed;
+        }
+
+        if (playerStates.inTheaterMode !== newState.theaterMode) {
+            playerStates.inTheaterMode = newState.theaterMode;
+        }
+
+        if (void 0 !== props.onStateUpdateCallback) {
+            props.onStateUpdateCallback(newState);
+        }
+    }
+
+    function initPlayer() {
+        if (null !== player || null !== props.errorMessage) {
+            return;
+        }
+
+        if (!props.inEmbed) {
+            window.removeEventListener('focus', initPlayer);
+            document.removeEventListener('visibilitychange', initPlayer);
+        }
+
+        if (!videoElemRef.current) {
+            return;
+        }
+
+        if (!props.inEmbed) {
+            videoElemRef.current.focus(); // Focus on player before instance init.
+        }
+
+        const subtitles = {
+            on: false,
+        };
+
+        if (void 0 !== props.subtitlesInfo && null !== props.subtitlesInfo && props.subtitlesInfo.length) {
+            subtitles.languages = [];
+
+            let i = 0;
+            while (i < props.subtitlesInfo.length) {
+                if (
+                    void 0 !== props.subtitlesInfo[i].src &&
+                    void 0 !== props.subtitlesInfo[i].srclang &&
+                    void 0 !== props.subtitlesInfo[i].label
+                ) {
+                    subtitles.languages.push({
+                        src: formatInnerLink(props.subtitlesInfo[i].src, props.siteUrl),
+                        srclang: props.subtitlesInfo[i].srclang,
+                        label: props.subtitlesInfo[i].label,
+                    });
+                }
+
+                i += 1;
+            }
+
+            if (subtitles.languages.length) {
+                subtitles.on = true;
+            }
+        }
+
+        player = new MediaPlayer(
+            videoElemRef.current,
+            {
+                enabledTouchControls: true,
+                sources: props.sources,
+                poster: props.poster,
+                autoplay: props.enableAutoplay,
+                bigPlayButton: true,
+                controlBar: {
+                    theaterMode: props.hasTheaterMode,
+                    pictureInPicture: false,
+                    next: props.hasNextLink ? true : false,
+                    previous: props.hasPreviousLink ? true : false,
+                },
+                subtitles: subtitles,
+                cornerLayers: props.cornerLayers,
+                videoPreviewThumb: props.previewSprite,
+            },
+            {
+                volume: playerStates.playerVolume,
+                soundMuted: playerStates.playerSoundMuted,
+                theaterMode: playerStates.inTheaterMode,
+                theSelectedQuality: void 0, // @note: Allow auto resolution selection by sources order.
+                theSelectedPlaybackSpeed: playerStates.videoPlaybackSpeed || 1,
+            },
+            props.info,
+            [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
+            onPlayerStateUpdate,
+            onClickNext,
+            onClickPrevious
+        );
+
+        if (void 0 !== props.onPlayerInitCallback) {
+            props.onPlayerInitCallback(player, videoElemRef.current);
+        }
+    }
+
+    function unsetPlayer() {
+        if (null === player) {
+            return;
+        }
+        videojs(videoElemRef.current).dispose();
+        player = null;
+    }
+
+    useEffect(() => {
+        if (props.inEmbed || document.hasFocus() || 'visible' === document.visibilityState) {
+            initPlayer();
+        } else {
+            window.addEventListener('focus', initPlayer);
+            document.addEventListener('visibilitychange', initPlayer);
+        }
+
+        /*
+      // We don't need this because we have a custom function in frontend/src/static/js/components/media-viewer/VideoViewer/index.js:617
+      player && player.player.one('loadedmetadata', () => {
+      const urlParams = new URLSearchParams(window.location.search);
+      const paramT = Number(urlParams.get('t'));
+      const timestamp = !isNaN(paramT) ? paramT : 0;
+      player.player.currentTime(timestamp);
+    }); */
+
+        return () => {
+            unsetPlayer();
+
+            if (void 0 !== props.onUnmountCallback) {
+                props.onUnmountCallback();
+            }
+        };
+    }, []);
+
+    return null === props.errorMessage ? (
+        <video ref={videoElemRef} className="video-js vjs-mediacms native-dimensions"></video>
+    ) : (
+        <div className="error-container">
+            <div className="error-container-inner">
+                <span className="icon-wrap">
+                    <i className="material-icons">error_outline</i>
+                </span>
+                <span className="msg-wrap">{props.errorMessage}</span>
+            </div>
+        </div>
+    );
+}
+
+VideoPlayer.propTypes = {
+    playerVolume: PropTypes.string,
+    playerSoundMuted: PropTypes.bool,
+    videoQuality: PropTypes.string,
+    videoPlaybackSpeed: PropTypes.number,
+    inTheaterMode: PropTypes.bool,
+    siteId: PropTypes.string.isRequired,
+    siteUrl: PropTypes.string.isRequired,
+    errorMessage: PropTypes.string,
+    cornerLayers: PropTypes.object,
+    subtitlesInfo: PropTypes.array.isRequired,
+    inEmbed: PropTypes.bool.isRequired,
+    sources: PropTypes.array.isRequired,
+    info: PropTypes.object.isRequired,
+    enableAutoplay: PropTypes.bool.isRequired,
+    hasTheaterMode: PropTypes.bool.isRequired,
+    hasNextLink: PropTypes.bool.isRequired,
+    hasPreviousLink: PropTypes.bool.isRequired,
+    poster: PropTypes.string,
+    previewSprite: PropTypes.object,
+    onClickPreviousCallback: PropTypes.func,
+    onClickNextCallback: PropTypes.func,
+    onPlayerInitCallback: PropTypes.func,
+    onStateUpdateCallback: PropTypes.func,
+    onUnmountCallback: PropTypes.func,
+};
+
+VideoPlayer.defaultProps = {
+    errorMessage: null,
+    cornerLayers: {},
+};

frontend/src/static/js/components/list-item/includes/items/includes.js

@@ -1,198 +1,203 @@
 import React from 'react';
 import { format } from 'timeago.js';
 import { formatViewsNumber, imageExtension } from '../../../../utils/helpers/';
-import { VideoPlayerByPageLink } from '../../../video-player/VideoPlayerByPageLink';
+// import { VideoPlayerByPageLink } from '../../../video-player/VideoPlayerByPageLink';
 import { translateString } from '../../../../utils/helpers/';
 
 export function ItemDescription(props) {
-  return '' === props.description ? null : (
+    return '' === props.description ? null : (
-    <div className="item-description">
+        <div className="item-description">
-      <div>{props.description}</div>
+            <div>{props.description}</div>
-    </div>
+        </div>
-  );
+    );
 }
 
 export function ItemMain(props) {
-  return <div className="item-main">{props.children}</div>;
+    return <div className="item-main">{props.children}</div>;
 }
 
 export function ItemMainInLink(props) {
-  return (
+    return (
-    <ItemMain>
+        <ItemMain>
-      <a className="item-content-link" href={props.link} title={props.title}>
+            <a className="item-content-link" href={props.link} title={props.title}>
-        {props.children}
+                {props.children}
-      </a>
+            </a>
-    </ItemMain>
+        </ItemMain>
-  );
+    );
 }
 
 export function ItemTitle(props) {
-  return '' === props.title ? null : (
+    return '' === props.title ? null : (
-    <h3>
+        <h3>
-      <span aria-label={props.ariaLabel}>{props.title}</span>
+            <span aria-label={props.ariaLabel}>{props.title}</span>
-    </h3>
+        </h3>
-  );
+    );
 }
 
 export function ItemTitleLink(props) {
-  return '' === props.title ? null : (
+    return '' === props.title ? null : (
-    <h3>
+        <h3>
-      <a href={props.link} title={props.title}>
+            <a href={props.link} title={props.title}>
-        <span aria-label={props.ariaLabel}>{props.title}</span>
+                <span aria-label={props.ariaLabel}>{props.title}</span>
-      </a>
+            </a>
-    </h3>
+        </h3>
-  );
+    );
 }
 
 export function UserItemMemberSince(props) {
-  return <time key="member-since">Member for {format(new Date(props.date)).replace(' ago', '')}</time>;
+    return <time key="member-since">Member for {format(new Date(props.date)).replace(' ago', '')}</time>;
 }
 
 export function TaxonomyItemMediaCount(props) {
-  return (
+    return (
-    <span key="item-media-count" className="item-media-count">
+        <span key="item-media-count" className="item-media-count">
-      {' ' + props.count} media
+            {' ' + props.count} media
-    </span>
+        </span>
-  );
+    );
 }
 
 export function PlaylistItemMetaDate(props) {
-  return (
+    return (
-    <span className="item-meta">
+        <span className="item-meta">
-      <span className="playlist-date">
+            <span className="playlist-date">
-        <time dateTime={props.dateTime}>{props.text}</time>
+                <time dateTime={props.dateTime}>{props.text}</time>
-      </span>
+            </span>
-    </span>
+        </span>
-  );
+    );
 }
 
 export function MediaItemEditLink(props) {
-  let link = props.link;
+    let link = props.link;
 
-  if (link && window.MediaCMS.site.devEnv) {
+    if (link && window.MediaCMS.site.devEnv) {
-    link = '/edit-media.html';
+        link = '/edit-media.html';
-  }
+    }
 
-  return !link ? null : (
+    return !link ? null : (
-    <a href={link} title={translateString("Edit media")} className="item-edit-link">
+        <a href={link} title={translateString('Edit media')} className="item-edit-link">
-      {translateString("EDIT MEDIA")}
+            {translateString('EDIT MEDIA')}
-    </a>
+        </a>
-  );
+    );
 }
 
 export function MediaItemThumbnailLink(props) {
-  const attr = {
+    const attr = {
-    key: 'item-thumb',
+        key: 'item-thumb',
-    href: props.link,
+        href: props.link,
-    title: props.title,
+        title: props.title,
-    tabIndex: '-1',
+        tabIndex: '-1',
-    'aria-hidden': true,
+        'aria-hidden': true,
-    className: 'item-thumb' + (!props.src ? ' no-thumb' : ''),
+        className: 'item-thumb' + (!props.src ? ' no-thumb' : ''),
-    style: !props.src ? null : { backgroundImage: "url('" + props.src + "')" },
+        style: !props.src ? null : { backgroundImage: "url('" + props.src + "')" },
-  };
+    };
 
-  return (
+    return (
-    <a {...attr}>
+        <a {...attr}>
-      {!props.src ? null : (
+            {!props.src ? null : (
-        <div key="item-type-icon" className="item-type-icon">
+                <div key="item-type-icon" className="item-type-icon">
-          <div></div>
+                    <div></div>
-        </div>
+                </div>
-      )}
+            )}
-    </a>
+        </a>
-  );
+    );
 }
 
 export function UserItemThumbnailLink(props) {
-  const attr = {
+    const attr = {
-    key: 'item-thumb',
+        key: 'item-thumb',
-    href: props.link,
+        href: props.link,
-    title: props.title,
+        title: props.title,
-    tabIndex: '-1',
+        tabIndex: '-1',
-    'aria-hidden': true,
+        'aria-hidden': true,
-    className: 'item-thumb' + (!props.src ? ' no-thumb' : ''),
+        className: 'item-thumb' + (!props.src ? ' no-thumb' : ''),
-    style: !props.src ? null : { backgroundImage: "url('" + props.src + "')" },
+        style: !props.src ? null : { backgroundImage: "url('" + props.src + "')" },
-  };
+    };
 
-  return <a {...attr}></a>;
+    return <a {...attr}></a>;
 }
 
 export function MediaItemAuthor(props) {
-  return '' === props.name ? null : (
+    return '' === props.name ? null : (
-    <span className="item-author">
+        <span className="item-author">
-      <span>{props.name}</span>
+            <span>{props.name}</span>
-    </span>
+        </span>
-  );
+    );
 }
 
 export function MediaItemAuthorLink(props) {
-  return '' === props.name ? null : (
+    return '' === props.name ? null : (
-    <span className="item-author">
+        <span className="item-author">
-      <a href={props.link} title={props.name}>
+            <a href={props.link} title={props.name}>
-        <span>{props.name}</span>
+                <span>{props.name}</span>
-      </a>
+            </a>
-    </span>
+        </span>
-  );
+    );
 }
 
 export function MediaItemMetaViews(props) {
-  return (
+    return (
-    <span className="item-views">{formatViewsNumber(props.views) + ' ' + (1 >= props.views ? translateString('view') : translateString('views'))}</span>
+        <span className="item-views">
-  );
+            {formatViewsNumber(props.views) +
+                ' ' +
+                (1 >= props.views ? translateString('view') : translateString('views'))}
+        </span>
+    );
 }
 
 export function MediaItemMetaDate(props) {
-  return (
+    return (
-    <span className="item-date">
+        <span className="item-date">
-      <time dateTime={props.dateTime} content={props.time}>
+            <time dateTime={props.dateTime} content={props.time}>
-        {props.text}
+                {props.text}
-      </time>
+            </time>
-    </span>
+        </span>
-  );
+    );
 }
 
 export function MediaItemDuration(props) {
-  return (
+    return (
-    <span className="item-duration">
+        <span className="item-duration">
-      <span aria-label={props.ariaLabel} content={props.time}>
+            <span aria-label={props.ariaLabel} content={props.time}>
-        {props.text}
+                {props.text}
-      </span>
+            </span>
-    </span>
+        </span>
-  );
+    );
 }
 
 export function MediaItemVideoPreviewer(props) {
-  if ('' === props.url) {
+    if ('' === props.url) {
-    return null;
+        return null;
-  }
+    }
 
-  const src = props.url.split('.').slice(0, -1).join('.');
+    const src = props.url.split('.').slice(0, -1).join('.');
-  const ext = imageExtension(props.url);
+    const ext = imageExtension(props.url);
 
-  return <span className="item-img-preview" data-src={src} data-ext={ext}></span>;
+    return <span className="item-img-preview" data-src={src} data-ext={ext}></span>;
 }
 
 export function MediaItemVideoPlayer(props) {
-  return (
+    return (
-    <div className="item-player-wrapper">
+        <div className="item-player-wrapper">
-      <div className="item-player-wrapper-inner">
+            <div className="item-player-wrapper-inner">
-        <VideoPlayerByPageLink pageLink={props.mediaPageLink} />
+                stop component tou VideoPlayerByPageLink
-      </div>
+                {/*  <VideoPlayerByPageLink pageLink={props.mediaPageLink} /> */}
-    </div>
+            </div>
-  );
+        </div>
+    );
 }
 
 export function MediaItemPlaylistIndex(props) {
-  return (
+    return (
-    <div className="item-order-number">
+        <div className="item-order-number">
-      <div>
+            <div>
-        <div data-order={props.index} data-id={props.media_id}>
+                <div data-order={props.index} data-id={props.media_id}>
-          {props.inPlayback && props.index === props.activeIndex ? (
+                    {props.inPlayback && props.index === props.activeIndex ? (
-            <i className="material-icons">play_arrow</i>
+                        <i className="material-icons">play_arrow</i>
-          ) : (
+                    ) : (
-            props.index
+                        props.index
-          )}
+                    )}
+                </div>
+            </div>
         </div>
-      </div>
+    );
-    </div>
-  );
 }

frontend/src/static/js/components/video-player/VideoPlayer.jsx

@@ -1,257 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import urlParse from 'url-parse';
-
-import MediaPlayer from 'mediacms-player/dist/mediacms-player.js';
-import 'mediacms-player/dist/mediacms-player.css';
-
-import './VideoPlayer.scss';
-
-export function formatInnerLink(url, baseUrl) {
-  let link = urlParse(url, {});
-
-  if ('' === link.origin || 'null' === link.origin || !link.origin) {
-    link = urlParse(baseUrl + '/' + url.replace(/^\//g, ''), {});
-  }
-
-  return link.toString();
-}
-
-export function VideoPlayerError(props) {
-  return (
-    <div className="error-container">
-      <div className="error-container-inner">
-        <span className="icon-wrap">
-          <i className="material-icons">error_outline</i>
-        </span>
-        <span className="msg-wrap">{props.errorMessage}</span>
-      </div>
-    </div>
-  );
-}
-
-VideoPlayerError.propTypes = {
-  errorMessage: PropTypes.string.isRequired,
-};
-
-export function VideoPlayer(props) {
-  const videoElemRef = useRef(null);
-
-  let player = null;
-
-  const playerStates = {
-    playerVolume: props.playerVolume,
-    playerSoundMuted: props.playerSoundMuted,
-    videoQuality: props.videoQuality,
-    videoPlaybackSpeed: props.videoPlaybackSpeed,
-    inTheaterMode: props.inTheaterMode,
-  };
-
-  playerStates.playerVolume =
-    null === playerStates.playerVolume ? 1 : Math.max(Math.min(Number(playerStates.playerVolume), 1), 0);
-  playerStates.playerSoundMuted = null !== playerStates.playerSoundMuted ? playerStates.playerSoundMuted : !1;
-  playerStates.videoQuality = null !== playerStates.videoQuality ? playerStates.videoQuality : 'Auto';
-  playerStates.videoPlaybackSpeed = null !== playerStates.videoPlaybackSpeed ? playerStates.videoPlaybackSpeed : !1;
-  playerStates.inTheaterMode = null !== playerStates.inTheaterMode ? playerStates.inTheaterMode : !1;
-
-  function onClickNext() {
-    if (void 0 !== props.onClickNextCallback) {
-      props.onClickNextCallback();
-    }
-  }
-
-  function onClickPrevious() {
-    if (void 0 !== props.onClickPreviousCallback) {
-      props.onClickPreviousCallback();
-    }
-  }
-
-  function onPlayerStateUpdate(newState) {
-    if (playerStates.playerVolume !== newState.volume) {
-      playerStates.playerVolume = newState.volume;
-    }
-
-    if (playerStates.playerSoundMuted !== newState.soundMuted) {
-      playerStates.playerSoundMuted = newState.soundMuted;
-    }
-
-    if (playerStates.videoQuality !== newState.quality) {
-      playerStates.videoQuality = newState.quality;
-    }
-
-    if (playerStates.videoPlaybackSpeed !== newState.playbackSpeed) {
-      playerStates.videoPlaybackSpeed = newState.playbackSpeed;
-    }
-
-    if (playerStates.inTheaterMode !== newState.theaterMode) {
-      playerStates.inTheaterMode = newState.theaterMode;
-    }
-
-    if (void 0 !== props.onStateUpdateCallback) {
-      props.onStateUpdateCallback(newState);
-    }
-  }
-
-  function initPlayer() {
-    if (null !== player || null !== props.errorMessage) {
-      return;
-    }
-
-    if (!props.inEmbed) {
-      window.removeEventListener('focus', initPlayer);
-      document.removeEventListener('visibilitychange', initPlayer);
-    }
-
-    if (!videoElemRef.current) {
-      return;
-    }
-
-    if (!props.inEmbed) {
-      videoElemRef.current.focus(); // Focus on player before instance init.
-    }
-
-    const subtitles = {
-      on: false,
-    };
-
-    if (void 0 !== props.subtitlesInfo && null !== props.subtitlesInfo && props.subtitlesInfo.length) {
-      subtitles.languages = [];
-
-      let i = 0;
-      while (i < props.subtitlesInfo.length) {
-        if (
-          void 0 !== props.subtitlesInfo[i].src &&
-          void 0 !== props.subtitlesInfo[i].srclang &&
-          void 0 !== props.subtitlesInfo[i].label
-        ) {
-          subtitles.languages.push({
-            src: formatInnerLink(props.subtitlesInfo[i].src, props.siteUrl),
-            srclang: props.subtitlesInfo[i].srclang,
-            label: props.subtitlesInfo[i].label,
-          });
-        }
-
-        i += 1;
-      }
-
-      if (subtitles.languages.length) {
-        subtitles.on = true;
-      }
-    }
-
-    player = new MediaPlayer(
-      videoElemRef.current,
-      {
-        enabledTouchControls: true,
-        sources: props.sources,
-        poster: props.poster,
-        autoplay: props.enableAutoplay,
-        bigPlayButton: true,
-        controlBar: {
-          theaterMode: props.hasTheaterMode,
-          pictureInPicture: false,
-          next: props.hasNextLink ? true : false,
-          previous: props.hasPreviousLink ? true : false,
-        },
-        subtitles: subtitles,
-        cornerLayers: props.cornerLayers,
-        videoPreviewThumb: props.previewSprite,
-      },
-      {
-        volume: playerStates.playerVolume,
-        soundMuted: playerStates.playerSoundMuted,
-        theaterMode: playerStates.inTheaterMode,
-        theSelectedQuality: void 0, // @note: Allow auto resolution selection by sources order.
-        theSelectedPlaybackSpeed: playerStates.videoPlaybackSpeed || 1,
-      },
-      props.info,
-      [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
-      onPlayerStateUpdate,
-      onClickNext,
-      onClickPrevious
-    );
-
-    if (void 0 !== props.onPlayerInitCallback) {
-      props.onPlayerInitCallback(player, videoElemRef.current);
-    }
-  }
-
-  function unsetPlayer() {
-    if (null === player) {
-      return;
-    }
-    videojs(videoElemRef.current).dispose();
-    player = null;
-  }
-
-  useEffect(() => {
-    if (props.inEmbed || document.hasFocus() || 'visible' === document.visibilityState) {
-      initPlayer();
-    } else {
-      window.addEventListener('focus', initPlayer);
-      document.addEventListener('visibilitychange', initPlayer);
-    }
-
-    /*
-      // We don't need this because we have a custom function in frontend/src/static/js/components/media-viewer/VideoViewer/index.js:617
-      player && player.player.one('loadedmetadata', () => {
-      const urlParams = new URLSearchParams(window.location.search);
-      const paramT = Number(urlParams.get('t'));
-      const timestamp = !isNaN(paramT) ? paramT : 0;
-      player.player.currentTime(timestamp);
-    }); */
-
-    return () => {
-      unsetPlayer();
-
-      if (void 0 !== props.onUnmountCallback) {
-        props.onUnmountCallback();
-      }
-    };
-  }, []);
-
-  return null === props.errorMessage ? (
-    <video ref={videoElemRef} className="video-js vjs-mediacms native-dimensions"></video>
-  ) : (
-    <div className="error-container">
-      <div className="error-container-inner">
-        <span className="icon-wrap">
-          <i className="material-icons">error_outline</i>
-        </span>
-        <span className="msg-wrap">{props.errorMessage}</span>
-      </div>
-    </div>
-  );
-}
-
-VideoPlayer.propTypes = {
-  playerVolume: PropTypes.string,
-  playerSoundMuted: PropTypes.bool,
-  videoQuality: PropTypes.string,
-  videoPlaybackSpeed: PropTypes.number,
-  inTheaterMode: PropTypes.bool,
-  siteId: PropTypes.string.isRequired,
-  siteUrl: PropTypes.string.isRequired,
-  errorMessage: PropTypes.string,
-  cornerLayers: PropTypes.object,
-  subtitlesInfo: PropTypes.array.isRequired,
-  inEmbed: PropTypes.bool.isRequired,
-  sources: PropTypes.array.isRequired,
-  info: PropTypes.object.isRequired,
-  enableAutoplay: PropTypes.bool.isRequired,
-  hasTheaterMode: PropTypes.bool.isRequired,
-  hasNextLink: PropTypes.bool.isRequired,
-  hasPreviousLink: PropTypes.bool.isRequired,
-  poster: PropTypes.string,
-  previewSprite: PropTypes.object,
-  onClickPreviousCallback: PropTypes.func,
-  onClickNextCallback: PropTypes.func,
-  onPlayerInitCallback: PropTypes.func,
-  onStateUpdateCallback: PropTypes.func,
-  onUnmountCallback: PropTypes.func,
-};
-
-VideoPlayer.defaultProps = {
-  errorMessage: null,
-  cornerLayers: {},
-};