@soul-refiner/design-system 2.5.0-alpha.7 → 2.5.0-alpha.8

package/dist/components/media/audio-playlist/audio-playlist.js

@@ -1,48 +1,12 @@
-import React from 'react';
-import Image from 'next/image';
-import styled from 'styled-components';
-import { Box } from '../../atoms/box/box';
-import { H } from '../../atoms/typography/heading';
-import { ArrowUp } from '../../../icons/arrow/arrow_up';
-import { ChevronDown } from '../../../icons/arrow/chevron_down';
-import { AudioPlayer } from '../audio-player';
-import { PlaylistItem } from './playlist-item';
-export const AudioPlaylist = ({ activeIndex, onProgress, playable, isPaidUser, playlist, previewImage, setMediaItem, subtitle, title, }) => {
-    const w = typeof window !== 'undefined' ? window : null;
-    const mediaItem = playlist?.[activeIndex];
-    const [isFullscreen, setIsFullscreen] = React.useState(false);
-    const [playing, setPlaying] = React.useState(false);
-    const [progress, setProgress] = React.useState(0);
-    const handleListen = (prog) => {
-        setProgress(prog);
-        onProgress && onProgress(prog);
-    };
-    const handlePlay = (index) => {
-        setMediaItem(index);
-        setPlaying(true);
-    };
-    return (React.createElement(Wrapper, { "$fullscreen": isFullscreen },
-        React.createElement(ThumbnailWrapper, null,
-            React.createElement(Image, { alt: "thumbnail", height: 400, width: w?.innerWidth || 500, src: previewImage }),
-            React.createElement(Box, { "$dir": "column", sx: "padding: 100px 0px 160px; position: relative; z-index: 2; margin: 0px 160px;" },
-                React.createElement(H, { "$bold": true, "$color": "white", "$fontSize": 64, "$lineHeight": 96 }, title),
-                React.createElement(H, { "$color": "grey-8", "$fontSize": 28, "$lineHeight": 36, "$semiBold": true }, subtitle))),
-        React.createElement(PlaylistWrapper, null, playlist.map((item, i) => (React.createElement(PlaylistItem, { duration: item.duration, isPaidUser: isPaidUser, key: item.id, playing: item.id === mediaItem?.id && playing, progress: progress, onPause: () => setPlaying(false), onPlay: () => handlePlay(i), title: item.title, thumbnail: item.thumbnail })))),
-        isPaidUser && (React.createElement(Shade, { "$isFullscreen": isFullscreen },
-            React.createElement(Button, { onClick: () => setIsFullscreen((prev) => !prev) }, isFullscreen ? (React.createElement(ArrowUp, { color: "grey-0", size: 24 })) : (React.createElement(ChevronDown, { color: "white", size: 24 }))))),
-        !!mediaItem && (React.createElement(BottomBarWrapper, null,
-            React.createElement(AudioPlayer, { onListen: handleListen, onPause: () => setPlaying(false), onPlay: () => setPlaying(true), playing: playing, progress: progress, src: mediaItem.src, thumbnail: mediaItem.thumbnail, title: mediaItem.title })))));
-};
-const Wrapper = styled.div `
-  ${({ $fullscreen }) => ($fullscreen ? 'height: 100vh;' : 'height: 744px;')}
+"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),arrow_up=require("../../../icons/arrow/arrow_up.js"),chevron_down=require("../../../icons/arrow/chevron_down.js"),audioPlayer=require("../audio-player/audio-player.js"),playlistItem=require("./playlist-item.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),styled__default=_interopDefaultCompat(styled);const AudioPlaylist=({activeIndex:e,onProgress:t,isPaidUser:a,playlist:l,previewImage:i,setMediaItem:r,subtitle:d,title:o})=>{var n="undefined"!=typeof window?window:null;const u=l?.[e],[p,s]=React__default.default.useState(!1),[f,c]=React__default.default.useState(!1),[_,m]=React__default.default.useState(0);return React__default.default.createElement(Wrapper,{$fullscreen:p},React__default.default.createElement(ThumbnailWrapper,null,React__default.default.createElement(Image__default.default,{alt:"thumbnail",height:400,width:n?.innerWidth||500,src:i}),React__default.default.createElement(box.Box,{$dir:"column",sx:"padding: 100px 0px 160px; position: relative; z-index: 2; margin: 0px 160px;"},React__default.default.createElement(heading.H,{$bold:!0,$color:"white",$fontSize:64,$lineHeight:96},o),React__default.default.createElement(heading.H,{$color:"grey-8",$fontSize:28,$lineHeight:36,$semiBold:!0},d))),React__default.default.createElement(PlaylistWrapper,null,l.map((e,t)=>React__default.default.createElement(playlistItem.PlaylistItem,{duration:e.duration,isPaidUser:a,key:e.id,playing:e.id===u?.id&&f,progress:_,onPause:()=>c(!1),onPlay:()=>{r(t),c(!0)},title:e.title,thumbnail:e.thumbnail}))),a&&React__default.default.createElement(Shade,{$isFullscreen:p},React__default.default.createElement(Button,{onClick:()=>s(e=>!e)},p?React__default.default.createElement(arrow_up.ArrowUp,{color:"grey-0",size:24}):React__default.default.createElement(chevron_down.ChevronDown,{color:"white",size:24}))),!!u&&React__default.default.createElement(BottomBarWrapper,null,React__default.default.createElement(audioPlayer.AudioPlayer,{onListen:e=>{m(e),t&&t(e)},onPause:()=>c(!1),onPlay:()=>c(!0),playing:f,progress:_,src:u.src,thumbnail:u.thumbnail,title:u.title})))},Wrapper=styled__default.default.div`
+  ${({$fullscreen:e})=>e?"height: 100vh;":"height: 744px;"}
   width: 100vw;
   position: relative;
   padding-bottom: 24px;
   overflow-y: auto;
   overflow-x: hidden;
   background-color: var(--color-grey-0);
-`;
-const ThumbnailWrapper = styled.div `
+`,ThumbnailWrapper=styled__default.default.div`
   width: 100%;
   max-width: 2240px;
   margin: 0 auto;
@@ -54,8 +18,7 @@ const ThumbnailWrapper = styled.div `
     position: absolute;
     z-index: 0;
   }
-`;
-const Shade = styled.div `
+`,Shade=styled__default.default.div`
   position: absolute;
   bottom: 0px;
   left: 0px;
@@ -63,26 +26,22 @@ const Shade = styled.div `
   height: 160px;
   display: flex;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
-  ${({ $isFullscreen }) => $isFullscreen
-    ? `padding: 0px 24px;
+  ${({$isFullscreen:e})=>e?`padding: 0px 24px;
     align-items: flex-start;
     justify-content: flex-end;
     button {
       background-color: white;
-    }`
-    : `padding: 96px 0px 16px;
+    }`:`padding: 96px 0px 16px;
     align-items: center;
     justify-content: center;
     button {
       background-color: transparent;
     }`}
-`;
-const Button = styled.button `
+`,Button=styled__default.default.button`
   padding: 12px;
   appearance: none;
   border-radius: 50%;
-`;
-const PlaylistWrapper = styled.div `
+`,PlaylistWrapper=styled__default.default.div`
   width: 100%;
   max-width: 2240px;
   margin: 0 auto;
@@ -92,8 +51,7 @@ const PlaylistWrapper = styled.div `
   display: flex;
   flex-direction: column;
   overflow-y: auto;
-`;
-const BottomBarWrapper = styled.nav `
+`,BottomBarWrapper=styled__default.default.nav`
   position: fixed;
   z-index: 50000;
-`;
+`;exports.AudioPlaylist=AudioPlaylist;

package/dist/components/media/audio-playlist/playlist-item.js

@@ -1,34 +1,5 @@
-'use client';
-import React from 'react';
-import Image from 'next/image';
-import styled from 'styled-components';
-import { Box } from '../../atoms/box/box';
-import { P } from '../../atoms/typography/paragraph';
-import { PauseSolid } from '../../../icons/audio_video/pause_solid';
-import { PlaySolid } from '../../../icons/audio_video/play_solid';
-import { AudioProgressBar } from '../audio';
-import { secondsToTimestamp } from '../../../utils/time';
-import 'react-h5-audio-player/lib/styles.css';
-export const PlaylistItem = ({ duration, onPause, onPlay, playing, isPaidUser, progress, thumbnail, title, }) => {
-    const handleClick = playing ? onPause : onPlay;
-    return (React.createElement(ItemWrapper, { "$playing": playing, onClick: handleClick },
-        React.createElement(Box, { "$gap": 24, "$dir": "row", "$align": "center" },
-            React.createElement(Image, { alt: "", height: 64, src: thumbnail, width: 64, style: {
-                    height: 64,
-                    marginRight: 8,
-                    borderRadius: 8,
-                } }),
-            React.createElement(Box, { "$align": "center", sx: "flex: 1 1 250px; width: 250px;" },
-                isPaidUser &&
-                    (playing ? (React.createElement(Button, { onClick: onPause },
-                        React.createElement(PauseSolid, { color: "white", size: 24 }))) : (React.createElement(Button, { onClick: onPlay },
-                        React.createElement(PlaySolid, { color: "white", size: 24 })))),
-                React.createElement(P, { "$bold": true, "$color": "white", "$fontSize": 14, "$lineHeight": 20, "$textClampLines": 1, sx: "margin-right: 32px;" }, title))),
-        React.createElement(Box, { "$align": "center", sx: "flex: 3; margin-left: auto;" },
-            React.createElement(P, { "$color": "grey-9", "$fontSize": 10, "$lineHeight": 14, "$sx": "flex: 0; width: fit-content; min-width: 56px;" }, secondsToTimestamp(duration)),
-            React.createElement(AudioProgressBar, { duration: duration || 0, progress: playing ? progress : 0 }))));
-};
-const ItemWrapper = styled.button `
+"use client";
+"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),pause_solid=require("../../../icons/audio_video/pause_solid.js"),play_solid=require("../../../icons/audio_video/play_solid.js"),progressBar=require("../audio/progress-bar.js"),time=require("../../../utils/time.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("react-h5-audio-player/lib/styles.css");var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),styled__default=_interopDefaultCompat(styled);const PlaylistItem=({duration:e,onPause:t,onPlay:a,playing:r,isPaidUser:l,progress:o,thumbnail:i,title:d})=>{var u=r?t:a;return React__default.default.createElement(ItemWrapper,{$playing:r,onClick:u},React__default.default.createElement(box.Box,{$gap:24,$dir:"row",$align:"center"},React__default.default.createElement(Image__default.default,{alt:"",height:64,src:i,width:64,style:{height:64,marginRight:8,borderRadius:8}}),React__default.default.createElement(box.Box,{$align:"center",sx:"flex: 1 1 250px; width: 250px;"},l&&(r?React__default.default.createElement(Button,{onClick:t},React__default.default.createElement(pause_solid.PauseSolid,{color:"white",size:24})):React__default.default.createElement(Button,{onClick:a},React__default.default.createElement(play_solid.PlaySolid,{color:"white",size:24}))),React__default.default.createElement(paragraph.P,{$bold:!0,$color:"white",$fontSize:14,$lineHeight:20,$textClampLines:1,sx:"margin-right: 32px;"},d))),React__default.default.createElement(box.Box,{$align:"center",sx:"flex: 3; margin-left: auto;"},React__default.default.createElement(paragraph.P,{$color:"grey-9",$fontSize:10,$lineHeight:14,$sx:"flex: 0; width: fit-content; min-width: 56px;"},time.secondsToTimestamp(e)),React__default.default.createElement(progressBar.AudioProgressBar,{duration:e||0,progress:r?o:0})))},ItemWrapper=styled__default.default.button`
   padding: 16px 32px;
   display: flex;
   flex-direction: row;
@@ -36,14 +7,11 @@ const ItemWrapper = styled.button `
   border-radius: 8px;
   border: none;
   cursor: pointer;
-  ${({ $playing }) => $playing
-    ? 'background-color: var(--color-grey-2);'
-    : `background-color: transparent;
+  ${({$playing:e})=>e?"background-color: var(--color-grey-2);":`background-color: transparent;
     &:hover {
       background-color: var(--color-grey-1);
     }`}
-`;
-const Button = styled.div `
+`,Button=styled__default.default.div`
   padding: 16px;
   appearance: none;
-`;
+`;exports.PlaylistItem=PlaylistItem;

package/dist/components/media/audio-preview/audio-preview.js

@@ -1,68 +1,5 @@
-'use client';
-import React from 'react';
-import Image from 'next/image';
-import styled from 'styled-components';
-import Player, { RHAP_UI } from 'react-h5-audio-player';
-import { P } from '../../atoms/typography/paragraph';
-import { PauseSolid } from '../../../icons/audio_video/pause_solid';
-import { PlaySolid } from '../../../icons/audio_video/play_solid';
-import { AudioProgressBar } from '../audio';
-import { FF_INTERVAL, LISTEN_CALLBACK_INTERVAL } from '../constants';
-import 'react-h5-audio-player/lib/styles.css';
-const AudioPreview = ({ playlist, sx }) => {
-    const [currPlayingIdx, setCurrPlayingIdx] = React.useState(-1);
-    const handlePlay = (idx) => {
-        setCurrPlayingIdx(idx);
-    };
-    return (React.createElement(Wrapper, { "$sx": sx }, playlist.map((item, i) => (React.createElement(AudioPreviewItem, { key: `audio-preview-${item.id}`, onPause: () => handlePlay(-1), onPlay: () => handlePlay(i), playing: i === currPlayingIdx, ...item })))));
-};
-const AudioPreviewItem = ({ onPause, onPlay, playing, src, thumbnail, title, }) => {
-    const [progress, setProgress] = React.useState(0);
-    const [ref, setRef] = React.useState(null);
-    React.useEffect(() => {
-        if (ref?.audio.current && !playing) {
-            ref.audio.current.pause();
-        }
-    }, [playing]);
-    const handleListen = () => {
-        if (ref?.audio.current?.currentTime) {
-            setProgress(ref.audio.current.currentTime);
-        }
-    };
-    const handleSeek = (percent) => {
-        if (ref?.audio.current) {
-            ref.audio.current.currentTime = ref.audio.current.duration * percent;
-        }
-    };
-    return (React.createElement(ItemWrapper, { "$playing": playing },
-        React.createElement(Player, { customIcons: {
-                forward: React.createElement(React.Fragment, null),
-                pause: React.createElement(PauseSolid, { color: "grey-3", size: 20 }),
-                play: React.createElement(PlaySolid, { color: "grey-3", size: 20 }),
-                rewind: React.createElement(React.Fragment, null),
-            }, customAdditionalControls: [
-                React.createElement(Image, { alt: "", height: 64, src: thumbnail, width: 64, style: {
-                        height: 64,
-                        marginRight: 8,
-                        borderRadius: 8,
-                    } }),
-            ], customControlsSection: [
-                RHAP_UI.ADDITIONAL_CONTROLS,
-                RHAP_UI.MAIN_CONTROLS,
-            ], customProgressBarSection: [
-                React.createElement(P, { "$bold": true, "$fontSize": 14, "$lineHeight": 20, "$textClampLines": 1, sx: "margin-right: 32px;" }, title),
-                RHAP_UI.DURATION,
-                React.createElement(Spacer, null),
-                React.createElement(AudioProgressBar, { key: `audio-progress-${progress}`, duration: ref?.audio.current?.duration || 0, progress: progress, onSeek: handleSeek }),
-            ], customVolumeControls: [React.createElement(React.Fragment, null)], hasDefaultKeyBindings: false, layout: "horizontal-reverse", listenInterval: LISTEN_CALLBACK_INTERVAL, onListen: handleListen, onPause: onPause, onPlay: onPlay, progressJumpSteps: {
-                backward: FF_INTERVAL,
-                forward: FF_INTERVAL,
-            }, ref: setRef, src: src })));
-};
-AudioPreviewItem.displayName = 'AudioPreview.Item';
-AudioPreview.Item = AudioPreviewItem;
-export { AudioPreview };
-const Wrapper = styled.div `
+"use client";
+"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),Player=require("react-h5-audio-player"),paragraph=require("../../atoms/typography/paragraph.js"),pause_solid=require("../../../icons/audio_video/pause_solid.js"),play_solid=require("../../../icons/audio_video/play_solid.js"),progressBar=require("../audio/progress-bar.js"),constants=require("../constants.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("react-h5-audio-player/lib/styles.css");var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),styled__default=_interopDefaultCompat(styled),Player__default=_interopDefaultCompat(Player);const AudioPreview=({playlist:e,sx:t})=>{const[a,r]=React__default.default.useState(-1),l=e=>{r(e)};return React__default.default.createElement(Wrapper,{$sx:t},e.map((e,t)=>React__default.default.createElement(AudioPreviewItem,{key:"audio-preview-"+e.id,onPause:()=>l(-1),onPlay:()=>l(t),playing:t===a,...e})))},AudioPreviewItem=({onPause:e,onPlay:t,playing:a,src:r,thumbnail:l,title:o})=>{const[u,d]=React__default.default.useState(0),[i,n]=React__default.default.useState(null);React__default.default.useEffect(()=>{i?.audio.current&&!a&&i.audio.current.pause()},[a]);return React__default.default.createElement(ItemWrapper,{$playing:a},React__default.default.createElement(Player__default.default,{customIcons:{forward:React__default.default.createElement(React__default.default.Fragment,null),pause:React__default.default.createElement(pause_solid.PauseSolid,{color:"grey-3",size:20}),play:React__default.default.createElement(play_solid.PlaySolid,{color:"grey-3",size:20}),rewind:React__default.default.createElement(React__default.default.Fragment,null)},customAdditionalControls:[React__default.default.createElement(Image__default.default,{alt:"",height:64,src:l,width:64,style:{height:64,marginRight:8,borderRadius:8}})],customControlsSection:[Player.RHAP_UI.ADDITIONAL_CONTROLS,Player.RHAP_UI.MAIN_CONTROLS],customProgressBarSection:[React__default.default.createElement(paragraph.P,{$bold:!0,$fontSize:14,$lineHeight:20,$textClampLines:1,sx:"margin-right: 32px;"},o),Player.RHAP_UI.DURATION,React__default.default.createElement(Spacer,null),React__default.default.createElement(progressBar.AudioProgressBar,{key:"audio-progress-"+u,duration:i?.audio.current?.duration||0,progress:u,onSeek:e=>{i?.audio.current&&(i.audio.current.currentTime=i.audio.current.duration*e)}})],customVolumeControls:[React__default.default.createElement(React__default.default.Fragment,null)],hasDefaultKeyBindings:!1,layout:"horizontal-reverse",listenInterval:constants.LISTEN_CALLBACK_INTERVAL,onListen:()=>{i?.audio.current?.currentTime&&d(i.audio.current.currentTime)},onPause:e,onPlay:t,progressJumpSteps:{backward:constants.FF_INTERVAL,forward:constants.FF_INTERVAL},ref:n,src:r}))},Wrapper=(AudioPreviewItem.displayName="AudioPreview.Item",AudioPreview.Item=AudioPreviewItem,styled__default.default.div`
   display: flex;
   flex-direction: column;
   border-radius: 8px;
@@ -99,17 +36,13 @@ const Wrapper = styled.div `
     }
   }
 
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const ItemWrapper = styled.div `
+  ${({$sx:e})=>e||""}
+`),ItemWrapper=styled__default.default.div`
   padding: 16px 24px;
-  ${({ $playing }) => $playing
-    ? 'background-color: var(--color-grey-10);'
-    : `background-color: var(--color-grey-9);
+  ${({$playing:e})=>e?"background-color: var(--color-grey-10);":`background-color: var(--color-grey-9);
     &:hover {
       background-color: var(--color-grey-8);
     }`}
-`;
-const Spacer = styled.div `
+`,Spacer=styled__default.default.div`
   margin-right: 16px;
-`;
+`;exports.AudioPreview=AudioPreview;

package/dist/components/media/constants.js

@@ -1,4 +1 @@
-// appears to be instantaneous
-export const LISTEN_CALLBACK_INTERVAL = 200;
-// fast forward 30 seconds
-export const FF_INTERVAL = 30000;
+"use strict";const LISTEN_CALLBACK_INTERVAL=200,FF_INTERVAL=3e4;exports.FF_INTERVAL=FF_INTERVAL,exports.LISTEN_CALLBACK_INTERVAL=LISTEN_CALLBACK_INTERVAL;

package/dist/components/media/video/video.js

@@ -1,32 +1 @@
-import React from 'react';
-import ReactPlayer from 'react-player';
-import Image from 'next/image';
-export const Video = ({ controls = true, loop = false, muted, playsInline, src, subtitles, style, thumbnail, thumbnailObjectFit = 'contain', forwardedRef, playing = true, }) => {
-    const internalRef = React.useRef(null);
-    const ref = forwardedRef || internalRef;
-    return (React.createElement(ReactPlayer, { config: {
-            file: {
-                attributes: {
-                    crossOrigin: 'true',
-                },
-                forceHLS: true,
-                hlsOptions: {
-                    autoStartLoad: true,
-                },
-                tracks: subtitles?.map((subtitle) => ({
-                    kind: 'subtitles',
-                    label: subtitle.label,
-                    src: subtitle.src,
-                    srcLang: subtitle.locale,
-                })),
-            },
-        }, controls: controls, height: "100%", light: thumbnail ? (React.createElement(Image, { alt: "thumbnail for trailer", layout: "fill", priority: true, quality: 100, src: thumbnail, style: { objectFit: thumbnailObjectFit } })) : undefined, loop: loop, muted: muted, pip: false, playsinline: playsInline, playing: playing, ref: ref, style: {
-            backgroundColor: 'var(--color-grey-0)',
-            maxHeight: 720,
-            maxWidth: 1280,
-            minHeight: 480,
-            overflow: 'hidden',
-            position: 'relative',
-            ...(style || {}),
-        }, url: src, width: "100%" }));
-};
+"use strict";var React=require("react"),ReactPlayer=require("react-player"),Image=require("next/image");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),ReactPlayer__default=_interopDefaultCompat(ReactPlayer),Image__default=_interopDefaultCompat(Image);const Video=({controls:e=!0,loop:t=!1,muted:a,playsInline:l,src:r,subtitles:i,style:o,thumbnail:u,thumbnailObjectFit:n="contain",forwardedRef:c,playing:f=!0})=>{var d=React__default.default.useRef(null),c=c||d;return React__default.default.createElement(ReactPlayer__default.default,{config:{file:{attributes:{crossOrigin:"true"},forceHLS:!0,hlsOptions:{autoStartLoad:!0},tracks:i?.map(e=>({kind:"subtitles",label:e.label,src:e.src,srcLang:e.locale}))}},controls:e,height:"100%",light:u?React__default.default.createElement(Image__default.default,{alt:"thumbnail for trailer",layout:"fill",priority:!0,quality:100,src:u,style:{objectFit:n}}):void 0,loop:t,muted:a,pip:!1,playsinline:l,playing:f,ref:c,style:{backgroundColor:"var(--color-grey-0)",maxHeight:720,maxWidth:1280,minHeight:480,overflow:"hidden",position:"relative",...o||{}},url:r,width:"100%"})};exports.Video=Video;

package/dist/components/media/video-player/playlist-item.js

@@ -1,23 +1,4 @@
-import React from 'react';
-import Image from 'next/image';
-import { styled } from 'styled-components';
-import { Box } from '../../../components/atoms/box/box';
-import { SecToDuration } from '../../../components/atoms/seconds_to_duration';
-import { P } from '../../../components/atoms/typography/paragraph';
-import { Lock } from '../../../icons/security/lock';
-import { PlaySolid } from '../../../icons/audio_video/play_solid';
-export const PlaylistItem = React.forwardRef(({ duration, onClick, playable, progress = 0, shortDescription, thumbnail, nowplaying, playlistItemId, title, }, ref) => {
-    return (React.createElement(Wrapper, { ref: ref, onClick: playable ? onClick : undefined, "$playable": playable, playlistItemId: playlistItemId, nowplaying: nowplaying },
-        playable ? (React.createElement(PlaySolid, { color: "white", size: 16, sx: "position: absolute; left: 10px; bottom: 10px;" })) : (React.createElement(Lock, { color: "white", size: 16, sx: "position: absolute; left: 10px; bottom: 10px;" })),
-        React.createElement(Image, { alt: `thumbnail for ${title}`, height: 75, quality: 100, src: thumbnail, width: 133 }),
-        progress && duration ? (React.createElement(ProgressBar, { progressPercent: progress / duration })) : null,
-        React.createElement(Box, { "$dir": "column", "$gap": 4, sx: "margin-left: 16px; margin-right: auto; flex: 0 1 auto; flex-basis: content;" },
-            React.createElement(P, { "$color": "grey-10", "$semiBold": true }, title),
-            shortDescription && (React.createElement(P, { "$color": "grey-9", "$fontSize": 14, "$lineHeight": 20, "$textClampLines": 2, sx: "max-width: min(500px, 75%);" }, shortDescription))),
-        duration && (React.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, sx: "flex-shrink: 0;" },
-            React.createElement(SecToDuration, { seconds: duration })))));
-});
-const Wrapper = styled.div `
+"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),seconds_to_duration=require("../../atoms/seconds_to_duration/seconds_to_duration.js"),paragraph=require("../../atoms/typography/paragraph.js"),lock=require("../../../icons/security/lock.js"),play_solid=require("../../../icons/audio_video/play_solid.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const PlaylistItem=React__default.default.forwardRef(({duration:e,onClick:t,playable:a,progress:l=0,shortDescription:r,thumbnail:o,nowplaying:i,playlistItemId:n,title:s},d)=>React__default.default.createElement(Wrapper,{ref:d,onClick:a?t:void 0,$playable:a,playlistItemId:n,nowplaying:i},a?React__default.default.createElement(play_solid.PlaySolid,{color:"white",size:16,sx:"position: absolute; left: 10px; bottom: 10px;"}):React__default.default.createElement(lock.Lock,{color:"white",size:16,sx:"position: absolute; left: 10px; bottom: 10px;"}),React__default.default.createElement(Image__default.default,{alt:"thumbnail for "+s,height:75,quality:100,src:o,width:133}),l&&e?React__default.default.createElement(ProgressBar,{progressPercent:l/e}):null,React__default.default.createElement(box.Box,{$dir:"column",$gap:4,sx:"margin-left: 16px; margin-right: auto; flex: 0 1 auto; flex-basis: content;"},React__default.default.createElement(paragraph.P,{$color:"grey-10",$semiBold:!0},s),r&&React__default.default.createElement(paragraph.P,{$color:"grey-9",$fontSize:14,$lineHeight:20,$textClampLines:2,sx:"max-width: min(500px, 75%);"},r)),e&&React__default.default.createElement(paragraph.P,{$color:"grey-8",$fontSize:14,$lineHeight:20,sx:"flex-shrink: 0;"},React__default.default.createElement(seconds_to_duration.SecToDuration,{seconds:e})))),Wrapper=styled.styled.div`
   width: 100%;
   flex: 0 1 auto;
   padding: 6px;
@@ -25,23 +6,15 @@ const Wrapper = styled.div `
   align-items: center;
   position: relative;
   &:hover {
-    ${({ playlistItemId, nowplaying }) => playlistItemId === nowplaying ? '' : 'background: var(--color-grey-1);'}
+    ${({playlistItemId:e,nowplaying:t})=>e===t?"":"background: var(--color-grey-1);"}
   }
   box-sizing: border-box;
   cursor: pointer;
-  ${({ $playable }) => $playable ? '' : 'pointer-events: none; cursor: initial;'}
-  ${({ playlistItemId, nowplaying }) => nowplaying !== null &&
-    nowplaying !== undefined &&
-    playlistItemId === nowplaying
-    ? 'background-color: #4a4f55;'
-    : 'background-color: initial;'}
-`;
-const ProgressBar = ({ progressPercent }) => (React.createElement(ProgressBarSvg, { viewBox: "0 0 133 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    React.createElement("rect", { width: 133 * progressPercent, height: "2", fill: "var(--color-primary-blue-2)" }),
-    React.createElement("rect", { x: 133 * progressPercent, width: 133 - 133 * progressPercent, height: "2", fill: "var(--color-grey-8)" })));
-const ProgressBarSvg = styled.svg `
+  ${({$playable:e})=>e?"":"pointer-events: none; cursor: initial;"}
+  ${({playlistItemId:e,nowplaying:t})=>null!=t&&e===t?"background-color: #4a4f55;":"background-color: initial;"}
+`,ProgressBar=({progressPercent:e})=>React__default.default.createElement(ProgressBarSvg,{viewBox:"0 0 133 2",fill:"none",xmlns:"http://www.w3.org/2000/svg"},React__default.default.createElement("rect",{width:133*e,height:"2",fill:"var(--color-primary-blue-2)"}),React__default.default.createElement("rect",{x:133*e,width:133-133*e,height:"2",fill:"var(--color-grey-8)"})),ProgressBarSvg=styled.styled.svg`
   width: 133px;
   position: absolute;
   bottom: 5px;
   left: 5px;
-`;
+`;exports.PlaylistItem=PlaylistItem;

package/dist/components/media/video-player/video.js

@@ -1,134 +1,5 @@
-'use client';
-import React from 'react';
-import Image from 'next/image';
-import ReactPlayer from 'react-player';
-import { styled } from 'styled-components';
-import { Box } from '../../../components/atoms/box/box';
-import { H } from '../../../components/atoms/typography/heading';
-import { P } from '../../../components/atoms/typography/paragraph';
-import { Button } from '../../../components/actions/button/button';
-import { LockCircle } from '../../../icons/security/lock_circle';
-import { PlaySolid } from '../../../icons/audio_video/play_solid';
-import { PlaylistItem } from './playlist-item';
-import { Tabs } from '../../../components/navigation';
-const TrailerListItem = ({ trailer, title, handleSetPlayingTrailer, }) => (React.createElement(PlaylistItem, { onClick: () => handleSetPlayingTrailer(true), playable: true, thumbnail: trailer.thumbnail, title: `${title} Trailer` }));
-const ButtonViewAll = ({ showingAll, toggleShowingAll, }) => {
-    return (React.createElement(ButtonViewAllWrapper, null,
-        React.createElement(Button, { onClick: toggleShowingAll, size: "small", type: "text" }, showingAll ? 'Collapse' : 'View all')));
-};
-/**
- * ReactPlayer props reference -> https://www.npmjs.com/package/react-player#props
- * HLS Option props reference -> https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
- */
-export const VideoPlayer = ({ activeIndex, pip, playable, playlist, onPipChange, onProgress, orientation, setMediaItem, forwardedRef, subtitle, title, trailer, }) => {
-    const [tabIndex, setTabIndex] = React.useState(0);
-    const [showingAll, setShowingAll] = React.useState(false);
-    const [playingTrailer, setPlayingTrailer] = React.useState(!playable);
-    const [nowPlaying, setNowPlaying] = React.useState(playlist?.[activeIndex].id || null);
-    const internalRef = React.useRef(null);
-    const ref = forwardedRef || internalRef;
-    const postRefs = React.useRef({});
-    const wrapperRef = React.useRef(null);
-    const mediaItem = playingTrailer ? trailer : playlist?.[activeIndex];
-    React.useEffect(() => {
-        if (playlist && playlist.length > 0) {
-            if (nowPlaying) {
-                const currentPlaylistItemRef = postRefs.current[nowPlaying];
-                if (currentPlaylistItemRef) {
-                    currentPlaylistItemRef.scrollIntoView({
-                        behavior: 'smooth',
-                        block: 'center',
-                    });
-                }
-            }
-        }
-    }, [playlist, nowPlaying]);
-    const handleReady = () => {
-        if (!playingTrailer) {
-            const currTime = ref?.current?.getCurrentTime();
-            if (currTime === 0 && mediaItem?.progress !== 0) {
-                ref.current.seekTo(mediaItem.progress);
-            }
-        }
-    };
-    const handleMediaItemChange = (id) => {
-        setPlayingTrailer(false);
-        setMediaItem(id);
-    };
-    const toggleShowingAll = () => setShowingAll((prev) => !prev);
-    if (!mediaItem)
-        return null;
-    return (React.createElement(Wrapper, { "$orientation": orientation },
-        React.createElement(InnerWrapper, { "$orientation": orientation, "$playable": playable || playingTrailer },
-            orientation === 'vertical' && (React.createElement(Box, { "$dir": "column", "$gap": 4, sx: "margin: 24px;" },
-                React.createElement(H, { as: "h2", "$bold": true, "$color": "white", "$fontSize": 28, "$lineHeight": 36 }, title),
-                React.createElement(P, { as: "h3", "$bold": true, "$color": "grey-8" }, subtitle))),
-            React.createElement(ReactPlayer, { className: "player", config: {
-                    file: {
-                        attributes: {
-                            crossOrigin: 'true',
-                        },
-                        forceHLS: true,
-                        hlsOptions: {
-                            autoStartLoad: true,
-                        },
-                        tracks: (mediaItem?.subtitles || []).map((subtitle) => ({
-                            kind: 'subtitles',
-                            label: subtitle.label,
-                            src: subtitle.src,
-                            srcLang: subtitle.locale,
-                        })),
-                    },
-                }, controls: true, height: "100%", light: React.createElement(Image, { alt: `thumbnail for ${title}`, layout: "fill", priority: true, quality: 100, style: {
-                        objectFit: 'contain',
-                    }, src: mediaItem.thumbnail }), progressInterval: 4000, onDisablePIP: () => onPipChange && onPipChange(false), onEnablePIP: () => onPipChange && onPipChange(true), onProgress: onProgress, onReady: handleReady, pip: pip, playIcon: playable || playingTrailer ? (React.createElement(PlaySolid, { color: "white", size: 24, sx: "position: absolute; width: 54px; height: 54px;" })) : (React.createElement(LockCircle, { color: "white", size: 24, sx: "position: absolute; width: 54px; height: 54px;" })), playing: playable, ref: ref, style: {
-                    backgroundColor: 'var(--color-grey-0)',
-                    maxHeight: 720,
-                    maxWidth: '100%',
-                    minHeight: 480,
-                    overflow: 'hidden',
-                    position: 'relative',
-                }, url: mediaItem.src, width: "100%" }),
-            orientation === 'horizontal' && (React.createElement(Side, null,
-                React.createElement(ScalableContainerWrapper, { "$showingAll": showingAll },
-                    React.createElement(Box, { "$dir": "column", "$gap": 4 },
-                        React.createElement(H, { as: "h2", "$bold": true, "$color": "white", "$fontSize": 28, "$lineHeight": 36 }, title),
-                        React.createElement(P, { as: "h3", "$bold": true, "$color": "grey-8" }, subtitle)),
-                    React.createElement(Box, { "$align": "center" },
-                        React.createElement(Tabs, { activeIndex: tabIndex, onChange: (index) => setTabIndex(index), items: [
-                                { label: 'All lessons', color: 'dark' },
-                                { label: 'Trailer', color: 'dark' },
-                            ], size: "medium", sx: "justify-content: flex-start;" }),
-                        React.createElement(ButtonViewAll, { showingAll: showingAll, toggleShowingAll: toggleShowingAll })),
-                    [
-                        React.createElement(HorizontalPlaylistWrapper, { ref: wrapperRef, "$showingAll": showingAll }, playlist.map((playlistItem, index) => (React.createElement(PlaylistItem, { nowplaying: nowPlaying, key: playlistItem.id, ref: (el) => {
-                                postRefs.current[playlistItem.id] = el;
-                            }, playlistItemId: playlistItem.id, duration: playlistItem.duration, onClick: () => {
-                                handleMediaItemChange(index);
-                                setNowPlaying(playlistItem.id);
-                            }, playable: true, progress: playlistItem.progress, shortDescription: playlistItem.shortDescription, thumbnail: playlistItem.thumbnail, title: playlistItem.title })))),
-                        !!trailer && (React.createElement(TrailerListItem, { title: title, handleSetPlayingTrailer: setPlayingTrailer, trailer: trailer })),
-                    ][tabIndex]))),
-            orientation === 'vertical' && (React.createElement(Box, { "$dir": "column", "$gap": 24, sx: showingAll ? `z-index: 3; position:relative;` : 'height: auto' },
-                React.createElement(ScalableContainerWrapperVertical, { "$showingAll": showingAll },
-                    React.createElement(Box, { sx: "padding: 0 1.5rem;", "$align": "center" },
-                        React.createElement(Tabs, { activeIndex: tabIndex, onChange: (index) => setTabIndex(index), items: [
-                                { label: 'All lessons', color: 'dark' },
-                                { label: 'Trailer', color: 'dark' },
-                            ], size: "medium", sx: "justify-content: flex-start;" }),
-                        React.createElement(ButtonViewAll, { showingAll: showingAll, toggleShowingAll: toggleShowingAll })),
-                    [
-                        React.createElement(VerticalPlaylistWrapper, { ref: wrapperRef, "$showingAll": showingAll }, playlist.map((playlistItem, index) => (React.createElement(PlaylistItem, { duration: playlistItem.duration, key: playlistItem.id, ref: (el) => {
-                                postRefs.current[playlistItem.id] = el;
-                            }, onClick: () => {
-                                handleMediaItemChange(index);
-                                setNowPlaying(playlistItem.id);
-                            }, playable: playable, progress: playlistItem.progress, shortDescription: playlistItem.shortDescription, thumbnail: playlistItem.thumbnail, title: playlistItem.title })))),
-                        !!trailer && (React.createElement(Box, { "$dir": "column", "$gap": 8, sx: "margin: 0px 24px;" },
-                            React.createElement(TrailerListItem, { title: title, handleSetPlayingTrailer: setPlayingTrailer, trailer: trailer }))),
-                    ][tabIndex]))))));
-};
-const Wrapper = styled.div `
+"use client";
+"use strict";var React=require("react"),Image=require("next/image"),ReactPlayer=require("react-player"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),button=require("../../actions/button/button.js"),lock_circle=require("../../../icons/security/lock_circle.js"),play_solid=require("../../../icons/audio_video/play_solid.js"),playlistItem=require("./playlist-item.js"),tabs=(require("../../navigation/breadcrumb/breadcrumb.js"),require("../../navigation/inner/inner.js"),require("../../navigation/tabs/tabs.js"));function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),ReactPlayer__default=_interopDefaultCompat(ReactPlayer);const TrailerListItem=({trailer:e,title:t,handleSetPlayingTrailer:a})=>React__default.default.createElement(playlistItem.PlaylistItem,{onClick:()=>a(!0),playable:!0,thumbnail:e.thumbnail,title:t+" Trailer"}),ButtonViewAll=({showingAll:e,toggleShowingAll:t})=>React__default.default.createElement(ButtonViewAllWrapper,null,React__default.default.createElement(button.Button,{onClick:t,size:"small",type:"text"},e?"Collapse":"View all")),VideoPlayer=({activeIndex:e,pip:t,playable:a,playlist:l,onPipChange:r,onProgress:i,orientation:o,setMediaItem:n,forwardedRef:d,subtitle:c,title:s,trailer:u})=>{const[p,f]=React__default.default.useState(0),[g,b]=React__default.default.useState(!1),[x,h]=React__default.default.useState(!a),[m,y]=React__default.default.useState(l?.[e].id||null);var _=React__default.default.useRef(null);const w=d||_,R=React__default.default.useRef({});d=React__default.default.useRef(null);const v=x?u:l?.[e];React__default.default.useEffect(()=>{var e;l&&0<l.length&&m&&(e=R.current[m])&&e.scrollIntoView({behavior:"smooth",block:"center"})},[l,m]);const $=e=>{h(!1),n(e)};_=()=>b(e=>!e);return v?React__default.default.createElement(Wrapper,{$orientation:o},React__default.default.createElement(InnerWrapper,{$orientation:o,$playable:a||x},"vertical"===o&&React__default.default.createElement(box.Box,{$dir:"column",$gap:4,sx:"margin: 24px;"},React__default.default.createElement(heading.H,{as:"h2",$bold:!0,$color:"white",$fontSize:28,$lineHeight:36},s),React__default.default.createElement(paragraph.P,{as:"h3",$bold:!0,$color:"grey-8"},c)),React__default.default.createElement(ReactPlayer__default.default,{className:"player",config:{file:{attributes:{crossOrigin:"true"},forceHLS:!0,hlsOptions:{autoStartLoad:!0},tracks:(v?.subtitles||[]).map(e=>({kind:"subtitles",label:e.label,src:e.src,srcLang:e.locale}))}},controls:!0,height:"100%",light:React__default.default.createElement(Image__default.default,{alt:"thumbnail for "+s,layout:"fill",priority:!0,quality:100,style:{objectFit:"contain"},src:v.thumbnail}),progressInterval:4e3,onDisablePIP:()=>r&&r(!1),onEnablePIP:()=>r&&r(!0),onProgress:i,onReady:()=>{x||0===w?.current?.getCurrentTime()&&0!==v?.progress&&w.current.seekTo(v.progress)},pip:t,playIcon:a||x?React__default.default.createElement(play_solid.PlaySolid,{color:"white",size:24,sx:"position: absolute; width: 54px; height: 54px;"}):React__default.default.createElement(lock_circle.LockCircle,{color:"white",size:24,sx:"position: absolute; width: 54px; height: 54px;"}),playing:a,ref:w,style:{backgroundColor:"var(--color-grey-0)",maxHeight:720,maxWidth:"100%",minHeight:480,overflow:"hidden",position:"relative"},url:v.src,width:"100%"}),"horizontal"===o&&React__default.default.createElement(Side,null,React__default.default.createElement(ScalableContainerWrapper,{$showingAll:g},React__default.default.createElement(box.Box,{$dir:"column",$gap:4},React__default.default.createElement(heading.H,{as:"h2",$bold:!0,$color:"white",$fontSize:28,$lineHeight:36},s),React__default.default.createElement(paragraph.P,{as:"h3",$bold:!0,$color:"grey-8"},c)),React__default.default.createElement(box.Box,{$align:"center"},React__default.default.createElement(tabs.Tabs,{activeIndex:p,onChange:e=>f(e),items:[{label:"All lessons",color:"dark"},{label:"Trailer",color:"dark"}],size:"medium",sx:"justify-content: flex-start;"}),React__default.default.createElement(ButtonViewAll,{showingAll:g,toggleShowingAll:_})),[React__default.default.createElement(HorizontalPlaylistWrapper,{ref:d,$showingAll:g},l.map((t,e)=>React__default.default.createElement(playlistItem.PlaylistItem,{nowplaying:m,key:t.id,ref:e=>{R.current[t.id]=e},playlistItemId:t.id,duration:t.duration,onClick:()=>{$(e),y(t.id)},playable:!0,progress:t.progress,shortDescription:t.shortDescription,thumbnail:t.thumbnail,title:t.title}))),!!u&&React__default.default.createElement(TrailerListItem,{title:s,handleSetPlayingTrailer:h,trailer:u})][p])),"vertical"===o&&React__default.default.createElement(box.Box,{$dir:"column",$gap:24,sx:g?"z-index: 3; position:relative;":"height: auto"},React__default.default.createElement(ScalableContainerWrapperVertical,{$showingAll:g},React__default.default.createElement(box.Box,{sx:"padding: 0 1.5rem;",$align:"center"},React__default.default.createElement(tabs.Tabs,{activeIndex:p,onChange:e=>f(e),items:[{label:"All lessons",color:"dark"},{label:"Trailer",color:"dark"}],size:"medium",sx:"justify-content: flex-start;"}),React__default.default.createElement(ButtonViewAll,{showingAll:g,toggleShowingAll:_})),[React__default.default.createElement(VerticalPlaylistWrapper,{ref:d,$showingAll:g},l.map((t,e)=>React__default.default.createElement(playlistItem.PlaylistItem,{duration:t.duration,key:t.id,ref:e=>{R.current[t.id]=e},onClick:()=>{$(e),y(t.id)},playable:a,progress:t.progress,shortDescription:t.shortDescription,thumbnail:t.thumbnail,title:t.title}))),!!u&&React__default.default.createElement(box.Box,{$dir:"column",$gap:8,sx:"margin: 0px 24px;"},React__default.default.createElement(TrailerListItem,{title:s,handleSetPlayingTrailer:h,trailer:u}))][p])))):null},Wrapper=styled.styled.div`
   display: flex;
   justify-content: center;
   background-color: var(--color-grey-0);
@@ -137,29 +8,23 @@ const Wrapper = styled.div `
     object-fit: cover !important;
   }
 
-  ${({ $orientation }) => $orientation === 'vertical' ? 'max-width: 960px; height: max-content;' : ''}
-`;
-const PostWrapper = styled.div ``;
-const InnerWrapper = styled.div `
+  ${({$orientation:e})=>"vertical"===e?"max-width: 960px; height: max-content;":""}
+`,InnerWrapper=(styled.styled.div``,styled.styled.div`
   flex: 1;
   display: flex;
   justify-content: flex-end;
 
-  ${({ $playable }) => $playable
-    ? ''
-    : `
+  ${({$playable:e})=>e?"":`
     .player {
       cursor: initial;
       pointer-events: none;
       user-select: none;
     }`}
 
-  ${({ $orientation }) => $orientation === 'vertical'
-    ? `
+  ${({$orientation:e})=>"vertical"===e?`
     flex-direction: column;
     gap: 24px;
-    justify-content: flex-start;`
-    : `
+    justify-content: flex-start;`:`
       & > div:first-of-type {
         flex: 5;
         aspect-ratio: 1280 / 720;
@@ -167,44 +32,36 @@ const InnerWrapper = styled.div `
       & > div:last-of-type {
         flex: 3;
       }`}
-`;
-const Side = styled.div `
+`),Side=styled.styled.div`
   position: relative;
   flex: 1;
   box-sizing: border-box;
   height: 100%;
-`;
-const ScalableContainerWrapper = styled.div `
+`,ScalableContainerWrapper=styled.styled.div`
   position: absolute;
   flex: 1;
   width: 100%;
   padding: 1rem;
-  ${({ $showingAll }) => $showingAll
-    ? `
-  height: 100vh; z-index: 10;`
-    : 'height: 100%;'}
+  ${({$showingAll:e})=>e?`
+  height: 100vh; z-index: 10;`:"height: 100%;"}
   background: black;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   padding: 24px;
   gap: 24px;
-`;
-const ScalableContainerWrapperVertical = styled.div `
+`,ScalableContainerWrapperVertical=styled.styled.div`
   flex: 1;
   width: 100%;
-  ${({ $showingAll }) => $showingAll
-    ? `
+  ${({$showingAll:e})=>e?`
   position: absolute;
-  height: 100vh; z-index: 10;`
-    : 'height: 100%;'}
+  height: 100vh; z-index: 10;`:"height: 100%;"}
   background: black;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: 24px;
-`;
-const HorizontalPlaylistWrapper = styled.div `
+`,HorizontalPlaylistWrapper=styled.styled.div`
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -226,12 +83,9 @@ const HorizontalPlaylistWrapper = styled.div `
     background-color: var(--color-grey-6);
     opacity: 30%;
   }
-  ${({ $showingAll }) => $showingAll
-    ? `
-  height: 100vh;`
-    : 'height: 100%;'}
-`;
-const VerticalPlaylistWrapper = styled.div `
+  ${({$showingAll:e})=>e?`
+  height: 100vh;`:"height: 100%;"}
+`,VerticalPlaylistWrapper=styled.styled.div`
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -255,9 +109,8 @@ const VerticalPlaylistWrapper = styled.div `
     opacity: 30%;
   }
 
-  ${({ $showingAll }) => $showingAll ? `height: 100%; overflow-y:auto;` : 'max-height: 350px;'}
-`;
-const ButtonViewAllWrapper = styled.span `
+  ${({$showingAll:e})=>e?"height: 100%; overflow-y:auto;":"max-height: 350px;"}
+`,ButtonViewAllWrapper=styled.styled.span`
   margin-left: auto;
   button {
     background-color: var(--color-grey-2);
@@ -271,4 +124,4 @@ const ButtonViewAllWrapper = styled.span `
       color: var(--color-white);
     }
   }
-`;
+`;exports.VideoPlayer=VideoPlayer;