@scaleflex/widget-media-player 0.0.1

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

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

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

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

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

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

package/lib/index.js

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

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@scaleflex/widget-media-player",
+  "version": "0.0.1",
+  "description": "Media player integration for video/audio files with Scaleflex",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "files": [
+    "/dist",
+    "/lib",
+    "/types"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@scaleflex/icons": "^3.0.0-beta.11",
+    "@scaleflex/ui": "^3.0.0-beta.11",
+    "@scaleflex/widget-common": "^0.0.1",
+    "video.js": "^8.10.0"
+  },
+  "devDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "peerDependencies": {
+    "@reduxjs/toolkit": "^1.9.5",
+    "@scaleflex/widget-core": "^0.0.0",
+    "@scaleflex/widget-explorer": "^0.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "react-redux": "^8.1.1"
+  },
+  "gitHead": "64ea82e745b7deda36d6794863350e6671e9010d"
+}