video-react-player 0.1.0

package/dist/video-react-player.js

@@ -0,0 +1,4283 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('redux')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'redux'], factory) :
+  (global = global || self, factory(global['video-react-player'] = {}, global.React, global.Redux));
+}(this, function (exports, React, redux) { '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;
+      }
+    })();
+  });
+
+  /**
+
+   * Copyright (c) 2016 Video-React contributors
+   * Copyright (c) 2025 ZingMe.Vn
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+  var LOAD_START = 'video-react-player/LOAD_START';
+  var CAN_PLAY = 'video-react-player/CAN_PLAY';
+  var WAITING = 'video-react-player/WAITING';
+  var CAN_PLAY_THROUGH = 'video-react-player/CAN_PLAY_THROUGH';
+  var PLAYING = 'video-react-player/PLAYING';
+  var PLAY = 'video-react-player/PLAY';
+  var PAUSE = 'video-react-player/PAUSE';
+  var END = 'video-react-player/END';
+  var SEEKING = 'video-react-player/SEEKING';
+  var SEEKED = 'video-react-player/SEEKED';
+  var SEEKING_TIME = 'video-react-player/SEEKING_TIME';
+  var END_SEEKING = 'video-react-player/END_SEEKING';
+  var DURATION_CHANGE = 'video-react-player/DURATION_CHANGE';
+  var TIME_UPDATE = 'video-react-player/TIME_UPDATE';
+  var VOLUME_CHANGE = 'video-react-player/VOLUME_CHANGE';
+  var PROGRESS_CHANGE = 'video-react-player/PROGRESS_CHANGE';
+  var RATE_CHANGE = 'video-react-player/RATE_CHANGE';
+  var SUSPEND = 'video-react-player/SUSPEND';
+  var ABORT = 'video-react-player/ABORT';
+  var EMPTIED = 'video-react-player/EMPTIED';
+  var STALLED = 'video-react-player/STALLED';
+  var LOADED_META_DATA = 'video-react-player/LOADED_META_DATA';
+  var LOADED_DATA = 'video-react-player/LOADED_DATA';
+  var RESIZE = 'video-react-player/RESIZE';
+  var ERROR = 'video-react-player/ERROR';
+  var ACTIVATE_TEXT_TRACK = 'video-react-player/ACTIVATE_TEXT_TRACK';
+  var PICTURE_IN_PICTURE_CHANGE = 'video-react-player/PICTURE_IN_PICTURE_CHANGE';
+  var LOOP_CHANGE = 'video-react-player/LOOP_CHANGE';
+  var THEATER_MODE_CHANGE = 'video-react-player/THEATER_MODE_CHANGE';
+  var QUALITY_CHANGE = 'video-react-player/QUALITY_CHANGE';
+  function handleLoadStart(videoProps) {
+    return {
+      type: LOAD_START,
+      videoProps: videoProps
+    };
+  }
+  function handleCanPlay(videoProps) {
+    return {
+      type: CAN_PLAY,
+      videoProps: videoProps
+    };
+  }
+  function handleWaiting(videoProps) {
+    return {
+      type: WAITING,
+      videoProps: videoProps
+    };
+  }
+  function handleCanPlayThrough(videoProps) {
+    return {
+      type: CAN_PLAY_THROUGH,
+      videoProps: videoProps
+    };
+  }
+  function handlePlaying(videoProps) {
+    return {
+      type: PLAYING,
+      videoProps: videoProps
+    };
+  }
+  function handlePlay(videoProps) {
+    return {
+      type: PLAY,
+      videoProps: videoProps
+    };
+  }
+  function handlePause(videoProps) {
+    return {
+      type: PAUSE,
+      videoProps: videoProps
+    };
+  }
+  function handleEnd(videoProps) {
+    return {
+      type: END,
+      videoProps: videoProps
+    };
+  }
+  function handleSeeking(videoProps) {
+    return {
+      type: SEEKING,
+      videoProps: videoProps
+    };
+  }
+  function handleSeeked(videoProps) {
+    return {
+      type: SEEKED,
+      videoProps: videoProps
+    };
+  }
+  function handleDurationChange(videoProps) {
+    return {
+      type: DURATION_CHANGE,
+      videoProps: videoProps
+    };
+  }
+  function handleTimeUpdate(videoProps) {
+    return {
+      type: TIME_UPDATE,
+      videoProps: videoProps
+    };
+  }
+  function handleVolumeChange(videoProps) {
+    return {
+      type: VOLUME_CHANGE,
+      videoProps: videoProps
+    };
+  }
+  function handleProgressChange(videoProps) {
+    return {
+      type: PROGRESS_CHANGE,
+      videoProps: videoProps
+    };
+  }
+  function handleRateChange(videoProps) {
+    return {
+      type: RATE_CHANGE,
+      videoProps: videoProps
+    };
+  }
+  function handleSuspend(videoProps) {
+    return {
+      type: SUSPEND,
+      videoProps: videoProps
+    };
+  }
+  function handleAbort(videoProps) {
+    return {
+      type: ABORT,
+      videoProps: videoProps
+    };
+  }
+  function handleEmptied(videoProps) {
+    return {
+      type: EMPTIED,
+      videoProps: videoProps
+    };
+  }
+  function handleStalled(videoProps) {
+    return {
+      type: STALLED,
+      videoProps: videoProps
+    };
+  }
+  function handleLoadedMetaData(videoProps) {
+    return {
+      type: LOADED_META_DATA,
+      videoProps: videoProps
+    };
+  }
+  function handleLoadedData(videoProps) {
+    return {
+      type: LOADED_DATA,
+      videoProps: videoProps
+    };
+  }
+  function handleResize(videoProps) {
+    return {
+      type: RESIZE,
+      videoProps: videoProps
+    };
+  }
+  function handleError(videoProps) {
+    return {
+      type: ERROR,
+      videoProps: videoProps
+    };
+  }
+  function handleSeekingTime(time) {
+    return {
+      type: SEEKING_TIME,
+      time: time
+    };
+  }
+  function handleEndSeeking(time) {
+    return {
+      type: END_SEEKING,
+      time: time
+    };
+  }
+  function activateTextTrack(textTrack) {
+    return {
+      type: ACTIVATE_TEXT_TRACK,
+      textTrack: textTrack
+    };
+  }
+  function handlePictureInPictureChange(isPictureInPicture) {
+    return {
+      type: PICTURE_IN_PICTURE_CHANGE,
+      isPictureInPicture: isPictureInPicture
+    };
+  }
+  function handleLoopChange(loop) {
+    return {
+      type: LOOP_CHANGE,
+      loop: loop
+    };
+  }
+  function handleTheaterModeChange(isTheater) {
+    return {
+      type: THEATER_MODE_CHANGE,
+      isTheater: isTheater
+    };
+  }
+  function handleQualityChange(quality) {
+    return {
+      type: QUALITY_CHANGE,
+      quality: quality
+    };
+  }
+
+  var videoActions = /*#__PURE__*/Object.freeze({
+    LOAD_START: LOAD_START,
+    CAN_PLAY: CAN_PLAY,
+    WAITING: WAITING,
+    CAN_PLAY_THROUGH: CAN_PLAY_THROUGH,
+    PLAYING: PLAYING,
+    PLAY: PLAY,
+    PAUSE: PAUSE,
+    END: END,
+    SEEKING: SEEKING,
+    SEEKED: SEEKED,
+    SEEKING_TIME: SEEKING_TIME,
+    END_SEEKING: END_SEEKING,
+    DURATION_CHANGE: DURATION_CHANGE,
+    TIME_UPDATE: TIME_UPDATE,
+    VOLUME_CHANGE: VOLUME_CHANGE,
+    PROGRESS_CHANGE: PROGRESS_CHANGE,
+    RATE_CHANGE: RATE_CHANGE,
+    SUSPEND: SUSPEND,
+    ABORT: ABORT,
+    EMPTIED: EMPTIED,
+    STALLED: STALLED,
+    LOADED_META_DATA: LOADED_META_DATA,
+    LOADED_DATA: LOADED_DATA,
+    RESIZE: RESIZE,
+    ERROR: ERROR,
+    ACTIVATE_TEXT_TRACK: ACTIVATE_TEXT_TRACK,
+    PICTURE_IN_PICTURE_CHANGE: PICTURE_IN_PICTURE_CHANGE,
+    LOOP_CHANGE: LOOP_CHANGE,
+    THEATER_MODE_CHANGE: THEATER_MODE_CHANGE,
+    QUALITY_CHANGE: QUALITY_CHANGE,
+    handleLoadStart: handleLoadStart,
+    handleCanPlay: handleCanPlay,
+    handleWaiting: handleWaiting,
+    handleCanPlayThrough: handleCanPlayThrough,
+    handlePlaying: handlePlaying,
+    handlePlay: handlePlay,
+    handlePause: handlePause,
+    handleEnd: handleEnd,
+    handleSeeking: handleSeeking,
+    handleSeeked: handleSeeked,
+    handleDurationChange: handleDurationChange,
+    handleTimeUpdate: handleTimeUpdate,
+    handleVolumeChange: handleVolumeChange,
+    handleProgressChange: handleProgressChange,
+    handleRateChange: handleRateChange,
+    handleSuspend: handleSuspend,
+    handleAbort: handleAbort,
+    handleEmptied: handleEmptied,
+    handleStalled: handleStalled,
+    handleLoadedMetaData: handleLoadedMetaData,
+    handleLoadedData: handleLoadedData,
+    handleResize: handleResize,
+    handleError: handleError,
+    handleSeekingTime: handleSeekingTime,
+    handleEndSeeking: handleEndSeeking,
+    activateTextTrack: activateTextTrack,
+    handlePictureInPictureChange: handlePictureInPictureChange,
+    handleLoopChange: handleLoopChange,
+    handleTheaterModeChange: handleTheaterModeChange,
+    handleQualityChange: handleQualityChange
+  });
+
+  // Lazily grab the document to avoid SSR "document is not defined" errors.
+  var doc = typeof document !== 'undefined' ? document : null;
+  var Fullscreen = /*#__PURE__*/function () {
+    function Fullscreen() {}
+    var _proto = Fullscreen.prototype;
+    _proto.request = function request(elm) {
+      if (elm.requestFullscreen) {
+        elm.requestFullscreen();
+      } else if (elm.webkitRequestFullscreen) {
+        elm.webkitRequestFullscreen();
+      } else if (elm.mozRequestFullScreen) {
+        elm.mozRequestFullScreen();
+      } else if (elm.msRequestFullscreen) {
+        elm.msRequestFullscreen();
+      }
+    };
+    _proto.exit = function exit() {
+      if (!doc) {
+        return;
+      }
+      if (doc.exitFullscreen) {
+        doc.exitFullscreen();
+      } else if (doc.webkitExitFullscreen) {
+        doc.webkitExitFullscreen();
+      } else if (doc.mozCancelFullScreen) {
+        doc.mozCancelFullScreen();
+      } else if (doc.msExitFullscreen) {
+        doc.msExitFullscreen();
+      }
+    };
+    _proto.addEventListener = function addEventListener(handler) {
+      if (!doc) {
+        return;
+      }
+      doc.addEventListener('fullscreenchange', handler);
+      doc.addEventListener('webkitfullscreenchange', handler);
+      doc.addEventListener('mozfullscreenchange', handler);
+      doc.addEventListener('MSFullscreenChange', handler);
+    };
+    _proto.removeEventListener = function removeEventListener(handler) {
+      if (!doc) {
+        return;
+      }
+      doc.removeEventListener('fullscreenchange', handler);
+      doc.removeEventListener('webkitfullscreenchange', handler);
+      doc.removeEventListener('mozfullscreenchange', handler);
+      doc.removeEventListener('MSFullscreenChange', handler);
+    };
+    _createClass(Fullscreen, [{
+      key: "isFullscreen",
+      get: function get() {
+        if (!doc) {
+          return null;
+        }
+        return doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement;
+      }
+    }, {
+      key: "enabled",
+      get: function get() {
+        if (!doc) {
+          return false;
+        }
+        return doc.fullscreenEnabled || doc.webkitFullscreenEnabled || doc.mozFullScreenEnabled || doc.msFullscreenEnabled;
+      }
+    }]);
+    return Fullscreen;
+  }();
+  var fullscreen = new Fullscreen();
+
+  /**
+
+   * Copyright (c) 2016 Video-React contributors
+   * Copyright (c) 2025 ZingMe.Vn
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+  var OPERATE = 'video-react-player/OPERATE';
+  var FULLSCREEN_CHANGE = 'video-react-player/FULLSCREEN_CHANGE';
+  var PLAYER_ACTIVATE = 'video-react-player/PLAYER_ACTIVATE';
+  var USER_ACTIVATE = 'video-react-player/USER_ACTIVATE';
+  function handleFullscreenChange(isFullscreen) {
+    return {
+      type: FULLSCREEN_CHANGE,
+      isFullscreen: isFullscreen
+    };
+  }
+  function activate(activity) {
+    return {
+      type: PLAYER_ACTIVATE,
+      activity: activity
+    };
+  }
+  function userActivate(activity) {
+    return {
+      type: USER_ACTIVATE,
+      activity: activity
+    };
+  }
+  function play(operation) {
+    var _this$video;
+    if (operation === void 0) {
+      operation = {
+        action: 'play',
+        source: ''
+      };
+    }
+    (_this$video = this.video) === null || _this$video === void 0 ? void 0 : _this$video.play();
+    return {
+      type: OPERATE,
+      operation: operation
+    };
+  }
+  function pause(operation) {
+    var _this$video2;
+    if (operation === void 0) {
+      operation = {
+        action: 'pause',
+        source: ''
+      };
+    }
+    (_this$video2 = this.video) === null || _this$video2 === void 0 ? void 0 : _this$video2.pause();
+    return {
+      type: OPERATE,
+      operation: operation
+    };
+  }
+  function togglePlay(operation) {
+    var _this$video3;
+    if (operation === void 0) {
+      operation = {
+        action: 'toggle-play',
+        source: ''
+      };
+    }
+    (_this$video3 = this.video) === null || _this$video3 === void 0 ? void 0 : _this$video3.togglePlay();
+    return {
+      type: OPERATE,
+      operation: operation
+    };
+  }
+
+  // seek video by time
+  function seek(time, operation) {
+    var _this$video4;
+    if (operation === void 0) {
+      operation = {
+        action: 'seek',
+        source: ''
+      };
+    }
+    (_this$video4 = this.video) === null || _this$video4 === void 0 ? void 0 : _this$video4.seek(time);
+    return {
+      type: OPERATE,
+      operation: operation
+    };
+  }
+
+  // jump forward x seconds
+  function forward(seconds, operation) {
+    var _this$video5;
+    if (operation === void 0) {
+      operation = {
+        action: "forward-" + seconds,
+        source: ''
+      };
+    }
+    (_this$video5 = this.video) === null || _this$video5 === void 0 ? void 0 : _this$video5.forward(seconds);
+    return {
+      type: OPERATE,
+      operation: operation
+    };
+  }
+
+  // jump back x seconds
+  function replay(seconds, operation) {
+    var _this$video6;
+    if (operation === void 0) {
+      operation = {
+        action: "replay-" + seconds,
+        source: ''
+      };
+    }
+    (_this$video6 = this.video) === null || _this$video6 === void 0 ? void 0 : _this$video6.replay(seconds);
+    return {
+      type: OPERATE,
+      operation: operation
+    };
+  }
+  function changeRate(rate, operation) {
+    if (operation === void 0) {
+      operation = {
+        action: 'change-rate',
+        source: ''
+      };
+    }
+    if (this.video) {
+      this.video.playbackRate = rate;
+    }
+    return {
+      type: OPERATE,
+      operation: operation
+    };
+  }
+  function changeVolume(volume, operation) {
+    if (operation === void 0) {
+      operation = {
+        action: 'change-volume',
+        source: ''
+      };
+    }
+    var v = volume;
+    if (volume < 0) {
+      v = 0;
+    }
+    if (volume > 1) {
+      v = 1;
+    }
+    if (this.video) {
+      this.video.volume = v;
+    }
+    return {
+      type: OPERATE,
+      operation: operation
+    };
+  }
+  function mute(muted, operation) {
+    if (operation === void 0) {
+      operation = {
+        action: muted ? 'muted' : 'unmuted',
+        source: ''
+      };
+    }
+    if (this.video) {
+      this.video.muted = muted;
+    }
+    return {
+      type: OPERATE,
+      operation: operation
+    };
+  }
+  function toggleFullscreen(player) {
+    if (fullscreen.enabled) {
+      if (fullscreen.isFullscreen) {
+        fullscreen.exit();
+      } else if (this.rootElement) {
+        fullscreen.request(this.rootElement);
+      }
+      return {
+        type: OPERATE,
+        operation: {
+          action: 'toggle-fullscreen',
+          source: ''
+        }
+      };
+    }
+    return {
+      type: FULLSCREEN_CHANGE,
+      isFullscreen: !player.isFullscreen
+    };
+  }
+  function togglePictureInPicture() {
+    var next = !this.store.getState().player.isPictureInPicture;
+    return handlePictureInPictureChange(next);
+  }
+  function changeQuality(quality) {
+    return handleQualityChange(quality);
+  }
+  function takeScreenshot() {
+    return {
+      type: OPERATE,
+      operation: {
+        action: 'screenshot',
+        source: 'control'
+      }
+    };
+  }
+  function toggleTheaterMode(isTheater) {
+    return handleTheaterModeChange(isTheater);
+  }
+
+  var playerActions = /*#__PURE__*/Object.freeze({
+    OPERATE: OPERATE,
+    FULLSCREEN_CHANGE: FULLSCREEN_CHANGE,
+    PLAYER_ACTIVATE: PLAYER_ACTIVATE,
+    USER_ACTIVATE: USER_ACTIVATE,
+    handleFullscreenChange: handleFullscreenChange,
+    activate: activate,
+    userActivate: userActivate,
+    play: play,
+    pause: pause,
+    togglePlay: togglePlay,
+    seek: seek,
+    forward: forward,
+    replay: replay,
+    changeRate: changeRate,
+    changeVolume: changeVolume,
+    mute: mute,
+    toggleFullscreen: toggleFullscreen,
+    togglePictureInPicture: togglePictureInPicture,
+    changeQuality: changeQuality,
+    takeScreenshot: takeScreenshot,
+    toggleTheaterMode: toggleTheaterMode
+  });
+
+  var initialState = {
+    currentSrc: null,
+    duration: 0,
+    currentTime: 0,
+    seekingTime: 0,
+    buffered: null,
+    textTracks: null,
+    waiting: false,
+    seeking: false,
+    paused: true,
+    autoPaused: false,
+    ended: false,
+    playbackRate: 1,
+    muted: false,
+    volume: 1,
+    readyState: 0,
+    networkState: 0,
+    videoWidth: 0,
+    videoHeight: 0,
+    hasStarted: false,
+    userActivity: true,
+    isActive: false,
+    isFullscreen: false,
+    isPictureInPicture: false,
+    loop: false,
+    isTheater: false,
+    quality: 'auto',
+    activeTextTrack: null
+  };
+  function player(state, action) {
+    if (state === void 0) {
+      state = initialState;
+    }
+    switch (action.type) {
+      case USER_ACTIVATE:
+        return _extends({}, state, {
+          userActivity: action.activity
+        });
+      case PLAYER_ACTIVATE:
+        return _extends({}, state, {
+          isActive: action.activity
+        });
+      case FULLSCREEN_CHANGE:
+        return _extends({}, state, {
+          isFullscreen: !!action.isFullscreen
+        });
+      case SEEKING_TIME:
+        return _extends({}, state, {
+          seekingTime: action.time
+        });
+      case END_SEEKING:
+        return _extends({}, state, {
+          seekingTime: 0
+        });
+      case LOAD_START:
+        return _extends({}, state, action.videoProps, {
+          hasStarted: false,
+          ended: false
+        });
+      case CAN_PLAY:
+        return _extends({}, state, action.videoProps, {
+          waiting: false
+        });
+      case WAITING:
+        return _extends({}, state, action.videoProps, {
+          waiting: true
+        });
+      case CAN_PLAY_THROUGH:
+      case PLAYING:
+        return _extends({}, state, action.videoProps, {
+          waiting: false
+        });
+      case PLAY:
+        return _extends({}, state, action.videoProps, {
+          ended: false,
+          paused: false,
+          autoPaused: false,
+          waiting: false,
+          hasStarted: true
+        });
+      case PAUSE:
+        return _extends({}, state, action.videoProps, {
+          paused: true
+        });
+      case END:
+        return _extends({}, state, action.videoProps, {
+          ended: true
+        });
+      case SEEKING:
+        return _extends({}, state, action.videoProps, {
+          seeking: true
+        });
+      case SEEKED:
+        return _extends({}, state, action.videoProps, {
+          seeking: false
+        });
+      case ERROR:
+        return _extends({}, state, action.videoProps, {
+          error: 'UNKNOWN ERROR',
+          ended: true
+        });
+      case DURATION_CHANGE:
+      case TIME_UPDATE:
+      case VOLUME_CHANGE:
+      case PROGRESS_CHANGE:
+      case RATE_CHANGE:
+      case SUSPEND:
+      case ABORT:
+      case EMPTIED:
+      case STALLED:
+      case LOADED_META_DATA:
+      case LOADED_DATA:
+      case RESIZE:
+        return _extends({}, state, action.videoProps);
+      case ACTIVATE_TEXT_TRACK:
+        return _extends({}, state, {
+          activeTextTrack: action.textTrack
+        });
+      case PICTURE_IN_PICTURE_CHANGE:
+        return _extends({}, state, {
+          isPictureInPicture: !!action.isPictureInPicture
+        });
+      case LOOP_CHANGE:
+        return _extends({}, state, {
+          loop: !!action.loop
+        });
+      case THEATER_MODE_CHANGE:
+        return _extends({}, state, {
+          isTheater: !!action.isTheater
+        });
+      case QUALITY_CHANGE:
+        return _extends({}, state, {
+          quality: action.quality || 'auto'
+        });
+      default:
+        return state;
+    }
+  }
+
+  var initialState$1 = {
+    count: 0,
+    operation: {
+      action: '',
+      source: ''
+    }
+  };
+  function operation(state, action) {
+    if (state === void 0) {
+      state = initialState$1;
+    }
+    switch (action.type) {
+      case OPERATE:
+        return _extends({}, state, {
+          count: state.count + 1,
+          operation: _extends({}, state.operation, action.operation)
+        });
+      default:
+        return state;
+    }
+  }
+
+  function reducer(state, action) {
+    return {
+      player: player(state === null || state === void 0 ? void 0 : state.player, action),
+      operation: operation(state === null || state === void 0 ? void 0 : state.operation, action)
+    };
+  }
+  var playerReducer = player;
+  var operationReducer = operation;
+
+  var Manager = /*#__PURE__*/function () {
+    function Manager(store) {
+      this.store = void 0;
+      this.video = void 0;
+      this.rootElement = void 0;
+      this.boundActions = void 0;
+      this.store = store || redux.createStore(reducer);
+      this.video = null;
+      this.rootElement = null;
+      this.boundActions = undefined;
+    }
+    var _proto = Manager.prototype;
+    _proto.getActions = function getActions() {
+      var _this = this;
+      if (this.boundActions) {
+        return this.boundActions;
+      }
+      var actions = _extends({}, playerActions, videoActions);
+      var bound = {};
+      Object.keys(actions).forEach(function (key) {
+        var creator = actions[key];
+        if (typeof creator !== 'function') {
+          return;
+        }
+        bound[key] = function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          var action = creator.apply(_this, args);
+          if (typeof action !== 'undefined') {
+            _this.store.dispatch(action);
+          }
+        };
+      });
+      this.boundActions = bound;
+      return this.boundActions;
+    };
+    _proto.getState = function getState() {
+      return this.store.getState();
+    };
+    _proto.subscribeToStateChange = function subscribeToStateChange(listener, getState) {
+      if (getState === void 0) {
+        getState = this.getState.bind(this);
+      }
+      var prevState = getState();
+      var handleChange = function handleChange() {
+        var state = getState();
+        if (state === prevState) {
+          return;
+        }
+        var prevStateCopy = prevState;
+        prevState = state;
+        listener(state, prevStateCopy);
+      };
+      return this.store.subscribe(handleChange);
+    };
+    _proto.subscribeToOperationStateChange = function subscribeToOperationStateChange(listener) {
+      var _this2 = this;
+      return this.subscribeToStateChange(listener, function () {
+        return _this2.getState().operation;
+      });
+    };
+    _proto.subscribeToPlayerStateChange = function subscribeToPlayerStateChange(listener) {
+      var _this3 = this;
+      return this.subscribeToStateChange(listener, function () {
+        return _this3.getState().player;
+      });
+    };
+    return Manager;
+  }();
+
+  // eslint-disable-next-line import/no-unresolved
+  var BigPlayButton = /*#__PURE__*/function (_Component) {
+    _inheritsLoose(BigPlayButton, _Component);
+    function BigPlayButton(props, context) {
+      var _this;
+      _this = _Component.call(this, props, context) || this;
+      _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
+      return _this;
+    }
+    var _proto = BigPlayButton.prototype;
+    _proto.componentDidMount = function componentDidMount() {};
+    _proto.handleClick = function handleClick(event) {
+      var _this$props$actions;
+      event.preventDefault();
+      (_this$props$actions = this.props.actions) === null || _this$props$actions === void 0 ? void 0 : _this$props$actions.play();
+    };
+    _proto.render = function render() {
+      var _player$hasStarted;
+      var _this$props = this.props,
+        player = _this$props.player,
+        position = _this$props.position;
+      var positionClass = position === 'center' ? 'center' : 'left';
+      var hasStarted = (_player$hasStarted = player === null || player === void 0 ? void 0 : player.hasStarted) !== null && _player$hasStarted !== void 0 ? _player$hasStarted : false;
+      var hasSource = (player === null || player === void 0 ? void 0 : player.currentSrc) !== undefined && (player === null || player === void 0 ? void 0 : player.currentSrc) !== '';
+      return React__default.createElement("button", {
+        className: classnames('video-react-player-button', 'video-react-player-big-play-button', "video-react-player-big-play-button-" + positionClass, this.props.className, {
+          // keep visible by default if player info is not provided
+          'big-play-button-hide': hasStarted || !hasSource
+        }),
+        type: "button",
+        "aria-live": "polite",
+        tabIndex: 0,
+        onClick: this.handleClick
+      }, React__default.createElement("span", {
+        className: "video-react-player-control-text"
+      }, "Play Video"));
+    };
+    return BigPlayButton;
+  }(React.Component);
+  BigPlayButton.defaultProps = {
+    position: 'left'
+  };
+  BigPlayButton.displayName = 'BigPlayButton';
+
+  function LoadingSpinner(_ref) {
+    var player = _ref.player,
+      className = _ref.className;
+    if (player.error) {
+      return null;
+    }
+    return React__default.createElement("div", {
+      className: classnames('video-react-player-loading-spinner', className)
+    });
+  }
+  LoadingSpinner.displayName = 'LoadingSpinner';
+
+  function PosterImage(_ref) {
+    var poster = _ref.poster,
+      player = _ref.player,
+      actions = _ref.actions,
+      className = _ref.className;
+    if (!poster || player.hasStarted) {
+      return null;
+    }
+    return React__default.createElement("div", {
+      className: classnames('video-react-player-poster', className),
+      style: {
+        backgroundImage: "url(\"" + poster + "\")"
+      },
+      onClick: function onClick() {
+        if (player.paused) {
+          actions.play();
+        }
+      }
+    });
+  }
+  PosterImage.displayName = 'PosterImage';
+
+  // NaN is the only value in javascript which is not equal to itself.
+  // eslint-disable-next-line no-self-compare
+  var isNaN = Number.isNaN || function (value) {
+    return value !== value;
+  };
+
+  /**
+   * @file format-time.js
+   *
+   * Format seconds as a time string, H:MM:SS or M:SS
+   * Supplying a guide (in seconds) will force a number of leading zeros
+   * to cover the length of the guide
+   *
+   * @param  {Number} seconds Number of seconds to be turned into a string
+   * @param  {Number} guide   Number (in seconds) to model the string after
+   * @return {String}         Time formatted as H:MM:SS or M:SS
+   * @private
+   * @function formatTime
+   */
+  function formatTime(seconds, guide) {
+    if (seconds === void 0) {
+      seconds = 0;
+    }
+    if (guide === void 0) {
+      guide = seconds;
+    }
+    var s = Math.floor(seconds % 60);
+    var m = Math.floor(seconds / 60 % 60);
+    var h = Math.floor(seconds / 3600);
+    var gm = Math.floor(guide / 60 % 60);
+    var gh = Math.floor(guide / 3600);
+
+    // handle invalid times
+    if (isNaN(seconds) || seconds === Infinity) {
+      // '-' is false for all relational operators (e.g. <, >=) so this setting
+      // will add the minimum number of fields specified by the guide
+      h = 0;
+      m = 0;
+      s = 0;
+    }
+    var hasHours = h > 0 || gh > 0;
+    var hours = hasHours ? h + ":" : '';
+    var minutes = ((hasHours || gm >= 10) && m < 10 ? "0" + m : m) + ":";
+    var secondsString = s < 10 ? "0" + s : "" + s;
+    return "" + hours + minutes + secondsString;
+  }
+
+  // Check if the element belongs to a video element
+  // only accept <source />, <track />,
+  // <MyComponent isVideoChild />
+  // elements
+  function isVideoChild(c) {
+    if (!React__default.isValidElement(c)) {
+      return false;
+    }
+    if (c.props && c.props.isVideoChild) {
+      return true;
+    }
+    return c.type === 'source' || c.type === 'track';
+  }
+  var find = function find(elements, func) {
+    return elements.find(func);
+  };
+
+  // check if two components are the same type
+  var isTypeEqual = function isTypeEqual(component1, component2) {
+    var type1 = component1.type;
+    var type2 = component2.type;
+    if (typeof type1 === 'string' || typeof type2 === 'string') {
+      return type1 === type2;
+    }
+    if (typeof type1 === 'function' && typeof type2 === 'function') {
+      return type1.displayName === type2.displayName;
+    }
+    return false;
+  };
+
+  // merge default children
+  // sort them by `order` property
+  // filter them by `disabled` property
+  function mergeAndSortChildren(defaultChildren, _children, _parentProps, defaultOrder) {
+    if (defaultOrder === void 0) {
+      defaultOrder = 1;
+    }
+    var children = React__default.Children.toArray(_children).filter(React__default.isValidElement);
+    var _order = _parentProps.order,
+      parentProps = _objectWithoutPropertiesLoose(_parentProps, ["order"]); // ignore order from parent
+    return children.filter(function (e) {
+      return !e.props.disabled;
+    }) // filter the disabled components
+    .concat(defaultChildren.filter(function (c) {
+      return !find(children, function (component) {
+        return isTypeEqual(component, c);
+      });
+    })).map(function (element) {
+      var defaultComponent = find(defaultChildren, function (c) {
+        return isTypeEqual(c, element);
+      });
+      var defaultProps = defaultComponent ? defaultComponent.props : {};
+      var props = _extends({}, parentProps, defaultProps, element.props);
+      return React__default.cloneElement(element, props, element.props.children);
+    }).sort(function (a, b) {
+      return (a.props.order || defaultOrder) - (b.props.order || defaultOrder);
+    });
+  }
+
+  /**
+   * Temporary utility for generating the warnings
+   */
+  function deprecatedWarning(oldMethodCall, newMethodCall) {
+    // eslint-disable-next-line no-console
+    console.warn("WARNING: " + oldMethodCall + " will be deprecated soon! Please use " + newMethodCall + " instead.");
+  }
+  function throttle(callback, limit) {
+    var wait = false;
+    return function () {
+      if (!wait) {
+        callback.apply(void 0, arguments);
+        wait = true;
+        setTimeout(function () {
+          wait = false;
+        }, limit);
+      }
+    };
+  }
+  var mediaProperties = ['error', 'src', 'srcObject', 'currentSrc', 'crossOrigin', 'networkState', 'preload', 'buffered', 'readyState', 'seeking', 'currentTime', 'duration', 'paused', 'defaultPlaybackRate', 'playbackRate', 'played', 'seekable', 'ended', 'autoplay', 'loop', 'mediaGroup', 'controller', 'controls', 'volume', 'muted', 'defaultMuted', 'audioTracks', 'videoTracks', 'textTracks', 'width', 'height', 'videoWidth', 'videoHeight', 'poster'];
+
+  var Video = React.forwardRef(function (props, ref) {
+    var actions = props.actions,
+      player = props.player,
+      children = props.children,
+      startTime = props.startTime,
+      loop = props.loop,
+      poster = props.poster,
+      preload = props.preload,
+      src = props.src,
+      autoPlay = props.autoPlay,
+      playsInline = props.playsInline,
+      muted = props.muted,
+      crossOrigin = props.crossOrigin,
+      videoId = props.videoId,
+      className = props.className,
+      onLoadStart = props.onLoadStart,
+      onWaiting = props.onWaiting,
+      onCanPlay = props.onCanPlay,
+      onCanPlayThrough = props.onCanPlayThrough,
+      onPlaying = props.onPlaying,
+      onEnded = props.onEnded,
+      onSeeking = props.onSeeking,
+      onSeeked = props.onSeeked,
+      onPlay = props.onPlay,
+      onPause = props.onPause,
+      onProgress = props.onProgress,
+      onDurationChange = props.onDurationChange,
+      onError = props.onError,
+      onSuspend = props.onSuspend,
+      onAbort = props.onAbort,
+      onEmptied = props.onEmptied,
+      onStalled = props.onStalled,
+      onLoadedMetadata = props.onLoadedMetadata,
+      onLoadedData = props.onLoadedData,
+      onTimeUpdate = props.onTimeUpdate,
+      onRateChange = props.onRateChange,
+      onVolumeChange = props.onVolumeChange,
+      onResize = props.onResize;
+    var videoRef = React.useRef(null);
+    var propsRef = React.useRef(props);
+    propsRef.current = props;
+    var _useReducer = React.useReducer(function (count) {
+        return count + 1;
+      }, 0),
+      forceRender = _useReducer[1];
+    React.useEffect(function () {
+      forceRender();
+    }, []);
+    var getVideoProperties = React.useCallback(function () {
+      var video = videoRef.current;
+      if (!video) {
+        return {};
+      }
+      return mediaProperties.reduce(function (acc, key) {
+        var videoKey = key;
+        acc[key] = video === null || video === void 0 ? void 0 : video[videoKey];
+        return acc;
+      }, {});
+    }, []);
+    var createVideoEventHandler = React.useCallback(function (dispatcher, callback) {
+      return function () {
+        dispatcher(getVideoProperties());
+        if (callback) {
+          callback.apply(void 0, arguments);
+        }
+      };
+    }, [getVideoProperties]);
+    var handleLoadStart = React.useMemo(function () {
+      return createVideoEventHandler(actions.handleLoadStart, onLoadStart);
+    }, [actions.handleLoadStart, onLoadStart, createVideoEventHandler]);
+    var handleWaiting = React.useMemo(function () {
+      return createVideoEventHandler(actions.handleWaiting, onWaiting);
+    }, [actions.handleWaiting, onWaiting, createVideoEventHandler]);
+    var handleCanPlay = React.useMemo(function () {
+      return createVideoEventHandler(actions.handleCanPlay, onCanPlay);
+    }, [actions.handleCanPlay, onCanPlay, createVideoEventHandler]);
+    var handleCanPlayThrough = React.useMemo(function () {
+      return createVideoEventHandler(actions.handleCanPlayThrough, onCanPlayThrough);
+    }, [actions.handleCanPlayThrough, onCanPlayThrough, createVideoEventHandler]);
+    var handlePlaying = React.useMemo(function () {
+      return createVideoEventHandler(actions.handlePlaying, onPlaying);
+    }, [actions.handlePlaying, onPlaying, createVideoEventHandler]);
+    var handlePlay = React.useMemo(function () {
+      return createVideoEventHandler(actions.handlePlay, onPlay);
+    }, [actions.handlePlay, onPlay, createVideoEventHandler]);
+    var handlePause = React.useMemo(function () {
+      return createVideoEventHandler(actions.handlePause, onPause);
+    }, [actions.handlePause, onPause, createVideoEventHandler]);
+    var handleDurationChange = React.useMemo(function () {
+      return createVideoEventHandler(actions.handleDurationChange, onDurationChange);
+    }, [actions.handleDurationChange, onDurationChange, createVideoEventHandler]);
+    var handleTimeUpdate = React.useMemo(function () {
+      return createVideoEventHandler(actions.handleTimeUpdate, onTimeUpdate);
+    }, [actions.handleTimeUpdate, onTimeUpdate, createVideoEventHandler]);
+    var handleRateChange = React.useMemo(function () {
+      return createVideoEventHandler(actions.handleRateChange, onRateChange);
+    }, [actions.handleRateChange, onRateChange, createVideoEventHandler]);
+    var handleVolumeChange = React.useMemo(function () {
+      return createVideoEventHandler(actions.handleVolumeChange, onVolumeChange);
+    }, [actions.handleVolumeChange, onVolumeChange, createVideoEventHandler]);
+    var handleSuspend = React.useMemo(function () {
+      return createVideoEventHandler(actions.handleSuspend, onSuspend);
+    }, [actions.handleSuspend, onSuspend, createVideoEventHandler]);
+    var handleAbort = React.useMemo(function () {
+      return createVideoEventHandler(actions.handleAbort, onAbort);
+    }, [actions.handleAbort, onAbort, createVideoEventHandler]);
+    var handleEmptied = React.useMemo(function () {
+      return createVideoEventHandler(actions.handleEmptied, onEmptied);
+    }, [actions.handleEmptied, onEmptied, createVideoEventHandler]);
+    var handleStalled = React.useMemo(function () {
+      return createVideoEventHandler(actions.handleStalled, onStalled);
+    }, [actions.handleStalled, onStalled, createVideoEventHandler]);
+    var handleResize = React.useMemo(function () {
+      return createVideoEventHandler(actions.handleResize, onResize);
+    }, [actions.handleResize, onResize, createVideoEventHandler]);
+    var throttledProgress = React.useMemo(function () {
+      return throttle(function () {
+        actions.handleProgressChange(getVideoProperties());
+      }, 250);
+    }, [actions, getVideoProperties]);
+    var handleProgress = React.useCallback(function (event) {
+      throttledProgress();
+      onProgress === null || onProgress === void 0 ? void 0 : onProgress(event);
+    }, [onProgress, throttledProgress]);
+    var handleError = React.useCallback(function (event) {
+      actions.handleError(getVideoProperties());
+      onError === null || onError === void 0 ? void 0 : onError(event);
+    }, [actions, getVideoProperties, onError]);
+    var handleSeeking = React.useCallback(function (event) {
+      actions.handleSeeking(getVideoProperties());
+      onSeeking === null || onSeeking === void 0 ? void 0 : onSeeking(event);
+    }, [actions, getVideoProperties, onSeeking]);
+    var handleSeeked = React.useCallback(function (event) {
+      actions.handleSeeked(getVideoProperties());
+      onSeeked === null || onSeeked === void 0 ? void 0 : onSeeked(event);
+    }, [actions, getVideoProperties, onSeeked]);
+    var handleEnd = React.useCallback(function (event) {
+      var video = videoRef.current;
+      if (loop && video) {
+        video.currentTime = 0;
+        var promise = video.play();
+        promise === null || promise === void 0 ? void 0 : promise.catch(function () {});
+      } else if (video && !player.paused) {
+        video.pause();
+      }
+      actions.handleEnd(getVideoProperties());
+      onEnded === null || onEnded === void 0 ? void 0 : onEnded(event);
+    }, [actions, getVideoProperties, loop, onEnded, player.paused]);
+    var handleLoadedMetadata = React.useCallback(function (event) {
+      var video = videoRef.current;
+      if (typeof startTime === 'number' && startTime > 0 && video) {
+        video.currentTime = startTime;
+      }
+      actions.handleLoadedMetaData(getVideoProperties());
+      onLoadedMetadata === null || onLoadedMetadata === void 0 ? void 0 : onLoadedMetadata(event);
+    }, [actions, getVideoProperties, onLoadedMetadata, startTime]);
+    var handleLoadedData = React.useCallback(function (event) {
+      actions.handleLoadedData(getVideoProperties());
+      onLoadedData === null || onLoadedData === void 0 ? void 0 : onLoadedData(event);
+    }, [actions, getVideoProperties, onLoadedData]);
+    var handleTextTrackChange = React.useCallback(function () {
+      var video = videoRef.current;
+      if (video && video.textTracks) {
+        var activeTextTrack = Array.from(video.textTracks).find(function (textTrack) {
+          return textTrack.mode === 'showing';
+        });
+        if (activeTextTrack !== player.activeTextTrack) {
+          actions.activateTextTrack(activeTextTrack !== null && activeTextTrack !== void 0 ? activeTextTrack : null);
+        }
+      }
+    }, [actions, player.activeTextTrack]);
+    React.useEffect(function () {
+      var video = videoRef.current;
+      if (!video) {
+        return undefined;
+      }
+      if (video.textTracks) {
+        video.textTracks.onaddtrack = handleTextTrackChange;
+        video.textTracks.onremovetrack = handleTextTrackChange;
+      }
+      var handleEnterPiP = function handleEnterPiP() {
+        return actions.handlePictureInPictureChange(true);
+      };
+      var handleLeavePiP = function handleLeavePiP() {
+        return actions.handlePictureInPictureChange(false);
+      };
+      video.addEventListener('enterpictureinpicture', handleEnterPiP);
+      video.addEventListener('leavepictureinpicture', handleLeavePiP);
+      return function () {
+        video.removeEventListener('enterpictureinpicture', handleEnterPiP);
+        video.removeEventListener('leavepictureinpicture', handleLeavePiP);
+      };
+    }, [actions, handleTextTrackChange]);
+    var apiRef = React.useRef();
+    if (!apiRef.current) {
+      var getVideo = function getVideo() {
+        return videoRef.current;
+      };
+      apiRef.current = {
+        play: function play() {
+          var _getVideo;
+          var promise = (_getVideo = getVideo()) === null || _getVideo === void 0 ? void 0 : _getVideo.play();
+          if (promise && typeof promise.catch === 'function') {
+            promise.catch(function () {});
+          }
+        },
+        pause: function pause() {
+          var video = getVideo();
+          var promiseLike = video === null || video === void 0 ? void 0 : video.pause();
+          if (typeof promiseLike === 'object' && promiseLike !== null && 'catch' in promiseLike && typeof promiseLike.catch === 'function') {
+            promiseLike.catch(function () {});
+          }
+        },
+        load: function load() {
+          var _getVideo2;
+          (_getVideo2 = getVideo()) === null || _getVideo2 === void 0 ? void 0 : _getVideo2.load();
+        },
+        addTextTrack: function addTextTrack(kind, label, language) {
+          var video = getVideo();
+          return video ? video.addTextTrack(kind, label, language) : {};
+        },
+        canPlayType: function canPlayType() {
+          var _getVideo$canPlayType, _getVideo3;
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          return (_getVideo$canPlayType = (_getVideo3 = getVideo()) === null || _getVideo3 === void 0 ? void 0 : _getVideo3.canPlayType.apply(_getVideo3, args)) !== null && _getVideo$canPlayType !== void 0 ? _getVideo$canPlayType : '';
+        },
+        togglePlay: function togglePlay() {
+          var video = getVideo();
+          if (!video) {
+            return;
+          }
+          if (video.paused) {
+            var promise = video.play();
+            if (promise && typeof promise.catch === 'function') {
+              promise.catch(function () {});
+            }
+          } else {
+            var promiseLike = video.pause();
+            if (typeof promiseLike === 'object' && promiseLike !== null && 'catch' in promiseLike && typeof promiseLike.catch === 'function') {
+              promiseLike.catch(function () {});
+            }
+          }
+        },
+        seek: function seek(time) {
+          var video = getVideo();
+          if (!video) {
+            return;
+          }
+          try {
+            video.currentTime = time;
+          } catch (err) {
+            // ignore
+          }
+        },
+        forward: function forward(seconds) {
+          var video = getVideo();
+          if (video) {
+            var _apiRef$current;
+            (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.seek(video.currentTime + seconds);
+          }
+        },
+        replay: function replay(seconds) {
+          var _apiRef$current2;
+          (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 ? void 0 : _apiRef$current2.forward(-seconds);
+        },
+        toggleFullscreen: function toggleFullscreen() {
+          propsRef.current.actions.toggleFullscreen(propsRef.current.player);
+        },
+        get playbackRate() {
+          var _getVideo$playbackRat, _getVideo4;
+          return (_getVideo$playbackRat = (_getVideo4 = getVideo()) === null || _getVideo4 === void 0 ? void 0 : _getVideo4.playbackRate) !== null && _getVideo$playbackRat !== void 0 ? _getVideo$playbackRat : 1;
+        },
+        set playbackRate(rate) {
+          var video = getVideo();
+          if (video) {
+            video.playbackRate = rate;
+          }
+        },
+        get muted() {
+          var _getVideo$muted, _getVideo5;
+          return (_getVideo$muted = (_getVideo5 = getVideo()) === null || _getVideo5 === void 0 ? void 0 : _getVideo5.muted) !== null && _getVideo$muted !== void 0 ? _getVideo$muted : false;
+        },
+        set muted(value) {
+          var video = getVideo();
+          if (video) {
+            video.muted = value;
+          }
+        },
+        get volume() {
+          var _getVideo$volume, _getVideo6;
+          return (_getVideo$volume = (_getVideo6 = getVideo()) === null || _getVideo6 === void 0 ? void 0 : _getVideo6.volume) !== null && _getVideo$volume !== void 0 ? _getVideo$volume : 1;
+        },
+        set volume(value) {
+          var video = getVideo();
+          if (video) {
+            video.volume = Math.max(0, Math.min(1, value));
+          }
+        },
+        get videoWidth() {
+          var _getVideo$videoWidth, _getVideo7;
+          return (_getVideo$videoWidth = (_getVideo7 = getVideo()) === null || _getVideo7 === void 0 ? void 0 : _getVideo7.videoWidth) !== null && _getVideo$videoWidth !== void 0 ? _getVideo$videoWidth : 0;
+        },
+        get videoHeight() {
+          var _getVideo$videoHeight, _getVideo8;
+          return (_getVideo$videoHeight = (_getVideo8 = getVideo()) === null || _getVideo8 === void 0 ? void 0 : _getVideo8.videoHeight) !== null && _getVideo$videoHeight !== void 0 ? _getVideo$videoHeight : 0;
+        },
+        get video() {
+          return getVideo();
+        }
+      };
+    }
+    React.useImperativeHandle(ref, function () {
+      return apiRef.current;
+    }, []);
+    var renderedChildren = React.useMemo(function () {
+      if (!apiRef.current) {
+        return null;
+      }
+      var sharedProps = _extends({}, props, {
+        video: apiRef.current
+      });
+      return React__default.Children.toArray(children).filter(isVideoChild).map(function (child) {
+        var element = child;
+        if (typeof element.type === 'string') {
+          if (element.type === 'source') {
+            var childProps = _extends({}, element.props);
+            var originalOnError = childProps.onError;
+            childProps.onError = function () {
+              if (originalOnError) {
+                originalOnError.apply(void 0, arguments);
+              }
+              actions.handleError(getVideoProperties());
+            };
+            return React__default.cloneElement(element, childProps);
+          }
+          return element;
+        }
+        return React__default.cloneElement(element, sharedProps);
+      });
+    }, [actions, children, getVideoProperties, props]);
+    return React__default.createElement("video", {
+      className: classnames('video-react-player-video', className),
+      id: videoId,
+      crossOrigin: crossOrigin,
+      ref: videoRef,
+      muted: muted,
+      preload: preload,
+      loop: loop,
+      playsInline: playsInline,
+      autoPlay: autoPlay,
+      poster: poster,
+      src: src,
+      onLoadStart: handleLoadStart,
+      onWaiting: handleWaiting,
+      onCanPlay: handleCanPlay,
+      onCanPlayThrough: handleCanPlayThrough,
+      onPlaying: handlePlaying,
+      onEnded: handleEnd,
+      onSeeking: handleSeeking,
+      onSeeked: handleSeeked,
+      onPlay: handlePlay,
+      onPause: handlePause,
+      onProgress: handleProgress,
+      onDurationChange: handleDurationChange,
+      onError: handleError,
+      onSuspend: handleSuspend,
+      onAbort: handleAbort,
+      onEmptied: handleEmptied,
+      onStalled: handleStalled,
+      onLoadedMetadata: handleLoadedMetadata,
+      onLoadedData: handleLoadedData,
+      onTimeUpdate: handleTimeUpdate,
+      onRateChange: handleRateChange,
+      onVolumeChange: handleVolumeChange,
+      onResize: handleResize,
+      tabIndex: -1
+    }, renderedChildren);
+  });
+  Video.displayName = 'Video';
+
+  var Bezel = /*#__PURE__*/function (_Component) {
+    _inheritsLoose(Bezel, _Component);
+    function Bezel(props, context) {
+      var _this;
+      _this = _Component.call(this, props, context) || this;
+      _this.timer = null;
+      props.manager.subscribeToOperationStateChange(_this.handleStateChange.bind(_assertThisInitialized(_this)));
+      _this.state = {
+        hidden: true,
+        operation: {
+          action: '',
+          source: ''
+        },
+        count: 0
+      };
+      return _this;
+    }
+    var _proto = Bezel.prototype;
+    _proto.handleStateChange = function handleStateChange(state, prevState) {
+      var _this2 = this;
+      if (state.count !== prevState.count && state.operation.source === 'shortcut') {
+        if (this.timer) {
+          // previous animation is not finished
+          clearTimeout(this.timer); // cancel it
+          this.timer = null;
+        }
+
+        // show it
+        // update operation
+        this.setState({
+          hidden: false,
+          count: state.count,
+          operation: state.operation
+        });
+
+        // hide it after 0.5s
+        this.timer = window.setTimeout(function () {
+          _this2.setState({
+            hidden: true
+          });
+          _this2.timer = null;
+        }, 500);
+      }
+    };
+    _proto.render = function render() {
+      // only displays for shortcut so far
+      if (this.state.operation.source !== 'shortcut') {
+        return null;
+      }
+      var style = this.state.hidden ? {
+        display: 'none'
+      } : null;
+      return React__default.createElement("div", {
+        className: classnames({
+          'video-react-player-bezel': true,
+          'video-react-player-bezel-animation': this.state.count % 2 === 0,
+          'video-react-player-bezel-animation-alt': this.state.count % 2 === 1
+        }, this.props.className),
+        style: style,
+        role: "status",
+        "aria-label": this.state.operation.action
+      }, React__default.createElement("div", {
+        className: classnames('video-react-player-bezel-icon', "video-react-player-bezel-icon-" + this.state.operation.action)
+      }));
+    };
+    return Bezel;
+  }(React.Component);
+  Bezel.displayName = 'Bezel';
+
+  /**
+   * Offset Left
+   * getBoundingClientRect technique from
+   * John Resig http://ejohn.org/blog/getboundingclientrect-is-awesome/
+   *
+   * @function findElPosition
+   * @param {ReactNodeRef} el React Node ref from which to get offset
+   * @return {Object}
+   */
+  function findElPosition(el) {
+    var box;
+    if (el.getBoundingClientRect && el.parentNode) {
+      box = el.getBoundingClientRect();
+    }
+    if (!box) {
+      return {
+        left: 0,
+        top: 0
+      };
+    }
+    var _document = document,
+      body = _document.body,
+      docEl = _document.documentElement;
+    var clientLeft = docEl.clientLeft || body.clientLeft || 0;
+    var scrollLeft = window.pageXOffset || body.scrollLeft;
+    var left = box.left + scrollLeft - clientLeft;
+    var clientTop = docEl.clientTop || body.clientTop || 0;
+    var scrollTop = window.pageYOffset || body.scrollTop;
+    var top = box.top + scrollTop - clientTop;
+
+    // Android sometimes returns slightly off decimal values, so need to round
+    return {
+      left: Math.round(left),
+      top: Math.round(top)
+    };
+  }
+
+  /**
+   * Get pointer position in a React Node ref
+   * Returns an object with x and y coordinates.
+   * The base on the coordinates are the bottom left of the element.
+   *
+   * @function getPointerPosition
+   * @param {ReactNodeRef} el React Node ref on which to get the pointer position on
+   * @param {Event} event Event object
+   * @return {Object} This object will have x and y coordinates corresponding to the mouse position
+   */
+  function getPointerPosition(el, event) {
+    var position = {};
+    var box = findElPosition(el);
+    var boxW = el.offsetWidth;
+    var boxH = el.offsetHeight;
+    var boxY = box.top;
+    var boxX = box.left;
+    var evtPageY = event.pageY;
+    var evtPageX = event.pageX;
+    if ('changedTouches' in event && event.changedTouches.length) {
+      evtPageX = event.changedTouches[0].pageX;
+      evtPageY = event.changedTouches[0].pageY;
+    }
+    position.y = Math.max(0, Math.min(1, (boxY - evtPageY + boxH) / boxH));
+    position.x = Math.max(0, Math.min(1, (evtPageX - boxX) / boxW));
+    return position;
+  }
+
+  // focus an element
+  function focusNode(reactNode) {
+    if (reactNode && reactNode.focus) {
+      reactNode.focus();
+    }
+  }
+
+  // check if an element has a class name
+  function hasClass(elm, cls) {
+    var classes = elm.className.split(' ');
+    for (var i = 0; i < classes.length; i += 1) {
+      if (classes[i].toLowerCase() === cls.toLowerCase()) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  var Shortcut = /*#__PURE__*/function (_Component) {
+    _inheritsLoose(Shortcut, _Component);
+    function Shortcut(props, context) {
+      var _this;
+      _this = _Component.call(this, props, context) || this;
+      _this.defaultShortcuts = void 0;
+      _this.shortcuts = [];
+      _this.defaultShortcuts = [{
+        keyCode: 32,
+        // spacebar
+        handle: _this.togglePlay
+      }, {
+        keyCode: 75,
+        // k
+        handle: _this.togglePlay
+      }, {
+        keyCode: 70,
+        // f
+        handle: _this.toggleFullscreen
+      }, {
+        keyCode: 37,
+        // Left arrow
+        handle: function handle(player, actions) {
+          if (!player.hasStarted) {
+            return;
+          }
+          actions.replay(5, {
+            action: 'replay-5',
+            source: 'shortcut'
+          }); // Go back 5 seconds
+        }
+      }, {
+        keyCode: 74,
+        // j
+        handle: function handle(player, actions) {
+          if (!player.hasStarted) {
+            return;
+          }
+          actions.replay(10, {
+            action: 'replay-10',
+            source: 'shortcut'
+          }); // Go back 10 seconds
+        }
+      }, {
+        keyCode: 39,
+        // Right arrow
+        handle: function handle(player, actions) {
+          if (!player.hasStarted) {
+            return;
+          }
+          actions.forward(5, {
+            action: 'forward-5',
+            source: 'shortcut'
+          }); // Go forward 5 seconds
+        }
+      }, {
+        keyCode: 76,
+        // l
+        handle: function handle(player, actions) {
+          if (!player.hasStarted) {
+            return;
+          }
+          actions.forward(10, {
+            action: 'forward-10',
+            source: 'shortcut'
+          }); // Go forward 10 seconds
+        }
+      }, {
+        keyCode: 36,
+        // Home
+        handle: function handle(player, actions) {
+          if (!player.hasStarted) {
+            return;
+          }
+          actions.seek(0); // Go to beginning of video
+        }
+      }, {
+        keyCode: 35,
+        // End
+        handle: function handle(player, actions) {
+          if (!player.hasStarted) {
+            return;
+          }
+          // Go to end of video
+          actions.seek(player.duration);
+        }
+      }, {
+        keyCode: 38,
+        // Up arrow
+        handle: function handle(player, actions) {
+          // Increase volume 5%
+          var v = player.volume + 0.05;
+          if (v > 1) {
+            v = 1;
+          }
+          actions.changeVolume(v, {
+            action: 'volume-up',
+            source: 'shortcut'
+          });
+        }
+      }, {
+        keyCode: 40,
+        // Down arrow
+        handle: function handle(player, actions) {
+          // Decrease volume 5%
+          var v = player.volume - 0.05;
+          if (v < 0) {
+            v = 0;
+          }
+          var action = v > 0 ? 'volume-down' : 'volume-off';
+          actions.changeVolume(v, {
+            action: action,
+            source: 'shortcut'
+          });
+        }
+      }, {
+        keyCode: 190,
+        // Shift + >
+        shift: true,
+        handle: function handle(player, actions) {
+          // Increase speed
+          var playbackRate = player.playbackRate;
+          if (playbackRate >= 1.5) {
+            playbackRate = 2;
+          } else if (playbackRate >= 1.25) {
+            playbackRate = 1.5;
+          } else if (playbackRate >= 1.0) {
+            playbackRate = 1.25;
+          } else if (playbackRate >= 0.5) {
+            playbackRate = 1.0;
+          } else if (playbackRate >= 0.25) {
+            playbackRate = 0.5;
+          } else if (playbackRate >= 0) {
+            playbackRate = 0.25;
+          }
+          actions.changeRate(playbackRate, {
+            action: 'fast-forward',
+            source: 'shortcut'
+          });
+        }
+      }, {
+        keyCode: 188,
+        // Shift + <
+        shift: true,
+        handle: function handle(player, actions) {
+          // Decrease speed
+          var playbackRate = player.playbackRate;
+          if (playbackRate <= 0.5) {
+            playbackRate = 0.25;
+          } else if (playbackRate <= 1.0) {
+            playbackRate = 0.5;
+          } else if (playbackRate <= 1.25) {
+            playbackRate = 1.0;
+          } else if (playbackRate <= 1.5) {
+            playbackRate = 1.25;
+          } else if (playbackRate <= 2) {
+            playbackRate = 1.5;
+          }
+          actions.changeRate(playbackRate, {
+            action: 'fast-rewind',
+            source: 'shortcut'
+          });
+        }
+      }];
+      _this.shortcuts = [].concat(_this.defaultShortcuts);
+      _this.mergeShortcuts = _this.mergeShortcuts.bind(_assertThisInitialized(_this));
+      _this.handleKeyPress = _this.handleKeyPress.bind(_assertThisInitialized(_this));
+      _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
+      _this.handleDoubleClick = _this.handleDoubleClick.bind(_assertThisInitialized(_this));
+      return _this;
+    }
+    var _proto = Shortcut.prototype;
+    _proto.componentDidMount = function componentDidMount() {
+      this.mergeShortcuts();
+      document.addEventListener('keydown', this.handleKeyPress);
+      document.addEventListener('click', this.handleClick);
+      document.addEventListener('dblclick', this.handleDoubleClick);
+    };
+    _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+      if (prevProps.shortcuts !== this.props.shortcuts) {
+        this.mergeShortcuts();
+      }
+    };
+    _proto.componentWillUnmount = function componentWillUnmount() {
+      document.removeEventListener('keydown', this.handleKeyPress);
+      document.removeEventListener('click', this.handleClick);
+      document.removeEventListener('dblclick', this.handleDoubleClick);
+    }
+
+    // merge the shortcuts from props
+    ;
+    _proto.mergeShortcuts = function mergeShortcuts() {
+      var getShortcutKey = function getShortcutKey(_ref) {
+        var _ref$keyCode = _ref.keyCode,
+          keyCode = _ref$keyCode === void 0 ? 0 : _ref$keyCode,
+          _ref$ctrl = _ref.ctrl,
+          ctrl = _ref$ctrl === void 0 ? false : _ref$ctrl,
+          _ref$shift = _ref.shift,
+          shift = _ref$shift === void 0 ? false : _ref$shift,
+          _ref$alt = _ref.alt,
+          alt = _ref$alt === void 0 ? false : _ref$alt;
+        return keyCode + ":" + ctrl + ":" + shift + ":" + alt;
+      };
+      var defaultShortcuts = this.defaultShortcuts.reduce(function (shortcuts, shortcut) {
+        var _extends2;
+        return _extends({}, shortcuts, (_extends2 = {}, _extends2[getShortcutKey(shortcut)] = shortcut, _extends2));
+      }, {});
+      var mergedShortcuts = (this.props.shortcuts || []).reduce(function (shortcuts, shortcut) {
+        var keyCode = shortcut.keyCode,
+          handle = shortcut.handle;
+        if (keyCode && typeof handle === 'function') {
+          var _extends3;
+          return _extends({}, shortcuts, (_extends3 = {}, _extends3[getShortcutKey(shortcut)] = shortcut, _extends3));
+        }
+        return shortcuts;
+      }, defaultShortcuts);
+      var gradeShortcut = function gradeShortcut(shortcut) {
+        var score = 0;
+        ['ctrl', 'shift', 'alt'].forEach(function (key) {
+          if (shortcut[key]) {
+            score += 1;
+          }
+        });
+        return score;
+      };
+      this.shortcuts = Object.values(mergedShortcuts).sort(function (a, b) {
+        return gradeShortcut(b) - gradeShortcut(a);
+      });
+    };
+    _proto.togglePlay = function togglePlay(player, actions) {
+      if (player.paused) {
+        actions.play({
+          action: 'play',
+          source: 'shortcut'
+        });
+      } else {
+        actions.pause({
+          action: 'pause',
+          source: 'shortcut'
+        });
+      }
+    };
+    _proto.toggleFullscreen = function toggleFullscreen(player, actions) {
+      actions.toggleFullscreen(player);
+    };
+    _proto.handleKeyPress = function handleKeyPress(e) {
+      var _this$props = this.props,
+        player = _this$props.player,
+        actions = _this$props.actions;
+      if (!player.isActive) {
+        return;
+      }
+      var activeElement = document.activeElement;
+      if (activeElement && activeElement instanceof HTMLElement && (hasClass(activeElement, 'video-react-player-control') || hasClass(activeElement, 'video-react-player-menu-button-active') || hasClass(activeElement, 'video-react-player-big-play-button'))) {
+        return;
+      }
+      var keyCode = e.keyCode || e.which;
+      var ctrl = e.ctrlKey || e.metaKey;
+      var shift = e.shiftKey;
+      var alt = e.altKey;
+      var shortcut = this.shortcuts.find(function (s) {
+        if (!s.keyCode || s.keyCode - keyCode !== 0) {
+          return false;
+        }
+        if (s.ctrl !== undefined && s.ctrl !== ctrl || s.shift !== undefined && s.shift !== shift || s.alt !== undefined && s.alt !== alt) {
+          return false;
+        }
+        return true;
+      });
+      if (shortcut) {
+        shortcut.handle(player, actions);
+        e.preventDefault();
+      }
+    }
+
+    // only if player is active and player is ready
+    ;
+    _proto.canBeClicked = function canBeClicked(player, e) {
+      if (!player.isActive || player.readyState !== 4 || !(e.target instanceof HTMLVideoElement)) {
+        return false;
+      }
+      return true;
+    };
+    _proto.handleClick = function handleClick(e) {
+      var _this$props2 = this.props,
+        player = _this$props2.player,
+        actions = _this$props2.actions,
+        clickable = _this$props2.clickable;
+      if (!this.canBeClicked(player, e) || !clickable) {
+        return;
+      }
+      this.togglePlay(player, actions);
+      // e.preventDefault();
+    };
+    _proto.handleDoubleClick = function handleDoubleClick(e) {
+      var _this$props3 = this.props,
+        player = _this$props3.player,
+        actions = _this$props3.actions,
+        dblclickable = _this$props3.dblclickable;
+      if (!this.canBeClicked(player, e) || !dblclickable) {
+        return;
+      }
+      this.toggleFullscreen(player, actions);
+      // e.preventDefault();
+    }
+
+    // this component dose not render anything
+    // it's just for the key down event
+    ;
+    _proto.render = function render() {
+      return null;
+    };
+    return Shortcut;
+  }(React.Component);
+  Shortcut.defaultProps = {
+    clickable: true,
+    dblclickable: true
+  };
+  Shortcut.displayName = 'Shortcut';
+
+  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.js.map