video-react-player 0.1.0 → 0.1.1

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

@@ -1,4578 +0,0 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
-  (global = global || self, factory(global['video-react-player'] = {}, global.React));
-}(this, function (exports, React) { 'use strict';
-
-  var React__default = 'default' in React ? React['default'] : React;
-
-  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 + "";
-  }
-
-  function unwrapExports (x) {
-  	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-  }
-
-  function createCommonjsModule(fn, module) {
-  	return module = { exports: {} }, fn(module, module.exports), module.exports;
-  }
-
-  var classnames = createCommonjsModule(function (module) {
-    /*!
-      Copyright (c) 2017 Jed Watson.
-      Licensed under the MIT License (MIT), see
-      http://jedwatson.github.io/classnames
-    */
-    /* global define */
-
-    (function () {
-
-      var hasOwn = {}.hasOwnProperty;
-      function classNames() {
-        var classes = [];
-        for (var i = 0; i < arguments.length; i++) {
-          var arg = arguments[i];
-          if (!arg) continue;
-          var argType = typeof arg;
-          if (argType === 'string' || argType === 'number') {
-            classes.push(arg);
-          } else if (Array.isArray(arg) && arg.length) {
-            var inner = classNames.apply(null, arg);
-            if (inner) {
-              classes.push(inner);
-            }
-          } else if (argType === 'object') {
-            for (var key in arg) {
-              if (hasOwn.call(arg, key) && arg[key]) {
-                classes.push(key);
-              }
-            }
-          }
-        }
-        return classes.join(' ');
-      }
-      if (module.exports) {
-        classNames.default = classNames;
-        module.exports = classNames;
-      } else {
-        window.classNames = classNames;
-      }
-    })();
-  });
-
-  function symbolObservablePonyfill(root) {
-    var result;
-    var Symbol = root.Symbol;
-    if (typeof Symbol === 'function') {
-      if (Symbol.observable) {
-        result = Symbol.observable;
-      } else {
-        result = Symbol('observable');
-        Symbol.observable = result;
-      }
-    } else {
-      result = '@@observable';
-    }
-    return result;
-  }
-
-  /* global window */
-  var root;
-  if (typeof self !== 'undefined') {
-    root = self;
-  } else if (typeof window !== 'undefined') {
-    root = window;
-  } else if (typeof global !== 'undefined') {
-    root = global;
-  } else if (typeof module !== 'undefined') {
-    root = module;
-  } else {
-    root = Function('return this')();
-  }
-  var result = symbolObservablePonyfill(root);
-
-  /**
-   * These are private action types reserved by Redux.
-   * For any unknown actions, you must return the current state.
-   * If the current state is undefined, you must return the initial state.
-   * Do not reference these action types directly in your code.
-   */
-  var randomString = function randomString() {
-    return Math.random().toString(36).substring(7).split('').join('.');
-  };
-  var ActionTypes = {
-    INIT: "@@redux/INIT" + randomString(),
-    REPLACE: "@@redux/REPLACE" + randomString(),
-    PROBE_UNKNOWN_ACTION: function PROBE_UNKNOWN_ACTION() {
-      return "@@redux/PROBE_UNKNOWN_ACTION" + randomString();
-    }
-  };
-
-  /**
-   * @param {any} obj The object to inspect.
-   * @returns {boolean} True if the argument appears to be a plain object.
-   */
-  function isPlainObject(obj) {
-    if (typeof obj !== 'object' || obj === null) return false;
-    var proto = obj;
-    while (Object.getPrototypeOf(proto) !== null) {
-      proto = Object.getPrototypeOf(proto);
-    }
-    return Object.getPrototypeOf(obj) === proto;
-  }
-
-  /**
-   * Creates a Redux store that holds the state tree.
-   * The only way to change the data in the store is to call `dispatch()` on it.
-   *
-   * There should only be a single store in your app. To specify how different
-   * parts of the state tree respond to actions, you may combine several reducers
-   * into a single reducer function by using `combineReducers`.
-   *
-   * @param {Function} reducer A function that returns the next state tree, given
-   * the current state tree and the action to handle.
-   *
-   * @param {any} [preloadedState] The initial state. You may optionally specify it
-   * to hydrate the state from the server in universal apps, or to restore a
-   * previously serialized user session.
-   * If you use `combineReducers` to produce the root reducer function, this must be
-   * an object with the same shape as `combineReducers` keys.
-   *
-   * @param {Function} [enhancer] The store enhancer. You may optionally specify it
-   * to enhance the store with third-party capabilities such as middleware,
-   * time travel, persistence, etc. The only store enhancer that ships with Redux
-   * is `applyMiddleware()`.
-   *
-   * @returns {Store} A Redux store that lets you read the state, dispatch actions
-   * and subscribe to changes.
-   */
-
-  function createStore(reducer, preloadedState, enhancer) {
-    var _ref2;
-    if (typeof preloadedState === 'function' && typeof enhancer === 'function' || typeof enhancer === 'function' && typeof arguments[3] === 'function') {
-      throw new Error('It looks like you are passing several store enhancers to ' + 'createStore(). This is not supported. Instead, compose them ' + 'together to a single function');
-    }
-    if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
-      enhancer = preloadedState;
-      preloadedState = undefined;
-    }
-    if (typeof enhancer !== 'undefined') {
-      if (typeof enhancer !== 'function') {
-        throw new Error('Expected the enhancer to be a function.');
-      }
-      return enhancer(createStore)(reducer, preloadedState);
-    }
-    if (typeof reducer !== 'function') {
-      throw new Error('Expected the reducer to be a function.');
-    }
-    var currentReducer = reducer;
-    var currentState = preloadedState;
-    var currentListeners = [];
-    var nextListeners = currentListeners;
-    var isDispatching = false;
-    function ensureCanMutateNextListeners() {
-      if (nextListeners === currentListeners) {
-        nextListeners = currentListeners.slice();
-      }
-    }
-    /**
-     * Reads the state tree managed by the store.
-     *
-     * @returns {any} The current state tree of your application.
-     */
-
-    function getState() {
-      if (isDispatching) {
-        throw new Error('You may not call store.getState() while the reducer is executing. ' + 'The reducer has already received the state as an argument. ' + 'Pass it down from the top reducer instead of reading it from the store.');
-      }
-      return currentState;
-    }
-    /**
-     * Adds a change listener. It will be called any time an action is dispatched,
-     * and some part of the state tree may potentially have changed. You may then
-     * call `getState()` to read the current state tree inside the callback.
-     *
-     * You may call `dispatch()` from a change listener, with the following
-     * caveats:
-     *
-     * 1. The subscriptions are snapshotted just before every `dispatch()` call.
-     * If you subscribe or unsubscribe while the listeners are being invoked, this
-     * will not have any effect on the `dispatch()` that is currently in progress.
-     * However, the next `dispatch()` call, whether nested or not, will use a more
-     * recent snapshot of the subscription list.
-     *
-     * 2. The listener should not expect to see all state changes, as the state
-     * might have been updated multiple times during a nested `dispatch()` before
-     * the listener is called. It is, however, guaranteed that all subscribers
-     * registered before the `dispatch()` started will be called with the latest
-     * state by the time it exits.
-     *
-     * @param {Function} listener A callback to be invoked on every dispatch.
-     * @returns {Function} A function to remove this change listener.
-     */
-
-    function subscribe(listener) {
-      if (typeof listener !== 'function') {
-        throw new Error('Expected the listener to be a function.');
-      }
-      if (isDispatching) {
-        throw new Error('You may not call store.subscribe() while the reducer is executing. ' + 'If you would like to be notified after the store has been updated, subscribe from a ' + 'component and invoke store.getState() in the callback to access the latest state. ' + 'See https://redux.js.org/api-reference/store#subscribe(listener) for more details.');
-      }
-      var isSubscribed = true;
-      ensureCanMutateNextListeners();
-      nextListeners.push(listener);
-      return function unsubscribe() {
-        if (!isSubscribed) {
-          return;
-        }
-        if (isDispatching) {
-          throw new Error('You may not unsubscribe from a store listener while the reducer is executing. ' + 'See https://redux.js.org/api-reference/store#subscribe(listener) for more details.');
-        }
-        isSubscribed = false;
-        ensureCanMutateNextListeners();
-        var index = nextListeners.indexOf(listener);
-        nextListeners.splice(index, 1);
-      };
-    }
-    /**
-     * Dispatches an action. It is the only way to trigger a state change.
-     *
-     * The `reducer` function, used to create the store, will be called with the
-     * current state tree and the given `action`. Its return value will
-     * be considered the **next** state of the tree, and the change listeners
-     * will be notified.
-     *
-     * The base implementation only supports plain object actions. If you want to
-     * dispatch a Promise, an Observable, a thunk, or something else, you need to
-     * wrap your store creating function into the corresponding middleware. For
-     * example, see the documentation for the `redux-thunk` package. Even the
-     * middleware will eventually dispatch plain object actions using this method.
-     *
-     * @param {Object} action A plain object representing “what changed”. It is
-     * a good idea to keep actions serializable so you can record and replay user
-     * sessions, or use the time travelling `redux-devtools`. An action must have
-     * a `type` property which may not be `undefined`. It is a good idea to use
-     * string constants for action types.
-     *
-     * @returns {Object} For convenience, the same action object you dispatched.
-     *
-     * Note that, if you use a custom middleware, it may wrap `dispatch()` to
-     * return something else (for example, a Promise you can await).
-     */
-
-    function dispatch(action) {
-      if (!isPlainObject(action)) {
-        throw new Error('Actions must be plain objects. ' + 'Use custom middleware for async actions.');
-      }
-      if (typeof action.type === 'undefined') {
-        throw new Error('Actions may not have an undefined "type" property. ' + 'Have you misspelled a constant?');
-      }
-      if (isDispatching) {
-        throw new Error('Reducers may not dispatch actions.');
-      }
-      try {
-        isDispatching = true;
-        currentState = currentReducer(currentState, action);
-      } finally {
-        isDispatching = false;
-      }
-      var listeners = currentListeners = nextListeners;
-      for (var i = 0; i < listeners.length; i++) {
-        var listener = listeners[i];
-        listener();
-      }
-      return action;
-    }
-    /**
-     * Replaces the reducer currently used by the store to calculate the state.
-     *
-     * You might need this if your app implements code splitting and you want to
-     * load some of the reducers dynamically. You might also need this if you
-     * implement a hot reloading mechanism for Redux.
-     *
-     * @param {Function} nextReducer The reducer for the store to use instead.
-     * @returns {void}
-     */
-
-    function replaceReducer(nextReducer) {
-      if (typeof nextReducer !== 'function') {
-        throw new Error('Expected the nextReducer to be a function.');
-      }
-      currentReducer = nextReducer;
-      dispatch({
-        type: ActionTypes.REPLACE
-      });
-    }
-    /**
-     * Interoperability point for observable/reactive libraries.
-     * @returns {observable} A minimal observable of state changes.
-     * For more information, see the observable proposal:
-     * https://github.com/tc39/proposal-observable
-     */
-
-    function observable() {
-      var _ref;
-      var outerSubscribe = subscribe;
-      return _ref = {
-        /**
-         * The minimal observable subscription method.
-         * @param {Object} observer Any object that can be used as an observer.
-         * The observer object should have a `next` method.
-         * @returns {subscription} An object with an `unsubscribe` method that can
-         * be used to unsubscribe the observable from the store, and prevent further
-         * emission of values from the observable.
-         */
-        subscribe: function subscribe(observer) {
-          if (typeof observer !== 'object' || observer === null) {
-            throw new TypeError('Expected the observer to be an object.');
-          }
-          function observeState() {
-            if (observer.next) {
-              observer.next(getState());
-            }
-          }
-          observeState();
-          var unsubscribe = outerSubscribe(observeState);
-          return {
-            unsubscribe: unsubscribe
-          };
-        }
-      }, _ref[result] = function () {
-        return this;
-      }, _ref;
-    } // When a store is created, an "INIT" action is dispatched so that every
-    // reducer returns their initial state. This effectively populates
-    // the initial state tree.
-
-    dispatch({
-      type: ActionTypes.INIT
-    });
-    return _ref2 = {
-      dispatch: dispatch,
-      subscribe: subscribe,
-      getState: getState,
-      replaceReducer: replaceReducer
-    }, _ref2[result] = observable, _ref2;
-  }
-
-  /**
-
-   * 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 || 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';
-
-  var reactIs_production_min = createCommonjsModule(function (module, exports) {
-
-    Object.defineProperty(exports, "__esModule", {
-      value: !0
-    });
-    var b = "function" === typeof Symbol && Symbol.for,
-      c = b ? Symbol.for("react.element") : 60103,
-      d = b ? Symbol.for("react.portal") : 60106,
-      e = b ? Symbol.for("react.fragment") : 60107,
-      f = b ? Symbol.for("react.strict_mode") : 60108,
-      g = b ? Symbol.for("react.profiler") : 60114,
-      h = b ? Symbol.for("react.provider") : 60109,
-      k = b ? Symbol.for("react.context") : 60110,
-      l = b ? Symbol.for("react.async_mode") : 60111,
-      m = b ? Symbol.for("react.concurrent_mode") : 60111,
-      n = b ? Symbol.for("react.forward_ref") : 60112,
-      p = b ? Symbol.for("react.suspense") : 60113,
-      q = b ? Symbol.for("react.memo") : 60115,
-      r = b ? Symbol.for("react.lazy") : 60116;
-    function t(a) {
-      if ("object" === typeof a && null !== a) {
-        var u = a.$$typeof;
-        switch (u) {
-          case c:
-            switch (a = a.type, a) {
-              case l:
-              case m:
-              case e:
-              case g:
-              case f:
-              case p:
-                return a;
-              default:
-                switch (a = a && a.$$typeof, a) {
-                  case k:
-                  case n:
-                  case h:
-                    return a;
-                  default:
-                    return u;
-                }
-            }
-          case r:
-          case q:
-          case d:
-            return u;
-        }
-      }
-    }
-    function v(a) {
-      return t(a) === m;
-    }
-    exports.typeOf = t;
-    exports.AsyncMode = l;
-    exports.ConcurrentMode = m;
-    exports.ContextConsumer = k;
-    exports.ContextProvider = h;
-    exports.Element = c;
-    exports.ForwardRef = n;
-    exports.Fragment = e;
-    exports.Lazy = r;
-    exports.Memo = q;
-    exports.Portal = d;
-    exports.Profiler = g;
-    exports.StrictMode = f;
-    exports.Suspense = p;
-    exports.isValidElementType = function (a) {
-      return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || "object" === typeof a && null !== a && (a.$$typeof === r || a.$$typeof === q || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n);
-    };
-    exports.isAsyncMode = function (a) {
-      return v(a) || t(a) === l;
-    };
-    exports.isConcurrentMode = v;
-    exports.isContextConsumer = function (a) {
-      return t(a) === k;
-    };
-    exports.isContextProvider = function (a) {
-      return t(a) === h;
-    };
-    exports.isElement = function (a) {
-      return "object" === typeof a && null !== a && a.$$typeof === c;
-    };
-    exports.isForwardRef = function (a) {
-      return t(a) === n;
-    };
-    exports.isFragment = function (a) {
-      return t(a) === e;
-    };
-    exports.isLazy = function (a) {
-      return t(a) === r;
-    };
-    exports.isMemo = function (a) {
-      return t(a) === q;
-    };
-    exports.isPortal = function (a) {
-      return t(a) === d;
-    };
-    exports.isProfiler = function (a) {
-      return t(a) === g;
-    };
-    exports.isStrictMode = function (a) {
-      return t(a) === f;
-    };
-    exports.isSuspense = function (a) {
-      return t(a) === p;
-    };
-  });
-  unwrapExports(reactIs_production_min);
-  var reactIs_production_min_1 = reactIs_production_min.typeOf;
-  var reactIs_production_min_2 = reactIs_production_min.AsyncMode;
-  var reactIs_production_min_3 = reactIs_production_min.ConcurrentMode;
-  var reactIs_production_min_4 = reactIs_production_min.ContextConsumer;
-  var reactIs_production_min_5 = reactIs_production_min.ContextProvider;
-  var reactIs_production_min_6 = reactIs_production_min.Element;
-  var reactIs_production_min_7 = reactIs_production_min.ForwardRef;
-  var reactIs_production_min_8 = reactIs_production_min.Fragment;
-  var reactIs_production_min_9 = reactIs_production_min.Lazy;
-  var reactIs_production_min_10 = reactIs_production_min.Memo;
-  var reactIs_production_min_11 = reactIs_production_min.Portal;
-  var reactIs_production_min_12 = reactIs_production_min.Profiler;
-  var reactIs_production_min_13 = reactIs_production_min.StrictMode;
-  var reactIs_production_min_14 = reactIs_production_min.Suspense;
-  var reactIs_production_min_15 = reactIs_production_min.isValidElementType;
-  var reactIs_production_min_16 = reactIs_production_min.isAsyncMode;
-  var reactIs_production_min_17 = reactIs_production_min.isConcurrentMode;
-  var reactIs_production_min_18 = reactIs_production_min.isContextConsumer;
-  var reactIs_production_min_19 = reactIs_production_min.isContextProvider;
-  var reactIs_production_min_20 = reactIs_production_min.isElement;
-  var reactIs_production_min_21 = reactIs_production_min.isForwardRef;
-  var reactIs_production_min_22 = reactIs_production_min.isFragment;
-  var reactIs_production_min_23 = reactIs_production_min.isLazy;
-  var reactIs_production_min_24 = reactIs_production_min.isMemo;
-  var reactIs_production_min_25 = reactIs_production_min.isPortal;
-  var reactIs_production_min_26 = reactIs_production_min.isProfiler;
-  var reactIs_production_min_27 = reactIs_production_min.isStrictMode;
-  var reactIs_production_min_28 = reactIs_production_min.isSuspense;
-
-  var reactIs_development = createCommonjsModule(function (module, exports) {
-  });
-  unwrapExports(reactIs_development);
-  var reactIs_development_1 = reactIs_development.typeOf;
-  var reactIs_development_2 = reactIs_development.AsyncMode;
-  var reactIs_development_3 = reactIs_development.ConcurrentMode;
-  var reactIs_development_4 = reactIs_development.ContextConsumer;
-  var reactIs_development_5 = reactIs_development.ContextProvider;
-  var reactIs_development_6 = reactIs_development.Element;
-  var reactIs_development_7 = reactIs_development.ForwardRef;
-  var reactIs_development_8 = reactIs_development.Fragment;
-  var reactIs_development_9 = reactIs_development.Lazy;
-  var reactIs_development_10 = reactIs_development.Memo;
-  var reactIs_development_11 = reactIs_development.Portal;
-  var reactIs_development_12 = reactIs_development.Profiler;
-  var reactIs_development_13 = reactIs_development.StrictMode;
-  var reactIs_development_14 = reactIs_development.Suspense;
-  var reactIs_development_15 = reactIs_development.isValidElementType;
-  var reactIs_development_16 = reactIs_development.isAsyncMode;
-  var reactIs_development_17 = reactIs_development.isConcurrentMode;
-  var reactIs_development_18 = reactIs_development.isContextConsumer;
-  var reactIs_development_19 = reactIs_development.isContextProvider;
-  var reactIs_development_20 = reactIs_development.isElement;
-  var reactIs_development_21 = reactIs_development.isForwardRef;
-  var reactIs_development_22 = reactIs_development.isFragment;
-  var reactIs_development_23 = reactIs_development.isLazy;
-  var reactIs_development_24 = reactIs_development.isMemo;
-  var reactIs_development_25 = reactIs_development.isPortal;
-  var reactIs_development_26 = reactIs_development.isProfiler;
-  var reactIs_development_27 = reactIs_development.isStrictMode;
-  var reactIs_development_28 = reactIs_development.isSuspense;
-
-  var reactIs = createCommonjsModule(function (module) {
-
-    {
-      module.exports = reactIs_production_min;
-    }
-  });
-
-  /*
-  object-assign
-  (c) Sindre Sorhus
-  @license MIT
-  */
-
-  /* eslint-disable no-unused-vars */
-  var getOwnPropertySymbols = Object.getOwnPropertySymbols;
-  var hasOwnProperty = Object.prototype.hasOwnProperty;
-  var propIsEnumerable = Object.prototype.propertyIsEnumerable;
-  function toObject(val) {
-    if (val === null || val === undefined) {
-      throw new TypeError('Object.assign cannot be called with null or undefined');
-    }
-    return Object(val);
-  }
-  function shouldUseNative() {
-    try {
-      if (!Object.assign) {
-        return false;
-      }
-
-      // Detect buggy property enumeration order in older V8 versions.
-
-      // https://bugs.chromium.org/p/v8/issues/detail?id=4118
-      var test1 = new String('abc'); // eslint-disable-line no-new-wrappers
-      test1[5] = 'de';
-      if (Object.getOwnPropertyNames(test1)[0] === '5') {
-        return false;
-      }
-
-      // https://bugs.chromium.org/p/v8/issues/detail?id=3056
-      var test2 = {};
-      for (var i = 0; i < 10; i++) {
-        test2['_' + String.fromCharCode(i)] = i;
-      }
-      var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
-        return test2[n];
-      });
-      if (order2.join('') !== '0123456789') {
-        return false;
-      }
-
-      // https://bugs.chromium.org/p/v8/issues/detail?id=3056
-      var test3 = {};
-      'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
-        test3[letter] = letter;
-      });
-      if (Object.keys(Object.assign({}, test3)).join('') !== 'abcdefghijklmnopqrst') {
-        return false;
-      }
-      return true;
-    } catch (err) {
-      // We don't expect any of the above to throw, but better to be safe.
-      return false;
-    }
-  }
-  var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
-    var from;
-    var to = toObject(target);
-    var symbols;
-    for (var s = 1; s < arguments.length; s++) {
-      from = Object(arguments[s]);
-      for (var key in from) {
-        if (hasOwnProperty.call(from, key)) {
-          to[key] = from[key];
-        }
-      }
-      if (getOwnPropertySymbols) {
-        symbols = getOwnPropertySymbols(from);
-        for (var i = 0; i < symbols.length; i++) {
-          if (propIsEnumerable.call(from, symbols[i])) {
-            to[symbols[i]] = from[symbols[i]];
-          }
-        }
-      }
-    }
-    return to;
-  };
-
-  /**
-   * Copyright (c) 2013-present, Facebook, Inc.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-
-  var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
-  var ReactPropTypesSecret_1 = ReactPropTypesSecret;
-
-  var has = Function.call.bind(Object.prototype.hasOwnProperty);
-
-  function emptyFunction() {}
-  function emptyFunctionWithReset() {}
-  emptyFunctionWithReset.resetWarningCache = emptyFunction;
-  var factoryWithThrowingShims = function factoryWithThrowingShims() {
-    function shim(props, propName, componentName, location, propFullName, secret) {
-      if (secret === ReactPropTypesSecret_1) {
-        // It is still safe when called from React.
-        return;
-      }
-      var err = new Error('Calling PropTypes validators directly is not supported by the `prop-types` package. ' + 'Use PropTypes.checkPropTypes() to call them. ' + 'Read more at http://fb.me/use-check-prop-types');
-      err.name = 'Invariant Violation';
-      throw err;
-    }
-    shim.isRequired = shim;
-    function getShim() {
-      return shim;
-    }
-    // Important!
-    // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
-    var ReactPropTypes = {
-      array: shim,
-      bool: shim,
-      func: shim,
-      number: shim,
-      object: shim,
-      string: shim,
-      symbol: shim,
-      any: shim,
-      arrayOf: getShim,
-      element: shim,
-      elementType: shim,
-      instanceOf: getShim,
-      node: shim,
-      objectOf: getShim,
-      oneOf: getShim,
-      oneOfType: getShim,
-      shape: getShim,
-      exact: getShim,
-      checkPropTypes: emptyFunctionWithReset,
-      resetWarningCache: emptyFunction
-    };
-    ReactPropTypes.PropTypes = ReactPropTypes;
-    return ReactPropTypes;
-  };
-
-  var propTypes = createCommonjsModule(function (module) {
-    /**
-     * Copyright (c) 2013-present, Facebook, Inc.
-     *
-     * This source code is licensed under the MIT license found in the
-     * LICENSE file in the root directory of this source tree.
-     */
-
-    {
-      // By explicitly using `prop-types` you are opting into new production behavior.
-      // http://fb.me/prop-types-in-prod
-      module.exports = factoryWithThrowingShims();
-    }
-  });
-
-  /**
-
-   * 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$1 = {
-    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$1;
-  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;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-}));
-//# sourceMappingURL=video-react-player.full.js.map