npm - @ludo.ninja/components - Versions diffs - 1.1.2 → 1.1.3 - Mend

@ludo.ninja/components 1.1.2 → 1.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (428) hide show

package/dist/components/assetPage/audioVideoPlayer/index.jsx CHANGED Viewed

@@ -1,492 +1,179 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 import React, { Component } from 'react';
 import Image from 'next/image';
 import Skeleton from 'react-loading-skeleton';
 import ReactPlayer from 'react-player';
 import screenfull from 'screenfull';
 import styled, { css } from 'styled-components';
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
 import { mediaQuery } from '@/styles/ScreenWidth';
 import { BlackColor } from '@/styles/colors';
 import { Flex } from '@system';
 import Duration from './Duration';
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-var __extends =
-  (this && this.__extends) ||
-  (function () {
-    var extendStatics = function (d, b) {
-      extendStatics =
-        Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array &&
-          function (d, b) {
-            d.__proto__ = b;
-          }) ||
-        function (d, b) {
-          for (var p in b)
-            if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
-        };
-      return extendStatics(d, b);
-    };
-    return function (d, b) {
-      if (typeof b !== 'function' && b !== null)
-        throw new TypeError(
-          'Class extends value ' + String(b) + ' is not a constructor or null'
-        );
-      extendStatics(d, b);
-      function __() {
-        this.constructor = d;
-      }
-      d.prototype =
-        b === null
-          ? Object.create(b)
-          : ((__.prototype = b.prototype), new __());
-    };
-  })();
-export var ReactPlayerWrapper = styled.div(
-  templateObject_2 ||
-    (templateObject_2 = __makeTemplateObject(
-      [
-        '\n  position: relative;\n  width: 510px;\n  height: ',
-        ";\n  display: flex;\n  margin-right: 60px;\n  background-image: url('",
-        "');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  border-radius: 16px;\n  overflow: hidden;\n\n  ",
-        ' {\n    height: ',
-        ';\n    align-items: flex-start;\n    width: 335px;\n    margin-right: 30px;\n  }\n\n  ',
-        ' {\n    margin-right: 0;\n  }\n\n  .player {\n    display: flex;\n    height: auto !important;\n    border-radius: 16px;\n    overflow: hidden;\n    ',
-        '\n  }\n\n  ',
-        ' {\n    width: ',
-        ';\n    height: ',
-        ';\n    margin-right: ',
-        ';\n    border-radius: ',
-        ';\n\n    .player {\n      border-radius: ',
-        ';\n    }\n  }\n',
-      ],
-      [
-        '\n  position: relative;\n  width: 510px;\n  height: ',
-        ";\n  display: flex;\n  margin-right: 60px;\n  background-image: url('",
-        "');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  border-radius: 16px;\n  overflow: hidden;\n\n  ",
-        ' {\n    height: ',
-        ';\n    align-items: flex-start;\n    width: 335px;\n    margin-right: 30px;\n  }\n\n  ',
-        ' {\n    margin-right: 0;\n  }\n\n  .player {\n    display: flex;\n    height: auto !important;\n    border-radius: 16px;\n    overflow: hidden;\n    ',
-        '\n  }\n\n  ',
-        ' {\n    width: ',
-        ';\n    height: ',
-        ';\n    margin-right: ',
-        ';\n    border-radius: ',
-        ';\n\n    .player {\n      border-radius: ',
-        ';\n    }\n  }\n',
-      ]
-    )),
-  function (props) {
-    return props.playerType === 'audio' ? '280px' : 'auto';
-  },
-  function (props) {
+export var ReactPlayerWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  width: 510px;\n  height: ", ";\n  display: flex;\n  margin-right: 60px;\n  background-image: url('", "');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  border-radius: 16px;\n  overflow: hidden;\n\n  ", " {\n    height: ", ";\n    align-items: flex-start;\n    width: 335px;\n    margin-right: 30px;\n  }\n\n  ", " {\n    margin-right: 0;\n  }\n\n  .player {\n    display: flex;\n    height: auto !important;\n    border-radius: 16px;\n    overflow: hidden;\n    ", "\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    border-radius: ", ";\n\n    .player {\n      border-radius: ", ";\n    }\n  }\n"], ["\n  position: relative;\n  width: 510px;\n  height: ", ";\n  display: flex;\n  margin-right: 60px;\n  background-image: url('", "');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  border-radius: 16px;\n  overflow: hidden;\n\n  ", " {\n    height: ", ";\n    align-items: flex-start;\n    width: 335px;\n    margin-right: 30px;\n  }\n\n  ", " {\n    margin-right: 0;\n  }\n\n  .player {\n    display: flex;\n    height: auto !important;\n    border-radius: 16px;\n    overflow: hidden;\n    ", "\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    border-radius: ", ";\n\n    .player {\n      border-radius: ", ";\n    }\n  }\n"])), function (props) { return (props.playerType === 'audio' ? '280px' : 'auto'); }, function (props) {
     return props.playerType === 'audio'
-      ? props.poster || '/assetPage/audioPlaceholder.svg'
-      : null;
-  },
-  mediaQuery.desktop,
-  function (props) {
-    return props.playerType === 'audio' ? '180px' : 'auto';
-  },
-  mediaQuery.tablet,
-  function (props) {
+        ? props.poster || '/assetPage/audioPlaceholder.svg'
+        : null;
+}, mediaQuery.desktop, function (props) { return (props.playerType === 'audio' ? '180px' : 'auto'); }, mediaQuery.tablet, function (props) {
     return props.isFullscreenMode
-      ? css(
-          templateObject_1 ||
-            (templateObject_1 = __makeTemplateObject(
-              ['\n            width: 100% !important;\n          '],
-              ['\n            width: 100% !important;\n          ']
-            ))
-        )
-      : '';
-  },
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(510),
-  function (props) {
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            width: 100% !important;\n          "], ["\n            width: 100% !important;\n          "]))) : '';
+}, mediaQuery.minWidthFourK, adaptiveValueCalc(510), function (props) {
     return props.playerType === 'audio' ? adaptiveValueCalc(280) : 'auto';
-  },
-  adaptiveValueCalc(60),
-  adaptiveValueCalc(16),
-  adaptiveValueCalc(16)
-);
-var InputRangeVolume = styled.div(
-  templateObject_3 ||
-    (templateObject_3 = __makeTemplateObject(
-      [
-        "\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  position: relative;\n\n  &:before {\n    content: '';\n    display: flex;\n    position: absolute;\n    transition: 0.5s color ease;\n    left: 0;\n    width: ",
-        '%;\n    height: 5px;\n    background: #ebf0fc;\n\n    ',
-        ' {\n      height: ',
-        ';\n    }\n  }\n',
-      ],
-      [
-        "\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  position: relative;\n\n  &:before {\n    content: '';\n    display: flex;\n    position: absolute;\n    transition: 0.5s color ease;\n    left: 0;\n    width: ",
-        '%;\n    height: 5px;\n    background: #ebf0fc;\n\n    ',
-        ' {\n      height: ',
-        ';\n    }\n  }\n',
-      ]
-    )),
-  function (props) {
-    return props.value * 100;
-  },
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(5)
-);
-var InputRangeSound = styled(InputRangeVolume)(
-  templateObject_4 ||
-    (templateObject_4 = __makeTemplateObject(
-      [
-        '\n  width: 70px;\n\n  ',
-        ' {\n    width: ',
-        ';\n  }\n\n  &:before {\n    background: #b0b2c0;\n  }\n',
-      ],
-      [
-        '\n  width: 70px;\n\n  ',
-        ' {\n    width: ',
-        ';\n  }\n\n  &:before {\n    background: #b0b2c0;\n  }\n',
-      ]
-    )),
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(70)
-);
-var FlexHelper = styled(Flex)(
-  templateObject_5 ||
-    (templateObject_5 = __makeTemplateObject(
-      [
-        '\n  justify-content: space-between;\n  padding: 25px;\n\n  ',
-        ' {\n    padding: 20px;\n  }\n\n  ',
-        ' {\n    padding: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  justify-content: space-between;\n  padding: 25px;\n\n  ',
-        ' {\n    padding: 20px;\n  }\n\n  ',
-        ' {\n    padding: ',
-        ';\n  }\n',
-      ]
-    )),
-  mediaQuery.desktop,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(25)
-);
-var InputRange = styled.input(
-  templateObject_6 ||
-    (templateObject_6 = __makeTemplateObject(
-      [
-        '\n  width: 100%;\n  -webkit-appearance: none;\n  position: relative;\n  opacity: 0.5;\n  -moz-appearance: none;\n  cursor: pointer;\n\n  &::-webkit-slider-thumb {\n    opacity: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &::-webkit-slider-runnable-track {\n    background: #909999;\n    height: 5px;\n    ',
-        ' {\n      height: ',
-        ';\n    }\n  }\n',
-      ],
-      [
-        '\n  width: 100%;\n  -webkit-appearance: none;\n  position: relative;\n  opacity: 0.5;\n  -moz-appearance: none;\n  cursor: pointer;\n\n  &::-webkit-slider-thumb {\n    opacity: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &::-webkit-slider-runnable-track {\n    background: #909999;\n    height: 5px;\n    ',
-        ' {\n      height: ',
-        ';\n    }\n  }\n',
-      ]
-    )),
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(5)
-);
-var Controls = styled.div(
-  templateObject_7 ||
-    (templateObject_7 = __makeTemplateObject(
-      [
-        '\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  bottom: 0;\n',
-      ],
-      [
-        '\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  bottom: 0;\n',
-      ]
-    ))
-);
-var ControlButton = styled.button(
-  templateObject_8 ||
-    (templateObject_8 = __makeTemplateObject(
-      [
-        "\n  padding: 0;\n  background: transparent;\n  position: relative;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n  user-select: none;\n  outline: none;\n\n  * {\n    user-select: none;\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: ",
-        ';\n    opacity: 0.5;\n    z-index: -1;\n    ',
-        ' {\n      height: ',
-        ';\n      width: ',
-        ';\n    }\n  }\n\n  &:hover {\n    &:before {\n      opacity: 0.6;\n    }\n  }\n  img {\n    width: 15px;\n    height: 15px;\n    ',
-        ' {\n      height: ',
-        ';\n      width: ',
-        ';\n    }\n  }\n',
-      ],
-      [
-        "\n  padding: 0;\n  background: transparent;\n  position: relative;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n  user-select: none;\n  outline: none;\n\n  * {\n    user-select: none;\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: ",
-        ';\n    opacity: 0.5;\n    z-index: -1;\n    ',
-        ' {\n      height: ',
-        ';\n      width: ',
-        ';\n    }\n  }\n\n  &:hover {\n    &:before {\n      opacity: 0.6;\n    }\n  }\n  img {\n    width: 15px;\n    height: 15px;\n    ',
-        ' {\n      height: ',
-        ';\n      width: ',
-        ';\n    }\n  }\n',
-      ]
-    )),
-  BlackColor,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(36),
-  adaptiveValueCalc(36),
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(15),
-  adaptiveValueCalc(15)
-);
+}, adaptiveValueCalc(60), adaptiveValueCalc(16), adaptiveValueCalc(16));
+var InputRangeVolume = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  position: relative;\n\n  &:before {\n    content: '';\n    display: flex;\n    position: absolute;\n    transition: 0.5s color ease;\n    left: 0;\n    width: ", "%;\n    height: 5px;\n    background: #ebf0fc;\n\n    ", " {\n      height: ", ";\n    }\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  position: relative;\n\n  &:before {\n    content: '';\n    display: flex;\n    position: absolute;\n    transition: 0.5s color ease;\n    left: 0;\n    width: ", "%;\n    height: 5px;\n    background: #ebf0fc;\n\n    ", " {\n      height: ", ";\n    }\n  }\n"])), function (props) { return props.value * 100; }, mediaQuery.minWidthFourK, adaptiveValueCalc(5));
+var InputRangeSound = styled(InputRangeVolume)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 70px;\n\n  ", " {\n    width: ", ";\n  }\n\n  &:before {\n    background: #b0b2c0;\n  }\n"], ["\n  width: 70px;\n\n  ", " {\n    width: ", ";\n  }\n\n  &:before {\n    background: #b0b2c0;\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(70));
+var FlexHelper = styled(Flex)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  justify-content: space-between;\n  padding: 25px;\n\n  ", " {\n    padding: 20px;\n  }\n\n  ", " {\n    padding: ", ";\n  }\n"], ["\n  justify-content: space-between;\n  padding: 25px;\n\n  ", " {\n    padding: 20px;\n  }\n\n  ", " {\n    padding: ", ";\n  }\n"])), mediaQuery.desktop, mediaQuery.minWidthFourK, adaptiveValueCalc(25));
+var InputRange = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 100%;\n  -webkit-appearance: none;\n  position: relative;\n  opacity: 0.5;\n  -moz-appearance: none;\n  cursor: pointer;\n\n  &::-webkit-slider-thumb {\n    opacity: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &::-webkit-slider-runnable-track {\n    background: #909999;\n    height: 5px;\n    ", " {\n      height: ", ";\n    }\n  }\n"], ["\n  width: 100%;\n  -webkit-appearance: none;\n  position: relative;\n  opacity: 0.5;\n  -moz-appearance: none;\n  cursor: pointer;\n\n  &::-webkit-slider-thumb {\n    opacity: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &::-webkit-slider-runnable-track {\n    background: #909999;\n    height: 5px;\n    ", " {\n      height: ", ";\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(5));
+var Controls = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  bottom: 0;\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  bottom: 0;\n"])));
+var ControlButton = styled.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding: 0;\n  background: transparent;\n  position: relative;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n  user-select: none;\n  outline: none;\n\n  * {\n    user-select: none;\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: ", ";\n    opacity: 0.5;\n    z-index: -1;\n    ", " {\n      height: ", ";\n      width: ", ";\n    }\n  }\n\n  &:hover {\n    &:before {\n      opacity: 0.6;\n    }\n  }\n  img {\n    width: 15px;\n    height: 15px;\n    ", " {\n      height: ", ";\n      width: ", ";\n    }\n  }\n"], ["\n  padding: 0;\n  background: transparent;\n  position: relative;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n  user-select: none;\n  outline: none;\n\n  * {\n    user-select: none;\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: ", ";\n    opacity: 0.5;\n    z-index: -1;\n    ", " {\n      height: ", ";\n      width: ", ";\n    }\n  }\n\n  &:hover {\n    &:before {\n      opacity: 0.6;\n    }\n  }\n  img {\n    width: 15px;\n    height: 15px;\n    ", " {\n      height: ", ";\n      width: ", ";\n    }\n  }\n"])), BlackColor, mediaQuery.minWidthFourK, adaptiveValueCalc(36), adaptiveValueCalc(36), mediaQuery.minWidthFourK, adaptiveValueCalc(15), adaptiveValueCalc(15));
 var AudioVideoPlayer = /** @class */ (function (_super) {
-  __extends(AudioVideoPlayer, _super);
-  function AudioVideoPlayer(props) {
-    var _this = _super.call(this, props) || this;
-    _this.load = function (url) {
-      _this.setState({
-        url: url,
-        played: 0,
-      });
-    };
-    _this.handlePlayPause = function () {
-      _this.setState({ playing: !_this.state.playing });
-    };
-    _this.handleVolumeChange = function (e) {
-      _this.setState({ volume: parseFloat(e.target.value) });
-    };
-    _this.handleToggleMuted = function () {
-      _this.setState({
-        muted: !_this.state.muted,
-        volume: 0,
-      });
-    };
-    _this.handlePlay = function () {
-      _this.setState({ playing: true });
-    };
-    _this.handlePause = function () {
-      _this.setState({ playing: false });
-    };
-    _this.handleSeekMouseDown = function () {
-      _this.setState({ seeking: true });
-    };
-    _this.handleSeekChange = function (e) {
-      _this.setState({ played: parseFloat(e.target.value) });
-    };
-    _this.handleSeekMouseUp = function (e) {
-      var _a;
-      _this.setState({ seeking: false });
-      var event = e.target.value;
-      (_a = _this.player) === null || _a === void 0
-        ? void 0
-        : _a.seekTo(parseFloat(event));
-    };
-    _this.handleProgress = function (state) {
-      if (!_this.state.seeking) {
-        _this.setState(state);
-      }
-    };
-    _this.handleDuration = function (duration) {
-      _this.setState({ duration: duration });
-    };
-    _this.handleClickFullscreen = function () {
-      var elem = document.getElementById('video-player');
-      screenfull.toggle(elem);
-    };
-    _this.handleErrors = function () {
-      _this.setState({ error: true });
-    };
-    _this.renderLoadButton = function (url, label) {
-      return (
-        <button
-          onClick={function () {
-            return _this.load(url);
-          }}
-        >
-          {label}
-        </button>
-      );
-    };
-    _this.ref = function (player) {
-      _this.player = player;
-    };
-    _this.updateIsFullscreenMode = function () {
-      _this.setState({
-        isFullscreenMode: screenfull.isFullscreen,
-      });
-    };
-    _this.state = {
-      url: _this.props.src,
-      playing: false,
-      controls: false,
-      light: false,
-      volume: 0.8,
-      muted: false,
-      played: 0,
-      duration: 0,
-      playedSeconds: 0,
-      seeking: false,
-      loaded: 0,
-      loadedSeconds: 0,
-      error: false,
-      isFullscreenMode: false,
-    };
-    return _this;
-  }
-  AudioVideoPlayer.prototype.componentDidMount = function () {
-    screenfull.on('change', this.updateIsFullscreenMode);
-  };
-  AudioVideoPlayer.prototype.componentWillUnmount = function () {
-    screenfull.off('change', this.updateIsFullscreenMode);
-  };
-  AudioVideoPlayer.prototype.render = function () {
-    var _a = this.state,
-      url = _a.url,
-      playing = _a.playing,
-      light = _a.light,
-      volume = _a.volume,
-      muted = _a.muted,
-      played = _a.played,
-      duration = _a.duration,
-      playedSeconds = _a.playedSeconds,
-      error = _a.error,
-      isFullscreenMode = _a.isFullscreenMode;
-    if (!url) return null;
-    return (
-      <ReactPlayerWrapper
-        id={'video-player'}
-        playerType={this.props.playerType}
-        poster={this.props.poster}
-        isFullscreenMode={isFullscreenMode}
-      >
-        {this.props.isLoading ? (
-          <Skeleton
-            style={{ position: 'absolute', left: 0, top: 0 }}
-            height="100%"
-            width="100%"
-          />
-        ) : (
-          <>
-            {error && this.props.playerType !== 'audio' ? (
-              <Image
-                width={508}
-                height={216}
-                alt={'audioPlaceholder'}
-                src={'/assetPage/audioPlaceholder.svg'}
-              />
-            ) : (
-              <>
-                {!error && (
-                  <>
-                    <ReactPlayer
-                      className="player"
-                      id={this.props.playerType}
-                      url={url}
-                      playing={playing}
-                      light={light}
-                      volume={volume}
-                      playsinline={true}
-                      muted={muted}
-                      ref={this.ref}
-                      controls={false}
-                      onPlay={this.handlePlay}
-                      onPause={this.handlePause}
-                      onError={this.handleErrors}
-                      onProgress={this.handleProgress}
-                      onDuration={this.handleDuration}
-                    />
+    __extends(AudioVideoPlayer, _super);
+    function AudioVideoPlayer(props) {
+        var _this = _super.call(this, props) || this;
+        _this.load = function (url) {
+            _this.setState({
+                url: url,
+                played: 0,
+            });
+        };
+        _this.handlePlayPause = function () {
+            _this.setState({ playing: !_this.state.playing });
+        };
+        _this.handleVolumeChange = function (e) {
+            _this.setState({ volume: parseFloat(e.target.value) });
+        };
+        _this.handleToggleMuted = function () {
+            _this.setState({
+                muted: !_this.state.muted,
+                volume: 0,
+            });
+        };
+        _this.handlePlay = function () {
+            _this.setState({ playing: true });
+        };
+        _this.handlePause = function () {
+            _this.setState({ playing: false });
+        };
+        _this.handleSeekMouseDown = function () {
+            _this.setState({ seeking: true });
+        };
+        _this.handleSeekChange = function (e) {
+            _this.setState({ played: parseFloat(e.target.value) });
+        };
+        _this.handleSeekMouseUp = function (e) {
+            var _a;
+            _this.setState({ seeking: false });
+            var event = e.target.value;
+            (_a = _this.player) === null || _a === void 0 ? void 0 : _a.seekTo(parseFloat(event));
+        };
+        _this.handleProgress = function (state) {
+            if (!_this.state.seeking) {
+                _this.setState(state);
+            }
+        };
+        _this.handleDuration = function (duration) {
+            _this.setState({ duration: duration });
+        };
+        _this.handleClickFullscreen = function () {
+            var elem = document.getElementById('video-player');
+            screenfull.toggle(elem);
+        };
+        _this.handleErrors = function () {
+            _this.setState({ error: true });
+        };
+        _this.renderLoadButton = function (url, label) {
+            return <button onClick={function () { return _this.load(url); }}>{label}</button>;
+        };
+        _this.ref = function (player) {
+            _this.player = player;
+        };
+        _this.updateIsFullscreenMode = function () {
+            _this.setState({
+                isFullscreenMode: screenfull.isFullscreen,
+            });
+        };
+        _this.state = {
+            url: _this.props.src,
+            playing: false,
+            controls: false,
+            light: false,
+            volume: 0.8,
+            muted: false,
+            played: 0,
+            duration: 0,
+            playedSeconds: 0,
+            seeking: false,
+            loaded: 0,
+            loadedSeconds: 0,
+            error: false,
+            isFullscreenMode: false,
+        };
+        return _this;
+    }
+    AudioVideoPlayer.prototype.componentDidMount = function () {
+        screenfull.on('change', this.updateIsFullscreenMode);
+    };
+    AudioVideoPlayer.prototype.componentWillUnmount = function () {
+        screenfull.off('change', this.updateIsFullscreenMode);
+    };
+    AudioVideoPlayer.prototype.render = function () {
+        var _a = this.state, url = _a.url, playing = _a.playing, light = _a.light, volume = _a.volume, muted = _a.muted, played = _a.played, duration = _a.duration, playedSeconds = _a.playedSeconds, error = _a.error, isFullscreenMode = _a.isFullscreenMode;
+        if (!url)
+            return null;
+        return (<ReactPlayerWrapper id={'video-player'} playerType={this.props.playerType} poster={this.props.poster} isFullscreenMode={isFullscreenMode}>
+        {this.props.isLoading ? (<Skeleton style={{ position: 'absolute', left: 0, top: 0 }} height="100%" width="100%"/>) : (<>
+            {error && this.props.playerType !== 'audio' ? (<Image width={508} height={216} alt={'audioPlaceholder'} src={"/assetPage/audioPlaceholder.svg"}/>) : (<>
+                {!error && (<>
+                    <ReactPlayer className="player" id={this.props.playerType} url={url} playing={playing} light={light} volume={volume} playsinline={true} muted={muted} ref={this.ref} controls={false} onPlay={this.handlePlay} onPause={this.handlePause} onError={this.handleErrors} onProgress={this.handleProgress} onDuration={this.handleDuration}/>
                     <Controls>
                       <Flex p="0 15px 5px" justifyContent="space-between">
-                        <Duration seconds={playedSeconds} />
-                        <Duration seconds={duration} />
+                        <Duration seconds={playedSeconds}/>
+                        <Duration seconds={duration}/>
                       </Flex>
                       <InputRangeVolume value={played}>
-                        <InputRange
-                          type="range"
-                          min={0}
-                          max={0.99}
-                          step="any"
-                          value={played}
-                          onMouseDown={this.handleSeekMouseDown}
-                          onChange={this.handleSeekChange}
-                          onMouseUp={this.handleSeekMouseUp}
-                        />
+                        <InputRange type="range" min={0} max={0.99} step="any" value={played} onMouseDown={this.handleSeekMouseDown} onChange={this.handleSeekChange} onMouseUp={this.handleSeekMouseUp}/>
                       </InputRangeVolume>
                       <FlexHelper>
                         <Flex>
-                          <ControlButton
-                            style={{ marginRight: '45px' }}
-                            onClick={this.handlePlayPause}
-                          >
-                            <Image
-                              width={15}
-                              height={15}
-                              alt={playing ? 'Play' : 'pause'}
-                              src={'/assetPage/'.concat(
-                                playing ? 'pause' : 'play',
-                                '.svg'
-                              )}
-                            />
+                          <ControlButton style={{ marginRight: '45px' }} onClick={this.handlePlayPause}>
+                            <Image width={15} height={15} alt={playing ? 'Play' : 'pause'} src={"/assetPage/".concat(playing ? 'pause' : 'play', ".svg")}/>
                           </ControlButton>
-                          <ControlButton
-                            style={{ marginRight: '20px' }}
-                            onClick={this.handleToggleMuted}
-                          >
-                            <Image
-                              width={15}
-                              height={15}
-                              alt={'sound-volume'}
-                              src={'/assetPage/'.concat(
-                                volume ? 'soundOn' : 'soundOf',
-                                '.svg'
-                              )}
-                            />
+                          <ControlButton style={{ marginRight: '20px' }} onClick={this.handleToggleMuted}>
+                            <Image width={15} height={15} alt={'sound-volume'} src={"/assetPage/".concat(volume ? 'soundOn' : 'soundOf', ".svg")}/>
                           </ControlButton>
                           <InputRangeSound value={volume}>
-                            <InputRange
-                              type="range"
-                              min={0}
-                              max={1}
-                              step="any"
-                              value={volume}
-                              onChange={this.handleVolumeChange}
-                            />
+                            <InputRange type="range" min={0} max={1} step="any" value={volume} onChange={this.handleVolumeChange}/>
                           </InputRangeSound>
                         </Flex>
-                        {Boolean(this.props.playerType === 'audio') || (
-                          <ControlButton onClick={this.handleClickFullscreen}>
-                            <Image
-                              width={15}
-                              height={15}
-                              alt={'fullScreen'}
-                              src={'/assetPage/fullScreen.svg'}
-                            />
-                          </ControlButton>
-                        )}
+                        {Boolean(this.props.playerType === 'audio') || (<ControlButton onClick={this.handleClickFullscreen}>
+                            <Image width={15} height={15} alt={'fullScreen'} src={"/assetPage/fullScreen.svg"}/>
+                          </ControlButton>)}
                       </FlexHelper>
                     </Controls>
-                  </>
-                )}
-              </>
-            )}
-          </>
-        )}
-      </ReactPlayerWrapper>
-    );
-  };
-  return AudioVideoPlayer;
-})(Component);
+                  </>)}
+              </>)}
+          </>)}
+      </ReactPlayerWrapper>);
+    };
+    return AudioVideoPlayer;
+}(Component));
 export { AudioVideoPlayer };
-var templateObject_1,
-  templateObject_2,
-  templateObject_3,
-  templateObject_4,
-  templateObject_5,
-  templateObject_6,
-  templateObject_7,
-  templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;