@ludo.ninja/components 2.3.6 → 2.3.7

package/build/components/Page500/index.js

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const mainLayout_1 = __importDefault(require("../../layouts/custom/mainLayout"));
+const env_1 = require("../../store/env");
+const ScreenWidth_1 = require("../../styles/ScreenWidth");
+const MainButton_1 = __importDefault(require("../../system/Buttons/MainButton"));
+const index_1 = require("../../system/index");
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
+const router_1 = require("next/router");
+const styled_components_1 = __importDefault(require("styled-components"));
+// Styles
+const StyledInternalErrorPage = styled_components_1.default.div `
+  .internalErrorContent {
+    .internalErrorButton {
+      max-width: 230px;
+    }
+
+    .internalErrorCaption {
+      font-weight: 700;
+      font-size: 3.8em;
+      line-height: 1.37em;
+      color: ${colors_1.TextGrayColor};
+      margin-bottom: 0;
+    }
+
+    .internalErrorIcon {
+      width: 337px;
+      height: 329px;
+      img {
+        width: inherit;
+        height: inherit;
+      }
+    }
+
+    ${ScreenWidth_1.mediaQuery.tablet} {
+      flex-direction: column-reverse;
+
+      .internalErrorText {
+        margin: 40px 0 0 0;
+        text-align: center;
+      }
+
+      .internalErrorIcon {
+        width: 286px;
+        height: 280px;
+      }
+
+      .internalErrorCaption {
+        font-size: 3em;
+        line-height: 1.6em;
+      }
+
+      .internalErrorButton {
+        margin: 30px auto 0 auto;
+      }
+    }
+
+    ${ScreenWidth_1.mediaQuery.phone} {
+      .internalErrorIcon {
+        width: 218px;
+        height: 212px;
+      }
+    }
+  }
+`;
+// Component
+const InternalErrorPage = () => {
+    const router = (0, router_1.useRouter)();
+    const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
+    const redirectToHomePage = () => {
+        const appDomain = ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"];
+        if (window.origin === appDomain) {
+            router.push("/");
+        }
+        else {
+            window.open(appDomain, "_self");
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(mainLayout_1.default, { children: (0, jsx_runtime_1.jsx)(StyledInternalErrorPage, { children: (0, jsx_runtime_1.jsxs)(index_1.Flex, { className: "internalErrorContent", justifyContent: "center", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(index_1.Box, { mr: [97], className: "internalErrorText", children: [(0, jsx_runtime_1.jsx)("h1", { className: "internalErrorCaption", children: "Sorry, unexpected error." }), (0, jsx_runtime_1.jsxs)(index_1.H1, { color: colors_1.TextGrayColor, mt: [14], children: ["We are working on fixing the problem.", (0, jsx_runtime_1.jsx)("br", {}), " Please try again later"] }), (0, jsx_runtime_1.jsx)(index_1.Box, { className: "internalErrorButton", mt: [36], children: (0, jsx_runtime_1.jsx)(MainButton_1.default, { onClick: redirectToHomePage, variant: "primaryL", text: "Go to Main page" }) })] }), (0, jsx_runtime_1.jsx)(index_1.Box, { children: (0, jsx_runtime_1.jsx)("div", { className: "internalErrorIcon", children: (0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/500/500.svg`, alt: "500" }) }) })] }) }) }));
+};
+exports.default = InternalErrorPage;

package/build/components/assetPage/assetLikes/index.d.ts

@@ -0,0 +1,6 @@
+declare const AssetLikes: ({ assetId, likesByUser, isLikedByUser, }: {
+    assetId: string;
+    likesByUser: number;
+    isLikedByUser: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default AssetLikes;

package/build/components/assetPage/assetLikes/index.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const types_1 = require("../../../entities/labelCreationType/types");
+const likes_1 = __importDefault(require("../../../hooks/likes"));
+const store_1 = require("../../../modules/user/store");
+const heart_svg_1 = __importDefault(require("../../../public/showCaseIcons/heart"));
+const IconWithButton_1 = __importDefault(require("../../../system/Buttons/IconWithButton"));
+const check4k_1 = require("../../../utils/adaptive/check4k");
+const scale_1 = require("../../../utils/adaptive/scale");
+const auth_1 = require("../../../utils/auth");
+const screen_1 = require("../../../utils/screen");
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+const AssetLikes = ({ assetId, likesByUser, isLikedByUser, }) => {
+    const redirectToLoginWindow = (0, auth_1.useRedirectToLoginWindow)();
+    const isSignedIn = (0, store_1.useUserStore)((state) => state.isSignedIn);
+    const { likes, addLike, deleteLike, isLoading } = (0, likes_1.default)({
+        defaultLikesCount: likesByUser,
+        defaultIsLiked: isLikedByUser,
+        itemType: types_1.LabelKeys.asset,
+    });
+    const handleLikes = (isLiked) => {
+        if (!isSignedIn) {
+            redirectToLoginWindow();
+        }
+        else {
+            !isLiked ? addLike(assetId) : deleteLike(assetId);
+        }
+    };
+    const onLikeBtnClick = () => handleLikes(likes.isLiked);
+    const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isLoading ? ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { style: {
+                borderRadius: `${(0, check4k_1.getAdaptiveValueWithCheck4k)({
+                    windowDimensions,
+                    currentSize: 3,
+                })}px`,
+                marginRight: `${(0, check4k_1.getAdaptiveValueWithCheck4k)({
+                    windowDimensions,
+                    currentSize: 16.8,
+                })}px`,
+            }, height: "100%", width: `${(0, check4k_1.getAdaptiveValueWithCheck4k)({
+                windowDimensions,
+                currentSize: 30,
+            })}px` })) : ((0, jsx_runtime_1.jsx)(IconWithButton_1.default, { variant: "figcaption", text: likes.likesCount, onClick: onLikeBtnClick, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                    width: `${(0, check4k_1.getAdaptiveValueWithCheck4k)({
+                        windowDimensions,
+                        currentSize: 18,
+                    })}px`,
+                    height: `${(0, check4k_1.getAdaptiveValueWithCheck4k)({
+                        windowDimensions,
+                        currentSize: 18,
+                    })}px`,
+                }, children: (0, jsx_runtime_1.jsx)(heart_svg_1.default, { className: `icon ${likes.isLiked ? "liked" : ""}`, style: (0, scale_1.getAdaptiveScale)({ windowDimensions, currentSize: 1 }) }) }) })) }));
+};
+exports.default = AssetLikes;

package/build/components/assetPage/assetNft/index.d.ts

@@ -0,0 +1,4 @@
+import { assetSchema as schema } from "@ludo.ninja/api";
+type AssetMediaProps = Pick<schema.IAsset, "medias">;
+export declare const AssetMedia: ({ medias }: AssetMediaProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/assetPage/assetNft/index.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetMedia = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const core_1 = require("@ludo.ninja/core");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const index_1 = require("../../../system/index");
+const ResponsiveImage = (0, styled_components_1.default)(index_1.ExternalImage) `
+  max-width: 320px;
+  max-height: 320px;
+
+  ${ScreenWidth_1.mediaQuery.tablet} {
+    max-width: 336px;
+    max-height: 336px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.desktop} {
+    max-width: 508px;
+    max-height: 508px;
+  }
+`;
+const EmptyState = () => ((0, jsx_runtime_1.jsx)(index_1.Flex, { justifyContent: "center", children: (0, jsx_runtime_1.jsx)(index_1.Box, { borderRadius: 16, overflow: "hidden" }) }));
+const AssetMedia = ({ medias }) => {
+    if (!medias?.length || medias.length > 1 || !medias[0])
+        return (0, jsx_runtime_1.jsx)(EmptyState, {});
+    const [media] = medias;
+    const { url, mimeType } = media;
+    if (url && (0, core_1.isImage)({ media: url, mimeType, originalMimeType: null })) {
+        return ((0, jsx_runtime_1.jsx)(index_1.Flex, { justifyContent: "center", children: (0, jsx_runtime_1.jsx)(index_1.Box, { borderRadius: 16, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(ResponsiveImage, { src: url }) }) }));
+    }
+    return (0, jsx_runtime_1.jsx)(EmptyState, {});
+};
+exports.AssetMedia = AssetMedia;

package/build/components/assetPage/audioVideoPlayer/Duration.d.ts

@@ -0,0 +1,5 @@
+type DurationProps = {
+    seconds: number;
+};
+export default function Duration({ seconds }: DurationProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/assetPage/audioVideoPlayer/Duration.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Duration;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../../styles/colors");
+const index_1 = require("../../../system/index");
+function Duration({ seconds }) {
+    return ((0, jsx_runtime_1.jsx)("time", { dateTime: `P${Math.round(seconds)}S`, children: (0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_1.InactiveButtonColor, children: format(seconds) }) }));
+}
+function format(seconds) {
+    const date = new Date(seconds * 1000);
+    const hh = date.getUTCHours();
+    const mm = date.getUTCMinutes();
+    const ss = pad(date.getUTCSeconds());
+    if (hh) {
+        return `${hh}:${pad(mm)}:${ss}`;
+    }
+    return `${mm}:${ss}`;
+}
+function pad(string) {
+    return ('0' + string).slice(-2);
+}

package/build/components/assetPage/audioVideoPlayer/index.d.ts

@@ -0,0 +1,96 @@
+import React, { Component } from 'react';
+import ReactPlayer from 'react-player';
+export interface ReactPlayerProps {
+    playerType: string;
+    isLoading?: boolean;
+    poster?: string | undefined | null;
+    src?: string | null;
+    playing?: boolean;
+    loop?: boolean;
+    controls?: boolean;
+    volume?: number;
+    playbackRate?: number;
+    width?: string | number;
+    height?: string | number;
+    hidden?: boolean;
+    className?: string;
+    style?: object;
+    progressFrequency?: number;
+    soundcloudConfig?: {
+        clientId: string;
+        showArtwork: boolean;
+    };
+    youtubeConfig?: {
+        playerVars: object;
+        preload: boolean;
+    };
+    vimeoConfig?: {
+        iframeParams: object;
+        preload: boolean;
+    };
+    fileConfig?: {
+        attributes: object;
+    };
+    onReady?(): void;
+    onStart?(): void;
+    onPlay?(): void;
+    onPause?(): void;
+    onBuffer?(): void;
+    onEnded?(): void;
+    onError?(error: unknown): void;
+    onDuration?(duration: number): void;
+    onProgress?(state: {
+        played: number;
+        loaded: number;
+    }): void;
+}
+export interface OnProgressProps {
+    played: number;
+    playedSeconds: number;
+    loaded: number;
+    loadedSeconds: number;
+}
+export interface PlayerStateTypes {
+    url: string | null | undefined;
+    playing: boolean;
+    controls: boolean;
+    light: boolean;
+    volume: number;
+    muted: boolean;
+    played: number;
+    duration: number;
+    playedSeconds: number;
+    seeking: boolean;
+    loaded: number;
+    loadedSeconds: number;
+    error: boolean;
+    isFullscreenMode: boolean;
+}
+export declare const ReactPlayerWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    poster: string | null | undefined;
+    playerType: string;
+    isFullscreenMode: boolean;
+}, never>;
+export declare class AudioVideoPlayer extends Component<ReactPlayerProps, PlayerStateTypes> {
+    private player;
+    constructor(props: ReactPlayerProps);
+    load: (url: string) => void;
+    handlePlayPause: () => void;
+    handleVolumeChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleToggleMuted: () => void;
+    handlePlay: () => void;
+    handlePause: () => void;
+    handleSeekMouseDown: () => void;
+    handleSeekChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleSeekMouseUp: (e: React.MouseEvent<HTMLInputElement>) => void;
+    handleProgress: (state: OnProgressProps) => void;
+    handleDuration: (duration: number) => void;
+    handleClickFullscreen: () => void;
+    handleErrors: () => void;
+    renderLoadButton: (url: string, label: string) => import("react/jsx-runtime").JSX.Element;
+    ref: (player: ReactPlayer) => void;
+    updateIsFullscreenMode: () => void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): import("react/jsx-runtime").JSX.Element | null;
+}

package/build/components/assetPage/audioVideoPlayer/index.js

@@ -0,0 +1,308 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AudioVideoPlayer = exports.ReactPlayerWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const image_1 = __importDefault(require("next/image"));
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+const react_player_1 = __importDefault(require("react-player"));
+const screenfull_1 = __importDefault(require("screenfull"));
+const styled_components_1 = __importStar(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const colors_1 = require("../../../styles/colors");
+const index_1 = require("../../../system/index");
+const Duration_1 = __importDefault(require("./Duration"));
+exports.ReactPlayerWrapper = styled_components_1.default.div `
+  position: relative;
+  width: 510px;
+  height: ${(props) => (props.playerType === 'audio' ? '280px' : 'auto')};
+  display: flex;
+  margin-right: 60px;
+  background-image: url('${(props) => props.playerType === 'audio'
+    ? props.poster || '/assetPage/audioPlaceholder.svg'
+    : null}');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  border-radius: 16px;
+  overflow: hidden;
+
+  ${ScreenWidth_1.mediaQuery.desktop} {
+    height: ${(props) => (props.playerType === 'audio' ? '180px' : 'auto')};
+    align-items: flex-start;
+    width: 335px;
+    margin-right: 30px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.tablet} {
+    margin-right: 0;
+  }
+
+  .player {
+    display: flex;
+    height: auto !important;
+    border-radius: 16px;
+    overflow: hidden;
+    ${(props) => props.isFullscreenMode
+    ? (0, styled_components_1.css) `
+            width: 100% !important;
+          `
+    : ''}
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    width: ${(0, _4k_1.adaptiveValueCalc)(510)};
+    height: ${(props) => props.playerType === 'audio' ? (0, _4k_1.adaptiveValueCalc)(280) : 'auto'};
+    margin-right: ${(0, _4k_1.adaptiveValueCalc)(60)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(16)};
+
+    .player {
+      border-radius: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    }
+  }
+`;
+const InputRangeVolume = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  position: relative;
+
+  &:before {
+    content: '';
+    display: flex;
+    position: absolute;
+    transition: 0.5s color ease;
+    left: 0;
+    width: ${(props) => props.value * 100}%;
+    height: 5px;
+    background: #ebf0fc;
+
+    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+      height: ${(0, _4k_1.adaptiveValueCalc)(5)};
+    }
+  }
+`;
+const InputRangeSound = (0, styled_components_1.default)(InputRangeVolume) `
+  width: 70px;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    width: ${(0, _4k_1.adaptiveValueCalc)(70)};
+  }
+
+  &:before {
+    background: #b0b2c0;
+  }
+`;
+const FlexHelper = (0, styled_components_1.default)(index_1.Flex) `
+  justify-content: space-between;
+  padding: 25px;
+
+  ${ScreenWidth_1.mediaQuery.desktop} {
+    padding: 20px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    padding: ${(0, _4k_1.adaptiveValueCalc)(25)};
+  }
+`;
+const InputRange = styled_components_1.default.input `
+  width: 100%;
+  -webkit-appearance: none;
+  position: relative;
+  opacity: 0.5;
+  -moz-appearance: none;
+  cursor: pointer;
+
+  &::-webkit-slider-thumb {
+    opacity: 0;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &::-webkit-slider-runnable-track {
+    background: #909999;
+    height: 5px;
+    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+      height: ${(0, _4k_1.adaptiveValueCalc)(5)};
+    }
+  }
+`;
+const Controls = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  bottom: 0;
+`;
+const ControlButton = styled_components_1.default.button `
+  padding: 0;
+  background: transparent;
+  position: relative;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  user-select: none;
+  outline: none;
+
+  * {
+    user-select: none;
+  }
+
+  &:before {
+    position: absolute;
+    content: '';
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: ${colors_1.BlackColor};
+    opacity: 0.5;
+    z-index: -1;
+    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+      height: ${(0, _4k_1.adaptiveValueCalc)(36)};
+      width: ${(0, _4k_1.adaptiveValueCalc)(36)};
+    }
+  }
+
+  &:hover {
+    &:before {
+      opacity: 0.6;
+    }
+  }
+  img {
+    width: 15px;
+    height: 15px;
+    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+      height: ${(0, _4k_1.adaptiveValueCalc)(15)};
+      width: ${(0, _4k_1.adaptiveValueCalc)(15)};
+    }
+  }
+`;
+class AudioVideoPlayer extends react_1.Component {
+    player;
+    constructor(props) {
+        super(props);
+        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,
+        };
+    }
+    load = (url) => {
+        this.setState({
+            url,
+            played: 0,
+        });
+    };
+    handlePlayPause = () => {
+        this.setState({ playing: !this.state.playing });
+    };
+    handleVolumeChange = (e) => {
+        this.setState({ volume: parseFloat(e.target.value) });
+    };
+    handleToggleMuted = () => {
+        this.setState({
+            muted: !this.state.muted,
+            volume: 0,
+        });
+    };
+    handlePlay = () => {
+        this.setState({ playing: true });
+    };
+    handlePause = () => {
+        this.setState({ playing: false });
+    };
+    handleSeekMouseDown = () => {
+        this.setState({ seeking: true });
+    };
+    handleSeekChange = (e) => {
+        this.setState({ played: parseFloat(e.target.value) });
+    };
+    handleSeekMouseUp = (e) => {
+        this.setState({ seeking: false });
+        const event = e.target.value;
+        this.player?.seekTo(parseFloat(event));
+    };
+    handleProgress = (state) => {
+        if (!this.state.seeking) {
+            this.setState(state);
+        }
+    };
+    handleDuration = (duration) => {
+        this.setState({ duration });
+    };
+    handleClickFullscreen = () => {
+        const elem = document.getElementById('video-player');
+        screenfull_1.default.toggle(elem);
+    };
+    handleErrors = () => {
+        this.setState({ error: true });
+    };
+    renderLoadButton = (url, label) => {
+        return (0, jsx_runtime_1.jsx)("button", { onClick: () => this.load(url), children: label });
+    };
+    ref = (player) => {
+        this.player = player;
+    };
+    updateIsFullscreenMode = () => {
+        this.setState({
+            isFullscreenMode: screenfull_1.default.isFullscreen,
+        });
+    };
+    componentDidMount() {
+        screenfull_1.default.on('change', this.updateIsFullscreenMode);
+    }
+    componentWillUnmount() {
+        screenfull_1.default.off('change', this.updateIsFullscreenMode);
+    }
+    render() {
+        const { url, playing, light, volume, muted, played, duration, playedSeconds, error, isFullscreenMode, } = this.state;
+        if (!url)
+            return null;
+        return ((0, jsx_runtime_1.jsx)(exports.ReactPlayerWrapper, { id: 'video-player', playerType: this.props.playerType, poster: this.props.poster, isFullscreenMode: isFullscreenMode, children: this.props.isLoading ? ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { style: { position: 'absolute', left: 0, top: 0 }, height: "100%", width: "100%" })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: error && this.props.playerType !== 'audio' ? ((0, jsx_runtime_1.jsx)(image_1.default, { width: 508, height: 216, alt: 'audioPlaceholder', src: `/assetPage/audioPlaceholder.svg` })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !error && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_player_1.default, { 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 }), (0, jsx_runtime_1.jsxs)(Controls, { children: [(0, jsx_runtime_1.jsxs)(index_1.Flex, { p: "0 15px 5px", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Duration_1.default, { seconds: playedSeconds }), (0, jsx_runtime_1.jsx)(Duration_1.default, { seconds: duration })] }), (0, jsx_runtime_1.jsx)(InputRangeVolume, { value: played, children: (0, jsx_runtime_1.jsx)(InputRange, { type: "range", min: 0, max: 0.99, step: "any", value: played, onMouseDown: this.handleSeekMouseDown, onChange: this.handleSeekChange, onMouseUp: this.handleSeekMouseUp }) }), (0, jsx_runtime_1.jsxs)(FlexHelper, { children: [(0, jsx_runtime_1.jsxs)(index_1.Flex, { children: [(0, jsx_runtime_1.jsx)(ControlButton, { style: { marginRight: '45px' }, onClick: this.handlePlayPause, children: (0, jsx_runtime_1.jsx)(image_1.default, { width: 15, height: 15, alt: playing ? 'Play' : 'pause', src: `/assetPage/${playing ? 'pause' : 'play'}.svg` }) }), (0, jsx_runtime_1.jsx)(ControlButton, { style: { marginRight: '20px' }, onClick: this.handleToggleMuted, children: (0, jsx_runtime_1.jsx)(image_1.default, { width: 15, height: 15, alt: 'sound-volume', src: `/assetPage/${volume ? 'soundOn' : 'soundOf'}.svg` }) }), (0, jsx_runtime_1.jsx)(InputRangeSound, { value: volume, children: (0, jsx_runtime_1.jsx)(InputRange, { type: "range", min: 0, max: 1, step: "any", value: volume, onChange: this.handleVolumeChange }) })] }), Boolean(this.props.playerType === 'audio') || ((0, jsx_runtime_1.jsx)(ControlButton, { onClick: this.handleClickFullscreen, children: (0, jsx_runtime_1.jsx)(image_1.default, { width: 15, height: 15, alt: 'fullScreen', src: `/assetPage/fullScreen.svg` }) }))] })] })] })) })) })) }));
+    }
+}
+exports.AudioVideoPlayer = AudioVideoPlayer;

package/build/components/assetPage/category/index.d.ts

@@ -0,0 +1,4 @@
+import { TAsset } from '../../../entities/asset/types';
+export declare const Category: ({ asset }: {
+    asset: TAsset;
+}) => import("react/jsx-runtime").JSX.Element;