video-react-player 0.1.0

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

@@ -0,0 +1,3904 @@
+'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