@soul-refiner/design-system 2.14.24 → 2.14.25

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

@@ -1,5 +1,5 @@
 "use client";
-"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),Player=require("react-h5-audio-player"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),fast_forward_30=require("../../../icons/audio_video/fast_forward_30.js"),play=require("../../../icons/audio_video/play.js"),rewind_30=require("../../../icons/audio_video/rewind_30.js"),volume_high=require("../../../icons/audio_video/volume_high.js"),volume_slash=require("../../../icons/audio_video/volume_slash.js"),progressBar=require("../audio/progress-bar.js"),constants=require("../constants.js"),localStorage=(require("react-h5-audio-player/lib/styles.css"),require("../../../utils/local-storage.js")),playing_indicator=require("../audio-playlist/playing_indicator.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),Player__default=_interopDefaultCompat(Player);const AudioPlayer=({autoPlay:e,autoPlayAfterSrcChange:a,onListen:t,onPause:r,onPlay:o,onSeek:u,playing:l,progress:i,src:n,title:d,thumbnail:c,playerRef:s,setPlayerRef:p})=>{var[_,f]=React__default.default.useState(null);const[m,g]=localStorage.useLocalStorage("audio-volume",1);var h=React__default.default.useRef(null);const y=s||_;s=p||f,_=Math.ceil(((y?.audio.current?.duration||0)-i)/60),p=0===_?"":1===_?"Under 1 minute left":2===_?"1 minute left":_+" minutes left";React__default.default.useEffect(()=>{y?.audio.current?.volume&&(y.audio.current.volume=m),y?.audio.current&&!l?y.audio.current.pause():y?.audio.current&&y.audio.current.play()},[l,y?.audio.current]),React__default.default.useEffect(()=>{if(y?.audio.current&&0<i){if(!(1<=y.audio.current.readyState)){const e=()=>{y?.audio.current&&(y.audio.current.currentTime=i,y.audio.current.removeEventListener("canplay",e))};return y.audio.current.addEventListener("canplay",e),()=>{y?.audio.current&&y.audio.current.removeEventListener("canplay",e)}}y.audio.current.currentTime=i}},[y?.audio.current,i,n]);return React__default.default.createElement(Wrapper,null,React__default.default.createElement(Player__default.default,{autoPlay:e,autoPlayAfterSrcChange:a,customIcons:{forward:React__default.default.createElement(fast_forward_30.FastForward30,{color:"grey-9",size:20}),pause:React__default.default.createElement(playing_indicator.NowPlaying,{sx:"width: 20px; height: 20px;"}),play:React__default.default.createElement(play.Play,{color:"grey-9",size:20}),rewind:React__default.default.createElement(rewind_30.Rewind30,{color:"grey-9",size:20}),volume:React__default.default.createElement(volume_high.VolumeHigh,{color:"grey-9",size:20}),volumeMute:React__default.default.createElement(volume_slash.VolumeSlash,{color:"grey-9",size:20})},customAdditionalControls:[React__default.default.createElement(box.Box,{className:"image-title-container",$align:"center",$gap:56},React__default.default.createElement(Image__default.default,{alt:"",height:64,src:c,width:64,style:{height:64}}),React__default.default.createElement(box.Box,{sx:"max-width: 250px; height: 52px;",$dir:"column",$gap:16},React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:16,$lineHeight:20,$semiBold:!0},d),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:16,$mediumBold:!0},p)))],customControlsSection:[Player.RHAP_UI.ADDITIONAL_CONTROLS,Player.RHAP_UI.MAIN_CONTROLS],customProgressBarSection:[React__default.default.createElement(progressBar.AudioProgressBar,{key:"audio-progress-"+i,duration:y?.audio.current?.duration||0,progress:i,onSeek:e=>{y?.audio.current&&(y.audio.current.currentTime=y.audio.current.duration*e,u)&&u(e)},sx:"width: calc(100vw - 841px);"}),Player.RHAP_UI.VOLUME_CONTROLS,Player.RHAP_UI.CURRENT_TIME,React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:14}," ","/"," "),Player.RHAP_UI.DURATION],customVolumeControls:[React__default.default.createElement(VolumeWrapper,{key:"volume-wrapper"},React__default.default.createElement(VolumeBar,{ref:h,type:"range",min:"0",max:"1",step:"0.01",volume:m,defaultValue:m.toString(),onInput:e=>{e=parseFloat(e.target.value);y?.audio.current&&(g(e),y.audio.current.volume=e)}}))],hasDefaultKeyBindings:!1,layout:"horizontal-reverse",listenInterval:constants.LISTEN_CALLBACK_INTERVAL,onListen:()=>{y?.audio.current?.currentTime&&t&&t(y.audio.current.currentTime)},onPause:r,onPlay:o,progressJumpSteps:{backward:constants.FF_INTERVAL,forward:constants.FF_INTERVAL},ref:s,src:n}))},VolumeWrapper=styled__default.default.div`
+"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),Player=require("react-h5-audio-player"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),fast_forward_30=require("../../../icons/audio_video/fast_forward_30.js"),play=require("../../../icons/audio_video/play.js"),rewind_30=require("../../../icons/audio_video/rewind_30.js"),volume_high=require("../../../icons/audio_video/volume_high.js"),volume_slash=require("../../../icons/audio_video/volume_slash.js"),progressBar=require("../audio/progress-bar.js"),constants=require("../constants.js"),localStorage=(require("react-h5-audio-player/lib/styles.css"),require("../../../utils/local-storage.js")),playing_indicator=require("../audio-playlist/playing_indicator.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),Player__default=_interopDefaultCompat(Player);const AudioPlayer=({autoPlay:e,autoPlayAfterSrcChange:a,onListen:t,onPause:r,onPlay:o,onSeek:l,playing:u,progress:i,id:n,src:d,title:c,thumbnail:s,playerRef:p,setPlayerRef:_})=>{var[f,m]=React__default.default.useState(null);const[g,h]=localStorage.useLocalStorage("audio-volume",1),[y,x]=React__default.default.useState(!1);var R=React__default.default.useRef(null);const v=p||f;p=_||m,f=Math.ceil(((v?.audio.current?.duration||0)-i)/60),_=0===f?"":1===f?"Under 1 minute left":2===f?"1 minute left":f+" minutes left";React__default.default.useEffect(()=>{v?.audio.current?.volume&&(v.audio.current.volume=g),v?.audio.current&&!u?v.audio.current.pause():v?.audio.current&&v.audio.current.play()},[u,v?.audio.current]),React__default.default.useEffect(()=>{x(!1)},[n]),React__default.default.useEffect(()=>{if(v?.audio.current&&i&&!y){const e=v.audio.current,a=()=>{e.currentTime=i,x(!0),u&&e.play(),e.removeEventListener("loadedmetadata",a)};1<=e.readyState?(e.currentTime=i,x(!0),u&&e.play()):e.addEventListener("loadedmetadata",a)}},[i,v?.audio.current,y,u,n]);return React__default.default.createElement(Wrapper,null,React__default.default.createElement(Player__default.default,{autoPlay:e,autoPlayAfterSrcChange:a,customIcons:{forward:React__default.default.createElement(fast_forward_30.FastForward30,{color:"grey-9",size:20}),pause:React__default.default.createElement(playing_indicator.NowPlaying,{sx:"width: 20px; height: 20px;"}),play:React__default.default.createElement(play.Play,{color:"grey-9",size:20}),rewind:React__default.default.createElement(rewind_30.Rewind30,{color:"grey-9",size:20}),volume:React__default.default.createElement(volume_high.VolumeHigh,{color:"grey-9",size:20}),volumeMute:React__default.default.createElement(volume_slash.VolumeSlash,{color:"grey-9",size:20})},customAdditionalControls:[React__default.default.createElement(box.Box,{className:"image-title-container",$align:"center",$gap:56},React__default.default.createElement(Image__default.default,{alt:"",height:64,src:s,width:64,style:{height:64}}),React__default.default.createElement(box.Box,{sx:"max-width: 250px; height: 52px;",$dir:"column",$gap:16},React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:16,$lineHeight:20,$semiBold:!0},c),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:16,$mediumBold:!0},_)))],customControlsSection:[Player.RHAP_UI.ADDITIONAL_CONTROLS,Player.RHAP_UI.MAIN_CONTROLS],customProgressBarSection:[React__default.default.createElement(progressBar.AudioProgressBar,{key:"audio-progress-"+i,duration:v?.audio.current?.duration||0,progress:i,onSeek:e=>{v?.audio.current&&(v.audio.current.currentTime=v.audio.current.duration*e,l)&&l(e)},sx:"width: calc(100vw - 841px);"}),Player.RHAP_UI.VOLUME_CONTROLS,Player.RHAP_UI.CURRENT_TIME,React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:14}," ","/"," "),Player.RHAP_UI.DURATION],customVolumeControls:[React__default.default.createElement(VolumeWrapper,{key:"volume-wrapper"},React__default.default.createElement(VolumeBar,{ref:R,type:"range",min:"0",max:"1",step:"0.01",volume:g,defaultValue:g.toString(),onInput:e=>{e=parseFloat(e.target.value);v?.audio.current&&(h(e),v.audio.current.volume=e)}}))],hasDefaultKeyBindings:!1,layout:"horizontal-reverse",listenInterval:constants.LISTEN_CALLBACK_INTERVAL,onListen:()=>{v?.audio.current?.currentTime&&t&&t(v.audio.current.currentTime)},onPause:r,onPlay:o,progressJumpSteps:{backward:constants.FF_INTERVAL,forward:constants.FF_INTERVAL},ref:p,src:d}))},VolumeWrapper=styled__default.default.div`
   display: flex;
   align-items: center;
 `,VolumeBar=styled__default.default.input`

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

@@ -1,4 +1,4 @@
-"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,bannerSx:t,darkMode:a,isPaidUser:l,onProgress:r,playlist:i,playlistSx:d,previewImage:o,showPlayer:n=!0,setMediaItem:u,subtitle:s,title:p})=>{var f="undefined"!=typeof window?window:null;const c=i?.[e],[_,m]=React__default.default.useState(!1),[g,x]=React__default.default.useState(!1),[y,h]=React__default.default.useState(0),[w,b]=React__default.default.useState(null);React__default.default.useEffect(()=>{void 0!==c?.progress?h(c.progress):h(0)},[e,c?.progress]);const $=e=>{c&&w?.audio.current&&(e=c.duration*e,w.audio.current.currentTime=e,h(e),r)&&r(e)};return React__default.default.createElement(Wrapper,{$darkMode:a,$fullscreen:!!l&&_},React__default.default.createElement(ThumbnailWrapper,{$sx:t},React__default.default.createElement(Image__default.default,{alt:"thumbnail",height:400,width:f?.innerWidth||500,src:o}),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:a?"white":"grey-0",$fontSize:64,$lineHeight:96},p),React__default.default.createElement(heading.H,{$color:a?"grey-8":"grey-3",$fontSize:28,$lineHeight:36,$semiBold:!0},s))),React__default.default.createElement(PlaylistWrapper,{$fullscreen:_,$sx:d},i.map((e,t)=>React__default.default.createElement(playlistItem.PlaylistItem,{darkMode:a,duration:e.duration,isPaidUser:l,key:e.id,itemId:e.id,mediaItemId:c?.id,playing:e.id===c?.id&&g,progress:e.id===c?.id?y:e.progress??0,onPause:()=>x(!1),onPlay:()=>{u(t),x(!0)},onSeek:$,title:e.title,thumbnail:e.thumbnail}))),React__default.default.createElement(Shade,{$darkMode:a,$isFullscreen:_},l&&React__default.default.createElement(Button,{onClick:()=>m(e=>!e)},_?React__default.default.createElement(arrow_up.ArrowUp,{color:"grey-0",size:24}):React__default.default.createElement(chevron_down.ChevronDown,{color:a?"white":"grey-0",size:24}))),c&&n?React__default.default.createElement(BottomBarWrapper,null,React__default.default.createElement(audioPlayer.AudioPlayer,{playerRef:w,setPlayerRef:b,onListen:e=>{h(e),r&&r(e)},onPause:()=>x(!1),onPlay:()=>x(!0),onSeek:$,playing:g,progress:y,src:c.src,thumbnail:c.thumbnail,title:c.title})):null)},Wrapper=styled__default.default.div`
+"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,bannerSx:t,darkMode:a,isPaidUser:l,onProgress:r,playlist:i,playlistSx:d,previewImage:o,showPlayer:n=!0,setMediaItem:u,subtitle:s,title:p})=>{var f="undefined"!=typeof window?window:null;const c=i?.[e],[_,m]=React__default.default.useState(!1),[g,x]=React__default.default.useState(!1),[y,h]=React__default.default.useState(0),[w,b]=React__default.default.useState(null);React__default.default.useEffect(()=>{void 0!==c?.progress?h(c.progress):h(0)},[e,c?.progress]);const $=e=>{c&&w?.audio.current&&(e=c.duration*e,w.audio.current.currentTime=e,h(e),r)&&r(e)};return React__default.default.createElement(Wrapper,{$darkMode:a,$fullscreen:!!l&&_},React__default.default.createElement(ThumbnailWrapper,{$sx:t},React__default.default.createElement(Image__default.default,{alt:"thumbnail",height:400,width:f?.innerWidth||500,src:o}),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:a?"white":"grey-0",$fontSize:64,$lineHeight:96},p),React__default.default.createElement(heading.H,{$color:a?"grey-8":"grey-3",$fontSize:28,$lineHeight:36,$semiBold:!0},s))),React__default.default.createElement(PlaylistWrapper,{$fullscreen:_,$sx:d},i.map((e,t)=>React__default.default.createElement(playlistItem.PlaylistItem,{darkMode:a,duration:e.duration,isPaidUser:l,key:e.id,itemId:e.id,mediaItemId:c?.id,playing:e.id===c?.id&&g,progress:e.id===c?.id?y:e.progress??0,onPause:()=>x(!1),onPlay:()=>{u(t),x(!0)},onSeek:$,title:e.title,thumbnail:e.thumbnail}))),React__default.default.createElement(Shade,{$darkMode:a,$isFullscreen:_},l&&React__default.default.createElement(Button,{onClick:()=>m(e=>!e)},_?React__default.default.createElement(arrow_up.ArrowUp,{color:"grey-0",size:24}):React__default.default.createElement(chevron_down.ChevronDown,{color:a?"white":"grey-0",size:24}))),c&&n?React__default.default.createElement(BottomBarWrapper,null,React__default.default.createElement(audioPlayer.AudioPlayer,{playerRef:w,setPlayerRef:b,onListen:e=>{h(e),r&&r(e)},onPause:()=>x(!1),onPlay:()=>x(!0),onSeek:$,playing:g,progress:y,id:c.id,src:c.src,thumbnail:c.thumbnail,title:c.title})):null)},Wrapper=styled__default.default.div`
   ${({$fullscreen:e})=>e?`height: 100vh;
       overflow-y: auto;
       overflow-x: hidden;`:`height: 744px;

package/dist/src/components/media/audio-player/audio-player.d.ts

@@ -9,6 +9,7 @@ export interface AudioPlayerProps {
     onPlay: () => void;
     playing: boolean;
     progress: number;
+    id: string;
     src: string;
     title: string;
     thumbnail: string;
@@ -16,4 +17,4 @@ export interface AudioPlayerProps {
     playerRef?: Player | null;
     setPlayerRef?: React.Dispatch<React.SetStateAction<Player | null>>;
 }
-export declare const AudioPlayer: ({ autoPlay, autoPlayAfterSrcChange, onListen, onPause, onPlay, onSeek, playing, progress, src, title, thumbnail, playerRef, setPlayerRef, }: AudioPlayerProps) => React.JSX.Element;
+export declare const AudioPlayer: ({ autoPlay, autoPlayAfterSrcChange, onListen, onPause, onPlay, onSeek, playing, progress, id, src, title, thumbnail, playerRef, setPlayerRef, }: AudioPlayerProps) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "2.14.24",
+  "version": "2.14.25",
   "main": "dist/index.js",
   "types": "dist/src/index.d.ts",
   "license": "MIT",