@scaleflex/widget-media-player 4.1.0 → 4.4.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.4.0](https://code.scaleflex.cloud/scaleflex/widget/compare/v4.1.0...v4.4.0) (2025-10-07)
+
+**Note:** Version bump only for package @scaleflex/widget-media-player
+
+
+
+
+
+# [4.3.0](https://code.scaleflex.cloud/scaleflex/widget/compare/v4.1.0...v4.3.0) (2025-10-02)
+
+**Note:** Version bump only for package @scaleflex/widget-media-player
+
+
+
+
+
+# [4.2.0](https://code.scaleflex.cloud/scaleflex/widget/compare/v4.1.0...v4.2.0) (2025-10-02)
+
+**Note:** Version bump only for package @scaleflex/widget-media-player
+
+
+
+
+
 # [4.1.0](https://code.scaleflex.cloud/scaleflex/widget/compare/v4.0.8...v4.1.0) (2025-10-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/widget-media-player",
-  "version": "4.1.0",
+  "version": "4.4.0",
   "description": "Media player integration for video/audio files with Scaleflex",
   "license": "MIT",
   "main": "lib/index.js",
@@ -15,7 +15,7 @@
   "dependencies": {
     "@scaleflex/icons": "^3.0.0-beta.11",
     "@scaleflex/ui": "^3.0.0-beta.11",
-    "@scaleflex/widget-common": "^4.1.0",
+    "@scaleflex/widget-common": "^4.4.0",
     "video.js": "^8.10.0"
   },
   "devDependencies": {
@@ -30,5 +30,5 @@
     "react-dom": ">=19.0.0",
     "react-redux": "^8.1.1"
   },
-  "gitHead": "471120d67066617a0d8824eae11b07d1f2259473"
+  "gitHead": "04b8ec545c4f10be89f5a44eed954acf8433360c"
 }

package/lib/components/AudioPlayer.js

@@ -1,21 +0,0 @@
-import { useMemo } from 'react';
-import MediaControls from './MediaControls';
-import { jsx as _jsx } from "react/jsx-runtime";
-var AudioPlayer = function AudioPlayer(_ref) {
-  var mediaOptions = _ref.mediaOptions;
-  var _ref2 = mediaOptions || {},
-    audioPath = _ref2.audioPath;
-  var audioRef = useMemo(function () {
-    return {
-      current: new Audio(audioPath)
-    };
-  }, [audioPath]);
-  if (!audioPath) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(MediaControls, {
-    mediaRef: audioRef,
-    isPlayerReady: true
-  });
-};
-export default AudioPlayer;

package/lib/components/MediaControls.js

@@ -1,324 +0,0 @@
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import { useRef, useState, useEffect } from 'react';
-import { Play, Pause } from '@scaleflex/icons';
-import TimeLapse from './Timelapse';
-import PlaybackSpeedMenu from './PlaybackSpeedMenu';
-import Styled from './MediaPlayer.styled';
-import VolumeControl from './VolumeControl';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var MediaControls = function MediaControls(_ref) {
-  var extraControllers = _ref.extraControllers,
-    mediaRef = _ref.mediaRef,
-    isPlayerReady = _ref.isPlayerReady,
-    _ref$dismissInitialLo = _ref.dismissInitialLoad,
-    dismissInitialLoad = _ref$dismissInitialLo === void 0 ? false : _ref$dismissInitialLo,
-    onKeyboardFullscreenKeyDown = _ref.onKeyboardFullscreenKeyDown,
-    mediaPlayerRef = _ref.mediaPlayerRef;
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    trackProgress = _useState2[0],
-    setTrackProgress = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isPlaying = _useState4[0],
-    setIsPlaying = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    trackEnded = _useState6[0],
-    setTrackEnded = _useState6[1];
-  var _useState7 = useState(0),
-    _useState8 = _slicedToArray(_useState7, 2),
-    duration = _useState8[0],
-    setDuration = _useState8[1];
-  var _useState9 = useState(1),
-    _useState10 = _slicedToArray(_useState9, 2),
-    playbackSpeed = _useState10[0],
-    setPlaybackSpeed = _useState10[1];
-  var _useState11 = useState(),
-    _useState12 = _slicedToArray(_useState11, 2),
-    playbackMenuAnchor = _useState12[0],
-    setPlaybackMenuAnchor = _useState12[1];
-  var _useState13 = useState(1),
-    _useState14 = _slicedToArray(_useState13, 2),
-    volumeLevel = _useState14[0],
-    setVolumeLevel = _useState14[1];
-  var _useState15 = useState(0),
-    _useState16 = _slicedToArray(_useState15, 2),
-    beforeMutedVolumeLevel = _useState16[0],
-    setBeforeMutedVolumeLevel = _useState16[1];
-  var _useState17 = useState(false),
-    _useState18 = _slicedToArray(_useState17, 2),
-    isSeeking = _useState18[0],
-    setIsSeeking = _useState18[1];
-  var _useState19 = useState(false),
-    _useState20 = _slicedToArray(_useState19, 2),
-    isAudioSliderOpen = _useState20[0],
-    setIsAudioSliderOpen = _useState20[1];
-  var _useState21 = useState(false),
-    _useState22 = _slicedToArray(_useState21, 2),
-    isMuted = _useState22[0],
-    setIsMuted = _useState22[1];
-  var controlsContainerRef = useRef();
-  var intervalRef = useRef();
-  var audioSliderTimerRef = useRef();
-  var isReadyRef = useRef(false);
-  var containerRef = mediaPlayerRef !== null && mediaPlayerRef !== void 0 && mediaPlayerRef.current ? mediaPlayerRef : controlsContainerRef;
-  var resetControls = function resetControls() {
-    setVolumeLevel(1);
-    setPlaybackSpeed(1);
-    setTrackProgress(0);
-  };
-  var handleTogglePlaybackMenu = function handleTogglePlaybackMenu(event) {
-    if (!playbackMenuAnchor) {
-      setPlaybackMenuAnchor(event.currentTarget);
-    } else {
-      setPlaybackMenuAnchor();
-    }
-  };
-  var handleChangePlaybackSpeed = function handleChangePlaybackSpeed(value) {
-    return function () {
-      setPlaybackSpeed(value);
-      handleTogglePlaybackMenu();
-      mediaRef.current.playbackRate = value;
-    };
-  };
-  var startTimer = function startTimer() {
-    // Clear any timers already running
-    clearInterval(intervalRef.current);
-    intervalRef.current = setInterval(function () {
-      if (mediaRef.current.ended) {
-        setTrackEnded(true);
-        setIsPlaying(false);
-      } else {
-        setTrackProgress(mediaRef.current.currentTime);
-      }
-    }, [1000]);
-  };
-  var onScrub = function onScrub(_, value) {
-    // Clear any timers already running
-    clearInterval(intervalRef.current);
-    mediaRef.current.currentTime = value;
-    setIsSeeking(true);
-    setIsPlaying(false);
-    setTrackProgress(mediaRef.current.currentTime);
-  };
-  var onScrubEnd = function onScrubEnd() {
-    // If not already playing, start
-    if (!isPlaying) {
-      setIsPlaying(true);
-    }
-    setIsSeeking(false);
-    startTimer();
-  };
-  var checkAndSetIsMutedBySlider = function checkAndSetIsMutedBySlider(value) {
-    setIsMuted(value === 0);
-  };
-  var handleChangeVolumeLevel = function handleChangeVolumeLevel(value) {
-    var adaptedValue = Math.min(Math.max(value, 0), 1);
-    if (!isFinite(adaptedValue)) {
-      return;
-    }
-    setVolumeLevel(adaptedValue);
-    mediaRef.current.volume = adaptedValue;
-  };
-  var handleToggleMute = function handleToggleMute() {
-    var nextIsMuted;
-    setIsMuted(function (prevIsMuted) {
-      nextIsMuted = !prevIsMuted;
-      return nextIsMuted;
-    });
-    var nextVolumeLevel = 0;
-    if (nextIsMuted) {
-      setBeforeMutedVolumeLevel(volumeLevel);
-      nextVolumeLevel = 0;
-    } else if (volumeLevel > 0.1) {
-      nextVolumeLevel = volumeLevel;
-    } else {
-      nextVolumeLevel = beforeMutedVolumeLevel;
-    }
-    handleChangeVolumeLevel(nextVolumeLevel);
-  };
-  var closeAudioSlider = function closeAudioSlider() {
-    setIsAudioSliderOpen(true);
-    clearTimeout(audioSliderTimerRef.current);
-    audioSliderTimerRef.current = setTimeout(function () {
-      setIsAudioSliderOpen(false);
-    }, [1000]);
-  };
-  var handleVolumeUp = function handleVolumeUp() {
-    setIsMuted(false);
-    handleChangeVolumeLevel((mediaRef.current.volume || 0) + 0.2);
-    closeAudioSlider();
-  };
-  var handleVolumeDown = function handleVolumeDown() {
-    var nextValue = (mediaRef.current.volume || 0) - 0.2;
-    handleChangeVolumeLevel(nextValue);
-    closeAudioSlider();
-  };
-  var handleSeek = function handleSeek(value) {
-    clearInterval(intervalRef.current);
-    var newTime = mediaRef.current.currentTime + value;
-    if (!isFinite(newTime)) {
-      return;
-    }
-    mediaRef.current.currentTime = newTime;
-    setTrackProgress(mediaRef.current.currentTime);
-    startTimer();
-  };
-  var handleCanPlay = function handleCanPlay() {
-    isReadyRef.current = true;
-    setDuration(mediaRef.current.duration);
-    handlePlay();
-  };
-  var handleKeyboardControls = function handleKeyboardControls(event) {
-    var keyCode = event.keyCode;
-    switch (keyCode) {
-      case 32: // space
-      case 75:
-        // 'k'
-        event.preventDefault();
-        return handlePlayPause();
-      case 39:
-        // arrowRight
-        event.preventDefault();
-        return handleSeek(5);
-      case 37:
-        // arrowLeft
-        event.preventDefault();
-        return handleSeek(-5);
-      case 38:
-        // arrowUp
-        event.preventDefault();
-        return handleVolumeUp();
-      case 40:
-        // arrowDown
-        event.preventDefault();
-        return handleVolumeDown();
-      case 70:
-        // 'f'
-        if (typeof onKeyboardFullscreenKeyDown === 'function') {
-          event.preventDefault();
-          onKeyboardFullscreenKeyDown();
-        }
-        return;
-      case 77:
-        // 'm'
-        event.preventDefault();
-        return handleToggleMute();
-    }
-  };
-  var handlePlay = function handlePlay() {
-    if (!isReadyRef.current) return;
-    mediaRef.current.play();
-  };
-  var handlePause = function handlePause() {
-    if (!isReadyRef.current) return;
-    mediaRef.current.pause();
-  };
-  var onPlay = function onPlay() {
-    setIsPlaying(true);
-    startTimer();
-  };
-  var onPause = function onPause() {
-    setIsPlaying(false);
-    clearInterval(intervalRef.current);
-  };
-  var handlePlayPause = function handlePlayPause() {
-    if (mediaRef.current.paused) {
-      handlePlay();
-    } else {
-      handlePause();
-    }
-  };
-  useEffect(function () {
-    if (isPlayerReady && (mediaRef === null || mediaRef === void 0 ? void 0 : mediaRef.current) !== null) {
-      var _containerRef$current;
-      if (!dismissInitialLoad) {
-        mediaRef.current.load();
-      }
-      mediaRef.current.addEventListener('canplaythrough', handleCanPlay);
-      mediaRef.current.addEventListener('play', onPlay);
-      mediaRef.current.addEventListener('pause', onPause);
-      (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.addEventListener('keydown', handleKeyboardControls);
-
-      // Pause and clean up on unmount
-      return function () {
-        var _containerRef$current2;
-        if (mediaRef.current) {
-          mediaRef.current.pause();
-          mediaRef.current.removeEventListener('canplaythrough', handleCanPlay);
-          mediaRef.current.removeEventListener('play', onPlay);
-          mediaRef.current.removeEventListener('pause', onPause);
-        }
-        (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.removeEventListener('keydown', handleKeyboardControls);
-        resetControls();
-        clearInterval(intervalRef.current);
-      };
-    }
-  }, [isPlayerReady, mediaRef]);
-  useEffect(function () {
-    checkAndSetIsMutedBySlider(volumeLevel);
-  }, [volumeLevel]);
-  return /*#__PURE__*/_jsxs(Styled.MediaControls, {
-    ref: controlsContainerRef,
-    children: [/*#__PURE__*/_jsx(Styled.SeekSlider, {
-      value: trackProgress || 0,
-      step: 1,
-      min: 0,
-      hideAnnotation: true,
-      labelTooltip: "off",
-      max: duration || 0,
-      $forceShow: trackEnded || !isPlaying || isSeeking,
-      onChange: onScrub,
-      onMouseUp: onScrubEnd
-    }), /*#__PURE__*/_jsxs(Styled.ControlsWrapper, {
-      children: [/*#__PURE__*/_jsxs(Styled.PlayButton, {
-        color: "basic",
-        size: "lg",
-        disabled: !isPlaying && !isReadyRef.current,
-        $disableHover: !isReadyRef.current,
-        onClick: handlePlayPause,
-        children: [/*#__PURE__*/_jsx(Styled.LoadingIcon, {
-          $hidden: isReadyRef.current,
-          size: 40
-        }), /*#__PURE__*/_jsx(Styled.Icon, {
-          $hidden: isPlaying,
-          icon: /*#__PURE__*/_jsx(Play, {
-            size: 18
-          })
-        }), /*#__PURE__*/_jsx(Styled.Icon, {
-          $hidden: !isPlaying,
-          icon: /*#__PURE__*/_jsx(Pause, {
-            size: 18
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Styled.PlaybackButton, {
-        color: "basic",
-        onClick: handleTogglePlaybackMenu,
-        children: "".concat(playbackSpeed, "x")
-      }), /*#__PURE__*/_jsx(VolumeControl, {
-        value: volumeLevel,
-        onChange: handleChangeVolumeLevel,
-        isAudioSliderOpen: isAudioSliderOpen,
-        setIsAudioSliderOpen: setIsAudioSliderOpen,
-        isMuted: isMuted,
-        toggleMute: handleToggleMute,
-        closeAudioSlider: closeAudioSlider
-      }), /*#__PURE__*/_jsx(TimeLapse, {
-        trackProgress: trackProgress,
-        duration: duration
-      }), typeof extraControllers === 'function' && extraControllers()]
-    }), /*#__PURE__*/_jsx(PlaybackSpeedMenu, {
-      value: playbackSpeed,
-      onClose: handleTogglePlaybackMenu,
-      onClick: handleChangePlaybackSpeed,
-      anchor: playbackMenuAnchor
-    })]
-  });
-};
-export default MediaControls;

package/lib/components/MediaPlayer.styled.js

@@ -1,95 +0,0 @@
-var _excluded = ["icon"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-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 _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-import { cloneElement } from 'react';
-import { FV, PC } from '@scaleflex/widget-common';
-import styled, { css } from 'styled-components';
-import { Slider as SfxSlider, Menu as SfxMenu, IconButton, Button } from '@scaleflex/ui/core';
-import { Loading } from '@scaleflex/icons';
-var MediaControls = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  margin-top: -14px;\n"])));
-var SeekSlider = styled(SfxSlider)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  appearance: none;\n  height: 4px;\n  border: 0;\n  padding: 0;\n  border-radius: 0;\n  transition: height 150ms linear;\n\n  .SfxSlider-rail {\n    background: ", ";\n    border: inherit;\n    border-radius: inherit;\n  }\n\n  .SfxSlider-Track {\n    background: ", ";\n    border: inherit;\n    border-radius: inherit;\n    transition: height 100ms linear;\n  }\n\n  .SfxSlider-thumb {\n    background: ", ";\n    width: 0;\n    height: 0;\n    transition: width 150ms linear, height 150ms linear;\n    transform: translate(0, -50%);\n  }\n\n  ", "\n\n  &:hover {\n    height: 6px;\n\n    .SfxSlider-thumb {\n      width: 15px;\n      height: 15px;\n    }\n\n    .SfxSlider-Track {\n      background: ", ";\n    }\n  }\n"])), function (_ref) {
-  var palette = _ref.theme.palette;
-  return palette[PC.IconsPlaceholder];
-}, function (_ref2) {
-  var palette = _ref2.theme.palette;
-  return palette[PC.IconsMuted];
-}, function (_ref3) {
-  var palette = _ref3.theme.palette;
-  return palette[PC.AccentStateless];
-}, function (_ref4) {
-  var $forceShow = _ref4.$forceShow;
-  return $forceShow && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      height: 6px;\n\n      .SfxSlider-thumb {\n        width: 15px;\n        height: 15px;\n      }\n\n      .SfxSlider-Track {\n        background: ", ";\n      }\n  "])), function (_ref5) {
-    var palette = _ref5.theme.palette;
-    return palette[PC.AccentStateless];
-  });
-}, function (_ref6) {
-  var palette = _ref6.theme.palette;
-  return palette[PC.AccentStateless];
-});
-var ControlsWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  column-gap: 12px;\n  padding: 10px calc(24px - 6px);\n"])));
-var TimeLapse = styled.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0;\n  color: ", ";\n  ", ";\n"])), function (_ref7) {
-  var palette = _ref7.theme.palette;
-  return palette[PC.TextSecondary];
-}, function (_ref8) {
-  var typography = _ref8.theme.typography;
-  return typography.font[FV.LabelLargeEmphasis];
-});
-var Menu = styled(SfxMenu)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  transition: all 200ms ease-out;\n  margin-bottom: 5px;\n  ", "\n"])), function (_ref9) {
-  var $isOpen = _ref9.$isOpen;
-  return !$isOpen && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    opacity: 0;\n  "])));
-});
-var VolumeSlider = styled(SfxSlider)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  border: 0;\n  width: 0;\n  border-radius: 4px;\n  height: 2px;\n  transition: margin .2s cubic-bezier(0.4,0,1,1), width .2s cubic-bezier(0.4,0,1,1);\n\n  .SfxSlider-rail {\n    background: ", ";\n    border: inherit;\n    border-radius: inherit;\n  }\n\n  .SfxSlider-Track {\n    background: ", ";\n    border: inherit;\n    transition: height 100ms linear;\n  }\n\n  .SfxSlider-thumb {\n    background: ", ";\n    transition: width 150ms linear, height 150ms linear;\n    width: 8px;\n    height: 8px;\n    opacity: 0;\n    transition: opacity 100ms ease-out;\n  }\n"])), function (_ref10) {
-  var palette = _ref10.theme.palette;
-  return palette[PC.BorderPrimaryStateless];
-}, function (_ref11) {
-  var palette = _ref11.theme.palette;
-  return palette[PC.IconsPrimary];
-}, function (_ref12) {
-  var palette = _ref12.theme.palette;
-  return palette[PC.IconsPrimary];
-});
-var PlayButton = styled(IconButton)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: relative;\n\n  &:active, &:focus {\n    background-color: transparent;\n  }\n\n  &:hover {\n    background-color: transparent;\n\n    ", "\n  }\n"])), function (_ref13) {
-  var $disableHover = _ref13.$disableHover;
-  return $disableHover && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      background-color: transparent;\n    "])));
-});
-var PlaybackButton = styled(Button)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  border: 0;\n  min-width: 40px;\n"])));
-var LoadingIcon = styled(Loading)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  position: absolute;\n  animation: spinner 2s linear infinite;\n  top: calc(50% - 20.5px);\n  left: calc(50% - 20.5px);\n  transition: opacity 100ms ease-in-out;\n  color: ", ";\n\n  ", "\n"])), function (_ref14) {
-  var palette = _ref14.theme.palette;
-  return palette[PC.AccentStateless];
-}, function (_ref15) {
-  var $hidden = _ref15.$hidden;
-  return $hidden && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    opacity: 0;\n    visibility: hidden;\n  "])));
-});
-var VolumeControlWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  column-gap: 10px;\n\n", "\n\n  &:hover ", " {\n    width: 56px;\n\n    .SfxSlider-thumb {\n      opacity: 1;\n    }\n  }\n  "])), function (_ref16) {
-  var $shown = _ref16.$shown;
-  return $shown && css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    ", " {\n      width: 56px;\n\n      .SfxSlider-thumb {\n        opacity: 1;\n      }\n    }\n  "])), VolumeSlider);
-}, VolumeSlider);
-var VolumeIconButton = styled(IconButton)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 40px;\n  height: 40px;\n\n  &:hover, &:active, &:focus {\n    background-color: transparent;\n  }\n"])));
-var Icon = styled(function (_ref17) {
-  var icon = _ref17.icon,
-    props = _objectWithoutProperties(_ref17, _excluded);
-  return /*#__PURE__*/cloneElement(icon, props);
-})(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  transition: all 150ms ease-out;\n  color: ", ";\n  background: transparent;\n\n  ", "\n"])), function (_ref18) {
-  var palette = _ref18.theme.palette;
-  return palette[PC.IconsPrimary];
-}, function (_ref19) {
-  var $hidden = _ref19.$hidden;
-  return $hidden && css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    opacity: 0;\n    visibility: hidden;\n  "])));
-});
-var Styled = {
-  MediaControls: MediaControls,
-  ControlsWrapper: ControlsWrapper,
-  PlayButton: PlayButton,
-  PlaybackButton: PlaybackButton,
-  LoadingIcon: LoadingIcon,
-  SeekSlider: SeekSlider,
-  TimeLapse: TimeLapse,
-  Menu: Menu,
-  VolumeControlWrapper: VolumeControlWrapper,
-  VolumeSlider: VolumeSlider,
-  VolumeIconButton: VolumeIconButton,
-  Icon: Icon
-};
-export default Styled;

package/lib/components/PlaybackSpeedMenu.js

@@ -1,25 +0,0 @@
-import { MenuItem } from '@scaleflex/ui/core';
-import Styled from './MediaPlayer.styled';
-import { jsx as _jsx } from "react/jsx-runtime";
-var PLAYBACK_OPTIONS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
-var PlaybackSpeedMenu = function PlaybackSpeedMenu(_ref) {
-  var value = _ref.value,
-    anchor = _ref.anchor,
-    onClose = _ref.onClose,
-    onClick = _ref.onClick;
-  return /*#__PURE__*/_jsx(Styled.Menu, {
-    open: Boolean(anchor),
-    onClose: onClose,
-    anchorEl: anchor,
-    value: value,
-    position: "top-end",
-    $isOpen: Boolean(anchor),
-    children: PLAYBACK_OPTIONS.map(function (option) {
-      return /*#__PURE__*/_jsx(MenuItem, {
-        onClick: onClick(option),
-        children: option
-      }, option);
-    })
-  });
-};
-export default PlaybackSpeedMenu;

package/lib/components/Timelapse.js

@@ -1,17 +0,0 @@
-import formatSeconds from '@scaleflex/widget-utils/lib/formatSeconds';
-import Styled from './MediaPlayer.styled';
-import { jsx as _jsx } from "react/jsx-runtime";
-var formatSecondsToDuration = function formatSecondsToDuration(seconds) {
-  if (!seconds || !Number.isFinite(seconds)) return '00:00';
-  return formatSeconds(seconds);
-};
-var TimeLapse = function TimeLapse(_ref) {
-  var trackProgress = _ref.trackProgress,
-    duration = _ref.duration;
-  var formattedProgress = formatSecondsToDuration(trackProgress);
-  var formattedDuration = formatSecondsToDuration(duration);
-  return /*#__PURE__*/_jsx(Styled.TimeLapse, {
-    children: "".concat(formattedProgress, " / ").concat(formattedDuration)
-  });
-};
-export default TimeLapse;

package/lib/components/VideoPlayer/VideoPlayer.constants.js

@@ -1,28 +0,0 @@
-export var defaultVideoPlayerOptions = {
-  responsive: false,
-  controls: false,
-  children: [],
-  userActions: {},
-  autoplay: true,
-  html5: {
-    nativeControlsForTouch: false,
-    vhs: {
-      overrideNative: true,
-      maxPlaylistRetries: 11,
-      // 11 is a random number for max retries not expected to have more than such a number?
-      limitRenditionByPlayerDimensions: true,
-      useDevicePixelRatio: true,
-      enableLowInitialPlaylist: false,
-      bandwidth: 10500000
-    }
-  }
-};
-export var VIDEO_PLAYER_AUTO_QUALITY_ID = 'auto';
-export var qualityLevelPixelToResolution = {
-  '480p': 'SD',
-  '720p': 'HD',
-  '1080p': 'FHD',
-  '1440p': '2K / QHD',
-  '2160p': '4K / UHD',
-  '4320p': '8K / FUHD'
-};

package/lib/components/VideoPlayer/VideoPlayer.styled.js

@@ -1,32 +0,0 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-import styled from 'styled-components';
-import { PC, FV } from '@scaleflex/widget-common';
-import { IconButton, Menu, MenuItem } from '@scaleflex/ui/core';
-import StyledFileWindowPreviewBody from '@scaleflex/widget-explorer/lib/components/FileWindowPanel/Body/Body.styled';
-var ExtraControllers = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n  gap: 12px;\n"])));
-var ExtraControllerBtn = styled(IconButton)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-flex;\n"])));
-var VideoPlayerWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n"])));
-var VideoNodeWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  height: 75%;\n  width: 100%;\n  position: relative;\n\n  div[id^=\"vjs_video\"] {\n    width: 100%;\n    height: 100%;\n  }\n\n  video {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    outline: none;\n  }\n"])));
-var VideoPlayerControls = styled(StyledFileWindowPreviewBody.Footer)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background: ", ";\n  padding: 0;\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.palette[PC.BackgroundStateless];
-});
-var QualityLevelsMenu = styled(Menu)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: auto;\n"])));
-var QualityLevelsMenuLabel = styled(MenuItem)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  text-align: center;\n  justify-content: center;\n  color: ", ";\n  ", ";\n"])), function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.palette[PC.TextSecondary];
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.typography.font[FV.LabelMedium];
-});
-var Styled = {
-  ExtraControllers: ExtraControllers,
-  ExtraControllerBtn: ExtraControllerBtn,
-  VideoPlayerWrapper: VideoPlayerWrapper,
-  VideoNodeWrapper: VideoNodeWrapper,
-  VideoPlayerControls: VideoPlayerControls,
-  QualityLevelsMenu: QualityLevelsMenu,
-  QualityLevelsMenuLabel: QualityLevelsMenuLabel
-};
-export default Styled;

package/lib/components/VideoPlayer/VideoPlayer.utils.js

@@ -1,36 +0,0 @@
-var propsToProxify = ['playbackRate', 'ended', 'currentTime', 'volume', 'duration', 'paused', 'addEventListener', 'removeEventListener'];
-var nativeToCustomPropFns = {
-  addEventListener: 'on',
-  removeEventListener: 'off'
-};
-
-// as videojs support getting the params by using mehotds ex. player.volume()
-// and native js video/audio API is using property player.volume
-// then we are proxifying specific properties (used for the native ones also), to deal with them with a unified API
-// as getter/setter ex. (getting value -> player.volume) & (setting value -> player.volume = 1).
-// if u need to support more props that are newly added in MediaControls Component then add the prop name at the top array.
-export var proxifyPlayerPropGettersSetters = function proxifyPlayerPropGettersSetters(player) {
-  return new Proxy(player, {
-    get: function get(target, prop) {
-      return propsToProxify.includes(prop) ? target[prop] && target[prop]() || target[nativeToCustomPropFns[prop]] : typeof target[prop] === 'function' && target[prop].bind(target) || target[prop];
-    },
-    set: function set(obj, prop, value) {
-      if (typeof obj[prop] === 'function') {
-        obj[prop](value);
-      } else {
-        obj[prop] = value;
-      }
-      return true;
-    }
-  });
-};
-export var qualityLevelTransformer = function qualityLevelTransformer() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    height = _ref.height,
-    width = _ref.width,
-    id = _ref.id;
-  return {
-    id: id,
-    label: "".concat(Math.min(height, width), "p")
-  };
-};

package/lib/components/VideoPlayer/VideoPlayerQualityLevels.js

@@ -1,141 +0,0 @@
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import { useRef, useState, useEffect } from 'react';
-import { Optimization } from '@scaleflex/icons';
-import { Button, MenuItem } from '@scaleflex/ui/core';
-import debounce from '@scaleflex/widget-utils/lib/debounce';
-import { usePlugin } from '@scaleflex/widget-core/lib/hooks';
-import { PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
-import Styled from './VideoPlayer.styled';
-import { VIDEO_PLAYER_AUTO_QUALITY_ID, qualityLevelPixelToResolution } from './VideoPlayer.constants';
-import { qualityLevelTransformer } from './VideoPlayer.utils';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-var VideoPlayerQualityLevels = function VideoPlayerQualityLevels(_ref) {
-  var videoRef = _ref.videoRef,
-    isPlayerReady = _ref.isPlayerReady;
-  var _ref2 = usePlugin(PLUGINS_IDS.MEDIA_PLAYER) || {},
-    i18n = _ref2.i18n;
-  var qualityLevelsRef = useRef(null);
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    levelsAnchorEl = _useState2[0],
-    setLevelsAnchorEl = _useState2[1];
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    qualityLevels = _useState4[0],
-    setQualityLevels = _useState4[1];
-  var _useState5 = useState({
-      id: VIDEO_PLAYER_AUTO_QUALITY_ID,
-      label: i18n('mediaPlayerVideoPlayerAutoQualityLabel')
-    }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    selectedQualityLevel = _useState6[0],
-    setSelectedQualityLevel = _useState6[1];
-  var assignQualityLevels = debounce(function () {
-    if (!qualityLevelsRef.current) {
-      return;
-    }
-    if (qualityLevelsRef.current.length > 1) {
-      var newLevels = Array.from(qualityLevelsRef.current, qualityLevelTransformer);
-      var videoPlayerAutoQualityLevel = {
-        id: VIDEO_PLAYER_AUTO_QUALITY_ID,
-        label: i18n('mediaPlayerVideoPlayerAutoQualityLabel')
-      };
-      newLevels.push(videoPlayerAutoQualityLevel);
-      setQualityLevels(newLevels);
-    }
-  }, 10);
-  var toggleQualityLevelsMenu = function toggleQualityLevelsMenu(e) {
-    setLevelsAnchorEl(levelsAnchorEl ? null : e.currentTarget);
-  };
-  var changeQualityLevel = debounce(function (newQualityLevel) {
-    if (newQualityLevel.id === selectedQualityLevel.id) {
-      return;
-    }
-    setSelectedQualityLevel(newQualityLevel);
-    var isAutoQuality = newQualityLevel.id === VIDEO_PLAYER_AUTO_QUALITY_ID;
-    var qualityLevels = Array.from(qualityLevelsRef.current);
-
-    // We are disabling the current quality level first, after enabling the newly selected level and disabling others..
-    // avoiding to having fallback quality level triggered if we disabled the current quality level before enabling the newly one.
-    var currentSelectedQualityIndex;
-    var newSelectedQualityIndex;
-    qualityLevels.forEach(function (qualityLevel, index) {
-      if (qualityLevel.id === selectedQualityLevel.id) {
-        currentSelectedQualityIndex = index;
-        return;
-      }
-      if (qualityLevel.id === newQualityLevel.id) {
-        newSelectedQualityIndex = index;
-        return;
-      }
-      qualityLevel.enabled = qualityLevel.id === newQualityLevel.id || isAutoQuality;
-    });
-    if (currentSelectedQualityIndex >= 0) {
-      qualityLevels[currentSelectedQualityIndex].enabled = isAutoQuality;
-    }
-    if (newSelectedQualityIndex >= 0) {
-      qualityLevels[newSelectedQualityIndex].enabled = true;
-    }
-  }, 5);
-  var getQualityResolution = function getQualityResolution(qualityLevel) {
-    var resolution = qualityLevelPixelToResolution[qualityLevel];
-    return resolution ? " (".concat(resolution, ")") : '';
-  };
-  useEffect(function () {
-    if (isPlayerReady) {
-      if (videoRef.current) {
-        qualityLevelsRef.current = videoRef.current.qualityLevels();
-      }
-      if (qualityLevelsRef.current) {
-        // we are debouncing the callback fn. cause it is going to be called on each quality level added.
-        qualityLevelsRef.current.on('addqualitylevel', assignQualityLevels);
-      }
-    }
-    return function () {
-      if (qualityLevelsRef.current) {
-        qualityLevelsRef.current.off('addqualitylevel', assignQualityLevels);
-        qualityLevelsRef.current = null;
-      }
-    };
-  }, [isPlayerReady]);
-  if (qualityLevels.length === 0) {
-    return null;
-  }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(Styled.QualityLevelsMenu, {
-      anchorEl: levelsAnchorEl,
-      onClose: toggleQualityLevelsMenu,
-      open: Boolean(levelsAnchorEl),
-      position: "top",
-      hideScroll: false,
-      enableOverlay: true,
-      children: [/*#__PURE__*/_jsx(Styled.QualityLevelsMenuLabel, {
-        disabled: true,
-        children: i18n('mediaPlayerVideoPlayerQualityLabel')
-      }), qualityLevels.map(function (quality) {
-        return quality && /*#__PURE__*/_jsx(MenuItem, {
-          onClick: function onClick() {
-            return changeQualityLevel(quality);
-          },
-          active: selectedQualityLevel.id === quality.id,
-          size: "sm",
-          children: "".concat(quality.label).concat(getQualityResolution(quality.label))
-        }, quality.id);
-      })]
-    }), /*#__PURE__*/_jsx(Button, {
-      size: "sm",
-      color: "link-basic-secondary",
-      onClick: toggleQualityLevelsMenu,
-      startIcon: /*#__PURE__*/_jsx(Optimization, {
-        size: 18
-      }),
-      children: selectedQualityLevel.label
-    })]
-  });
-};
-export default VideoPlayerQualityLevels;

package/lib/components/VideoPlayer/index.js

@@ -1,142 +0,0 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["width", "height", "sources", "setVideoRef"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-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; }
-import { useEffect, useRef, useState } from 'react';
-import videoJs from 'video.js';
-import { FitScreen } from '@scaleflex/icons';
-import toggleElementFullscreen from '@scaleflex/widget-utils/lib/toggleElementFullscreen';
-import MediaControls from '../MediaControls';
-import Styled from './VideoPlayer.styled';
-import { proxifyPlayerPropGettersSetters } from './VideoPlayer.utils';
-import { defaultVideoPlayerOptions } from './VideoPlayer.constants';
-import VideoPlayerQualityLevels from './VideoPlayerQualityLevels';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var VideoPlayer = function VideoPlayer(_ref) {
-  var mediaOptions = _ref.mediaOptions,
-    onReady = _ref.onReady,
-    onError = _ref.onError,
-    beforeControlsElement = _ref.beforeControlsElement;
-  var _ref2 = mediaOptions || {},
-    width = _ref2.width,
-    height = _ref2.height,
-    sources = _ref2.sources,
-    setVideoRef = _ref2.setVideoRef,
-    moreOptions = _objectWithoutProperties(_ref2, _excluded);
-  var videoPlayerRef = useRef(null);
-  var videoNodeWrapperRef = useRef(null);
-  var videoNodeRef = useRef(null);
-  var playerRef = useRef(null);
-  var errorAttempts = useRef(0);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isPlayerReady = _useState2[0],
-    setIsPlayerReady = _useState2[1];
-  var handleSourceError = function handleSourceError(error) {
-    if (++errorAttempts.current === sources.length && typeof onError === 'function') {
-      onError(error);
-    }
-  };
-  var assignPlayerSources = function assignPlayerSources() {
-    var player = playerRef.current;
-    if (!player || JSON.stringify(sources) === JSON.stringify(player.currentSources())) {
-      return;
-    }
-    player.autoplay(true);
-    player.src(sources);
-  };
-  useEffect(function () {
-    if (!playerRef.current && videoNodeRef.current) {
-      var player = videoJs(videoNodeRef.current, _objectSpread(_objectSpread({}, defaultVideoPlayerOptions), {}, {
-        sources: sources,
-        width: width,
-        height: height
-      }, moreOptions), function () {
-        setIsPlayerReady(true);
-        if (typeof onReady === 'function') {
-          onReady(player);
-        }
-      });
-      player.on('error', handleSourceError);
-      playerRef.current = proxifyPlayerPropGettersSetters(player);
-      if (typeof setVideoRef === 'function') {
-        setVideoRef(videoNodeRef.current);
-      }
-    } else {
-      assignPlayerSources();
-    }
-  }, [sources]);
-  useEffect(function () {
-    var player = playerRef.current;
-    return function () {
-      if (player && !player.isDisposed()) {
-        player.dispose();
-        player.off('error', handleSourceError);
-        playerRef.current = null;
-      }
-    };
-  }, []);
-  var handleVideoFullScreenClick = function handleVideoFullScreenClick() {
-    if (!videoPlayerRef.current) {
-      return;
-    }
-    toggleElementFullscreen(videoPlayerRef.current);
-  };
-  var toggleVideo = function toggleVideo() {
-    if (!playerRef.current) {
-      return;
-    }
-    if (playerRef.current.paused) {
-      playerRef.current.play();
-    } else {
-      playerRef.current.pause();
-    }
-  };
-  var renderExtraControllers = function renderExtraControllers() {
-    return /*#__PURE__*/_jsxs(Styled.ExtraControllers, {
-      children: [/*#__PURE__*/_jsx(VideoPlayerQualityLevels, {
-        videoRef: playerRef,
-        isPlayerReady: isPlayerReady
-      }), /*#__PURE__*/_jsx(Styled.ExtraControllerBtn, {
-        size: "lg",
-        color: "basic",
-        onClick: handleVideoFullScreenClick,
-        children: /*#__PURE__*/_jsx(FitScreen, {
-          size: 18
-        })
-      })]
-    });
-  };
-  return /*#__PURE__*/_jsxs(Styled.VideoPlayerWrapper, {
-    ref: videoPlayerRef,
-    children: [/*#__PURE__*/_jsxs(Styled.VideoNodeWrapper, {
-      ref: videoNodeWrapperRef,
-      onClick: toggleVideo,
-      onDoubleClick: handleVideoFullScreenClick,
-      children: [/*#__PURE__*/_jsx("video", {
-        ref: videoNodeRef
-      }), Boolean(beforeControlsElement) && beforeControlsElement]
-    }), /*#__PURE__*/_jsx(Styled.VideoPlayerControls, {
-      children: /*#__PURE__*/_jsx(MediaControls, {
-        extraControllers: renderExtraControllers,
-        mediaPlayerRef: videoPlayerRef,
-        mediaRef: playerRef,
-        isPlayerReady: isPlayerReady,
-        onKeyboardFullscreenKeyDown: handleVideoFullScreenClick,
-        dismissInitialLoad: true
-      })
-    })]
-  });
-};
-export default VideoPlayer;

package/lib/components/VolumeControl.js

@@ -1,49 +0,0 @@
-import { Volume, Mute } from '@scaleflex/icons';
-import Styled from './MediaPlayer.styled';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var VolumeControl = function VolumeControl(_ref) {
-  var value = _ref.value,
-    onChange = _ref.onChange,
-    isMuted = _ref.isMuted,
-    toggleMute = _ref.toggleMute,
-    isAudioSliderOpen = _ref.isAudioSliderOpen,
-    setIsAudioSliderOpen = _ref.setIsAudioSliderOpen,
-    closeAudioSlider = _ref.closeAudioSlider;
-  var onScrubStart = function onScrubStart(_, value) {
-    onChange(value);
-    setIsAudioSliderOpen(true);
-  };
-  var onScrubEnd = function onScrubEnd() {
-    closeAudioSlider();
-    setIsAudioSliderOpen(false);
-  };
-  return /*#__PURE__*/_jsxs(Styled.VolumeControlWrapper, {
-    $shown: isAudioSliderOpen,
-    children: [/*#__PURE__*/_jsxs(Styled.VolumeIconButton, {
-      size: "lg",
-      onClick: toggleMute,
-      color: "basic",
-      children: [/*#__PURE__*/_jsx(Styled.Icon, {
-        $hidden: isMuted,
-        icon: /*#__PURE__*/_jsx(Volume, {
-          size: 18
-        })
-      }), /*#__PURE__*/_jsx(Styled.Icon, {
-        $hidden: !isMuted,
-        icon: /*#__PURE__*/_jsx(Mute, {
-          size: 18
-        })
-      })]
-    }), /*#__PURE__*/_jsx(Styled.VolumeSlider, {
-      hideAnnotation: true,
-      min: 0,
-      max: 1,
-      step: 0.1,
-      value: value !== null && value !== void 0 ? value : 1,
-      onChange: onScrubStart,
-      onMouseUp: onScrubEnd,
-      onKeyUp: onScrubEnd
-    })]
-  });
-};
-export default VolumeControl;

package/lib/defaultLocale.js

@@ -1,4 +0,0 @@
-export default {
-  mediaPlayerVideoPlayerAutoQualityLabel: 'Auto',
-  mediaPlayerVideoPlayerQualityLabel: 'Quality'
-};

package/lib/index.js

@@ -1,92 +0,0 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-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 _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-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 _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
-function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
-function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-import { Plugin } from '@scaleflex/widget-core';
-import Explorer from '@scaleflex/widget-explorer';
-import Translator from '@scaleflex/widget-utils/lib/Translator';
-import { PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
-import defaultLocale from './defaultLocale';
-import VideoPlayer from './components/VideoPlayer';
-import AudioPlayer from './components/AudioPlayer';
-
-// TODO: find a way to show version of the current plugin
-// why solution below isn't good?
-// first import doesn't work with webpack 5 as it was deprecated
-// second import fixes webpack 5 issue as it was mentioned in their docs
-// but it exposes our package.json to the client and it is mentioned as security rist in mutiple places
-// https://github.com/axelpale/genversion
-// https://stackoverflow.com/questions/64993118/error-should-not-import-the-named-export-version-imported-as-version
-// https://stackoverflow.com/questions/9153571/is-there-a-way-to-get-version-from-package-json-in-nodejs-code/10855054#10855054
-// import { version } from '../package.json'
-// import packageInfo from '../package.json'
-var MediaPlayer = /*#__PURE__*/function (_Plugin) {
-  // static VERSION = packageInfo.version
-
-  function MediaPlayer(filerobot) {
-    var _this;
-    var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    _classCallCheck(this, MediaPlayer);
-    _this = _callSuper(this, MediaPlayer, [filerobot, opts]);
-    _this.id = PLUGINS_IDS.MEDIA_PLAYER;
-    _this.title = 'media-player';
-    _this.type = 'editor';
-    _this.opts = opts;
-    _this.defaultLocale = {
-      strings: defaultLocale
-    };
-    _this.i18nInit();
-    return _this;
-  }
-  _inherits(MediaPlayer, _Plugin);
-  return _createClass(MediaPlayer, [{
-    key: "i18nInit",
-    value: function i18nInit() {
-      this.translator = new Translator([this.defaultLocale, this.filerobot.locale, this.opts.locale]);
-      this.i18n = this.translator.translate.bind(this.translator);
-      this.i18nArray = this.translator.translateArray.bind(this.translator);
-    }
-  }, {
-    key: "install",
-    value: function install() {
-      if (Explorer) {
-        this.mount(Explorer, this);
-      }
-    }
-  }, {
-    key: "uninstall",
-    value: function uninstall() {
-      this.unmount();
-    }
-  }, {
-    key: "render",
-    value: function render(_ref) {
-      var mediaOptions = _ref.mediaOptions,
-        onError = _ref.onError,
-        onReady = _ref.onReady,
-        beforeControlsElement = _ref.beforeControlsElement,
-        _ref$type = _ref.type,
-        type = _ref$type === void 0 ? 'audio' : _ref$type;
-      var isVideo = type === 'video';
-      return isVideo ? VideoPlayer({
-        mediaOptions: mediaOptions,
-        onError: onError,
-        onReady: onReady,
-        beforeControlsElement: beforeControlsElement
-      }) : AudioPlayer({
-        mediaOptions: mediaOptions,
-        beforeControlsElement: beforeControlsElement
-      });
-    }
-  }]);
-}(Plugin);
-export default MediaPlayer;