video-react-player 0.1.0 → 0.1.1

package/dist/video-react-new.cjs.js

@@ -1,3904 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var classNames = _interopDefault(require('classnames'));
-var React = require('react');
-var React__default = _interopDefault(React);
-var redux = require('redux');
-var PropTypes = _interopDefault(require('prop-types'));
-
-function _assertThisInitialized(e) {
-  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  return e;
-}
-function _defineProperties(e, r) {
-  for (var t = 0; t < r.length; t++) {
-    var o = r[t];
-    o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);
-  }
-}
-function _createClass(e, r, t) {
-  return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
-    writable: !1
-  }), e;
-}
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-function _inheritsLoose(t, o) {
-  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-function _setPrototypeOf(t, e) {
-  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
-    return t.__proto__ = e, t;
-  }, _setPrototypeOf(t, e);
-}
-function _toPrimitive(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r || "default");
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-function _toPropertyKey(t) {
-  var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var LOAD_START = 'video-react-player/LOAD_START';
-var CAN_PLAY = 'video-react-player/CAN_PLAY';
-var WAITING = 'video-react-player/WAITING';
-var CAN_PLAY_THROUGH = 'video-react-player/CAN_PLAY_THROUGH';
-var PLAYING = 'video-react-player/PLAYING';
-var PLAY = 'video-react-player/PLAY';
-var PAUSE = 'video-react-player/PAUSE';
-var END = 'video-react-player/END';
-var SEEKING = 'video-react-player/SEEKING';
-var SEEKED = 'video-react-player/SEEKED';
-var SEEKING_TIME = 'video-react-player/SEEKING_TIME';
-var END_SEEKING = 'video-react-player/END_SEEKING';
-var DURATION_CHANGE = 'video-react-player/DURATION_CHANGE';
-var TIME_UPDATE = 'video-react-player/TIME_UPDATE';
-var VOLUME_CHANGE = 'video-react-player/VOLUME_CHANGE';
-var PROGRESS_CHANGE = 'video-react-player/PROGRESS_CHANGE';
-var RATE_CHANGE = 'video-react-player/RATE_CHANGE';
-var SUSPEND = 'video-react-player/SUSPEND';
-var ABORT = 'video-react-player/ABORT';
-var EMPTIED = 'video-react-player/EMPTIED';
-var STALLED = 'video-react-player/STALLED';
-var LOADED_META_DATA = 'video-react-player/LOADED_META_DATA';
-var LOADED_DATA = 'video-react-player/LOADED_DATA';
-var RESIZE = 'video-react-player/RESIZE';
-var ERROR = 'video-react-player/ERROR';
-var ACTIVATE_TEXT_TRACK = 'video-react-player/ACTIVATE_TEXT_TRACK';
-var PICTURE_IN_PICTURE_CHANGE = 'video-react-player/PICTURE_IN_PICTURE_CHANGE';
-var LOOP_CHANGE = 'video-react-player/LOOP_CHANGE';
-var THEATER_MODE_CHANGE = 'video-react-player/THEATER_MODE_CHANGE';
-var QUALITY_CHANGE = 'video-react-player/QUALITY_CHANGE';
-function handleLoadStart(videoProps) {
-  return {
-    type: LOAD_START,
-    videoProps: videoProps
-  };
-}
-function handleCanPlay(videoProps) {
-  return {
-    type: CAN_PLAY,
-    videoProps: videoProps
-  };
-}
-function handleWaiting(videoProps) {
-  return {
-    type: WAITING,
-    videoProps: videoProps
-  };
-}
-function handleCanPlayThrough(videoProps) {
-  return {
-    type: CAN_PLAY_THROUGH,
-    videoProps: videoProps
-  };
-}
-function handlePlaying(videoProps) {
-  return {
-    type: PLAYING,
-    videoProps: videoProps
-  };
-}
-function handlePlay(videoProps) {
-  return {
-    type: PLAY,
-    videoProps: videoProps
-  };
-}
-function handlePause(videoProps) {
-  return {
-    type: PAUSE,
-    videoProps: videoProps
-  };
-}
-function handleEnd(videoProps) {
-  return {
-    type: END,
-    videoProps: videoProps
-  };
-}
-function handleSeeking(videoProps) {
-  return {
-    type: SEEKING,
-    videoProps: videoProps
-  };
-}
-function handleSeeked(videoProps) {
-  return {
-    type: SEEKED,
-    videoProps: videoProps
-  };
-}
-function handleDurationChange(videoProps) {
-  return {
-    type: DURATION_CHANGE,
-    videoProps: videoProps
-  };
-}
-function handleTimeUpdate(videoProps) {
-  return {
-    type: TIME_UPDATE,
-    videoProps: videoProps
-  };
-}
-function handleVolumeChange(videoProps) {
-  return {
-    type: VOLUME_CHANGE,
-    videoProps: videoProps
-  };
-}
-function handleProgressChange(videoProps) {
-  return {
-    type: PROGRESS_CHANGE,
-    videoProps: videoProps
-  };
-}
-function handleRateChange(videoProps) {
-  return {
-    type: RATE_CHANGE,
-    videoProps: videoProps
-  };
-}
-function handleSuspend(videoProps) {
-  return {
-    type: SUSPEND,
-    videoProps: videoProps
-  };
-}
-function handleAbort(videoProps) {
-  return {
-    type: ABORT,
-    videoProps: videoProps
-  };
-}
-function handleEmptied(videoProps) {
-  return {
-    type: EMPTIED,
-    videoProps: videoProps
-  };
-}
-function handleStalled(videoProps) {
-  return {
-    type: STALLED,
-    videoProps: videoProps
-  };
-}
-function handleLoadedMetaData(videoProps) {
-  return {
-    type: LOADED_META_DATA,
-    videoProps: videoProps
-  };
-}
-function handleLoadedData(videoProps) {
-  return {
-    type: LOADED_DATA,
-    videoProps: videoProps
-  };
-}
-function handleResize(videoProps) {
-  return {
-    type: RESIZE,
-    videoProps: videoProps
-  };
-}
-function handleError(videoProps) {
-  return {
-    type: ERROR,
-    videoProps: videoProps
-  };
-}
-function handleSeekingTime(time) {
-  return {
-    type: SEEKING_TIME,
-    time: time
-  };
-}
-function handleEndSeeking(time) {
-  return {
-    type: END_SEEKING,
-    time: time
-  };
-}
-function activateTextTrack(textTrack) {
-  return {
-    type: ACTIVATE_TEXT_TRACK,
-    textTrack: textTrack
-  };
-}
-function handlePictureInPictureChange(isPictureInPicture) {
-  return {
-    type: PICTURE_IN_PICTURE_CHANGE,
-    isPictureInPicture: isPictureInPicture
-  };
-}
-function handleLoopChange(loop) {
-  return {
-    type: LOOP_CHANGE,
-    loop: loop
-  };
-}
-function handleTheaterModeChange(isTheater) {
-  return {
-    type: THEATER_MODE_CHANGE,
-    isTheater: isTheater
-  };
-}
-function handleQualityChange(quality) {
-  return {
-    type: QUALITY_CHANGE,
-    quality: quality
-  };
-}
-
-var videoActions = /*#__PURE__*/Object.freeze({
-  LOAD_START: LOAD_START,
-  CAN_PLAY: CAN_PLAY,
-  WAITING: WAITING,
-  CAN_PLAY_THROUGH: CAN_PLAY_THROUGH,
-  PLAYING: PLAYING,
-  PLAY: PLAY,
-  PAUSE: PAUSE,
-  END: END,
-  SEEKING: SEEKING,
-  SEEKED: SEEKED,
-  SEEKING_TIME: SEEKING_TIME,
-  END_SEEKING: END_SEEKING,
-  DURATION_CHANGE: DURATION_CHANGE,
-  TIME_UPDATE: TIME_UPDATE,
-  VOLUME_CHANGE: VOLUME_CHANGE,
-  PROGRESS_CHANGE: PROGRESS_CHANGE,
-  RATE_CHANGE: RATE_CHANGE,
-  SUSPEND: SUSPEND,
-  ABORT: ABORT,
-  EMPTIED: EMPTIED,
-  STALLED: STALLED,
-  LOADED_META_DATA: LOADED_META_DATA,
-  LOADED_DATA: LOADED_DATA,
-  RESIZE: RESIZE,
-  ERROR: ERROR,
-  ACTIVATE_TEXT_TRACK: ACTIVATE_TEXT_TRACK,
-  PICTURE_IN_PICTURE_CHANGE: PICTURE_IN_PICTURE_CHANGE,
-  LOOP_CHANGE: LOOP_CHANGE,
-  THEATER_MODE_CHANGE: THEATER_MODE_CHANGE,
-  QUALITY_CHANGE: QUALITY_CHANGE,
-  handleLoadStart: handleLoadStart,
-  handleCanPlay: handleCanPlay,
-  handleWaiting: handleWaiting,
-  handleCanPlayThrough: handleCanPlayThrough,
-  handlePlaying: handlePlaying,
-  handlePlay: handlePlay,
-  handlePause: handlePause,
-  handleEnd: handleEnd,
-  handleSeeking: handleSeeking,
-  handleSeeked: handleSeeked,
-  handleDurationChange: handleDurationChange,
-  handleTimeUpdate: handleTimeUpdate,
-  handleVolumeChange: handleVolumeChange,
-  handleProgressChange: handleProgressChange,
-  handleRateChange: handleRateChange,
-  handleSuspend: handleSuspend,
-  handleAbort: handleAbort,
-  handleEmptied: handleEmptied,
-  handleStalled: handleStalled,
-  handleLoadedMetaData: handleLoadedMetaData,
-  handleLoadedData: handleLoadedData,
-  handleResize: handleResize,
-  handleError: handleError,
-  handleSeekingTime: handleSeekingTime,
-  handleEndSeeking: handleEndSeeking,
-  activateTextTrack: activateTextTrack,
-  handlePictureInPictureChange: handlePictureInPictureChange,
-  handleLoopChange: handleLoopChange,
-  handleTheaterModeChange: handleTheaterModeChange,
-  handleQualityChange: handleQualityChange
-});
-
-// Lazily grab the document to avoid SSR "document is not defined" errors.
-var doc = typeof document !== 'undefined' ? document : null;
-var Fullscreen = /*#__PURE__*/function () {
-  function Fullscreen() {}
-  var _proto = Fullscreen.prototype;
-  _proto.request = function request(elm) {
-    if (elm.requestFullscreen) {
-      elm.requestFullscreen();
-    } else if (elm.webkitRequestFullscreen) {
-      elm.webkitRequestFullscreen();
-    } else if (elm.mozRequestFullScreen) {
-      elm.mozRequestFullScreen();
-    } else if (elm.msRequestFullscreen) {
-      elm.msRequestFullscreen();
-    }
-  };
-  _proto.exit = function exit() {
-    if (!doc) {
-      return;
-    }
-    if (doc.exitFullscreen) {
-      doc.exitFullscreen();
-    } else if (doc.webkitExitFullscreen) {
-      doc.webkitExitFullscreen();
-    } else if (doc.mozCancelFullScreen) {
-      doc.mozCancelFullScreen();
-    } else if (doc.msExitFullscreen) {
-      doc.msExitFullscreen();
-    }
-  };
-  _proto.addEventListener = function addEventListener(handler) {
-    if (!doc) {
-      return;
-    }
-    doc.addEventListener('fullscreenchange', handler);
-    doc.addEventListener('webkitfullscreenchange', handler);
-    doc.addEventListener('mozfullscreenchange', handler);
-    doc.addEventListener('MSFullscreenChange', handler);
-  };
-  _proto.removeEventListener = function removeEventListener(handler) {
-    if (!doc) {
-      return;
-    }
-    doc.removeEventListener('fullscreenchange', handler);
-    doc.removeEventListener('webkitfullscreenchange', handler);
-    doc.removeEventListener('mozfullscreenchange', handler);
-    doc.removeEventListener('MSFullscreenChange', handler);
-  };
-  _createClass(Fullscreen, [{
-    key: "isFullscreen",
-    get: function get() {
-      if (!doc) {
-        return null;
-      }
-      return doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement;
-    }
-  }, {
-    key: "enabled",
-    get: function get() {
-      if (!doc) {
-        return false;
-      }
-      return doc.fullscreenEnabled || doc.webkitFullscreenEnabled || doc.mozFullScreenEnabled || doc.msFullscreenEnabled;
-    }
-  }]);
-  return Fullscreen;
-}();
-var fullscreen = new Fullscreen();
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var OPERATE = 'video-react-player/OPERATE';
-var FULLSCREEN_CHANGE = 'video-react-player/FULLSCREEN_CHANGE';
-var PLAYER_ACTIVATE = 'video-react-player/PLAYER_ACTIVATE';
-var USER_ACTIVATE = 'video-react-player/USER_ACTIVATE';
-function handleFullscreenChange(isFullscreen) {
-  return {
-    type: FULLSCREEN_CHANGE,
-    isFullscreen: isFullscreen
-  };
-}
-function activate(activity) {
-  return {
-    type: PLAYER_ACTIVATE,
-    activity: activity
-  };
-}
-function userActivate(activity) {
-  return {
-    type: USER_ACTIVATE,
-    activity: activity
-  };
-}
-function play(operation) {
-  var _this$video;
-  if (operation === void 0) {
-    operation = {
-      action: 'play',
-      source: ''
-    };
-  }
-  (_this$video = this.video) === null || _this$video === void 0 ? void 0 : _this$video.play();
-  return {
-    type: OPERATE,
-    operation: operation
-  };
-}
-function pause(operation) {
-  var _this$video2;
-  if (operation === void 0) {
-    operation = {
-      action: 'pause',
-      source: ''
-    };
-  }
-  (_this$video2 = this.video) === null || _this$video2 === void 0 ? void 0 : _this$video2.pause();
-  return {
-    type: OPERATE,
-    operation: operation
-  };
-}
-function togglePlay(operation) {
-  var _this$video3;
-  if (operation === void 0) {
-    operation = {
-      action: 'toggle-play',
-      source: ''
-    };
-  }
-  (_this$video3 = this.video) === null || _this$video3 === void 0 ? void 0 : _this$video3.togglePlay();
-  return {
-    type: OPERATE,
-    operation: operation
-  };
-}
-
-// seek video by time
-function seek(time, operation) {
-  var _this$video4;
-  if (operation === void 0) {
-    operation = {
-      action: 'seek',
-      source: ''
-    };
-  }
-  (_this$video4 = this.video) === null || _this$video4 === void 0 ? void 0 : _this$video4.seek(time);
-  return {
-    type: OPERATE,
-    operation: operation
-  };
-}
-
-// jump forward x seconds
-function forward(seconds, operation) {
-  var _this$video5;
-  if (operation === void 0) {
-    operation = {
-      action: "forward-" + seconds,
-      source: ''
-    };
-  }
-  (_this$video5 = this.video) === null || _this$video5 === void 0 ? void 0 : _this$video5.forward(seconds);
-  return {
-    type: OPERATE,
-    operation: operation
-  };
-}
-
-// jump back x seconds
-function replay(seconds, operation) {
-  var _this$video6;
-  if (operation === void 0) {
-    operation = {
-      action: "replay-" + seconds,
-      source: ''
-    };
-  }
-  (_this$video6 = this.video) === null || _this$video6 === void 0 ? void 0 : _this$video6.replay(seconds);
-  return {
-    type: OPERATE,
-    operation: operation
-  };
-}
-function changeRate(rate, operation) {
-  if (operation === void 0) {
-    operation = {
-      action: 'change-rate',
-      source: ''
-    };
-  }
-  if (this.video) {
-    this.video.playbackRate = rate;
-  }
-  return {
-    type: OPERATE,
-    operation: operation
-  };
-}
-function changeVolume(volume, operation) {
-  if (operation === void 0) {
-    operation = {
-      action: 'change-volume',
-      source: ''
-    };
-  }
-  var v = volume;
-  if (volume < 0) {
-    v = 0;
-  }
-  if (volume > 1) {
-    v = 1;
-  }
-  if (this.video) {
-    this.video.volume = v;
-  }
-  return {
-    type: OPERATE,
-    operation: operation
-  };
-}
-function mute(muted, operation) {
-  if (operation === void 0) {
-    operation = {
-      action: muted ? 'muted' : 'unmuted',
-      source: ''
-    };
-  }
-  if (this.video) {
-    this.video.muted = muted;
-  }
-  return {
-    type: OPERATE,
-    operation: operation
-  };
-}
-function toggleFullscreen(player) {
-  if (fullscreen.enabled) {
-    if (fullscreen.isFullscreen) {
-      fullscreen.exit();
-    } else if (this.rootElement) {
-      fullscreen.request(this.rootElement);
-    }
-    return {
-      type: OPERATE,
-      operation: {
-        action: 'toggle-fullscreen',
-        source: ''
-      }
-    };
-  }
-  return {
-    type: FULLSCREEN_CHANGE,
-    isFullscreen: !player.isFullscreen
-  };
-}
-function togglePictureInPicture() {
-  var next = !this.store.getState().player.isPictureInPicture;
-  return handlePictureInPictureChange(next);
-}
-function changeQuality(quality) {
-  return handleQualityChange(quality);
-}
-function takeScreenshot() {
-  return {
-    type: OPERATE,
-    operation: {
-      action: 'screenshot',
-      source: 'control'
-    }
-  };
-}
-function toggleTheaterMode(isTheater) {
-  return handleTheaterModeChange(isTheater);
-}
-
-var playerActions = /*#__PURE__*/Object.freeze({
-  OPERATE: OPERATE,
-  FULLSCREEN_CHANGE: FULLSCREEN_CHANGE,
-  PLAYER_ACTIVATE: PLAYER_ACTIVATE,
-  USER_ACTIVATE: USER_ACTIVATE,
-  handleFullscreenChange: handleFullscreenChange,
-  activate: activate,
-  userActivate: userActivate,
-  play: play,
-  pause: pause,
-  togglePlay: togglePlay,
-  seek: seek,
-  forward: forward,
-  replay: replay,
-  changeRate: changeRate,
-  changeVolume: changeVolume,
-  mute: mute,
-  toggleFullscreen: toggleFullscreen,
-  togglePictureInPicture: togglePictureInPicture,
-  changeQuality: changeQuality,
-  takeScreenshot: takeScreenshot,
-  toggleTheaterMode: toggleTheaterMode
-});
-
-var initialState = {
-  currentSrc: null,
-  duration: 0,
-  currentTime: 0,
-  seekingTime: 0,
-  buffered: null,
-  textTracks: null,
-  waiting: false,
-  seeking: false,
-  paused: true,
-  autoPaused: false,
-  ended: false,
-  playbackRate: 1,
-  muted: false,
-  volume: 1,
-  readyState: 0,
-  networkState: 0,
-  videoWidth: 0,
-  videoHeight: 0,
-  hasStarted: false,
-  userActivity: true,
-  isActive: false,
-  isFullscreen: false,
-  isPictureInPicture: false,
-  loop: false,
-  isTheater: false,
-  quality: 'auto',
-  activeTextTrack: null
-};
-function player(state, action) {
-  if (state === void 0) {
-    state = initialState;
-  }
-  switch (action.type) {
-    case USER_ACTIVATE:
-      return _extends({}, state, {
-        userActivity: action.activity
-      });
-    case PLAYER_ACTIVATE:
-      return _extends({}, state, {
-        isActive: action.activity
-      });
-    case FULLSCREEN_CHANGE:
-      return _extends({}, state, {
-        isFullscreen: !!action.isFullscreen
-      });
-    case SEEKING_TIME:
-      return _extends({}, state, {
-        seekingTime: action.time
-      });
-    case END_SEEKING:
-      return _extends({}, state, {
-        seekingTime: 0
-      });
-    case LOAD_START:
-      return _extends({}, state, action.videoProps, {
-        hasStarted: false,
-        ended: false
-      });
-    case CAN_PLAY:
-      return _extends({}, state, action.videoProps, {
-        waiting: false
-      });
-    case WAITING:
-      return _extends({}, state, action.videoProps, {
-        waiting: true
-      });
-    case CAN_PLAY_THROUGH:
-    case PLAYING:
-      return _extends({}, state, action.videoProps, {
-        waiting: false
-      });
-    case PLAY:
-      return _extends({}, state, action.videoProps, {
-        ended: false,
-        paused: false,
-        autoPaused: false,
-        waiting: false,
-        hasStarted: true
-      });
-    case PAUSE:
-      return _extends({}, state, action.videoProps, {
-        paused: true
-      });
-    case END:
-      return _extends({}, state, action.videoProps, {
-        ended: true
-      });
-    case SEEKING:
-      return _extends({}, state, action.videoProps, {
-        seeking: true
-      });
-    case SEEKED:
-      return _extends({}, state, action.videoProps, {
-        seeking: false
-      });
-    case ERROR:
-      return _extends({}, state, action.videoProps, {
-        error: 'UNKNOWN ERROR',
-        ended: true
-      });
-    case DURATION_CHANGE:
-    case TIME_UPDATE:
-    case VOLUME_CHANGE:
-    case PROGRESS_CHANGE:
-    case RATE_CHANGE:
-    case SUSPEND:
-    case ABORT:
-    case EMPTIED:
-    case STALLED:
-    case LOADED_META_DATA:
-    case LOADED_DATA:
-    case RESIZE:
-      return _extends({}, state, action.videoProps);
-    case ACTIVATE_TEXT_TRACK:
-      return _extends({}, state, {
-        activeTextTrack: action.textTrack
-      });
-    case PICTURE_IN_PICTURE_CHANGE:
-      return _extends({}, state, {
-        isPictureInPicture: !!action.isPictureInPicture
-      });
-    case LOOP_CHANGE:
-      return _extends({}, state, {
-        loop: !!action.loop
-      });
-    case THEATER_MODE_CHANGE:
-      return _extends({}, state, {
-        isTheater: !!action.isTheater
-      });
-    case QUALITY_CHANGE:
-      return _extends({}, state, {
-        quality: action.quality || 'auto'
-      });
-    default:
-      return state;
-  }
-}
-
-var initialState$1 = {
-  count: 0,
-  operation: {
-    action: '',
-    source: ''
-  }
-};
-function operation(state, action) {
-  if (state === void 0) {
-    state = initialState$1;
-  }
-  switch (action.type) {
-    case OPERATE:
-      return _extends({}, state, {
-        count: state.count + 1,
-        operation: _extends({}, state.operation, action.operation)
-      });
-    default:
-      return state;
-  }
-}
-
-function reducer(state, action) {
-  return {
-    player: player(state === null || state === void 0 ? void 0 : state.player, action),
-    operation: operation(state === null || state === void 0 ? void 0 : state.operation, action)
-  };
-}
-var playerReducer = player;
-var operationReducer = operation;
-
-var Manager = /*#__PURE__*/function () {
-  function Manager(store) {
-    this.store = void 0;
-    this.video = void 0;
-    this.rootElement = void 0;
-    this.boundActions = void 0;
-    this.store = store || redux.createStore(reducer);
-    this.video = null;
-    this.rootElement = null;
-    this.boundActions = undefined;
-  }
-  var _proto = Manager.prototype;
-  _proto.getActions = function getActions() {
-    var _this = this;
-    if (this.boundActions) {
-      return this.boundActions;
-    }
-    var actions = _extends({}, playerActions, videoActions);
-    var bound = {};
-    Object.keys(actions).forEach(function (key) {
-      var creator = actions[key];
-      if (typeof creator !== 'function') {
-        return;
-      }
-      bound[key] = function () {
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-        var action = creator.apply(_this, args);
-        if (typeof action !== 'undefined') {
-          _this.store.dispatch(action);
-        }
-      };
-    });
-    this.boundActions = bound;
-    return this.boundActions;
-  };
-  _proto.getState = function getState() {
-    return this.store.getState();
-  };
-  _proto.subscribeToStateChange = function subscribeToStateChange(listener, getState) {
-    if (getState === void 0) {
-      getState = this.getState.bind(this);
-    }
-    var prevState = getState();
-    var handleChange = function handleChange() {
-      var state = getState();
-      if (state === prevState) {
-        return;
-      }
-      var prevStateCopy = prevState;
-      prevState = state;
-      listener(state, prevStateCopy);
-    };
-    return this.store.subscribe(handleChange);
-  };
-  _proto.subscribeToOperationStateChange = function subscribeToOperationStateChange(listener) {
-    var _this2 = this;
-    return this.subscribeToStateChange(listener, function () {
-      return _this2.getState().operation;
-    });
-  };
-  _proto.subscribeToPlayerStateChange = function subscribeToPlayerStateChange(listener) {
-    var _this3 = this;
-    return this.subscribeToStateChange(listener, function () {
-      return _this3.getState().player;
-    });
-  };
-  return Manager;
-}();
-
-// eslint-disable-next-line import/no-unresolved
-var BigPlayButton = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(BigPlayButton, _Component);
-  function BigPlayButton(props, context) {
-    var _this;
-    _this = _Component.call(this, props, context) || this;
-    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-  var _proto = BigPlayButton.prototype;
-  _proto.componentDidMount = function componentDidMount() {};
-  _proto.handleClick = function handleClick(event) {
-    var _this$props$actions;
-    event.preventDefault();
-    (_this$props$actions = this.props.actions) === null || _this$props$actions === void 0 ? void 0 : _this$props$actions.play();
-  };
-  _proto.render = function render() {
-    var _player$hasStarted;
-    var _this$props = this.props,
-      player = _this$props.player,
-      position = _this$props.position;
-    var positionClass = position === 'center' ? 'center' : 'left';
-    var hasStarted = (_player$hasStarted = player === null || player === void 0 ? void 0 : player.hasStarted) !== null && _player$hasStarted !== void 0 ? _player$hasStarted : false;
-    var hasSource = (player === null || player === void 0 ? void 0 : player.currentSrc) !== undefined && (player === null || player === void 0 ? void 0 : player.currentSrc) !== '';
-    return React__default.createElement("button", {
-      className: classNames('video-react-player-button', 'video-react-player-big-play-button', "video-react-player-big-play-button-" + positionClass, this.props.className, {
-        // keep visible by default if player info is not provided
-        'big-play-button-hide': hasStarted || !hasSource
-      }),
-      type: "button",
-      "aria-live": "polite",
-      tabIndex: 0,
-      onClick: this.handleClick
-    }, React__default.createElement("span", {
-      className: "video-react-player-control-text"
-    }, "Play Video"));
-  };
-  return BigPlayButton;
-}(React.Component);
-BigPlayButton.defaultProps = {
-  position: 'left'
-};
-BigPlayButton.displayName = 'BigPlayButton';
-
-function LoadingSpinner(_ref) {
-  var player = _ref.player,
-    className = _ref.className;
-  if (player.error) {
-    return null;
-  }
-  return React__default.createElement("div", {
-    className: classNames('video-react-player-loading-spinner', className)
-  });
-}
-LoadingSpinner.displayName = 'LoadingSpinner';
-
-function PosterImage(_ref) {
-  var poster = _ref.poster,
-    player = _ref.player,
-    actions = _ref.actions,
-    className = _ref.className;
-  if (!poster || player.hasStarted) {
-    return null;
-  }
-  return React__default.createElement("div", {
-    className: classNames('video-react-player-poster', className),
-    style: {
-      backgroundImage: "url(\"" + poster + "\")"
-    },
-    onClick: function onClick() {
-      if (player.paused) {
-        actions.play();
-      }
-    }
-  });
-}
-PosterImage.displayName = 'PosterImage';
-
-// NaN is the only value in javascript which is not equal to itself.
-// eslint-disable-next-line no-self-compare
-var isNaN = Number.isNaN || function (value) {
-  return value !== value;
-};
-
-/**
- * @file format-time.js
- *
- * Format seconds as a time string, H:MM:SS or M:SS
- * Supplying a guide (in seconds) will force a number of leading zeros
- * to cover the length of the guide
- *
- * @param  {Number} seconds Number of seconds to be turned into a string
- * @param  {Number} guide   Number (in seconds) to model the string after
- * @return {String}         Time formatted as H:MM:SS or M:SS
- * @private
- * @function formatTime
- */
-function formatTime(seconds, guide) {
-  if (seconds === void 0) {
-    seconds = 0;
-  }
-  if (guide === void 0) {
-    guide = seconds;
-  }
-  var s = Math.floor(seconds % 60);
-  var m = Math.floor(seconds / 60 % 60);
-  var h = Math.floor(seconds / 3600);
-  var gm = Math.floor(guide / 60 % 60);
-  var gh = Math.floor(guide / 3600);
-
-  // handle invalid times
-  if (isNaN(seconds) || seconds === Infinity) {
-    // '-' is false for all relational operators (e.g. <, >=) so this setting
-    // will add the minimum number of fields specified by the guide
-    h = 0;
-    m = 0;
-    s = 0;
-  }
-  var hasHours = h > 0 || gh > 0;
-  var hours = hasHours ? h + ":" : '';
-  var minutes = ((hasHours || gm >= 10) && m < 10 ? "0" + m : m) + ":";
-  var secondsString = s < 10 ? "0" + s : "" + s;
-  return "" + hours + minutes + secondsString;
-}
-
-// Check if the element belongs to a video element
-// only accept <source />, <track />,
-// <MyComponent isVideoChild />
-// elements
-function isVideoChild(c) {
-  if (!React__default.isValidElement(c)) {
-    return false;
-  }
-  if (c.props && c.props.isVideoChild) {
-    return true;
-  }
-  return c.type === 'source' || c.type === 'track';
-}
-var find = function find(elements, func) {
-  return elements.find(func);
-};
-
-// check if two components are the same type
-var isTypeEqual = function isTypeEqual(component1, component2) {
-  var type1 = component1.type;
-  var type2 = component2.type;
-  if (typeof type1 === 'string' || typeof type2 === 'string') {
-    return type1 === type2;
-  }
-  if (typeof type1 === 'function' && typeof type2 === 'function') {
-    return type1.displayName === type2.displayName;
-  }
-  return false;
-};
-
-// merge default children
-// sort them by `order` property
-// filter them by `disabled` property
-function mergeAndSortChildren(defaultChildren, _children, _parentProps, defaultOrder) {
-  if (defaultOrder === void 0) {
-    defaultOrder = 1;
-  }
-  var children = React__default.Children.toArray(_children).filter(React__default.isValidElement);
-  var _order = _parentProps.order,
-    parentProps = _objectWithoutPropertiesLoose(_parentProps, ["order"]); // ignore order from parent
-  return children.filter(function (e) {
-    return !e.props.disabled;
-  }) // filter the disabled components
-  .concat(defaultChildren.filter(function (c) {
-    return !find(children, function (component) {
-      return isTypeEqual(component, c);
-    });
-  })).map(function (element) {
-    var defaultComponent = find(defaultChildren, function (c) {
-      return isTypeEqual(c, element);
-    });
-    var defaultProps = defaultComponent ? defaultComponent.props : {};
-    var props = _extends({}, parentProps, defaultProps, element.props);
-    return React__default.cloneElement(element, props, element.props.children);
-  }).sort(function (a, b) {
-    return (a.props.order || defaultOrder) - (b.props.order || defaultOrder);
-  });
-}
-
-/**
- * Temporary utility for generating the warnings
- */
-function deprecatedWarning(oldMethodCall, newMethodCall) {
-  // eslint-disable-next-line no-console
-  console.warn("WARNING: " + oldMethodCall + " will be deprecated soon! Please use " + newMethodCall + " instead.");
-}
-function throttle(callback, limit) {
-  var wait = false;
-  return function () {
-    if (!wait) {
-      callback.apply(void 0, arguments);
-      wait = true;
-      setTimeout(function () {
-        wait = false;
-      }, limit);
-    }
-  };
-}
-var mediaProperties = ['error', 'src', 'srcObject', 'currentSrc', 'crossOrigin', 'networkState', 'preload', 'buffered', 'readyState', 'seeking', 'currentTime', 'duration', 'paused', 'defaultPlaybackRate', 'playbackRate', 'played', 'seekable', 'ended', 'autoplay', 'loop', 'mediaGroup', 'controller', 'controls', 'volume', 'muted', 'defaultMuted', 'audioTracks', 'videoTracks', 'textTracks', 'width', 'height', 'videoWidth', 'videoHeight', 'poster'];
-
-var Video = React.forwardRef(function (props, ref) {
-  var actions = props.actions,
-    player = props.player,
-    children = props.children,
-    startTime = props.startTime,
-    loop = props.loop,
-    poster = props.poster,
-    preload = props.preload,
-    src = props.src,
-    autoPlay = props.autoPlay,
-    playsInline = props.playsInline,
-    muted = props.muted,
-    crossOrigin = props.crossOrigin,
-    videoId = props.videoId,
-    className = props.className,
-    onLoadStart = props.onLoadStart,
-    onWaiting = props.onWaiting,
-    onCanPlay = props.onCanPlay,
-    onCanPlayThrough = props.onCanPlayThrough,
-    onPlaying = props.onPlaying,
-    onEnded = props.onEnded,
-    onSeeking = props.onSeeking,
-    onSeeked = props.onSeeked,
-    onPlay = props.onPlay,
-    onPause = props.onPause,
-    onProgress = props.onProgress,
-    onDurationChange = props.onDurationChange,
-    onError = props.onError,
-    onSuspend = props.onSuspend,
-    onAbort = props.onAbort,
-    onEmptied = props.onEmptied,
-    onStalled = props.onStalled,
-    onLoadedMetadata = props.onLoadedMetadata,
-    onLoadedData = props.onLoadedData,
-    onTimeUpdate = props.onTimeUpdate,
-    onRateChange = props.onRateChange,
-    onVolumeChange = props.onVolumeChange,
-    onResize = props.onResize;
-  var videoRef = React.useRef(null);
-  var propsRef = React.useRef(props);
-  propsRef.current = props;
-  var _useReducer = React.useReducer(function (count) {
-      return count + 1;
-    }, 0),
-    forceRender = _useReducer[1];
-  React.useEffect(function () {
-    forceRender();
-  }, []);
-  var getVideoProperties = React.useCallback(function () {
-    var video = videoRef.current;
-    if (!video) {
-      return {};
-    }
-    return mediaProperties.reduce(function (acc, key) {
-      var videoKey = key;
-      acc[key] = video === null || video === void 0 ? void 0 : video[videoKey];
-      return acc;
-    }, {});
-  }, []);
-  var createVideoEventHandler = React.useCallback(function (dispatcher, callback) {
-    return function () {
-      dispatcher(getVideoProperties());
-      if (callback) {
-        callback.apply(void 0, arguments);
-      }
-    };
-  }, [getVideoProperties]);
-  var handleLoadStart = React.useMemo(function () {
-    return createVideoEventHandler(actions.handleLoadStart, onLoadStart);
-  }, [actions.handleLoadStart, onLoadStart, createVideoEventHandler]);
-  var handleWaiting = React.useMemo(function () {
-    return createVideoEventHandler(actions.handleWaiting, onWaiting);
-  }, [actions.handleWaiting, onWaiting, createVideoEventHandler]);
-  var handleCanPlay = React.useMemo(function () {
-    return createVideoEventHandler(actions.handleCanPlay, onCanPlay);
-  }, [actions.handleCanPlay, onCanPlay, createVideoEventHandler]);
-  var handleCanPlayThrough = React.useMemo(function () {
-    return createVideoEventHandler(actions.handleCanPlayThrough, onCanPlayThrough);
-  }, [actions.handleCanPlayThrough, onCanPlayThrough, createVideoEventHandler]);
-  var handlePlaying = React.useMemo(function () {
-    return createVideoEventHandler(actions.handlePlaying, onPlaying);
-  }, [actions.handlePlaying, onPlaying, createVideoEventHandler]);
-  var handlePlay = React.useMemo(function () {
-    return createVideoEventHandler(actions.handlePlay, onPlay);
-  }, [actions.handlePlay, onPlay, createVideoEventHandler]);
-  var handlePause = React.useMemo(function () {
-    return createVideoEventHandler(actions.handlePause, onPause);
-  }, [actions.handlePause, onPause, createVideoEventHandler]);
-  var handleDurationChange = React.useMemo(function () {
-    return createVideoEventHandler(actions.handleDurationChange, onDurationChange);
-  }, [actions.handleDurationChange, onDurationChange, createVideoEventHandler]);
-  var handleTimeUpdate = React.useMemo(function () {
-    return createVideoEventHandler(actions.handleTimeUpdate, onTimeUpdate);
-  }, [actions.handleTimeUpdate, onTimeUpdate, createVideoEventHandler]);
-  var handleRateChange = React.useMemo(function () {
-    return createVideoEventHandler(actions.handleRateChange, onRateChange);
-  }, [actions.handleRateChange, onRateChange, createVideoEventHandler]);
-  var handleVolumeChange = React.useMemo(function () {
-    return createVideoEventHandler(actions.handleVolumeChange, onVolumeChange);
-  }, [actions.handleVolumeChange, onVolumeChange, createVideoEventHandler]);
-  var handleSuspend = React.useMemo(function () {
-    return createVideoEventHandler(actions.handleSuspend, onSuspend);
-  }, [actions.handleSuspend, onSuspend, createVideoEventHandler]);
-  var handleAbort = React.useMemo(function () {
-    return createVideoEventHandler(actions.handleAbort, onAbort);
-  }, [actions.handleAbort, onAbort, createVideoEventHandler]);
-  var handleEmptied = React.useMemo(function () {
-    return createVideoEventHandler(actions.handleEmptied, onEmptied);
-  }, [actions.handleEmptied, onEmptied, createVideoEventHandler]);
-  var handleStalled = React.useMemo(function () {
-    return createVideoEventHandler(actions.handleStalled, onStalled);
-  }, [actions.handleStalled, onStalled, createVideoEventHandler]);
-  var handleResize = React.useMemo(function () {
-    return createVideoEventHandler(actions.handleResize, onResize);
-  }, [actions.handleResize, onResize, createVideoEventHandler]);
-  var throttledProgress = React.useMemo(function () {
-    return throttle(function () {
-      actions.handleProgressChange(getVideoProperties());
-    }, 250);
-  }, [actions, getVideoProperties]);
-  var handleProgress = React.useCallback(function (event) {
-    throttledProgress();
-    onProgress === null || onProgress === void 0 ? void 0 : onProgress(event);
-  }, [onProgress, throttledProgress]);
-  var handleError = React.useCallback(function (event) {
-    actions.handleError(getVideoProperties());
-    onError === null || onError === void 0 ? void 0 : onError(event);
-  }, [actions, getVideoProperties, onError]);
-  var handleSeeking = React.useCallback(function (event) {
-    actions.handleSeeking(getVideoProperties());
-    onSeeking === null || onSeeking === void 0 ? void 0 : onSeeking(event);
-  }, [actions, getVideoProperties, onSeeking]);
-  var handleSeeked = React.useCallback(function (event) {
-    actions.handleSeeked(getVideoProperties());
-    onSeeked === null || onSeeked === void 0 ? void 0 : onSeeked(event);
-  }, [actions, getVideoProperties, onSeeked]);
-  var handleEnd = React.useCallback(function (event) {
-    var video = videoRef.current;
-    if (loop && video) {
-      video.currentTime = 0;
-      var promise = video.play();
-      promise === null || promise === void 0 ? void 0 : promise.catch(function () {});
-    } else if (video && !player.paused) {
-      video.pause();
-    }
-    actions.handleEnd(getVideoProperties());
-    onEnded === null || onEnded === void 0 ? void 0 : onEnded(event);
-  }, [actions, getVideoProperties, loop, onEnded, player.paused]);
-  var handleLoadedMetadata = React.useCallback(function (event) {
-    var video = videoRef.current;
-    if (typeof startTime === 'number' && startTime > 0 && video) {
-      video.currentTime = startTime;
-    }
-    actions.handleLoadedMetaData(getVideoProperties());
-    onLoadedMetadata === null || onLoadedMetadata === void 0 ? void 0 : onLoadedMetadata(event);
-  }, [actions, getVideoProperties, onLoadedMetadata, startTime]);
-  var handleLoadedData = React.useCallback(function (event) {
-    actions.handleLoadedData(getVideoProperties());
-    onLoadedData === null || onLoadedData === void 0 ? void 0 : onLoadedData(event);
-  }, [actions, getVideoProperties, onLoadedData]);
-  var handleTextTrackChange = React.useCallback(function () {
-    var video = videoRef.current;
-    if (video && video.textTracks) {
-      var activeTextTrack = Array.from(video.textTracks).find(function (textTrack) {
-        return textTrack.mode === 'showing';
-      });
-      if (activeTextTrack !== player.activeTextTrack) {
-        actions.activateTextTrack(activeTextTrack !== null && activeTextTrack !== void 0 ? activeTextTrack : null);
-      }
-    }
-  }, [actions, player.activeTextTrack]);
-  React.useEffect(function () {
-    var video = videoRef.current;
-    if (!video) {
-      return undefined;
-    }
-    if (video.textTracks) {
-      video.textTracks.onaddtrack = handleTextTrackChange;
-      video.textTracks.onremovetrack = handleTextTrackChange;
-    }
-    var handleEnterPiP = function handleEnterPiP() {
-      return actions.handlePictureInPictureChange(true);
-    };
-    var handleLeavePiP = function handleLeavePiP() {
-      return actions.handlePictureInPictureChange(false);
-    };
-    video.addEventListener('enterpictureinpicture', handleEnterPiP);
-    video.addEventListener('leavepictureinpicture', handleLeavePiP);
-    return function () {
-      video.removeEventListener('enterpictureinpicture', handleEnterPiP);
-      video.removeEventListener('leavepictureinpicture', handleLeavePiP);
-    };
-  }, [actions, handleTextTrackChange]);
-  var apiRef = React.useRef();
-  if (!apiRef.current) {
-    var getVideo = function getVideo() {
-      return videoRef.current;
-    };
-    apiRef.current = {
-      play: function play() {
-        var _getVideo;
-        var promise = (_getVideo = getVideo()) === null || _getVideo === void 0 ? void 0 : _getVideo.play();
-        if (promise && typeof promise.catch === 'function') {
-          promise.catch(function () {});
-        }
-      },
-      pause: function pause() {
-        var video = getVideo();
-        var promiseLike = video === null || video === void 0 ? void 0 : video.pause();
-        if (typeof promiseLike === 'object' && promiseLike !== null && 'catch' in promiseLike && typeof promiseLike.catch === 'function') {
-          promiseLike.catch(function () {});
-        }
-      },
-      load: function load() {
-        var _getVideo2;
-        (_getVideo2 = getVideo()) === null || _getVideo2 === void 0 ? void 0 : _getVideo2.load();
-      },
-      addTextTrack: function addTextTrack(kind, label, language) {
-        var video = getVideo();
-        return video ? video.addTextTrack(kind, label, language) : {};
-      },
-      canPlayType: function canPlayType() {
-        var _getVideo$canPlayType, _getVideo3;
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-        return (_getVideo$canPlayType = (_getVideo3 = getVideo()) === null || _getVideo3 === void 0 ? void 0 : _getVideo3.canPlayType.apply(_getVideo3, args)) !== null && _getVideo$canPlayType !== void 0 ? _getVideo$canPlayType : '';
-      },
-      togglePlay: function togglePlay() {
-        var video = getVideo();
-        if (!video) {
-          return;
-        }
-        if (video.paused) {
-          var promise = video.play();
-          if (promise && typeof promise.catch === 'function') {
-            promise.catch(function () {});
-          }
-        } else {
-          var promiseLike = video.pause();
-          if (typeof promiseLike === 'object' && promiseLike !== null && 'catch' in promiseLike && typeof promiseLike.catch === 'function') {
-            promiseLike.catch(function () {});
-          }
-        }
-      },
-      seek: function seek(time) {
-        var video = getVideo();
-        if (!video) {
-          return;
-        }
-        try {
-          video.currentTime = time;
-        } catch (err) {
-          // ignore
-        }
-      },
-      forward: function forward(seconds) {
-        var video = getVideo();
-        if (video) {
-          var _apiRef$current;
-          (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.seek(video.currentTime + seconds);
-        }
-      },
-      replay: function replay(seconds) {
-        var _apiRef$current2;
-        (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 ? void 0 : _apiRef$current2.forward(-seconds);
-      },
-      toggleFullscreen: function toggleFullscreen() {
-        propsRef.current.actions.toggleFullscreen(propsRef.current.player);
-      },
-      get playbackRate() {
-        var _getVideo$playbackRat, _getVideo4;
-        return (_getVideo$playbackRat = (_getVideo4 = getVideo()) === null || _getVideo4 === void 0 ? void 0 : _getVideo4.playbackRate) !== null && _getVideo$playbackRat !== void 0 ? _getVideo$playbackRat : 1;
-      },
-      set playbackRate(rate) {
-        var video = getVideo();
-        if (video) {
-          video.playbackRate = rate;
-        }
-      },
-      get muted() {
-        var _getVideo$muted, _getVideo5;
-        return (_getVideo$muted = (_getVideo5 = getVideo()) === null || _getVideo5 === void 0 ? void 0 : _getVideo5.muted) !== null && _getVideo$muted !== void 0 ? _getVideo$muted : false;
-      },
-      set muted(value) {
-        var video = getVideo();
-        if (video) {
-          video.muted = value;
-        }
-      },
-      get volume() {
-        var _getVideo$volume, _getVideo6;
-        return (_getVideo$volume = (_getVideo6 = getVideo()) === null || _getVideo6 === void 0 ? void 0 : _getVideo6.volume) !== null && _getVideo$volume !== void 0 ? _getVideo$volume : 1;
-      },
-      set volume(value) {
-        var video = getVideo();
-        if (video) {
-          video.volume = Math.max(0, Math.min(1, value));
-        }
-      },
-      get videoWidth() {
-        var _getVideo$videoWidth, _getVideo7;
-        return (_getVideo$videoWidth = (_getVideo7 = getVideo()) === null || _getVideo7 === void 0 ? void 0 : _getVideo7.videoWidth) !== null && _getVideo$videoWidth !== void 0 ? _getVideo$videoWidth : 0;
-      },
-      get videoHeight() {
-        var _getVideo$videoHeight, _getVideo8;
-        return (_getVideo$videoHeight = (_getVideo8 = getVideo()) === null || _getVideo8 === void 0 ? void 0 : _getVideo8.videoHeight) !== null && _getVideo$videoHeight !== void 0 ? _getVideo$videoHeight : 0;
-      },
-      get video() {
-        return getVideo();
-      }
-    };
-  }
-  React.useImperativeHandle(ref, function () {
-    return apiRef.current;
-  }, []);
-  var renderedChildren = React.useMemo(function () {
-    if (!apiRef.current) {
-      return null;
-    }
-    var sharedProps = _extends({}, props, {
-      video: apiRef.current
-    });
-    return React__default.Children.toArray(children).filter(isVideoChild).map(function (child) {
-      var element = child;
-      if (typeof element.type === 'string') {
-        if (element.type === 'source') {
-          var childProps = _extends({}, element.props);
-          var originalOnError = childProps.onError;
-          childProps.onError = function () {
-            if (originalOnError) {
-              originalOnError.apply(void 0, arguments);
-            }
-            actions.handleError(getVideoProperties());
-          };
-          return React__default.cloneElement(element, childProps);
-        }
-        return element;
-      }
-      return React__default.cloneElement(element, sharedProps);
-    });
-  }, [actions, children, getVideoProperties, props]);
-  return React__default.createElement("video", {
-    className: classNames('video-react-player-video', className),
-    id: videoId,
-    crossOrigin: crossOrigin,
-    ref: videoRef,
-    muted: muted,
-    preload: preload,
-    loop: loop,
-    playsInline: playsInline,
-    autoPlay: autoPlay,
-    poster: poster,
-    src: src,
-    onLoadStart: handleLoadStart,
-    onWaiting: handleWaiting,
-    onCanPlay: handleCanPlay,
-    onCanPlayThrough: handleCanPlayThrough,
-    onPlaying: handlePlaying,
-    onEnded: handleEnd,
-    onSeeking: handleSeeking,
-    onSeeked: handleSeeked,
-    onPlay: handlePlay,
-    onPause: handlePause,
-    onProgress: handleProgress,
-    onDurationChange: handleDurationChange,
-    onError: handleError,
-    onSuspend: handleSuspend,
-    onAbort: handleAbort,
-    onEmptied: handleEmptied,
-    onStalled: handleStalled,
-    onLoadedMetadata: handleLoadedMetadata,
-    onLoadedData: handleLoadedData,
-    onTimeUpdate: handleTimeUpdate,
-    onRateChange: handleRateChange,
-    onVolumeChange: handleVolumeChange,
-    onResize: handleResize,
-    tabIndex: -1
-  }, renderedChildren);
-});
-Video.displayName = 'Video';
-
-var Bezel = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(Bezel, _Component);
-  function Bezel(props, context) {
-    var _this;
-    _this = _Component.call(this, props, context) || this;
-    _this.timer = null;
-    props.manager.subscribeToOperationStateChange(_this.handleStateChange.bind(_assertThisInitialized(_this)));
-    _this.state = {
-      hidden: true,
-      operation: {
-        action: '',
-        source: ''
-      },
-      count: 0
-    };
-    return _this;
-  }
-  var _proto = Bezel.prototype;
-  _proto.handleStateChange = function handleStateChange(state, prevState) {
-    var _this2 = this;
-    if (state.count !== prevState.count && state.operation.source === 'shortcut') {
-      if (this.timer) {
-        // previous animation is not finished
-        clearTimeout(this.timer); // cancel it
-        this.timer = null;
-      }
-
-      // show it
-      // update operation
-      this.setState({
-        hidden: false,
-        count: state.count,
-        operation: state.operation
-      });
-
-      // hide it after 0.5s
-      this.timer = window.setTimeout(function () {
-        _this2.setState({
-          hidden: true
-        });
-        _this2.timer = null;
-      }, 500);
-    }
-  };
-  _proto.render = function render() {
-    // only displays for shortcut so far
-    if (this.state.operation.source !== 'shortcut') {
-      return null;
-    }
-    var style = this.state.hidden ? {
-      display: 'none'
-    } : null;
-    return React__default.createElement("div", {
-      className: classNames({
-        'video-react-player-bezel': true,
-        'video-react-player-bezel-animation': this.state.count % 2 === 0,
-        'video-react-player-bezel-animation-alt': this.state.count % 2 === 1
-      }, this.props.className),
-      style: style,
-      role: "status",
-      "aria-label": this.state.operation.action
-    }, React__default.createElement("div", {
-      className: classNames('video-react-player-bezel-icon', "video-react-player-bezel-icon-" + this.state.operation.action)
-    }));
-  };
-  return Bezel;
-}(React.Component);
-Bezel.displayName = 'Bezel';
-
-/**
- * Offset Left
- * getBoundingClientRect technique from
- * John Resig http://ejohn.org/blog/getboundingclientrect-is-awesome/
- *
- * @function findElPosition
- * @param {ReactNodeRef} el React Node ref from which to get offset
- * @return {Object}
- */
-function findElPosition(el) {
-  var box;
-  if (el.getBoundingClientRect && el.parentNode) {
-    box = el.getBoundingClientRect();
-  }
-  if (!box) {
-    return {
-      left: 0,
-      top: 0
-    };
-  }
-  var _document = document,
-    body = _document.body,
-    docEl = _document.documentElement;
-  var clientLeft = docEl.clientLeft || body.clientLeft || 0;
-  var scrollLeft = window.pageXOffset || body.scrollLeft;
-  var left = box.left + scrollLeft - clientLeft;
-  var clientTop = docEl.clientTop || body.clientTop || 0;
-  var scrollTop = window.pageYOffset || body.scrollTop;
-  var top = box.top + scrollTop - clientTop;
-
-  // Android sometimes returns slightly off decimal values, so need to round
-  return {
-    left: Math.round(left),
-    top: Math.round(top)
-  };
-}
-
-/**
- * Get pointer position in a React Node ref
- * Returns an object with x and y coordinates.
- * The base on the coordinates are the bottom left of the element.
- *
- * @function getPointerPosition
- * @param {ReactNodeRef} el React Node ref on which to get the pointer position on
- * @param {Event} event Event object
- * @return {Object} This object will have x and y coordinates corresponding to the mouse position
- */
-function getPointerPosition(el, event) {
-  var position = {};
-  var box = findElPosition(el);
-  var boxW = el.offsetWidth;
-  var boxH = el.offsetHeight;
-  var boxY = box.top;
-  var boxX = box.left;
-  var evtPageY = event.pageY;
-  var evtPageX = event.pageX;
-  if ('changedTouches' in event && event.changedTouches.length) {
-    evtPageX = event.changedTouches[0].pageX;
-    evtPageY = event.changedTouches[0].pageY;
-  }
-  position.y = Math.max(0, Math.min(1, (boxY - evtPageY + boxH) / boxH));
-  position.x = Math.max(0, Math.min(1, (evtPageX - boxX) / boxW));
-  return position;
-}
-
-// focus an element
-function focusNode(reactNode) {
-  if (reactNode && reactNode.focus) {
-    reactNode.focus();
-  }
-}
-
-// check if an element has a class name
-function hasClass(elm, cls) {
-  var classes = elm.className.split(' ');
-  for (var i = 0; i < classes.length; i += 1) {
-    if (classes[i].toLowerCase() === cls.toLowerCase()) {
-      return true;
-    }
-  }
-  return false;
-}
-
-var Shortcut = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(Shortcut, _Component);
-  function Shortcut(props, context) {
-    var _this;
-    _this = _Component.call(this, props, context) || this;
-    _this.defaultShortcuts = void 0;
-    _this.shortcuts = [];
-    _this.defaultShortcuts = [{
-      keyCode: 32,
-      // spacebar
-      handle: _this.togglePlay
-    }, {
-      keyCode: 75,
-      // k
-      handle: _this.togglePlay
-    }, {
-      keyCode: 70,
-      // f
-      handle: _this.toggleFullscreen
-    }, {
-      keyCode: 37,
-      // Left arrow
-      handle: function handle(player, actions) {
-        if (!player.hasStarted) {
-          return;
-        }
-        actions.replay(5, {
-          action: 'replay-5',
-          source: 'shortcut'
-        }); // Go back 5 seconds
-      }
-    }, {
-      keyCode: 74,
-      // j
-      handle: function handle(player, actions) {
-        if (!player.hasStarted) {
-          return;
-        }
-        actions.replay(10, {
-          action: 'replay-10',
-          source: 'shortcut'
-        }); // Go back 10 seconds
-      }
-    }, {
-      keyCode: 39,
-      // Right arrow
-      handle: function handle(player, actions) {
-        if (!player.hasStarted) {
-          return;
-        }
-        actions.forward(5, {
-          action: 'forward-5',
-          source: 'shortcut'
-        }); // Go forward 5 seconds
-      }
-    }, {
-      keyCode: 76,
-      // l
-      handle: function handle(player, actions) {
-        if (!player.hasStarted) {
-          return;
-        }
-        actions.forward(10, {
-          action: 'forward-10',
-          source: 'shortcut'
-        }); // Go forward 10 seconds
-      }
-    }, {
-      keyCode: 36,
-      // Home
-      handle: function handle(player, actions) {
-        if (!player.hasStarted) {
-          return;
-        }
-        actions.seek(0); // Go to beginning of video
-      }
-    }, {
-      keyCode: 35,
-      // End
-      handle: function handle(player, actions) {
-        if (!player.hasStarted) {
-          return;
-        }
-        // Go to end of video
-        actions.seek(player.duration);
-      }
-    }, {
-      keyCode: 38,
-      // Up arrow
-      handle: function handle(player, actions) {
-        // Increase volume 5%
-        var v = player.volume + 0.05;
-        if (v > 1) {
-          v = 1;
-        }
-        actions.changeVolume(v, {
-          action: 'volume-up',
-          source: 'shortcut'
-        });
-      }
-    }, {
-      keyCode: 40,
-      // Down arrow
-      handle: function handle(player, actions) {
-        // Decrease volume 5%
-        var v = player.volume - 0.05;
-        if (v < 0) {
-          v = 0;
-        }
-        var action = v > 0 ? 'volume-down' : 'volume-off';
-        actions.changeVolume(v, {
-          action: action,
-          source: 'shortcut'
-        });
-      }
-    }, {
-      keyCode: 190,
-      // Shift + >
-      shift: true,
-      handle: function handle(player, actions) {
-        // Increase speed
-        var playbackRate = player.playbackRate;
-        if (playbackRate >= 1.5) {
-          playbackRate = 2;
-        } else if (playbackRate >= 1.25) {
-          playbackRate = 1.5;
-        } else if (playbackRate >= 1.0) {
-          playbackRate = 1.25;
-        } else if (playbackRate >= 0.5) {
-          playbackRate = 1.0;
-        } else if (playbackRate >= 0.25) {
-          playbackRate = 0.5;
-        } else if (playbackRate >= 0) {
-          playbackRate = 0.25;
-        }
-        actions.changeRate(playbackRate, {
-          action: 'fast-forward',
-          source: 'shortcut'
-        });
-      }
-    }, {
-      keyCode: 188,
-      // Shift + <
-      shift: true,
-      handle: function handle(player, actions) {
-        // Decrease speed
-        var playbackRate = player.playbackRate;
-        if (playbackRate <= 0.5) {
-          playbackRate = 0.25;
-        } else if (playbackRate <= 1.0) {
-          playbackRate = 0.5;
-        } else if (playbackRate <= 1.25) {
-          playbackRate = 1.0;
-        } else if (playbackRate <= 1.5) {
-          playbackRate = 1.25;
-        } else if (playbackRate <= 2) {
-          playbackRate = 1.5;
-        }
-        actions.changeRate(playbackRate, {
-          action: 'fast-rewind',
-          source: 'shortcut'
-        });
-      }
-    }];
-    _this.shortcuts = [].concat(_this.defaultShortcuts);
-    _this.mergeShortcuts = _this.mergeShortcuts.bind(_assertThisInitialized(_this));
-    _this.handleKeyPress = _this.handleKeyPress.bind(_assertThisInitialized(_this));
-    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
-    _this.handleDoubleClick = _this.handleDoubleClick.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-  var _proto = Shortcut.prototype;
-  _proto.componentDidMount = function componentDidMount() {
-    this.mergeShortcuts();
-    document.addEventListener('keydown', this.handleKeyPress);
-    document.addEventListener('click', this.handleClick);
-    document.addEventListener('dblclick', this.handleDoubleClick);
-  };
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    if (prevProps.shortcuts !== this.props.shortcuts) {
-      this.mergeShortcuts();
-    }
-  };
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    document.removeEventListener('keydown', this.handleKeyPress);
-    document.removeEventListener('click', this.handleClick);
-    document.removeEventListener('dblclick', this.handleDoubleClick);
-  }
-
-  // merge the shortcuts from props
-  ;
-  _proto.mergeShortcuts = function mergeShortcuts() {
-    var getShortcutKey = function getShortcutKey(_ref) {
-      var _ref$keyCode = _ref.keyCode,
-        keyCode = _ref$keyCode === void 0 ? 0 : _ref$keyCode,
-        _ref$ctrl = _ref.ctrl,
-        ctrl = _ref$ctrl === void 0 ? false : _ref$ctrl,
-        _ref$shift = _ref.shift,
-        shift = _ref$shift === void 0 ? false : _ref$shift,
-        _ref$alt = _ref.alt,
-        alt = _ref$alt === void 0 ? false : _ref$alt;
-      return keyCode + ":" + ctrl + ":" + shift + ":" + alt;
-    };
-    var defaultShortcuts = this.defaultShortcuts.reduce(function (shortcuts, shortcut) {
-      var _extends2;
-      return _extends({}, shortcuts, (_extends2 = {}, _extends2[getShortcutKey(shortcut)] = shortcut, _extends2));
-    }, {});
-    var mergedShortcuts = (this.props.shortcuts || []).reduce(function (shortcuts, shortcut) {
-      var keyCode = shortcut.keyCode,
-        handle = shortcut.handle;
-      if (keyCode && typeof handle === 'function') {
-        var _extends3;
-        return _extends({}, shortcuts, (_extends3 = {}, _extends3[getShortcutKey(shortcut)] = shortcut, _extends3));
-      }
-      return shortcuts;
-    }, defaultShortcuts);
-    var gradeShortcut = function gradeShortcut(shortcut) {
-      var score = 0;
-      ['ctrl', 'shift', 'alt'].forEach(function (key) {
-        if (shortcut[key]) {
-          score += 1;
-        }
-      });
-      return score;
-    };
-    this.shortcuts = Object.values(mergedShortcuts).sort(function (a, b) {
-      return gradeShortcut(b) - gradeShortcut(a);
-    });
-  };
-  _proto.togglePlay = function togglePlay(player, actions) {
-    if (player.paused) {
-      actions.play({
-        action: 'play',
-        source: 'shortcut'
-      });
-    } else {
-      actions.pause({
-        action: 'pause',
-        source: 'shortcut'
-      });
-    }
-  };
-  _proto.toggleFullscreen = function toggleFullscreen(player, actions) {
-    actions.toggleFullscreen(player);
-  };
-  _proto.handleKeyPress = function handleKeyPress(e) {
-    var _this$props = this.props,
-      player = _this$props.player,
-      actions = _this$props.actions;
-    if (!player.isActive) {
-      return;
-    }
-    var activeElement = document.activeElement;
-    if (activeElement && activeElement instanceof HTMLElement && (hasClass(activeElement, 'video-react-player-control') || hasClass(activeElement, 'video-react-player-menu-button-active') || hasClass(activeElement, 'video-react-player-big-play-button'))) {
-      return;
-    }
-    var keyCode = e.keyCode || e.which;
-    var ctrl = e.ctrlKey || e.metaKey;
-    var shift = e.shiftKey;
-    var alt = e.altKey;
-    var shortcut = this.shortcuts.find(function (s) {
-      if (!s.keyCode || s.keyCode - keyCode !== 0) {
-        return false;
-      }
-      if (s.ctrl !== undefined && s.ctrl !== ctrl || s.shift !== undefined && s.shift !== shift || s.alt !== undefined && s.alt !== alt) {
-        return false;
-      }
-      return true;
-    });
-    if (shortcut) {
-      shortcut.handle(player, actions);
-      e.preventDefault();
-    }
-  }
-
-  // only if player is active and player is ready
-  ;
-  _proto.canBeClicked = function canBeClicked(player, e) {
-    if (!player.isActive || player.readyState !== 4 || !(e.target instanceof HTMLVideoElement)) {
-      return false;
-    }
-    return true;
-  };
-  _proto.handleClick = function handleClick(e) {
-    var _this$props2 = this.props,
-      player = _this$props2.player,
-      actions = _this$props2.actions,
-      clickable = _this$props2.clickable;
-    if (!this.canBeClicked(player, e) || !clickable) {
-      return;
-    }
-    this.togglePlay(player, actions);
-    // e.preventDefault();
-  };
-  _proto.handleDoubleClick = function handleDoubleClick(e) {
-    var _this$props3 = this.props,
-      player = _this$props3.player,
-      actions = _this$props3.actions,
-      dblclickable = _this$props3.dblclickable;
-    if (!this.canBeClicked(player, e) || !dblclickable) {
-      return;
-    }
-    this.toggleFullscreen(player, actions);
-    // e.preventDefault();
-  }
-
-  // this component dose not render anything
-  // it's just for the key down event
-  ;
-  _proto.render = function render() {
-    return null;
-  };
-  return Shortcut;
-}(React.Component);
-Shortcut.defaultProps = {
-  clickable: true,
-  dblclickable: true
-};
-Shortcut.displayName = 'Shortcut';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var propTypes = {
-  player: PropTypes.object,
-  className: PropTypes.string
-};
-function CurrentTimeDisplay(_ref) {
-  var player = _ref.player,
-    className = _ref.className;
-  var formattedTime = formatTime(player.currentTime, player.duration);
-  return React__default.createElement("div", {
-    className: classNames('video-react-player-current-time video-react-player-time-control video-react-player-control', className)
-  }, React__default.createElement("div", {
-    className: "video-react-player-current-time-display",
-    "aria-live": "off"
-  }, React__default.createElement("span", {
-    className: "video-react-player-control-text"
-  }, "Current Time "), formattedTime));
-}
-CurrentTimeDisplay.propTypes = propTypes;
-CurrentTimeDisplay.displayName = 'CurrentTimeDisplay';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-function DurationDisplay(_ref) {
-  var player = _ref.player,
-    className = _ref.className;
-  var formattedTime = formatTime(player.duration);
-  return React__default.createElement("div", {
-    className: classNames(className, 'video-react-player-duration video-react-player-time-control video-react-player-control')
-  }, React__default.createElement("div", {
-    className: "video-react-player-duration-display",
-    "aria-live": "off"
-  }, React__default.createElement("span", {
-    className: "video-react-player-control-text"
-  }, "Duration Time "), formattedTime));
-}
-DurationDisplay.displayName = 'DurationDisplay';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-function TimeDivider(_ref) {
-  var separator = _ref.separator,
-    className = _ref.className;
-  var separatorText = separator || '/';
-  return React__default.createElement("div", {
-    className: classNames('video-react-player-time-control video-react-player-time-divider', className),
-    dir: "ltr"
-  }, React__default.createElement("div", null, React__default.createElement("span", null, separatorText)));
-}
-TimeDivider.displayName = 'TimeDivider';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var FullscreenToggle = React.forwardRef(function (_ref, ref) {
-  var actions = _ref.actions,
-    player = _ref.player,
-    className = _ref.className;
-  var handleClick = React.useCallback(function () {
-    actions.toggleFullscreen(player);
-  }, [actions, player]);
-  return React__default.createElement("button", {
-    className: classNames(className, {
-      'video-react-player-icon-fullscreen-exit': player.isFullscreen,
-      'video-react-player-icon-fullscreen': !player.isFullscreen
-    }, 'video-react-player-fullscreen-control video-react-player-control video-react-player-button video-react-player-icon'),
-    ref: ref,
-    type: "button",
-    tabIndex: 0,
-    onClick: handleClick
-  }, React__default.createElement("span", {
-    className: "video-react-player-control-text"
-  }, "Non-Fullscreen"));
-});
-FullscreenToggle.displayName = 'FullscreenToggle';
-
-var PlayToggle = React.forwardRef(function (_ref, ref) {
-  var _player$paused;
-  var actions = _ref.actions,
-    player = _ref.player,
-    className = _ref.className;
-  var paused = (_player$paused = player === null || player === void 0 ? void 0 : player.paused) !== null && _player$paused !== void 0 ? _player$paused : true;
-  var handleClick = React.useCallback(function () {
-    if (!actions) return;
-    if (paused) {
-      actions.play();
-    } else {
-      actions.pause();
-    }
-  }, [actions, paused]);
-  var controlText = paused ? 'Play' : 'Pause';
-  return React__default.createElement("button", {
-    ref: ref,
-    className: classNames(className, {
-      'video-react-player-play-control': true,
-      'video-react-player-control': true,
-      'video-react-player-button': true,
-      'video-react-player-paused': paused,
-      'video-react-player-playing': !paused
-    }),
-    type: "button",
-    tabIndex: 0,
-    onClick: handleClick
-  }, React__default.createElement("span", {
-    className: "video-react-player-control-text"
-  }, controlText));
-});
-PlayToggle.displayName = 'PlayToggle';
-
-var Slider = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(Slider, _Component);
-  function Slider() {
-    var _this;
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    _this.slider = null;
-    _this.state = {
-      active: false
-    };
-    _this.getProgress = function () {
-      var getPercent = _this.props.getPercent;
-      if (!getPercent) {
-        return 0;
-      }
-      var progress = getPercent();
-      if (typeof progress !== 'number' || progress < 0 || progress === Infinity) {
-        progress = 0;
-      }
-      return progress;
-    };
-    _this.handleMouseDown = function (event) {
-      var _this$props$sliderAct, _this$props;
-      var onMouseDown = _this.props.onMouseDown;
-      document.addEventListener('mousemove', _this.handleMouseMove, true);
-      document.addEventListener('mouseup', _this.handleMouseUp, true);
-      document.addEventListener('touchmove', _this.handleMouseMove, true);
-      document.addEventListener('touchend', _this.handleMouseUp, true);
-      _this.setState({
-        active: true
-      });
-      (_this$props$sliderAct = (_this$props = _this.props).sliderActive) === null || _this$props$sliderAct === void 0 ? void 0 : _this$props$sliderAct.call(_this$props, event);
-      _this.handleMouseMove(event);
-      if (onMouseDown) {
-        onMouseDown(event);
-      }
-    };
-    _this.handleMouseMove = function (event) {
-      var onMouseMove = _this.props.onMouseMove;
-      if (onMouseMove) {
-        onMouseMove(event);
-      }
-    };
-    _this.handleMouseUp = function (event) {
-      var _this$props$sliderIna, _this$props2;
-      event.preventDefault();
-      var onMouseUp = _this.props.onMouseUp;
-      document.removeEventListener('mousemove', _this.handleMouseMove, true);
-      document.removeEventListener('mouseup', _this.handleMouseUp, true);
-      document.removeEventListener('touchmove', _this.handleMouseMove, true);
-      document.removeEventListener('touchend', _this.handleMouseUp, true);
-      _this.setState({
-        active: false
-      });
-      (_this$props$sliderIna = (_this$props2 = _this.props).sliderInactive) === null || _this$props$sliderIna === void 0 ? void 0 : _this$props$sliderIna.call(_this$props2, event);
-      if (onMouseUp) {
-        onMouseUp(event);
-      }
-    };
-    _this.handleFocus = function (event) {
-      var _this$props$onFocus, _this$props3;
-      document.addEventListener('keydown', _this.handleKeyPress, true);
-      (_this$props$onFocus = (_this$props3 = _this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props3, event);
-    };
-    _this.handleBlur = function (event) {
-      document.removeEventListener('keydown', _this.handleKeyPress, true);
-      if (event) {
-        var _this$props$onBlur, _this$props4;
-        (_this$props$onBlur = (_this$props4 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props4, event);
-      }
-    };
-    _this.handleClick = function (event) {
-      var _this$props$onClick, _this$props5;
-      event.preventDefault();
-      (_this$props$onClick = (_this$props5 = _this.props).onClick) === null || _this$props$onClick === void 0 ? void 0 : _this$props$onClick.call(_this$props5, event);
-    };
-    _this.handleKeyPress = function (event) {
-      if (event.which === 37 || event.which === 40) {
-        event.preventDefault();
-        event.stopPropagation();
-        _this.stepBack();
-      } else if (event.which === 38 || event.which === 39) {
-        event.preventDefault();
-        event.stopPropagation();
-        _this.stepForward();
-      }
-    };
-    _this.stepForward = function () {
-      var _this$props$stepForwa, _this$props6;
-      (_this$props$stepForwa = (_this$props6 = _this.props).stepForward) === null || _this$props$stepForwa === void 0 ? void 0 : _this$props$stepForwa.call(_this$props6);
-    };
-    _this.stepBack = function () {
-      var _this$props$stepBack, _this$props7;
-      (_this$props$stepBack = (_this$props7 = _this.props).stepBack) === null || _this$props$stepBack === void 0 ? void 0 : _this$props$stepBack.call(_this$props7);
-    };
-    _this.renderChildren = function () {
-      var _this$props$onPercent, _this$props8;
-      var progress = _this.getProgress();
-      var percentage = (progress * 100).toFixed(2) + "%";
-      (_this$props$onPercent = (_this$props8 = _this.props).onPercentageChange) === null || _this$props$onPercent === void 0 ? void 0 : _this$props$onPercent.call(_this$props8, percentage);
-      return React__default.Children.map(_this.props.children, function (child) {
-        return React__default.isValidElement(child) ? React__default.cloneElement(child, {
-          progress: progress,
-          percentage: percentage
-        }) : child;
-      });
-    };
-    return _this;
-  }
-  var _proto = Slider.prototype;
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    document.removeEventListener('mousemove', this.handleMouseMove, true);
-    document.removeEventListener('mouseup', this.handleMouseUp, true);
-    document.removeEventListener('touchmove', this.handleMouseMove, true);
-    document.removeEventListener('touchend', this.handleMouseUp, true);
-    document.removeEventListener('keydown', this.handleKeyPress, true);
-  };
-  _proto.calculateDistance = function calculateDistance(event) {
-    var _position$x;
-    if (!this.slider) {
-      return 0;
-    }
-    var position = getPointerPosition(this.slider, event);
-    if (this.props.vertical) {
-      var _position$y;
-      return (_position$y = position.y) !== null && _position$y !== void 0 ? _position$y : 0;
-    }
-    return (_position$x = position.x) !== null && _position$x !== void 0 ? _position$x : 0;
-  };
-  _proto.render = function render() {
-    var _this2 = this;
-    var _this$props9 = this.props,
-      vertical = _this$props9.vertical,
-      label = _this$props9.label,
-      valuenow = _this$props9.valuenow,
-      valuetext = _this$props9.valuetext;
-    var ariaValueNow = typeof valuenow === 'number' ? valuenow : Number(valuenow !== null && valuenow !== void 0 ? valuenow : 0);
-    return React__default.createElement("div", {
-      className: classNames(this.props.className, {
-        'video-react-player-slider-vertical': vertical,
-        'video-react-player-slider-horizontal': !vertical,
-        'video-react-player-sliding': this.state.active
-      }, 'video-react-player-slider'),
-      ref: function ref(node) {
-        _this2.slider = node;
-      },
-      tabIndex: 0,
-      role: "slider",
-      onMouseDown: this.handleMouseDown,
-      onTouchStart: this.handleMouseDown,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      onClick: this.handleClick,
-      "aria-label": label || '',
-      "aria-valuenow": ariaValueNow,
-      "aria-valuetext": valuetext || '',
-      "aria-valuemin": 0,
-      "aria-valuemax": 100
-    }, this.renderChildren());
-  };
-  return Slider;
-}(React.Component);
-Slider.displayName = 'Slider';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-// Shows play progress
-function PlayProgressBar(_ref) {
-  var currentTime = _ref.currentTime,
-    duration = _ref.duration,
-    percentage = _ref.percentage,
-    className = _ref.className;
-  return React__default.createElement("div", {
-    "data-current-time": formatTime(currentTime, duration),
-    className: classNames('video-react-player-play-progress video-react-player-slider-bar', className),
-    style: {
-      width: percentage
-    }
-  }, React__default.createElement("span", {
-    className: "video-react-player-control-text"
-  }, "Progress: " + percentage));
-}
-PlayProgressBar.displayName = 'PlayProgressBar';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var percentify = function percentify(time, end) {
-  var percent = time / end || 0;
-  return (percent >= 1 ? 1 : percent) * 100 + "%";
-};
-var LoadProgressBar = function LoadProgressBar(_ref) {
-  var buffered = _ref.buffered,
-    duration = _ref.duration,
-    className = _ref.className;
-  if (!buffered || buffered.length === 0) {
-    return null;
-  }
-  var bufferedEnd = buffered.end(buffered.length - 1);
-  if (bufferedEnd > duration) {
-    bufferedEnd = duration;
-  }
-  var style = {
-    width: percentify(bufferedEnd, duration)
-  };
-  var parts = [];
-  for (var i = 0; i < buffered.length; i += 1) {
-    var start = buffered.start(i);
-    var end = buffered.end(i);
-    parts.push(React__default.createElement("div", {
-      style: {
-        left: percentify(start, bufferedEnd),
-        width: percentify(end - start, bufferedEnd)
-      },
-      key: "part-" + i
-    }));
-  }
-  return React__default.createElement("div", {
-    style: style,
-    className: classNames('video-react-player-load-progress', className)
-  }, React__default.createElement("span", {
-    className: "video-react-player-control-text"
-  }, "Loaded: 0%"), parts);
-};
-LoadProgressBar.displayName = 'LoadProgressBar';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var MouseTimeDisplay = function MouseTimeDisplay(_ref) {
-  var duration = _ref.duration,
-    mouseTime = _ref.mouseTime,
-    className = _ref.className,
-    text = _ref.text;
-  if (!mouseTime.time) {
-    return null;
-  }
-  var time = text || formatTime(mouseTime.time, duration);
-  return React__default.createElement("div", {
-    className: classNames('video-react-player-mouse-display', className),
-    style: {
-      left: mouseTime.position + "px"
-    },
-    "data-current-time": time
-  });
-};
-MouseTimeDisplay.displayName = 'MouseTimeDisplay';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var SeekBar = function SeekBar(_ref) {
-  var player = _ref.player,
-    actions = _ref.actions,
-    mouseTime = _ref.mouseTime,
-    className = _ref.className;
-  var sliderRef = React.useRef(null);
-  var getPercent = React.useCallback(function () {
-    var currentTime = player.currentTime,
-      seekingTime = player.seekingTime,
-      duration = player.duration;
-    var time = seekingTime || currentTime;
-    if (!duration) {
-      return 0;
-    }
-    var percent = time / duration;
-    return percent >= 1 ? 1 : percent;
-  }, [player]);
-  var getNewTime = React.useCallback(function (event) {
-    var duration = player.duration || 0;
-    var distance = sliderRef.current ? sliderRef.current.calculateDistance(event) : 0;
-    var newTime = distance * duration;
-    return newTime === duration ? newTime - 0.1 : newTime;
-  }, [player.duration]);
-  var handleMouseMove = React.useCallback(function (event) {
-    var newTime = getNewTime(event);
-    actions.handleSeekingTime(newTime);
-  }, [actions, getNewTime]);
-  var handleMouseUp = React.useCallback(function (event) {
-    var newTime = getNewTime(event);
-    actions.seek(newTime);
-    actions.handleEndSeeking(newTime);
-  }, [actions, getNewTime]);
-  var stepForward = React.useCallback(function () {
-    actions.forward(5);
-  }, [actions]);
-  var stepBack = React.useCallback(function () {
-    actions.replay(5);
-  }, [actions]);
-  var time = player.seekingTime || player.currentTime;
-  var percent = getPercent();
-  var valueText = React.useMemo(function () {
-    return formatTime(time, player.duration);
-  }, [player.duration, time]);
-  return React__default.createElement(Slider, {
-    ref: function ref(instance) {
-      sliderRef.current = instance;
-    },
-    label: "video progress bar",
-    className: classNames('video-react-player-progress-holder', className),
-    valuenow: Number((percent * 100).toFixed(2)),
-    valuetext: valueText,
-    onMouseMove: handleMouseMove,
-    onMouseUp: handleMouseUp,
-    getPercent: getPercent,
-    stepForward: stepForward,
-    stepBack: stepBack
-  }, React__default.createElement(LoadProgressBar, {
-    buffered: player.buffered,
-    currentTime: time,
-    duration: player.duration
-  }), React__default.createElement(MouseTimeDisplay, {
-    duration: player.duration,
-    mouseTime: mouseTime
-  }), React__default.createElement(PlayProgressBar, {
-    percentage: (percent * 100).toFixed(2) + "%",
-    currentTime: time,
-    duration: player.duration
-  }));
-};
-SeekBar.displayName = 'SeekBar';
-
-var ProgressControl = function ProgressControl(_ref) {
-  var className = _ref.className,
-    playerProps = _objectWithoutPropertiesLoose(_ref, ["className"]);
-  var _useState = React.useState({
-      time: null,
-      position: 0
-    }),
-    mouseTime = _useState[0],
-    setMouseTime = _useState[1];
-  var handleMouseMove = React.useCallback(function (event) {
-    if (!event.pageX) {
-      return;
-    }
-    var target = event.currentTarget;
-    if (!target) {
-      return;
-    }
-    var _Dom$getPointerPositi = getPointerPosition(target, event.nativeEvent),
-      _Dom$getPointerPositi2 = _Dom$getPointerPositi.x,
-      x = _Dom$getPointerPositi2 === void 0 ? 0 : _Dom$getPointerPositi2;
-    var newTime = x * playerProps.player.duration;
-    var position = event.pageX - findElPosition(target).left;
-    setMouseTime({
-      time: newTime,
-      position: position
-    });
-  }, [playerProps.player.duration]);
-  return React__default.createElement("div", {
-    onMouseMove: handleMouseMove,
-    className: classNames('video-react-player-progress-control video-react-player-control', className)
-  }, React__default.createElement(SeekBar, _extends({
-    mouseTime: mouseTime
-  }, playerProps)));
-};
-ProgressControl.displayName = 'ProgressControl';
-
-var ClickableComponent = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(ClickableComponent, _Component);
-  function ClickableComponent() {
-    var _this;
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    _this.handleKeypress = function (event) {
-      if (event.which === 32 || event.which === 13) {
-        event.preventDefault();
-        _this.handleClick(event);
-      }
-    };
-    _this.handleClick = function (event) {
-      _this.props.onClick(event);
-    };
-    _this.handleFocus = function (event) {
-      var _this$props$onFocus, _this$props;
-      document.addEventListener('keydown', _this.handleKeypress);
-      (_this$props$onFocus = (_this$props = _this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props, event);
-    };
-    _this.handleBlur = function (event) {
-      document.removeEventListener('keydown', _this.handleKeypress);
-      if (event) {
-        var _this$props$onBlur, _this$props2;
-        (_this$props$onBlur = (_this$props2 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props2, event);
-      }
-    };
-    return _this;
-  }
-  var _proto = ClickableComponent.prototype;
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    this.handleBlur();
-  };
-  _proto.render = function render() {
-    var _this$props3 = this.props,
-      _this$props3$tagName = _this$props3.tagName,
-      tagName = _this$props3$tagName === void 0 ? 'div' : _this$props3$tagName,
-      className = _this$props3.className,
-      children = _this$props3.children,
-      onClick = _this$props3.onClick,
-      onFocus = _this$props3.onFocus,
-      onBlur = _this$props3.onBlur,
-      rest = _objectWithoutPropertiesLoose(_this$props3, ["tagName", "className", "children", "onClick", "onFocus", "onBlur"]);
-    var Tag = tagName;
-    return React__default.createElement(Tag, _extends({}, rest, {
-      className: classNames(className),
-      role: "button",
-      tabIndex: 0,
-      onClick: this.handleClick,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur
-    }), children);
-  };
-  return ClickableComponent;
-}(React.Component);
-ClickableComponent.defaultProps = {
-  tagName: 'div'
-};
-ClickableComponent.displayName = 'ClickableComponent';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var Popup = function Popup(_ref) {
-  var children = _ref.children;
-  var handleClick = function handleClick(event) {
-    event.preventDefault();
-  };
-  return React__default.createElement("div", {
-    className: "video-react-player-menu",
-    onClick: handleClick
-  }, React__default.createElement("div", {
-    className: "video-react-player-menu-content"
-  }, children));
-};
-Popup.displayName = 'Popup';
-
-var PopupButton = function PopupButton(_ref) {
-  var _ref$inline = _ref.inline,
-    inline = _ref$inline === void 0 ? true : _ref$inline,
-    className = _ref.className,
-    children = _ref.children,
-    rest = _objectWithoutPropertiesLoose(_ref, ["inline", "className", "children"]);
-  return React__default.createElement(ClickableComponent, _extends({}, rest, {
-    className: classNames(className, {
-      'video-react-player-menu-button-inline': !!inline,
-      'video-react-player-menu-button-popup': !inline
-    }, 'video-react-player-control video-react-player-button video-react-player-menu-button')
-  }), React__default.createElement(Popup, null, children));
-};
-PopupButton.displayName = 'PopupButton';
-
-var VolumeLevel = function VolumeLevel(_ref) {
-  var _ref$percentage = _ref.percentage,
-    percentage = _ref$percentage === void 0 ? '100%' : _ref$percentage,
-    _ref$vertical = _ref.vertical,
-    vertical = _ref$vertical === void 0 ? false : _ref$vertical,
-    className = _ref.className;
-  var style = {};
-  if (vertical) {
-    style.height = percentage;
-  } else {
-    style.width = percentage;
-  }
-  return React__default.createElement("div", {
-    className: classNames(className, 'video-react-player-volume-level'),
-    style: style
-  }, React__default.createElement("span", {
-    className: "video-react-player-control-text"
-  }));
-};
-VolumeLevel.displayName = 'VolumeLevel';
-
-var VolumeBar = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(VolumeBar, _Component);
-  function VolumeBar() {
-    var _this;
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    _this.slider = null;
-    _this.state = {
-      percentage: '0%'
-    };
-    _this.getPercent = function () {
-      var player = _this.props.player;
-      return player.muted ? 0 : player.volume;
-    };
-    _this.checkMuted = function () {
-      var _this$props = _this.props,
-        player = _this$props.player,
-        actions = _this$props.actions;
-      if (player.muted) {
-        actions.mute(false);
-      }
-    };
-    _this.handleMouseMove = function (event) {
-      var actions = _this.props.actions;
-      _this.checkMuted();
-      var distance = _this.slider ? _this.slider.calculateDistance(event) : 0;
-      actions.changeVolume(distance);
-    };
-    _this.stepForward = function () {
-      var _this$props2 = _this.props,
-        player = _this$props2.player,
-        actions = _this$props2.actions;
-      _this.checkMuted();
-      actions.changeVolume(player.volume + 0.1);
-    };
-    _this.stepBack = function () {
-      var _this$props3 = _this.props,
-        player = _this$props3.player,
-        actions = _this$props3.actions;
-      _this.checkMuted();
-      actions.changeVolume(player.volume - 0.1);
-    };
-    _this.handleFocus = function (event) {
-      var _this$props$onFocus, _this$props4;
-      (_this$props$onFocus = (_this$props4 = _this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props4, event);
-    };
-    _this.handleBlur = function (event) {
-      var _this$props$onBlur, _this$props5;
-      (_this$props$onBlur = (_this$props5 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props5, event);
-    };
-    _this.handleSliderActivate = function (event) {
-      if (event.type === 'focus') {
-        _this.handleFocus(event);
-      }
-    };
-    _this.handleSliderDeactivate = function (event) {
-      if (event.type === 'blur') {
-        _this.handleBlur(event);
-      }
-    };
-    _this.handlePercentageChange = function (percentage) {
-      if (percentage !== _this.state.percentage) {
-        _this.setState({
-          percentage: percentage
-        });
-      }
-    };
-    _this.handleClick = function (event) {
-      event.stopPropagation();
-    };
-    return _this;
-  }
-  var _proto = VolumeBar.prototype;
-  _proto.render = function render() {
-    var _this2 = this;
-    var _this$props6 = this.props,
-      player = _this$props6.player,
-      className = _this$props6.className,
-      vertical = _this$props6.vertical;
-    var volume = Number((player.volume * 100).toFixed(2));
-    return React__default.createElement(Slider, {
-      order: 1,
-      ref: function ref(instance) {
-        _this2.slider = instance;
-      },
-      label: "volume level",
-      valuenow: volume,
-      valuetext: volume + "%",
-      onMouseMove: this.handleMouseMove,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      onClick: this.handleClick,
-      sliderActive: this.handleSliderActivate,
-      sliderInactive: this.handleSliderDeactivate,
-      getPercent: this.getPercent,
-      onPercentageChange: this.handlePercentageChange,
-      stepForward: this.stepForward,
-      stepBack: this.stepBack,
-      vertical: vertical,
-      className: classNames(className, 'video-react-player-volume-bar', 'video-react-player-slider-bar')
-    }, React__default.createElement(VolumeLevel, {
-      className: "video-react-player-volume-level"
-    }));
-  };
-  return VolumeBar;
-}(React.Component);
-VolumeBar.displayName = 'VolumeBar';
-
-var VolumeMenuButton = function VolumeMenuButton(_ref) {
-  var player = _ref.player,
-    actions = _ref.actions,
-    _ref$vertical = _ref.vertical,
-    vertical = _ref$vertical === void 0 ? false : _ref$vertical,
-    className = _ref.className,
-    alwaysShowVolume = _ref.alwaysShowVolume,
-    buttonProps = _objectWithoutPropertiesLoose(_ref, ["player", "actions", "vertical", "className", "alwaysShowVolume"]);
-  var _useState = React.useState(false),
-    active = _useState[0],
-    setActive = _useState[1];
-  var volumeLevel = React.useMemo(function () {
-    if (player.muted || player.volume === 0) {
-      return 0;
-    }
-    if (player.volume < 0.33) {
-      return 1;
-    }
-    if (player.volume < 0.67) {
-      return 2;
-    }
-    return 3;
-  }, [player.muted, player.volume]);
-  var handleClick = React.useCallback(function () {
-    actions.mute(!player.muted);
-  }, [actions, player.muted]);
-  var handleFocus = React.useCallback(function () {
-    setActive(true);
-  }, []);
-  var handleBlur = React.useCallback(function () {
-    setActive(false);
-  }, []);
-  var inline = !vertical;
-  return React__default.createElement(PopupButton, _extends({}, buttonProps, {
-    className: classNames(className, {
-      'video-react-player-volume-menu-button-vertical': vertical,
-      'video-react-player-volume-menu-button-horizontal': !vertical,
-      'video-react-player-vol-muted': player.muted,
-      'video-react-player-vol-0': volumeLevel === 0 && !player.muted,
-      'video-react-player-vol-1': volumeLevel === 1,
-      'video-react-player-vol-2': volumeLevel === 2,
-      'video-react-player-vol-3': volumeLevel === 3,
-      'video-react-player-slider-active': alwaysShowVolume || active,
-      'video-react-player-lock-showing': alwaysShowVolume || active
-    }, 'video-react-player-volume-menu-button'),
-    onClick: handleClick,
-    inline: inline
-  }), React__default.createElement(VolumeBar, {
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    player: player,
-    actions: actions,
-    vertical: vertical
-  }));
-};
-VolumeMenuButton.displayName = 'VolumeMenuButton';
-
-var asDefaultChild = function asDefaultChild(element) {
-  return element;
-};
-var getDefaultChildren = function getDefaultChildren() {
-  return [asDefaultChild(React__default.createElement(PlayToggle, {
-    key: 'play-toggle',
-    order: 1
-  })), asDefaultChild(React__default.createElement(VolumeMenuButton, {
-    key: 'volume-menu-button',
-    order: 4
-  })), asDefaultChild(React__default.createElement(CurrentTimeDisplay, {
-    key: 'current-time-display',
-    order: 5.1
-  })), asDefaultChild(React__default.createElement(TimeDivider, {
-    key: 'time-divider',
-    order: 5.2
-  })), asDefaultChild(React__default.createElement(DurationDisplay, {
-    key: 'duration-display',
-    order: 5.3
-  })), asDefaultChild(React__default.createElement(ProgressControl, {
-    key: 'progress-control',
-    order: 6
-  })), asDefaultChild(React__default.createElement(FullscreenToggle, {
-    key: 'fullscreen-toggle',
-    order: 8
-  }))];
-};
-var ControlBar = function ControlBar(_ref) {
-  var _ref$autoHide = _ref.autoHide,
-    autoHide = _ref$autoHide === void 0 ? true : _ref$autoHide,
-    className = _ref.className,
-    _ref$disableCompletel = _ref.disableCompletely,
-    disableCompletely = _ref$disableCompletel === void 0 ? false : _ref$disableCompletel,
-    disableDefaultControls = _ref.disableDefaultControls,
-    children = _ref.children,
-    parentProps = _objectWithoutPropertiesLoose(_ref, ["autoHide", "className", "disableCompletely", "disableDefaultControls", "children"]);
-  if (disableCompletely || !parentProps.actions || !parentProps.player) {
-    return null;
-  }
-  var hasCoreProps = Boolean(parentProps.actions && parentProps.player);
-  var defaultChildren = disableDefaultControls || !hasCoreProps ? [] : getDefaultChildren();
-  var mergedChildren = mergeAndSortChildren(defaultChildren, children, parentProps);
-  return React__default.createElement("div", {
-    className: classNames('video-react-player-control-bar', {
-      'video-react-player-control-bar-auto-hide': autoHide
-    }, className)
-  }, mergedChildren);
-};
-ControlBar.displayName = 'ControlBar';
-
-var USER_AGENT = typeof window !== 'undefined' && window.navigator ? window.navigator.userAgent : '';
-// const webkitVersionMap = (/AppleWebKit\/([\d.]+)/i).exec(USER_AGENT);
-// const appleWebkitVersion = webkitVersionMap ? parseFloat(webkitVersionMap.pop()) : null;
-
-/*
- * Device is an iPhone
- *
- * @type {Boolean}
- * @constant
- * @private
- */
-var IS_IPAD = /iPad/i.test(USER_AGENT);
-
-// The Facebook app's UIWebView identifies as both an iPhone and iPad, so
-// to identify iPhones, we need to exclude iPads.
-// http://artsy.github.io/blog/2012/10/18/the-perils-of-ios-user-agent-sniffing/
-var IS_IPHONE = /iPhone/i.test(USER_AGENT) && !IS_IPAD;
-var IS_IPOD = /iPod/i.test(USER_AGENT);
-var IS_IOS = IS_IPHONE || IS_IPAD || IS_IPOD;
-
-var defaultProps = {
-  fluid: true,
-  muted: false,
-  playsInline: false,
-  preload: 'auto',
-  aspectRatio: 'auto'
-};
-var Player = React.forwardRef(function (incomingProps, ref) {
-  var props = _extends({}, defaultProps, incomingProps);
-  var children = props.children,
-    width = props.width,
-    height = props.height,
-    fluid = props.fluid,
-    bigPlayButtonPosition = props.bigPlayButtonPosition,
-    hideDefaultBigPlayButton = props.hideDefaultBigPlayButton,
-    aspectRatio = props.aspectRatio,
-    className = props.className,
-    store = props.store,
-    passThroughProps = _objectWithoutPropertiesLoose(props, ["children", "width", "height", "fluid", "bigPlayButtonPosition", "hideDefaultBigPlayButton", "aspectRatio", "className", "store"]);
-  var managerRef = React.useRef();
-  if (!managerRef.current) {
-    managerRef.current = new Manager(store);
-  }
-  var manager = managerRef.current;
-  var actionsRef = React.useRef(manager.getActions());
-  var actions = actionsRef.current;
-  var videoComponentRef = React.useRef(null);
-  var controlsHideTimerRef = React.useRef(null);
-  var _useState = React.useState(manager.getState().player),
-    playerState = _useState[0],
-    setPlayerState = _useState[1];
-  var handleResize = React.useCallback(function () {}, []);
-  React.useEffect(function () {
-    var unsubscribe = manager.subscribeToPlayerStateChange(function (state, prevState) {
-      if (state.isFullscreen !== prevState.isFullscreen) {
-        handleResize();
-        focusNode(manager.rootElement);
-      }
-      setPlayerState(state);
-    });
-    return unsubscribe;
-  }, [handleResize, manager]);
-  React.useEffect(function () {
-    handleResize();
-    window.addEventListener('resize', handleResize);
-    return function () {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [handleResize]);
-  var handleFullScreenChange = React.useCallback(function (event) {
-    if (event.target === manager.rootElement) {
-      actions.handleFullscreenChange(Boolean(fullscreen.isFullscreen));
-    }
-  }, [actions, manager]);
-  React.useEffect(function () {
-    fullscreen.addEventListener(handleFullScreenChange);
-    return function () {
-      return fullscreen.removeEventListener(handleFullScreenChange);
-    };
-  }, [handleFullScreenChange]);
-  React.useEffect(function () {
-    return function () {
-      if (controlsHideTimerRef.current) {
-        clearTimeout(controlsHideTimerRef.current);
-      }
-    };
-  }, []);
-  var handleVideoRef = React.useCallback(function (instance) {
-    videoComponentRef.current = instance;
-    manager.video = instance;
-  }, [manager]);
-  var getDefaultChildren = React.useCallback(function (originalChildren, includeBigPlayButton, bigPlayPos) {
-    if (includeBigPlayButton === void 0) {
-      includeBigPlayButton = true;
-    }
-    return [React__default.createElement(Video, {
-      ref: handleVideoRef,
-      key: "video",
-      order: 0,
-      actions: actions,
-      player: playerState
-    }, originalChildren), React__default.createElement(PosterImage, {
-      key: "poster-image",
-      order: 1,
-      actions: actions,
-      player: playerState
-    }), React__default.createElement(LoadingSpinner, {
-      key: "loading-spinner",
-      order: 2,
-      actions: actions,
-      player: playerState
-    }), React__default.createElement(Bezel, {
-      key: "bezel",
-      order: 3,
-      manager: manager
-    }), includeBigPlayButton && React__default.createElement(BigPlayButton, {
-      key: "big-play-button",
-      order: 4,
-      actions: actions,
-      player: playerState,
-      position: bigPlayPos
-    }), React__default.createElement(ControlBar, {
-      key: "control-bar",
-      order: 5,
-      actions: actions,
-      player: playerState
-    }), React__default.createElement(Shortcut, {
-      key: "shortcut",
-      order: 99,
-      actions: actions,
-      player: playerState,
-      manager: manager
-    })];
-  }, [actions, handleVideoRef, manager, playerState]);
-  var containsBigPlayButton = React.useCallback(function (nodes) {
-    var found = false;
-    React__default.Children.forEach(nodes, function (child) {
-      if (found) {
-        return;
-      }
-      if (!React__default.isValidElement(child)) {
-        return;
-      }
-      var t = child.type;
-      var name = t.displayName || t.name;
-      if (child.type === BigPlayButton || name === 'BigPlayButton' || child.props['data-big-play-button'] === true) {
-        found = true;
-        return;
-      }
-      if (child.props && child.props.children) {
-        if (containsBigPlayButton(child.props.children)) {
-          found = true;
-        }
-      }
-    });
-    return found;
-  }, []);
-  var getChildren = React.useCallback(function (propsForChildren) {
-    // Do not forward layout-only props like `fluid` to children to avoid DOM attribute warnings.
-    var _ignored = propsForChildren.className,
-      originalChildren = propsForChildren.children,
-      _fluid = propsForChildren.fluid,
-      _bp = propsForChildren.bigPlayButtonPosition,
-      _hide = propsForChildren.hideDefaultBigPlayButton,
-      rest = _objectWithoutPropertiesLoose(propsForChildren, ["className", "children", "fluid", "bigPlayButtonPosition", "hideDefaultBigPlayButton"]);
-    var userChildren = React__default.Children.toArray(children).filter(function (child) {
-      return !isVideoChild(child);
-    });
-    var hasUserBigPlayButton = containsBigPlayButton(children);
-    var includeDefaultBigPlay = !hideDefaultBigPlayButton && !hasUserBigPlayButton;
-    var defaultChildren = getDefaultChildren(originalChildren, includeDefaultBigPlay, bigPlayButtonPosition);
-    var parentProps = _extends({}, rest, {
-      actions: actions,
-      player: playerState,
-      manager: manager
-    });
-    return mergeAndSortChildren(defaultChildren, userChildren, parentProps);
-  }, [actions, bigPlayButtonPosition, children, containsBigPlayButton, getDefaultChildren, hideDefaultBigPlayButton, manager, playerState]);
-  var setWidthOrHeight = React.useCallback(function (style, name, value) {
-    var styleVal;
-    if (typeof value === 'string') {
-      if (value === 'auto') {
-        styleVal = 'auto';
-      } else if (/\d+%/.test(value)) {
-        styleVal = value;
-      }
-    } else if (typeof value === 'number') {
-      styleVal = value + "px";
-    }
-    if (styleVal) {
-      style[name] = styleVal;
-    }
-  }, []);
-  var playerStyle = React.useMemo(function () {
-    var style = {};
-    var resolvedAspectRatio = aspectRatio;
-    if (resolvedAspectRatio === undefined || resolvedAspectRatio === 'auto') {
-      if (playerState.videoWidth) {
-        resolvedAspectRatio = playerState.videoWidth + ":" + playerState.videoHeight;
-      } else {
-        resolvedAspectRatio = '16:9';
-      }
-    }
-    var _resolvedAspectRatio$ = resolvedAspectRatio.split(':').map(Number),
-      ratioWidth = _resolvedAspectRatio$[0],
-      ratioHeight = _resolvedAspectRatio$[1];
-    var ratioMultiplier = ratioHeight / ratioWidth;
-    var resolvedWidth = width;
-    if (resolvedWidth === undefined) {
-      if (typeof height === 'number') {
-        resolvedWidth = height / ratioMultiplier;
-      } else if (typeof height === 'string' && height !== 'auto') {
-        resolvedWidth = parseFloat(height) / ratioMultiplier;
-      } else {
-        resolvedWidth = playerState.videoWidth || 400;
-      }
-    }
-    var resolvedHeight = height;
-    if (resolvedHeight === undefined) {
-      if (typeof resolvedWidth === 'number') {
-        resolvedHeight = resolvedWidth * ratioMultiplier;
-      } else if (typeof resolvedWidth === 'string' && resolvedWidth !== 'auto') {
-        resolvedHeight = parseFloat(resolvedWidth) * ratioMultiplier;
-      }
-    }
-    if (fluid) {
-      style.paddingTop = ratioMultiplier * 100 + "%";
-    } else {
-      if (resolvedWidth !== undefined) {
-        setWidthOrHeight(style, 'width', resolvedWidth);
-      }
-      if (resolvedHeight !== undefined) {
-        setWidthOrHeight(style, 'height', resolvedHeight);
-      }
-    }
-    return style;
-  }, [aspectRatio, fluid, height, playerState.videoHeight, playerState.videoWidth, setWidthOrHeight, width]);
-  var startControlsTimer = React.useCallback(function () {
-    var controlBarActiveTime = 3000;
-    React__default.Children.forEach(children, function (element) {
-      if (!React__default.isValidElement(element) || element.type !== ControlBar) {
-        return;
-      }
-      var _ref = element.props,
-        autoHideTime = _ref.autoHideTime;
-      if (typeof autoHideTime === 'number') {
-        controlBarActiveTime = autoHideTime;
-      }
-    });
-    actions.userActivate(true);
-    if (controlsHideTimerRef.current) {
-      clearTimeout(controlsHideTimerRef.current);
-    }
-    controlsHideTimerRef.current = window.setTimeout(function () {
-      actions.userActivate(false);
-    }, controlBarActiveTime);
-  }, [actions, children]);
-  var throttledMouseMove = React.useMemo(function () {
-    return throttle(function () {
-      startControlsTimer();
-    }, 250);
-  }, [startControlsTimer]);
-  var handleMouseDown = React.useCallback(function () {
-    startControlsTimer();
-  }, [startControlsTimer]);
-  var handleMouseMove = React.useCallback(function () {
-    throttledMouseMove();
-  }, [throttledMouseMove]);
-  var handleKeyDown = React.useCallback(function () {
-    startControlsTimer();
-  }, [startControlsTimer]);
-  var handleFocus = React.useCallback(function () {
-    actions.activate(true);
-  }, [actions]);
-  var handleBlur = React.useCallback(function () {
-    actions.activate(false);
-  }, [actions]);
-  var rootRef = React.useCallback(function (node) {
-    manager.rootElement = node;
-  }, [manager]);
-  var childProps = React.useMemo(function () {
-    var _videoComponentRef$cu, _videoComponentRef$cu2;
-    return _extends({}, passThroughProps, {
-      fluid: fluid,
-      bigPlayButtonPosition: bigPlayButtonPosition,
-      hideDefaultBigPlayButton: hideDefaultBigPlayButton,
-      player: playerState,
-      actions: actions,
-      manager: manager,
-      store: manager.store,
-      video: (_videoComponentRef$cu = (_videoComponentRef$cu2 = videoComponentRef.current) === null || _videoComponentRef$cu2 === void 0 ? void 0 : _videoComponentRef$cu2.video) !== null && _videoComponentRef$cu !== void 0 ? _videoComponentRef$cu : null
-    });
-  }, [actions, bigPlayButtonPosition, fluid, hideDefaultBigPlayButton, manager, passThroughProps, playerState]);
-  var childElements = React.useMemo(function () {
-    return getChildren(childProps);
-  }, [childProps, getChildren]);
-  React.useImperativeHandle(ref, function () {
-    return {
-      manager: manager,
-      actions: actions,
-      video: videoComponentRef.current,
-      getState: function getState() {
-        return manager.getState();
-      },
-      get playbackRate() {
-        var _videoComponentRef$cu3, _videoComponentRef$cu4;
-        return (_videoComponentRef$cu3 = (_videoComponentRef$cu4 = videoComponentRef.current) === null || _videoComponentRef$cu4 === void 0 ? void 0 : _videoComponentRef$cu4.playbackRate) !== null && _videoComponentRef$cu3 !== void 0 ? _videoComponentRef$cu3 : 1;
-      },
-      set playbackRate(rate) {
-        if (videoComponentRef.current) {
-          videoComponentRef.current.playbackRate = rate;
-        }
-      },
-      get muted() {
-        var _videoComponentRef$cu5, _videoComponentRef$cu6;
-        return (_videoComponentRef$cu5 = (_videoComponentRef$cu6 = videoComponentRef.current) === null || _videoComponentRef$cu6 === void 0 ? void 0 : _videoComponentRef$cu6.muted) !== null && _videoComponentRef$cu5 !== void 0 ? _videoComponentRef$cu5 : false;
-      },
-      set muted(value) {
-        if (videoComponentRef.current) {
-          videoComponentRef.current.muted = value;
-        }
-      },
-      get volume() {
-        var _videoComponentRef$cu7, _videoComponentRef$cu8;
-        return (_videoComponentRef$cu7 = (_videoComponentRef$cu8 = videoComponentRef.current) === null || _videoComponentRef$cu8 === void 0 ? void 0 : _videoComponentRef$cu8.volume) !== null && _videoComponentRef$cu7 !== void 0 ? _videoComponentRef$cu7 : 1;
-      },
-      set volume(value) {
-        if (videoComponentRef.current) {
-          videoComponentRef.current.volume = value;
-        }
-      },
-      get videoWidth() {
-        var _videoComponentRef$cu9, _videoComponentRef$cu0;
-        return (_videoComponentRef$cu9 = (_videoComponentRef$cu0 = videoComponentRef.current) === null || _videoComponentRef$cu0 === void 0 ? void 0 : _videoComponentRef$cu0.videoWidth) !== null && _videoComponentRef$cu9 !== void 0 ? _videoComponentRef$cu9 : 0;
-      },
-      get videoHeight() {
-        var _videoComponentRef$cu1, _videoComponentRef$cu10;
-        return (_videoComponentRef$cu1 = (_videoComponentRef$cu10 = videoComponentRef.current) === null || _videoComponentRef$cu10 === void 0 ? void 0 : _videoComponentRef$cu10.videoHeight) !== null && _videoComponentRef$cu1 !== void 0 ? _videoComponentRef$cu1 : 0;
-      },
-      play: function play() {
-        var _videoComponentRef$cu11;
-        (_videoComponentRef$cu11 = videoComponentRef.current) === null || _videoComponentRef$cu11 === void 0 ? void 0 : _videoComponentRef$cu11.play();
-      },
-      pause: function pause() {
-        var _videoComponentRef$cu12;
-        (_videoComponentRef$cu12 = videoComponentRef.current) === null || _videoComponentRef$cu12 === void 0 ? void 0 : _videoComponentRef$cu12.pause();
-      },
-      load: function load() {
-        var _videoComponentRef$cu13;
-        (_videoComponentRef$cu13 = videoComponentRef.current) === null || _videoComponentRef$cu13 === void 0 ? void 0 : _videoComponentRef$cu13.load();
-      },
-      addTextTrack: function addTextTrack() {
-        var _videoComponentRef$cu14, _videoComponentRef$cu15;
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-        return (_videoComponentRef$cu14 = (_videoComponentRef$cu15 = videoComponentRef.current) === null || _videoComponentRef$cu15 === void 0 ? void 0 : _videoComponentRef$cu15.addTextTrack.apply(_videoComponentRef$cu15, args)) !== null && _videoComponentRef$cu14 !== void 0 ? _videoComponentRef$cu14 : {};
-      },
-      canPlayType: function canPlayType() {
-        var _videoComponentRef$cu16, _videoComponentRef$cu17;
-        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-          args[_key2] = arguments[_key2];
-        }
-        return (_videoComponentRef$cu16 = (_videoComponentRef$cu17 = videoComponentRef.current) === null || _videoComponentRef$cu17 === void 0 ? void 0 : _videoComponentRef$cu17.canPlayType.apply(_videoComponentRef$cu17, args)) !== null && _videoComponentRef$cu16 !== void 0 ? _videoComponentRef$cu16 : '';
-      },
-      seek: function seek(time) {
-        var _videoComponentRef$cu18;
-        (_videoComponentRef$cu18 = videoComponentRef.current) === null || _videoComponentRef$cu18 === void 0 ? void 0 : _videoComponentRef$cu18.seek(time);
-      },
-      forward: function forward(seconds) {
-        var _videoComponentRef$cu19;
-        (_videoComponentRef$cu19 = videoComponentRef.current) === null || _videoComponentRef$cu19 === void 0 ? void 0 : _videoComponentRef$cu19.forward(seconds);
-      },
-      replay: function replay(seconds) {
-        var _videoComponentRef$cu20;
-        (_videoComponentRef$cu20 = videoComponentRef.current) === null || _videoComponentRef$cu20 === void 0 ? void 0 : _videoComponentRef$cu20.replay(seconds);
-      },
-      toggleFullscreen: function toggleFullscreen() {
-        var _videoComponentRef$cu21;
-        (_videoComponentRef$cu21 = videoComponentRef.current) === null || _videoComponentRef$cu21 === void 0 ? void 0 : _videoComponentRef$cu21.toggleFullscreen();
-      },
-      subscribeToStateChange: function subscribeToStateChange(listener) {
-        return manager.subscribeToPlayerStateChange(listener);
-      }
-    };
-  }, [actions, manager]);
-  var paused = playerState.paused,
-    hasStarted = playerState.hasStarted,
-    waiting = playerState.waiting,
-    seeking = playerState.seeking,
-    isFullscreen = playerState.isFullscreen,
-    userActivity = playerState.userActivity;
-  return React__default.createElement("div", {
-    className: classNames({
-      'video-react-player-controls-enabled': true,
-      'video-react-player-has-started': hasStarted,
-      'video-react-player-paused': paused,
-      'video-react-player-playing': !paused,
-      'video-react-player-waiting': waiting,
-      'video-react-player-seeking': seeking,
-      'video-react-player-fluid': fluid,
-      'video-react-player-fullscreen': isFullscreen,
-      'video-react-player-user-inactive': !userActivity,
-      'video-react-player-user-active': userActivity,
-      'video-react-player-workinghover': !IS_IOS
-    }, 'video-react-player', className),
-    style: playerStyle,
-    ref: rootRef,
-    role: "region",
-    onTouchStart: handleMouseDown,
-    onMouseDown: handleMouseDown,
-    onTouchMove: handleMouseMove,
-    onMouseMove: handleMouseMove,
-    onKeyDown: handleKeyDown,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    tabIndex: -1
-  }, childElements);
-});
-Player.displayName = 'Player';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var createForwardReplayControl = function createForwardReplayControl(mode) {
-  var ForwardReplayControl = React.forwardRef(function (_ref, ref) {
-    var actions = _ref.actions,
-      _ref$seconds = _ref.seconds,
-      seconds = _ref$seconds === void 0 ? 10 : _ref$seconds,
-      className = _ref.className;
-    var handleClick = React.useCallback(function () {
-      if (mode === 'forward') {
-        actions.forward(seconds);
-      } else {
-        actions.replay(seconds);
-      }
-    }, [actions, seconds]);
-    var classNames = ['video-react-player-control', 'video-react-player-button', 'video-react-player-icon', "video-react-player-icon-" + mode + "-" + seconds, "video-react-player-" + mode + "-control"];
-    if (className) {
-      classNames.push(className);
-    }
-    return React__default.createElement("button", {
-      ref: ref,
-      className: classNames.join(' '),
-      type: "button",
-      onClick: handleClick
-    }, React__default.createElement("span", {
-      className: "video-react-player-control-text"
-    }, mode + " " + seconds + " seconds"));
-  });
-  ForwardReplayControl.displayName = "ForwardReplayControl(" + mode + ")";
-  return ForwardReplayControl;
-};
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-// Pass mode into parent function
-var ForwardControl = createForwardReplayControl('forward');
-ForwardControl.displayName = 'ForwardControl';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-// Pass mode into parent function
-var ReplayControl = createForwardReplayControl('replay');
-ReplayControl.displayName = 'ReplayControl';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
-  * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var Menu = function Menu(_ref) {
-  var children = _ref.children;
-  var handleClick = function handleClick(event) {
-    event.preventDefault();
-  };
-  return React__default.createElement("div", {
-    className: "video-react-player-menu video-react-player-lock-showing",
-    role: "presentation",
-    onClick: handleClick
-  }, React__default.createElement("ul", {
-    className: "video-react-player-menu-content"
-  }, children));
-};
-Menu.displayName = 'Menu';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var MenuItem = function MenuItem(_ref) {
-  var item = _ref.item,
-    index = _ref.index,
-    activateIndex = _ref.activateIndex,
-    onSelectItem = _ref.onSelectItem;
-  var handleClick = function handleClick() {
-    onSelectItem(index);
-  };
-  return React__default.createElement("li", {
-    className: classNames({
-      'video-react-player-menu-item': true,
-      'video-react-player-selected': index === activateIndex
-    }),
-    role: "menuitem",
-    onClick: handleClick
-  }, item.label, React__default.createElement("span", {
-    className: "video-react-player-control-text"
-  }));
-};
-MenuItem.displayName = 'MenuItem';
-
-var MenuButton = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(MenuButton, _Component);
-  function MenuButton() {
-    var _this$props$selectedI;
-    var _this;
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    _this.state = {
-      active: false,
-      activateIndex: (_this$props$selectedI = _this.props.selectedIndex) !== null && _this$props$selectedI !== void 0 ? _this$props$selectedI : 0
-    };
-    _this.commitSelection = function (index) {
-      _this.setState({
-        activateIndex: index
-      });
-      _this.handleIndexChange(index);
-    };
-    _this.activateMenuItem = function (index) {
-      if (index === void 0) {
-        index = 0;
-      }
-      _this.setState({
-        activateIndex: index
-      });
-      _this.handleIndexChange(index);
-    };
-    _this.handleIndexChange = function (index) {
-      _this.props.onSelectItem(index);
-    };
-    _this.handleClick = function () {
-      _this.setState(function (prevState) {
-        return {
-          active: !prevState.active
-        };
-      });
-    };
-    _this.handleFocus = function () {
-      document.addEventListener('keydown', _this.handleKeyPress);
-    };
-    _this.handleBlur = function () {
-      _this.setState({
-        active: false
-      });
-      document.removeEventListener('keydown', _this.handleKeyPress);
-    };
-    _this.handleUpArrow = function (event) {
-      var _this$props$items;
-      var items = (_this$props$items = _this.props.items) !== null && _this$props$items !== void 0 ? _this$props$items : [];
-      if (_this.state.active && items.length) {
-        event.preventDefault();
-        var newIndex = (_this.state.activateIndex - 1 + items.length) % items.length;
-        _this.activateMenuItem(newIndex);
-      }
-    };
-    _this.handleDownArrow = function (event) {
-      var _this$props$items2;
-      var items = (_this$props$items2 = _this.props.items) !== null && _this$props$items2 !== void 0 ? _this$props$items2 : [];
-      if (_this.state.active && items.length) {
-        event.preventDefault();
-        var newIndex = (_this.state.activateIndex + 1) % items.length;
-        _this.activateMenuItem(newIndex);
-      }
-    };
-    _this.handleTab = function (event) {
-      if (_this.state.active) {
-        event.preventDefault();
-        _this.commitSelection(_this.state.activateIndex);
-      }
-    };
-    _this.handleReturn = function (event) {
-      event.preventDefault();
-      if (_this.state.active) {
-        _this.commitSelection(_this.state.activateIndex);
-      } else {
-        _this.setState({
-          active: true
-        });
-      }
-    };
-    _this.handleEscape = function () {
-      _this.setState({
-        active: false,
-        activateIndex: 0
-      });
-    };
-    _this.handleKeyPress = function (event) {
-      if (event.which === 27) {
-        _this.handleEscape();
-      } else if (event.which === 9) {
-        _this.handleTab(event);
-      } else if (event.which === 13) {
-        _this.handleReturn(event);
-      } else if (event.which === 38) {
-        _this.handleUpArrow(event);
-      } else if (event.which === 40) {
-        _this.handleDownArrow(event);
-      }
-    };
-    _this.handleSelectItem = function (index) {
-      _this.commitSelection(index);
-    };
-    return _this;
-  }
-  var _proto = MenuButton.prototype;
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    document.removeEventListener('keydown', this.handleKeyPress);
-  };
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    if (prevProps.selectedIndex !== this.props.selectedIndex && typeof this.props.selectedIndex === 'number') {
-      this.activateMenuItem(this.props.selectedIndex);
-    }
-  };
-  _proto.renderMenu = function renderMenu() {
-    var _this$props$items3,
-      _this2 = this;
-    if (!this.state.active) {
-      return null;
-    }
-    var items = (_this$props$items3 = this.props.items) !== null && _this$props$items3 !== void 0 ? _this$props$items3 : [];
-    return React__default.createElement(Menu, null, items.map(function (item, index) {
-      return React__default.createElement(MenuItem, {
-        item: item,
-        index: index,
-        onSelectItem: _this2.handleSelectItem,
-        activateIndex: _this2.state.activateIndex,
-        key: "item-" + index
-      });
-    }));
-  };
-  _proto.render = function render() {
-    var _this$props = this.props,
-      inline = _this$props.inline,
-      className = _this$props.className,
-      children = _this$props.children;
-    return React__default.createElement(ClickableComponent, {
-      className: classNames(className, {
-        'video-react-player-menu-button-inline': !!inline,
-        'video-react-player-menu-button-popup': !inline,
-        'video-react-player-menu-button-active': this.state.active
-      }, 'video-react-player-control video-react-player-button video-react-player-menu-button'),
-      onClick: this.handleClick,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur
-    }, children, this.renderMenu());
-  };
-  return MenuButton;
-}(React.Component);
-MenuButton.displayName = 'MenuButton';
-MenuButton.defaultProps = {
-  items: [],
-  selectedIndex: 0
-};
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var DEFAULT_RATES = [2, 1.5, 1.25, 1, 0.5, 0.25];
-var PlaybackRateMenuButton = function PlaybackRateMenuButton(_ref) {
-  var actions = _ref.actions,
-    player = _ref.player,
-    _ref$rates = _ref.rates,
-    rates = _ref$rates === void 0 ? DEFAULT_RATES : _ref$rates,
-    className = _ref.className;
-  var items = React.useMemo(function () {
-    return rates.map(function (rate) {
-      return {
-        label: rate + "x",
-        value: rate
-      };
-    });
-  }, [rates]);
-  var selectedIndex = React.useMemo(function () {
-    var index = rates.indexOf(player.playbackRate);
-    if (index >= 0) {
-      return index;
-    }
-    var fallback = rates.indexOf(1);
-    return fallback >= 0 ? fallback : 0;
-  }, [player.playbackRate, rates]);
-  var handleSelectItem = React.useCallback(function (index) {
-    if (index >= 0 && index < rates.length) {
-      actions.changeRate(rates[index]);
-    }
-  }, [actions, rates]);
-  return React__default.createElement(MenuButton, {
-    className: classNames('video-react-player-playback-rate', className),
-    onSelectItem: handleSelectItem,
-    items: items,
-    selectedIndex: selectedIndex
-  }, React__default.createElement("span", {
-    className: "video-react-player-control-text"
-  }, "Playback Rate"), React__default.createElement("div", {
-    className: "video-react-player-playback-rate-value"
-  }, player.playbackRate.toFixed(2) + "x"));
-};
-PlaybackRateMenuButton.displayName = 'PlaybackRateMenuButton';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var PlaybackRate = function PlaybackRate(props) {
-  React.useEffect(function () {
-    deprecatedWarning('PlaybackRate', 'PlaybackRateMenuButton');
-  }, []);
-  return React__default.createElement(PlaybackRateMenuButton, props);
-};
-PlaybackRate.displayName = 'PlaybackRate';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var DEFAULT_KINDS = ['captions', 'subtitles'];
-var ClosedCaptionButton = function ClosedCaptionButton(_ref) {
-  var player = _ref.player,
-    actions = _ref.actions,
-    className = _ref.className,
-    _ref$offMenuText = _ref.offMenuText,
-    offMenuText = _ref$offMenuText === void 0 ? 'Off' : _ref$offMenuText,
-    _ref$showOffMenu = _ref.showOffMenu,
-    showOffMenu = _ref$showOffMenu === void 0 ? true : _ref$showOffMenu,
-    _ref$kinds = _ref.kinds,
-    kinds = _ref$kinds === void 0 ? DEFAULT_KINDS : _ref$kinds;
-  var textTrackItems = React.useMemo(function () {
-    var items = [];
-    var tracks = Array.from(player.textTracks || []);
-    if (showOffMenu) {
-      items.push({
-        label: offMenuText,
-        value: null
-      });
-    }
-    tracks.forEach(function (textTrack) {
-      if (kinds.length && !kinds.includes(textTrack.kind)) {
-        return;
-      }
-      items.push({
-        label: textTrack.label || textTrack.language || 'Unknown',
-        value: textTrack.language || null
-      });
-    });
-    var selectedIndex = items.findIndex(function (item) {
-      return player.activeTextTrack && item.value !== null && player.activeTextTrack.language === item.value;
-    });
-    return {
-      items: items,
-      selectedIndex: selectedIndex >= 0 ? selectedIndex : 0
-    };
-  }, [kinds, offMenuText, player.activeTextTrack, player.textTracks, showOffMenu]);
-  var handleSelectItem = React.useCallback(function (index) {
-    Array.from(player.textTracks || []).forEach(function (textTrack, trackIndex) {
-      var normalizedIndex = showOffMenu ? trackIndex + 1 : trackIndex;
-      if (index === normalizedIndex) {
-        textTrack.mode = 'showing';
-        actions.activateTextTrack(textTrack);
-      } else {
-        textTrack.mode = 'hidden';
-      }
-    });
-    if (showOffMenu && index === 0) {
-      actions.activateTextTrack(null);
-    }
-  }, [actions, player.textTracks, showOffMenu]);
-  return React__default.createElement(MenuButton, {
-    className: classNames('video-react-player-closed-caption', className),
-    onSelectItem: handleSelectItem,
-    items: textTrackItems.items,
-    selectedIndex: textTrackItems.selectedIndex
-  }, React__default.createElement("span", {
-    className: "video-react-player-control-text"
-  }, "Closed Caption"));
-};
-ClosedCaptionButton.displayName = 'ClosedCaptionButton';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var PictureInPictureToggle = function PictureInPictureToggle(_ref) {
-  var _player$isPictureInPi;
-  var actions = _ref.actions,
-    player = _ref.player,
-    className = _ref.className;
-  var handleClick = React.useCallback(function () {
-    actions.togglePictureInPicture();
-  }, [actions]);
-  var isPip = (_player$isPictureInPi = player.isPictureInPicture) !== null && _player$isPictureInPi !== void 0 ? _player$isPictureInPi : false;
-  return React__default.createElement("button", {
-    className: classNames(className, {
-      'video-react-player-icon-picture-in-picture-exit': isPip,
-      'video-react-player-icon-picture-in-picture': !isPip
-    }, 'video-react-player-picture-in-picture-control video-react-player-control video-react-player-button video-react-player-icon'),
-    type: "button",
-    tabIndex: 0,
-    onClick: handleClick
-  }, React__default.createElement("span", {
-    className: "video-react-player-control-text"
-  }, "Picture-in-Picture"));
-};
-PictureInPictureToggle.displayName = 'PictureInPictureToggle';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var LoopToggle = React.forwardRef(function (_ref, ref) {
-  var actions = _ref.actions,
-    player = _ref.player,
-    className = _ref.className;
-  var isLoop = !!player.loop;
-  var handleClick = React.useCallback(function () {
-    actions.handleLoopChange(!isLoop);
-  }, [actions, isLoop]);
-  return React__default.createElement("button", {
-    className: classNames(className, {
-      'video-react-player-icon-loop-active': isLoop,
-      'video-react-player-icon-loop': !isLoop
-    }, 'video-react-player-loop-control video-react-player-control video-react-player-button video-react-player-icon'),
-    ref: ref,
-    type: "button",
-    tabIndex: 0,
-    onClick: handleClick
-  }, React__default.createElement("span", {
-    className: "video-react-player-control-text"
-  }, isLoop ? 'Loop On' : 'Loop Off'));
-});
-LoopToggle.displayName = 'LoopToggle';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var TheaterModeToggle = function TheaterModeToggle(_ref) {
-  var _player$isTheater;
-  var actions = _ref.actions,
-    player = _ref.player,
-    className = _ref.className;
-  var handleClick = React.useCallback(function () {
-    actions.toggleTheaterMode(!player.isTheater);
-  }, [actions, player.isTheater]);
-  var isTheater = (_player$isTheater = player.isTheater) !== null && _player$isTheater !== void 0 ? _player$isTheater : false;
-  return React__default.createElement("button", {
-    className: classNames(className, {
-      'video-react-player-icon-theater-exit': isTheater,
-      'video-react-player-icon-theater': !isTheater
-    }, 'video-react-player-theater-control video-react-player-control video-react-player-button video-react-player-icon'),
-    type: "button",
-    tabIndex: 0,
-    onClick: handleClick
-  }, React__default.createElement("span", {
-    className: "video-react-player-control-text"
-  }, isTheater ? 'Exit Theater Mode' : 'Theater Mode'));
-};
-TheaterModeToggle.displayName = 'TheaterModeToggle';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var DownloadButton = function DownloadButton(_ref) {
-  var player = _ref.player,
-    className = _ref.className,
-    _ref$filename = _ref.filename,
-    filename = _ref$filename === void 0 ? 'video' : _ref$filename;
-  var handleClick = React.useCallback(function () {
-    if (!player.currentSrc) {
-      return;
-    }
-    var link = document.createElement('a');
-    link.href = player.currentSrc;
-    link.download = filename;
-    link.click();
-  }, [filename, player.currentSrc]);
-  return React__default.createElement("button", {
-    className: classNames(className, 'video-react-player-icon-download', 'video-react-player-download-control video-react-player-control video-react-player-button video-react-player-icon'),
-    type: "button",
-    tabIndex: 0,
-    onClick: handleClick
-  }, React__default.createElement("span", {
-    className: "video-react-player-control-text"
-  }, "Download"));
-};
-DownloadButton.displayName = 'DownloadButton';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var ScreenshotButton = function ScreenshotButton(_ref) {
-  var actions = _ref.actions,
-    className = _ref.className;
-  var handleClick = React.useCallback(function () {
-    actions.takeScreenshot();
-  }, [actions]);
-  return React__default.createElement("button", {
-    className: classNames(className, 'video-react-player-icon-camera', 'video-react-player-screenshot-control video-react-player-control video-react-player-button video-react-player-icon'),
-    type: "button",
-    tabIndex: 0,
-    onClick: handleClick
-  }, React__default.createElement("span", {
-    className: "video-react-player-control-text"
-  }, "Screenshot"));
-};
-ScreenshotButton.displayName = 'ScreenshotButton';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var DEFAULT_QUALITIES = ['auto', '1080p', '720p', '480p', '360p', '240p'];
-var QualityMenuButton = function QualityMenuButton(_ref) {
-  var _ref$qualities = _ref.qualities,
-    qualities = _ref$qualities === void 0 ? DEFAULT_QUALITIES : _ref$qualities,
-    actions = _ref.actions,
-    player = _ref.player,
-    className = _ref.className;
-  var items = React.useMemo(function () {
-    return qualities.map(function (quality) {
-      return {
-        label: quality,
-        value: quality
-      };
-    });
-  }, [qualities]);
-  var currentQuality = player.quality || 'auto';
-  var selectedIndex = React.useMemo(function () {
-    var index = qualities.indexOf(currentQuality);
-    return index >= 0 ? index : 0;
-  }, [currentQuality, qualities]);
-  var handleSelectItem = React.useCallback(function (index) {
-    if (index >= 0 && index < qualities.length) {
-      actions.changeQuality(qualities[index]);
-    }
-  }, [actions, qualities]);
-  return React__default.createElement(MenuButton, {
-    className: classNames('video-react-player-quality-menu', className),
-    onSelectItem: handleSelectItem,
-    items: items,
-    selectedIndex: selectedIndex
-  }, React__default.createElement("span", {
-    className: "video-react-player-control-text"
-  }, "Quality"), React__default.createElement("div", {
-    className: "video-react-player-quality-value"
-  }, currentQuality));
-};
-QualityMenuButton.displayName = 'QualityMenuButton';
-
-function RemainingTimeDisplay(_ref) {
-  var _ref$player = _ref.player,
-    currentTime = _ref$player.currentTime,
-    duration = _ref$player.duration,
-    className = _ref.className;
-  var remainingTime = duration - currentTime;
-  var formattedTime = formatTime(remainingTime);
-  return React__default.createElement("div", {
-    className: classNames('video-react-player-remaining-time video-react-player-time-control video-react-player-control', className)
-  }, React__default.createElement("div", {
-    className: "video-react-player-remaining-time-display",
-    "aria-live": "off"
-  }, React__default.createElement("span", {
-    className: "video-react-player-control-text"
-  }, "Remaining Time "), "-" + formattedTime));
-}
-RemainingTimeDisplay.displayName = 'RemainingTimeDisplay';
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
-
- * Copyright (c) 2016 Video-React contributors
- * Copyright (c) 2025 ZingMe.Vn
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-exports.Bezel = Bezel;
-exports.BigPlayButton = BigPlayButton;
-exports.ClosedCaptionButton = ClosedCaptionButton;
-exports.ControlBar = ControlBar;
-exports.CurrentTimeDisplay = CurrentTimeDisplay;
-exports.DownloadButton = DownloadButton;
-exports.DurationDisplay = DurationDisplay;
-exports.ForwardControl = ForwardControl;
-exports.FullscreenToggle = FullscreenToggle;
-exports.LoadProgressBar = LoadProgressBar;
-exports.LoadingSpinner = LoadingSpinner;
-exports.LoopToggle = LoopToggle;
-exports.MenuButton = MenuButton;
-exports.MouseTimeDisplay = MouseTimeDisplay;
-exports.PictureInPictureToggle = PictureInPictureToggle;
-exports.PlayProgressBar = PlayProgressBar;
-exports.PlayToggle = PlayToggle;
-exports.PlaybackRate = PlaybackRate;
-exports.PlaybackRateMenuButton = PlaybackRateMenuButton;
-exports.Player = Player;
-exports.PosterImage = PosterImage;
-exports.ProgressControl = ProgressControl;
-exports.QualityMenuButton = QualityMenuButton;
-exports.RemainingTimeDisplay = RemainingTimeDisplay;
-exports.ReplayControl = ReplayControl;
-exports.ScreenshotButton = ScreenshotButton;
-exports.SeekBar = SeekBar;
-exports.Shortcut = Shortcut;
-exports.Slider = Slider;
-exports.TheaterModeToggle = TheaterModeToggle;
-exports.TimeDivider = TimeDivider;
-exports.Video = Video;
-exports.VolumeMenuButton = VolumeMenuButton;
-exports.operationReducer = operationReducer;
-exports.playerActions = playerActions;
-exports.playerReducer = playerReducer;
-exports.videoActions = videoActions;
-//# sourceMappingURL=video-react-player.cjs.js.map