@soul-refiner/design-system 2.8.25 → 2.8.26
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,36 @@
|
|
|
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"),pause=require("../../../icons/audio_video/pause.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");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}
|
|
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"),pause=require("../../../icons/audio_video/pause.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"));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(pause.Pause,{color:"grey-9",size:20}),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
|
+
display: flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
`,VolumeBar=styled__default.default.input`
|
|
6
|
+
-webkit-appearance: none;
|
|
7
|
+
appearance: none;
|
|
8
|
+
width: 112px;
|
|
9
|
+
height: 6px;
|
|
10
|
+
border-radius: 4px;
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
background: ${({volume:e})=>`linear-gradient(to right, var(--color-primary-blue-2) ${100*e}%, var(--color-grey-3) ${100*e}%)`};
|
|
13
|
+
|
|
14
|
+
&::-webkit-slider-thumb {
|
|
15
|
+
-webkit-appearance: none;
|
|
16
|
+
appearance: none;
|
|
17
|
+
height: 16px;
|
|
18
|
+
width: 16px;
|
|
19
|
+
border-radius: 50%;
|
|
20
|
+
background: var(--color-primary-blue-2);
|
|
21
|
+
border: 2px solid var(--color-primary-blue-2);
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&::-moz-range-thumb {
|
|
26
|
+
height: 16px;
|
|
27
|
+
width: 16px;
|
|
28
|
+
border-radius: 50%;
|
|
29
|
+
background: var(--color-primary-blue-2);
|
|
30
|
+
border: 2px solid var(--color-primary-blue-2);
|
|
31
|
+
cursor: pointer;
|
|
32
|
+
}
|
|
33
|
+
`,Wrapper=styled__default.default.div`
|
|
3
34
|
position: fixed;
|
|
4
35
|
width: 100%;
|
|
5
36
|
bottom: 0px;
|
|
@@ -39,20 +70,6 @@
|
|
|
39
70
|
height: 50px;
|
|
40
71
|
}
|
|
41
72
|
|
|
42
|
-
.rhap_volume-bar {
|
|
43
|
-
width: 112px;
|
|
44
|
-
height: 6px;
|
|
45
|
-
background-color: var(--color-primary-blue-2);
|
|
46
|
-
|
|
47
|
-
.rhap_volume-indicator {
|
|
48
|
-
opacity: 1;
|
|
49
|
-
top: -8px;
|
|
50
|
-
height: 20px;
|
|
51
|
-
width: 20px;
|
|
52
|
-
background-color: var(--color-primary-blue-2);
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
73
|
.rhap_time {
|
|
57
74
|
&.rhap_current-time {
|
|
58
75
|
margin-left: 56px;
|