@scaleflex/widget-media-player 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 scaleflex
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,69 @@
+# `@scaleflex/widget-media-player`
+
+[![Plugins][plugins-image]](#plugins)
+[![Website][filerobot-image]][sfx-url]
+[![Version][filerobot-version]][version-url]
+[![Scaleflex team][made-by-image]][sfx-url]
+[![License][license-image]][license-url]
+[![CodeSandbox][codeSandbox-image]][codeSandbox-url]
+
+
+<div align='center'>
+<img title="Scaleflex Widget logo" alt="Scaleflex Widget logo" src="https://cdn.scaleflex.com/plugins/filerobot-widget/assets/filerobot_widget_logo_with_fire.png?vh=b2ff09" width="140"/>
+</div>
+
+The media-player plugin provides player controls to audio/video files in [Scaleflex Media Asset Widget](https://www.npmjs.com/package/@scaleflex/widget-core).
+> Note: The supported playback audio/video formats are `audio/mpeg, audio/ogg, audio/wav, video/mp4, video/quicktime, video/3gpp, video/x-msvideo, video/webm, video/x-matroska`
+
+
+## Usage
+
+### NPM
+
+```bash
+npm install --save @scaleflex/widget-media-player
+```
+
+### YARN
+
+```bash
+yarn add @scaleflex/widget-media-player
+```
+
+then
+
+```js
+import MediaPlayer from '@scaleflex/widget-media-player
+...
+...
+...
+scaleflexWidget.use(MediaPlayer)
+```
+
+### CDN
+
+The plugin from CDN is found inside `Scaleflex` global object `Scaleflex.MediaPlayer`
+
+```js
+const MediaPlayer = window.ScaleflexWidget.MediaPlayer
+...
+...
+...
+scaleflexWidget.use(MediaPlayer)
+```
+
+<!-- Variables -->
+
+[npm-url]: https://www.npmjs.com/package/@scaleflex/widget-media-player
+[license-url]: https://opensource.org/licenses/MIT
+[sfx-url]: https://www.scaleflex.com/
+[version-url]: https://www.npmjs.com/package/@scaleflex/widget-media-player
+[codeSandbox-url]: https://codesandbox.io/s/filerobot-widget-v3-c5l9th
+
+[npm-image]: https://img.shields.io/npm/v/@telus/remark-config.svg?style=for-the-badge&logo=npm
+[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
+[made-by-image]: https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg?style=for-the-badge
+[plugins-image]: https://img.shields.io/static/v1?label=Scaleflex&message=Plugins&color=yellow&style=for-the-badge
+[filerobot-image]: https://img.shields.io/static/v1?label=Scaleflex&message=website&color=orange&style=for-the-badge
+[filerobot-version]: https://img.shields.io/npm/v/@scaleflex/widget-media-player?label=Version&style=for-the-badge&logo=npm
+[codeSandbox-image]: https://img.shields.io/badge/CodeSandbox-black?style=for-the-badge&logo=CodeSandbox

package/lib/components/AudioPlayer.js

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+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;