@soul-refiner/design-system 2.7.6 → 2.7.8
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.
- package/dist/components/media/audio-playlist/audio-playlist.js +21 -13
- package/dist/components/media/audio-playlist/playlist-item.js +8 -5
- package/dist/src/components/media/audio-playlist/audio-playlist.d.ts +5 -2
- package/dist/src/components/media/audio-playlist/playlist-item.d.ts +2 -1
- package/package.json +1 -1
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
"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,
|
|
1
|
+
"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:i,playlist:r,playlistSx:d,previewImage:o,setMediaItem:n,subtitle:u,title:s})=>{var p="undefined"!=typeof window?window:null;const f=r?.[e],[c,_]=React__default.default.useState(!1),[m,x]=React__default.default.useState(!1),[g,y]=React__default.default.useState(0);return React__default.default.createElement(Wrapper,{$darkMode:a,$fullscreen:c},React__default.default.createElement(ThumbnailWrapper,{$sx:t},React__default.default.createElement(Image__default.default,{alt:"thumbnail",height:400,width:p?.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},s),React__default.default.createElement(heading.H,{$color:a?"grey-8":"grey-3",$fontSize:28,$lineHeight:36,$semiBold:!0},u))),React__default.default.createElement(PlaylistWrapper,{$sx:d},r.map((e,t)=>React__default.default.createElement(playlistItem.PlaylistItem,{darkMode:a,duration:e.duration,isPaidUser:l,key:e.id,playing:e.id===f?.id&&m,progress:g,onPause:()=>x(!1),onPlay:()=>{n(t),x(!0)},title:e.title,thumbnail:e.thumbnail}))),React__default.default.createElement(Shade,{$darkMode:a,$isFullscreen:c},l&&React__default.default.createElement(Button,{onClick:()=>_(e=>!e)},c?React__default.default.createElement(arrow_up.ArrowUp,{color:"grey-0",size:24}):React__default.default.createElement(chevron_down.ChevronDown,{color:"white",size:24}))),!!f&&React__default.default.createElement(BottomBarWrapper,null,React__default.default.createElement(audioPlayer.AudioPlayer,{onListen:e=>{y(e),i&&i(e)},onPause:()=>x(!1),onPlay:()=>x(!0),playing:m,progress:g,src:f.src,thumbnail:f.thumbnail,title:f.title})))},Wrapper=styled__default.default.div`
|
|
2
2
|
${({$fullscreen:e})=>e?"height: 100vh;":"height: 744px;"}
|
|
3
3
|
width: 100vw;
|
|
4
4
|
position: relative;
|
|
5
5
|
padding-bottom: 24px;
|
|
6
6
|
overflow-y: auto;
|
|
7
7
|
overflow-x: hidden;
|
|
8
|
-
background-color: var(--color-grey-0);
|
|
8
|
+
background-color: ${({$darkMode:e})=>e?"var(--color-grey-0)":"white"};
|
|
9
9
|
`,ThumbnailWrapper=styled__default.default.div`
|
|
10
10
|
width: 100%;
|
|
11
11
|
max-width: 2240px;
|
|
@@ -18,25 +18,32 @@
|
|
|
18
18
|
position: absolute;
|
|
19
19
|
z-index: 0;
|
|
20
20
|
}
|
|
21
|
+
${({$sx:e})=>e||""};
|
|
21
22
|
`,Shade=styled__default.default.div`
|
|
22
23
|
position: absolute;
|
|
23
24
|
bottom: 0px;
|
|
24
25
|
left: 0px;
|
|
26
|
+
z-index: 5;
|
|
27
|
+
pointer-events: none;
|
|
25
28
|
width: 100%;
|
|
26
29
|
height: 160px;
|
|
27
30
|
display: flex;
|
|
28
|
-
background: linear-gradient(
|
|
31
|
+
background: linear-gradient(
|
|
32
|
+
180deg,
|
|
33
|
+
${({$darkMode:e})=>e?"rgba(0, 0, 0, 0) 0%, #000":"rgba(255, 255, 255, 0) 0%, #fff"}
|
|
34
|
+
100%
|
|
35
|
+
);
|
|
29
36
|
${({$isFullscreen:e})=>e?`padding: 0px 24px;
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
align-items: flex-start;
|
|
38
|
+
justify-content: flex-end;
|
|
39
|
+
button {
|
|
40
|
+
background-color: white;
|
|
41
|
+
}`:`padding: 96px 0px 16px;
|
|
42
|
+
align-items: center;
|
|
43
|
+
justify-content: center;
|
|
44
|
+
button {
|
|
45
|
+
background-color: transparent;
|
|
46
|
+
}`}
|
|
40
47
|
`,Button=styled__default.default.button`
|
|
41
48
|
padding: 12px;
|
|
42
49
|
appearance: none;
|
|
@@ -51,6 +58,7 @@
|
|
|
51
58
|
display: flex;
|
|
52
59
|
flex-direction: column;
|
|
53
60
|
overflow-y: auto;
|
|
61
|
+
${({$sx:e})=>e||""};
|
|
54
62
|
`,BottomBarWrapper=styled__default.default.nav`
|
|
55
63
|
position: fixed;
|
|
56
64
|
z-index: 50000;
|
|
@@ -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"),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=({
|
|
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"),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=({darkMode:e=!0,duration:t,onPause:a,onPlay:r,playing:l,isPaidUser:o,progress:i,thumbnail:d,title:u})=>{var n=l?a:r,s=e?"white":"grey-3";return console.log(e),React__default.default.createElement(ItemWrapper,{$darkMode:e,$playing:l,onClick:n},React__default.default.createElement(box.Box,{$gap:24,$dir:"row",$align:"center"},React__default.default.createElement(Image__default.default,{alt:"",height:64,src:d,width:64,style:{height:64,marginRight:8,borderRadius:8}}),React__default.default.createElement(box.Box,{$align:"center",sx:"flex: 1 1 250px; width: 250px;"},o&&(l?React__default.default.createElement(Button,{onClick:a},React__default.default.createElement(pause_solid.PauseSolid,{color:s,size:24})):React__default.default.createElement(Button,{onClick:r},React__default.default.createElement(play_solid.PlaySolid,{color:s,size:24}))),React__default.default.createElement(paragraph.P,{$bold:!0,$color:s,$fontSize:14,$lineHeight:20,$textClampLines:1,sx:"margin-right: 32px;"},u))),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,{duration:t||0,progress:l?i:0})))},ItemWrapper=styled__default.default.button`
|
|
3
3
|
padding: 16px 32px;
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-direction: row;
|
|
@@ -7,10 +7,13 @@
|
|
|
7
7
|
border-radius: 8px;
|
|
8
8
|
border: none;
|
|
9
9
|
cursor: pointer;
|
|
10
|
-
${({$playing:
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
${({$darkMode:e,$playing:t})=>e?t?"background-color: var(--color-grey-2);":`background-color: transparent;
|
|
11
|
+
&:hover {
|
|
12
|
+
background-color: var(--color-grey-1);
|
|
13
|
+
}`:t?"background-color: var(--color-grey-10);":`background-color: var(--color-grey-9);
|
|
14
|
+
&:hover {
|
|
15
|
+
background-color: var(--color-grey-8);
|
|
16
|
+
}`}
|
|
14
17
|
`,Button=styled__default.default.div`
|
|
15
18
|
padding: 16px;
|
|
16
19
|
appearance: none;
|
|
@@ -2,13 +2,16 @@ import React from 'react';
|
|
|
2
2
|
import { MediaItem } from '../common';
|
|
3
3
|
export interface AudioPlaylistProps {
|
|
4
4
|
activeIndex: number;
|
|
5
|
+
bannerSx?: string;
|
|
6
|
+
darkMode?: boolean;
|
|
7
|
+
isPaidUser?: boolean;
|
|
5
8
|
onProgress: (progress: number) => void;
|
|
6
9
|
playable: boolean;
|
|
7
|
-
isPaidUser?: boolean;
|
|
8
10
|
playlist: MediaItem[];
|
|
11
|
+
playlistSx?: string;
|
|
9
12
|
previewImage: string;
|
|
10
13
|
setMediaItem: (index: number) => void;
|
|
11
14
|
subtitle: string;
|
|
12
15
|
title: string;
|
|
13
16
|
}
|
|
14
|
-
export declare const AudioPlaylist: ({ activeIndex,
|
|
17
|
+
export declare const AudioPlaylist: ({ activeIndex, bannerSx, darkMode, isPaidUser, onProgress, playlist, playlistSx, previewImage, setMediaItem, subtitle, title, }: AudioPlaylistProps) => React.JSX.Element;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import 'react-h5-audio-player/lib/styles.css';
|
|
3
3
|
interface PlaylistItemProps {
|
|
4
|
+
darkMode?: boolean;
|
|
4
5
|
duration: number;
|
|
5
6
|
onPause: () => void;
|
|
6
7
|
onPlay: () => void;
|
|
@@ -10,5 +11,5 @@ interface PlaylistItemProps {
|
|
|
10
11
|
thumbnail: string;
|
|
11
12
|
title: string;
|
|
12
13
|
}
|
|
13
|
-
export declare const PlaylistItem: ({ duration, onPause, onPlay, playing, isPaidUser, progress, thumbnail, title, }: PlaylistItemProps) => React.JSX.Element;
|
|
14
|
+
export declare const PlaylistItem: ({ darkMode, duration, onPause, onPlay, playing, isPaidUser, progress, thumbnail, title, }: PlaylistItemProps) => React.JSX.Element;
|
|
14
15
|
export {};
|