@soul-refiner/design-system 2.13.10 → 2.13.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),button=require("../../actions/button/button.js"),dropdown=require("../../actions/dropdown/dropdown.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),ellipsis_horizontal=require("../../../icons/basic/ellipsis_horizontal.js"),ispaid=require("../../iconography/avatar/icons/ispaid.js"),material=require("@mui/material"),hourglass=require("../../../icons/time/hourglass.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 PersonCard=({actions:e,chip:t,dotsActions:a,href:l,image:
|
|
2
|
+
"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),button=require("../../actions/button/button.js"),dropdown=require("../../actions/dropdown/dropdown.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),ellipsis_horizontal=require("../../../icons/basic/ellipsis_horizontal.js"),ispaid=require("../../iconography/avatar/icons/ispaid.js"),material=require("@mui/material"),hourglass=require("../../../icons/time/hourglass.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 PersonCard=({actions:e,chip:t,dotsActions:a,href:l,image:i,subtitle:r,sx:o,title:n,isPaidUser:d,progress:s,lastOnline:u,containerSx:p})=>React__default.default.createElement(Wrapper,{$image:i,$sx:p},React__default.default.createElement(Person,{$sx:o},React__default.default.createElement(ContentWrapper,{as:l?"a":"div",href:l},a&&!!a.length&&React__default.default.createElement(dropdown.Dropdown,{containerSx:"",hasArrow:!0,maintainState:!1,onClick:e=>e.preventDefault(),options:a,sx:"position: absolute; top: 8px; right: 8px; z-index: 24; display: none;",trigger:React__default.default.createElement(button.Button,{className:"icon",icon:React__default.default.createElement(ellipsis_horizontal.EllipsisHorizontal,null),onClick:e=>e.stopPropagation(),showChevron:!1,size:"small",type:"outlined"})}),React__default.default.createElement(Image__default.default,{alt:"",height:400,quality:100,src:i,width:312})),t&&React__default.default.createElement(box.Box,{sx:"position: absolute; top: 8px; left: 8px; z-index: 24;"},t),React__default.default.createElement(Figcaption,null,React__default.default.createElement(box.Box,{$display:"flex",$dir:"row",$gap:8},React__default.default.createElement(heading.H,{as:"span",$bold:!0,$color:"white",$fontSize:24,$lineHeight:36},n),d&&React__default.default.createElement(box.Box,{sx:"padding: .6rem 0 0 0; width: 18.33px; height: 18.33px;"},React__default.default.createElement(ispaid.IsPaid,null))),r&&React__default.default.createElement(paragraph.P,{as:"span",$color:"white",$fontSize:14,$lineHeight:20},r),(s||u)&&React__default.default.createElement(ProgressContainer,null,void 0!==s&&React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(material.CircularProgress,{variant:"determinate",value:s,style:{color:"green",width:18,height:18}}),React__default.default.createElement(ProgressDataContainer,null,React__default.default.createElement(paragraph.P,{$fontSize:10,$color:"grey-9",$lineHeight:14},"Progress"),React__default.default.createElement(paragraph.P,{$fontSize:10,$color:"white",$bold:!0,$lineHeight:14},s,"%"))),u&&React__default.default.createElement(LastOnlineContainer,{$addMarginLeft:void 0!==s},React__default.default.createElement(hourglass.Hourglass,null),React__default.default.createElement(LastOnlineDataContainer,null,React__default.default.createElement(paragraph.P,{$fontSize:10,$color:"grey-9",$lineHeight:14},"Last online"),React__default.default.createElement(paragraph.P,{$fontSize:10,$color:"white",$bold:!0,$lineHeight:14},u)))),e&&React__default.default.createElement(box.Box,{$display:"flex",$dir:"row",$gap:8,sx:"margin-top: 16px;"},React__default.default.Children.toArray(e))))),ContentWrapper=styled.styled.div`
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
5
5
|
&:hover > div {
|
|
@@ -69,6 +69,13 @@
|
|
|
69
69
|
padding-left: 16px;
|
|
70
70
|
border-left: 1px solid var(--color-grey-5);
|
|
71
71
|
margin-right: 40px;
|
|
72
|
+
|
|
73
|
+
@media (max-width: 1440px) {
|
|
74
|
+
margin-right: 0;
|
|
75
|
+
}
|
|
76
|
+
@media (max-width: 1366px) {
|
|
77
|
+
margin-right: 20px;
|
|
78
|
+
}
|
|
72
79
|
`};
|
|
73
80
|
`,LastOnlineDataContainer=styled.styled.div`
|
|
74
81
|
display: flex;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"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,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&&!u?y.audio.current.pause():y?.audio.current&&y.audio.current.play()},[u,y?.audio.current]);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,
|
|
2
|
+
"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,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&&!u?y.audio.current.pause():y?.audio.current&&y.audio.current.play()},[u,y?.audio.current]);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,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: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`
|
|
3
3
|
display: flex;
|
|
4
4
|
align-items: center;
|
|
5
5
|
`,VolumeBar=styled__default.default.input`
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"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"),play_solid=require("../../../icons/audio_video/play_solid.js"),progressBar=require("../audio/progress-bar.js"),time=require("../../../utils/time.js"),playing_indicator=(require("react-h5-audio-player/lib/styles.css"),require("./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);const PlaylistItem=({darkMode:e=!0,duration:t,onPause:a,onPlay:r,onSeek:l,playing:o,isPaidUser:i,progress:d,thumbnail:n,itemId:u,mediaItemId:c,title:s})=>{const p=o?a:r;var g=e?"white":"grey-3";return React__default.default.createElement(ItemWrapper,{$darkMode:e,$playing:o},React__default.default.createElement(box.Box,{$gap:24,$dir:"row",$align:"center"},React__default.default.createElement(Image__default.default,{alt:"",height:64,src:n,width:64,style:{height:64,marginRight:8,borderRadius:8}}),React__default.default.createElement(box.Box,{onClick:()=>i&&p,$align:"center",sx:"flex: 1 1 250px; width: 250px;"},i&&(o?React__default.default.createElement(Button,{onClick:a},React__default.default.createElement(playing_indicator.NowPlaying,
|
|
2
|
+
"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"),play_solid=require("../../../icons/audio_video/play_solid.js"),progressBar=require("../audio/progress-bar.js"),time=require("../../../utils/time.js"),playing_indicator=(require("react-h5-audio-player/lib/styles.css"),require("./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);const PlaylistItem=({darkMode:e=!0,duration:t,onPause:a,onPlay:r,onSeek:l,playing:o,isPaidUser:i,progress:d,thumbnail:n,itemId:u,mediaItemId:c,title:s})=>{const p=o?a:r;var g=e?"white":"grey-3";return React__default.default.createElement(ItemWrapper,{$darkMode:e,$playing:o},React__default.default.createElement(box.Box,{$gap:24,$dir:"row",$align:"center"},React__default.default.createElement(Image__default.default,{alt:"",height:64,src:n,width:64,style:{height:64,marginRight:8,borderRadius:8}}),React__default.default.createElement(box.Box,{onClick:()=>i&&p,$align:"center",sx:"flex: 1 1 250px; width: 250px;"},i&&(o?React__default.default.createElement(Button,{onClick:a},React__default.default.createElement(playing_indicator.NowPlaying,{sx:"width: 24px; height: 24px;"})):React__default.default.createElement(Button,{onClick:r},React__default.default.createElement(play_solid.PlaySolid,{color:g,size:24}))),React__default.default.createElement(paragraph.P,{$bold:!0,$color:g,$fontSize:14,$lineHeight:20,$textClampLines:1,sx:"margin-right: 32px;"},s))),React__default.default.createElement(box.Box,{$align:"center",sx:"flex: 3; margin-left: auto;"},React__default.default.createElement(paragraph.P,{$color:e?"grey-9":"grey-3",$fontSize:10,$lineHeight:14,$sx:"flex: 0; width: fit-content; min-width: 56px;"},time.secondsToTimestamp(t)),React__default.default.createElement(progressBar.AudioProgressBar,{sx:"margin-right: auto;",duration:t||0,progress:u===c&&o?d:0,onSeek:e=>{i&&(u===c?l(e):p())}})))},ItemWrapper=styled__default.default.button`
|
|
3
3
|
padding: 16px 32px;
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-direction: row;
|