@ludo.ninja/components 1.0.7 → 1.0.9

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

@@ -1,179 +1,492 @@
-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';
-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) {
+
+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) {
     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;