@uncinc/uncinc-react-kitchen-sink 2.5.5 → 2.6.0

package/dist/components/MediaPlayer/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import 'videojs-vimeo-tech';
+import 'videojs-youtube';
+import { MediaPlayerProps } from './types';
+import 'video.js/dist/video-js.css';
+import './style.scss';
+declare const MediaPlayer: React.FC<MediaPlayerProps>;
+export default MediaPlayer;

package/dist/components/MediaPlayer/index.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactHookVideojs = require("react-hook-videojs");
+var _reactI18next = require("react-i18next");
+require("videojs-vimeo-tech");
+require("videojs-youtube");
+require("video.js/dist/video-js.css");
+require("./style.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } // VideoJS plugins:
+var MediaPlayer = function MediaPlayer(_ref) {
+  var src = _ref.src,
+    type = _ref.type,
+    controls = _ref.controls,
+    posterUrl = _ref.posterUrl,
+    customOptions = _ref.options,
+    captions = _ref.captions,
+    audioOnly = _ref.audioOnly,
+    notSupportedMessage = _ref.notSupportedMessage,
+    className = _ref.className,
+    onPlay = _ref.onPlay,
+    onPause = _ref.onPause,
+    onEnded = _ref.onEnded,
+    onSeeking = _ref.onSeeking,
+    onVolumeChange = _ref.onVolumeChange,
+    onFullscreenChange = _ref.onFullscreenChange,
+    onError = _ref.onError;
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var classNames = (0, _classnames.default)('MediaPlayer', 'video-js', 'vjs-default-skin', 'vjs-big-play-centered', className);
+  var audioOnlyMode = (0, _react.useMemo)(function () {
+    return audioOnly || type.startsWith('audio');
+  }, [type, audioOnly]);
+  var controlBar = (0, _react.useMemo)(function () {
+    var videoJSControls = {
+      play: 'playToggle',
+      currentTime: 'currentTimeDisplay',
+      timeDivider: 'timeDivider',
+      duration: 'durationDisplay',
+      seekbar: 'progressControl',
+      captions: 'subsCapsButton',
+      volume: 'volumePanel',
+      fullscreen: 'fullscreenToggle'
+    };
+    var controlMapped = function controlMapped(control) {
+      return {
+        name: videoJSControls[control],
+        className: "MediaPlayer__control MediaPlayer__control--".concat(control)
+      };
+    };
+    if (controls === false || _typeof(controls) === 'object' && controls.length === 0) {
+      return false;
+    }
+    if (_typeof(controls) === 'object' && controls.length > 0) {
+      return {
+        children: controls.map(controlMapped)
+      };
+    }
+    return {
+      children: Object.keys(videoJSControls).map(controlMapped)
+    };
+  }, [controls]);
+
+  // Can be overridden by the custom options prop.
+  var defaultOptions = {
+    controls: true,
+    aspectRatio: '16:9',
+    audioOnlyMode: audioOnlyMode,
+    fluid: true,
+    notSupportedMessage: notSupportedMessage || t('organisms.media_player.not_supported_message'),
+    techOrder: ['html5', 'youtube', 'vimeo'],
+    poster: posterUrl,
+    controlBar: controlBar,
+    sources: [{
+      src: src,
+      type: type
+    }]
+  };
+  var options = _objectSpread(_objectSpread({}, defaultOptions), customOptions);
+  var videoJS = (0, _reactHookVideojs.useVideoJS)(options);
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  var Video = videoJS.Video,
+    player = videoJS.player,
+    ready = videoJS.ready;
+
+  // Passing down the VideoJS events.
+  (0, _react.useEffect)(function () {
+    if (ready) {
+      if (onPlay) {
+        player.one('play', function (event) {
+          return onPlay(player, event);
+        });
+      }
+      if (onPause) {
+        player.one('pause', function (event) {
+          return onPause(player, event);
+        });
+      }
+      if (onEnded) {
+        player.one('ended', function (event) {
+          return onEnded(player, event);
+        });
+      }
+      if (onSeeking) {
+        player.one('seeking', function (event) {
+          return onSeeking(player, event);
+        });
+      }
+      if (onVolumeChange) {
+        player.one('volumechange', function (event) {
+          return onVolumeChange(player, event);
+        });
+      }
+      if (onFullscreenChange) {
+        player.one('fullscreenchange', function (event) {
+          return onFullscreenChange(player, event);
+        });
+      }
+      if (onError) {
+        player.one('error', function (event) {
+          return onError(player, event);
+        });
+      }
+    }
+    // eslint-disable-next-line max-len
+  }, [onEnded, onError, onFullscreenChange, onPause, onPlay, onSeeking, onVolumeChange, player, ready]);
+  return /*#__PURE__*/_react.default.createElement(Video, {
+    className: classNames
+  }, !audioOnlyMode && captions && captions.map(function (caption) {
+    return /*#__PURE__*/_react.default.createElement("track", {
+      key: "caption:".concat(caption.language),
+      kind: "captions",
+      src: caption.src,
+      srcLang: caption.language,
+      label: caption.label || caption.language,
+      default: caption.default
+    });
+  }));
+};
+var _default = MediaPlayer;
+exports.default = _default;

package/dist/components/MediaPlayer/stories.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.FC<import("./types").MediaPlayerProps>;
+};
+export default _default;
+export declare const LocalVideo: (args: any) => React.JSX.Element;
+export declare const LocalAudio: (args: any) => React.JSX.Element;
+export declare const Youtube: (args: any) => React.JSX.Element;
+export declare const Vimeo: (args: any) => React.JSX.Element;
+export declare const WithCaptions: (args: any) => React.JSX.Element;
+export declare const Advanced: (args: any) => React.JSX.Element;

package/dist/components/MediaPlayer/stories.js

@@ -0,0 +1,146 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Youtube = exports.WithCaptions = exports.Vimeo = exports.LocalVideo = exports.LocalAudio = exports.Advanced = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ = _interopRequireDefault(require("."));
+var _nl = _interopRequireDefault(require("../../../.storybook/assets/videos/nl.vtt"));
+var _en = _interopRequireDefault(require("../../../.storybook/assets/videos/en.vtt"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var localVideo = 'https://www.uncinc.nl/sites/default/files/videos/unc-inc-office-film-v1.mp4';
+var _default = {
+  title: 'Organisms/MediaPlayer',
+  component: _.default
+};
+exports.default = _default;
+var LocalVideo = function LocalVideo(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    src: localVideo,
+    type: "video/mp4"
+  }, args));
+};
+exports.LocalVideo = LocalVideo;
+var LocalAudio = function LocalAudio(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    src: localVideo,
+    type: "audio/mp4",
+    audioOnly: true
+  }, args));
+};
+exports.LocalAudio = LocalAudio;
+var Youtube = function Youtube(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    src: "https://www.youtube.com/watch?v=eJHHZC46i1I",
+    type: "video/youtube"
+  }, args));
+};
+exports.Youtube = Youtube;
+var Vimeo = function Vimeo(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    src: "https://vimeo.com/153783319",
+    type: "video/vimeo"
+  }, args));
+};
+exports.Vimeo = Vimeo;
+var WithCaptions = function WithCaptions(args) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    src: localVideo,
+    type: "video/mp4",
+    captions: [{
+      src: _nl.default,
+      language: 'nl',
+      label: 'Nederlands',
+      default: true
+    }, {
+      src: _en.default,
+      language: 'en',
+      label: 'English'
+    }]
+  }, args));
+};
+exports.WithCaptions = WithCaptions;
+var Advanced = function Advanced(args) {
+  var _useState = (0, _react.useState)(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentTime = _useState4[0],
+    setCurrentTime = _useState4[1];
+  var _useState5 = (0, _react.useState)(1),
+    _useState6 = _slicedToArray(_useState5, 2),
+    volume = _useState6[0],
+    setVolume = _useState6[1];
+  var _useState7 = (0, _react.useState)(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    error = _useState8[0],
+    setError = _useState8[1];
+  var message = (0, _react.useMemo)(function () {
+    switch (status) {
+      case 'playing':
+        {
+          return 'Video is currently playing';
+        }
+      case 'paused':
+        {
+          return 'Video is paused';
+        }
+      case 'ended':
+        {
+          return 'Video has ended';
+        }
+      default:
+        {
+          return 'Player is ready';
+        }
+    }
+  }, [status]);
+  if (error) {
+    return /*#__PURE__*/_react.default.createElement("p", null, "The media player encountered an error: ", error);
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    src: localVideo,
+    type: "video/mp4",
+    controls: ['play', 'volume', 'seekbar', 'currentTime', 'fullscreen'],
+    posterUrl: "https://www.uncinc.nl/sites/default/files/styles/max_2000x2000/public/2022-06/20220525_unc_inc_bedrijfsrave_mr-4893.webp?itok=WRebIyrU",
+    notSupportedMessage: "This is a custom message which you see if a media file is not supported.",
+    className: "CustomizedMediaPlayer",
+    onPlay: function onPlay() {
+      return setStatus('playing');
+    },
+    onPause: function onPause() {
+      return setStatus('paused');
+    },
+    onEnded: function onEnded() {
+      return setStatus('ended');
+    },
+    onSeeking: function onSeeking(player) {
+      return setCurrentTime(player.currentTime());
+    },
+    onVolumeChange: function onVolumeChange(player) {
+      return setVolume(player.volume());
+    },
+    onError: function onError(player) {
+      return setError(player.error().message);
+    },
+    onFullscreenChange: function onFullscreenChange(player) {
+      if (player.isFullscreen()) {
+        console.log('Pssst! Secret message telling you the current video you are watching is in fullscreen.');
+      }
+    }
+  }, args)), /*#__PURE__*/_react.default.createElement("p", null, message), /*#__PURE__*/_react.default.createElement("p", null, "Volume: ", Math.round(volume * 100), "%"), currentTime > 0 && /*#__PURE__*/_react.default.createElement("p", null, "Current time: ", Math.round(currentTime), "s"));
+};
+exports.Advanced = Advanced;

package/dist/components/MediaPlayer/style.scss

@@ -0,0 +1,7 @@
+.MediaPlayer {
+  // Somehow video.js hides this by default, so we have to force it to show up.
+  // See for more info: https://stackoverflow.com/questions/15324061/show-the-current-time-of-the-video-instead-of-the-remaining-time-on-videojs
+  .vjs-time-control {
+    display: block;
+  }
+}

package/dist/components/MediaPlayer/types.d.ts

@@ -0,0 +1,24 @@
+import VideoJsTypes from 'video.js';
+export type MimeType = 'audio/3gpp' | 'audio/aac' | 'audio/flac' | 'audio/mpeg' | 'audio/mp3' | 'audio/mp4' | 'audio/ogg' | 'audio/wav' | 'audio/webm' | 'video/3gpp' | 'video/mpeg' | 'video/mpeg' | 'video/mp4' | 'video/ogg' | 'video/quicktime' | 'video/webm' | 'video/youtube' | 'video/vimeo';
+export type Control = 'play' | 'currentTime' | 'timeDivider' | 'duration' | 'seekbar' | 'captions' | 'volume' | 'fullscreen';
+export type VideoJSControls = {
+    [K in Control]: string;
+};
+export type MediaPlayerProps = {
+    src: string;
+    type: MimeType;
+    controls?: Control[] | false;
+    posterUrl?: string;
+    options?: VideoJsTypes.PlayerOptions;
+    captions?: VideoJsTypes.TextTrackOptions[];
+    audioOnly?: boolean;
+    notSupportedMessage?: string;
+    className?: string;
+    onPlay?: (player: VideoJsTypes.Player, event: VideoJsTypes.EventTarget) => void;
+    onPause?: (player: VideoJsTypes.Player, event: VideoJsTypes.EventTarget) => void;
+    onEnded?: (player: VideoJsTypes.Player, event: VideoJsTypes.EventTarget) => void;
+    onSeeking?: (player: VideoJsTypes.Player, event: VideoJsTypes.EventTarget) => void;
+    onVolumeChange?: (player: VideoJsTypes.Player, event: VideoJsTypes.EventTarget) => void;
+    onFullscreenChange?: (player: VideoJsTypes.Player, event: VideoJsTypes.EventTarget) => void;
+    onError?: (player: VideoJsTypes.Player, event: VideoJsTypes.EventTarget) => void;
+};

package/dist/components/MediaPlayer/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/index.js

@@ -87,6 +87,12 @@ Object.defineProperty(exports, "FormikWrapper", {
     return _FormikWrapper.default;
   }
 });
+Object.defineProperty(exports, "MediaPlayer", {
+  enumerable: true,
+  get: function get() {
+    return _MediaPlayer.default;
+  }
+});
 Object.defineProperty(exports, "WysiwygField", {
   enumerable: true,
   get: function get() {
@@ -95,6 +101,7 @@ Object.defineProperty(exports, "WysiwygField", {
 });
 var _Button = _interopRequireDefault(require("./Button"));
 var _WysiwygField = _interopRequireDefault(require("./WysiwygField"));
+var _MediaPlayer = _interopRequireDefault(require("./MediaPlayer"));
 var _FormikWrapper = _interopRequireDefault(require("./Form/FormikWrapper"));
 var _Checkbox = _interopRequireDefault(require("./Form/Checkbox"));
 var _Checkboxes = _interopRequireDefault(require("./Form/Checkboxes"));

package/dist/config/i18next/locales/en.json

@@ -27,6 +27,9 @@
     "reset_search": "Reconfigure search"
   },
   "organisms": {
+    "media_player": {
+      "not_supported_message": "The current file cannot be played."
+    },
     "text": {
       "read_more": "Read more",
       "read_less": "Read less"

package/dist/config/i18next/locales/nl.json

@@ -27,6 +27,9 @@
     "reset_search": "Zoeken opnieuw instellen"
   },
   "organisms": {
+    "media_player": {
+      "not_supported_message": "Het huidige bestand kan niet worden afgespeeld."
+    },
     "text": {
       "read_more": "Lees meer",
       "read_less": "Lees minder"

package/dist/custom.d.js

@@ -0,0 +1 @@
+"use strict";

package/dist/index.js

@@ -225,6 +225,12 @@ Object.defineProperty(exports, "MagicLine", {
     return _MagicLine.default;
   }
 });
+Object.defineProperty(exports, "MediaPlayer", {
+  enumerable: true,
+  get: function get() {
+    return _MediaPlayer.default;
+  }
+});
 Object.defineProperty(exports, "NavigationScroll", {
   enumerable: true,
   get: function get() {
@@ -491,6 +497,7 @@ var _ApiAutocomplete = _interopRequireDefault(require("./components/ApiAutocompl
 var _Cookie = _interopRequireDefault(require("./components/Cookie"));
 var _Downloads = _interopRequireDefault(require("./organisms/Downloads"));
 var _Header = _interopRequireDefault(require("./components/Header"));
+var _MediaPlayer = _interopRequireDefault(require("./components/MediaPlayer"));
 var _Quote = _interopRequireDefault(require("./organisms/Quote"));
 var _Share = _interopRequireDefault(require("./components/Share"));
 var _SliderRelated = _interopRequireDefault(require("./components/Sliders/SliderRelated"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.5.5",
+  "version": "2.6.0",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",
@@ -53,6 +53,7 @@
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
     "@types/react-router": "^5.1.20",
+    "@types/video.js": "^7.3.52",
     "@types/webpack-env": "^1.18.0",
     "@uncinc/react-drupal-core": "^2.3.4",
     "apollo-server-micro": "^3.4.0",
@@ -78,6 +79,7 @@
     "react-datepicker": "^3.0.0",
     "react-dom": "^16 || ^17 || ^18",
     "react-global-configuration": "^1.4.0",
+    "react-hook-videojs": "^3.0.2",
     "react-html-parser": "^2.0.2",
     "react-i18next": "^11.5.0",
     "react-immutable-proptypes": "^2.2.0",
@@ -96,7 +98,9 @@
     "sass-loader": "^8.0.2",
     "slick-carousel": "^1.8.1",
     "typescript": "^5.0.4",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "videojs-vimeo-tech": "^1.0.0",
+    "videojs-youtube": "^2"
   },
   "devDependencies": {
     "@babel/cli": "^7.0.0-beta.44",