@soul-refiner/design-system 2.4.1 → 2.4.3
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.
|
@@ -37,6 +37,8 @@
|
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
`,Wrapper=styled.styled.output`
|
|
40
|
+
background: 'white';
|
|
41
|
+
|
|
40
42
|
${({$isAnimated:e})=>!e&&`
|
|
41
43
|
position: fixed;
|
|
42
44
|
bottom: 24px;
|
|
@@ -47,7 +49,6 @@
|
|
|
47
49
|
display: flex;
|
|
48
50
|
box-shadow: var(--elevation-2);
|
|
49
51
|
border-radius: var(--small);
|
|
50
|
-
|
|
51
52
|
&::before {
|
|
52
53
|
position: absolute;
|
|
53
54
|
content: '';
|
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"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");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 VideoPlayer=({activeIndex:e,pip:t,playable:a,playlist:l,onPipChange:r,onProgress:
|
|
3
|
-
margin-bottom: 8x;
|
|
4
|
-
border-bottom: 1px solid var(--color-grey-4);
|
|
5
|
-
padding-bottom: 16px;
|
|
6
|
-
`},React__default.default.createElement(box.Box,{$align:"center",$justify:"space-between",sx:"padding: 8px 0px 8px 14px;"},React__default.default.createElement(paragraph.P,{$color:"grey-8",$fontSize:14,$lineHeight:20,$semiBold:!0},"Trailer")),React__default.default.createElement(playlistItem.PlaylistItem,{onClick:()=>g(!0),playable:!0,thumbnail:s.thumbnail,title:p+" Trailer"})),React__default.default.createElement(box.Box,{$align:"center",$justify:"space-between",sx:"padding: 8px 0px 8px 14px;"},React__default.default.createElement(paragraph.P,{$color:"grey-8",$fontSize:14,$lineHeight:20,$semiBold:!0},"All lessons")),React__default.default.createElement(HorizontalPlaylistWrapper,null,l.map((e,t)=>React__default.default.createElement(playlistItem.PlaylistItem,{key:e.id,nowplaying:m,playlistItemId:e.id,duration:e.duration,onClick:()=>{$(t),y(e.id)},playable:!0,progress:e.progress,shortDescription:e.shortDescription,thumbnail:e.thumbnail,title:e.title})))),"vertical"===i&&React__default.default.createElement(box.Box,{$dir:"column",$gap:24},!!s&&React__default.default.createElement(box.Box,{$dir:"column",$gap:8,sx:"margin: 0px 24px;"},React__default.default.createElement(box.Box,{$align:"center",$justify:"space-between",sx:"padding: 8px 0px 8px 14px;"},React__default.default.createElement(paragraph.P,{$color:"grey-8",$fontSize:14,$lineHeight:20,$semiBold:!0},"Trailer")),React__default.default.createElement(playlistItem.PlaylistItem,{onClick:()=>g(!0),playable:!0,thumbnail:s.thumbnail,title:p+" Trailer"})),React__default.default.createElement(box.Box,{$align:"center",$justify:"space-between",sx:"padding: 8px 0px; margin: 0px 24px; border-bottom: 1px solid var(--color-grey-3);"},React__default.default.createElement(paragraph.P,{$color:"grey-8",$fontSize:14,$lineHeight:20,$semiBold:!0},"All lessons"),React__default.default.createElement(button.Button,{onClick:()=>f(e=>!e),size:"small",sx:"background-color: var(--color-grey-2); border-color: var(--color-grey-8); color: var(--color-grey-8);",type:"text"},u?"Collapse":"View all")),React__default.default.createElement(VerticalPlaylistWrapper,{$showingAll:u},l.map((e,t)=>React__default.default.createElement(playlistItem.PlaylistItem,{key:e.id,duration:e.duration,onClick:()=>$(t),playable:a,progress:e.progress,shortDescription:e.shortDescription,thumbnail:e.thumbnail,title:e.title})))))):null},Wrapper=styled.styled.div`
|
|
2
|
+
"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(button.Button,{onClick:t,size:"small",sx:"background-color: var(--color-grey-2); border-color: var(--color-grey-8); color: var(--color-grey-8); margin-left: auto;",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:s,title:c,trailer:u})=>{const[p,f]=React__default.default.useState(0),[g,x]=React__default.default.useState(!1),[m,b]=React__default.default.useState(!a),[y,h]=React__default.default.useState(l?.[e].id||null);var _=React__default.default.useRef(null);const w=d||_,v=m?u:l?.[e];const R=e=>{b(!1),n(e)};d=()=>x(e=>!e);return v?React__default.default.createElement(Wrapper,{$orientation:o},React__default.default.createElement(InnerWrapper,{$orientation:o,$playable:a||m},"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},c),React__default.default.createElement(paragraph.P,{as:"h3",$bold:!0,$color:"grey-8"},s)),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 "+c,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:()=>{m||0===w?.current?.getCurrentTime()&&0!==v?.progress&&w.current.seekTo(v.progress)},pip:t,playIcon:a||m?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(box.Box,{$dir:"column",$gap:4},React__default.default.createElement(heading.H,{as:"h2",$bold:!0,$color:"white",$fontSize:28,$lineHeight:36},c),React__default.default.createElement(paragraph.P,{as:"h3",$bold:!0,$color:"grey-8"},s)),React__default.default.createElement(box.Box,null,React__default.default.createElement(tabs.Tabs,{activeIndex:p,onChange:e=>f(e),items:[{label:"All lessons",color:"white"},{label:"Trailer",color:"white"}],size:"medium",sx:"justify-content: flex-start;"}),React__default.default.createElement(ButtonViewAll,{showingAll:g,toggleShowingAll:d})),[React__default.default.createElement(HorizontalPlaylistWrapper,{$showingAll:g},l.map((e,t)=>React__default.default.createElement(playlistItem.PlaylistItem,{key:e.id,nowplaying:y,playlistItemId:e.id,duration:e.duration,onClick:()=>{R(t),h(e.id)},playable:!0,progress:e.progress,shortDescription:e.shortDescription,thumbnail:e.thumbnail,title:e.title}))),!!u&&React__default.default.createElement(TrailerListItem,{title:c,handleSetPlayingTrailer:b,trailer:u})][p]),"vertical"===o&&React__default.default.createElement(box.Box,{$dir:"column",$gap:24},React__default.default.createElement(box.Box,{sx:"padding: 0 1.5rem;"},React__default.default.createElement(tabs.Tabs,{activeIndex:p,onChange:e=>f(e),items:[{label:"All lessons",color:"white"},{label:"Trailer",color:"white"}],size:"medium",sx:"justify-content: flex-start;"}),React__default.default.createElement(ButtonViewAll,{showingAll:g,toggleShowingAll:d})),[React__default.default.createElement(VerticalPlaylistWrapper,{$showingAll:g},l.map((e,t)=>React__default.default.createElement(playlistItem.PlaylistItem,{key:e.id,duration:e.duration,onClick:()=>R(t),playable:a,progress:e.progress,shortDescription:e.shortDescription,thumbnail:e.thumbnail,title:e.title}))),!!u&&React__default.default.createElement(box.Box,{$dir:"column",$gap:8,sx:"margin: 0px 24px;"},React__default.default.createElement(TrailerListItem,{title:c,handleSetPlayingTrailer:b,trailer:u}))][p]))):null},Wrapper=styled.styled.div`
|
|
7
3
|
display: flex;
|
|
8
4
|
justify-content: center;
|
|
9
5
|
background-color: var(--color-grey-0);
|
|
@@ -48,10 +44,10 @@
|
|
|
48
44
|
display: flex;
|
|
49
45
|
flex-direction: column;
|
|
50
46
|
gap: 24px;
|
|
51
|
-
max-height:
|
|
52
|
-
overflow-y:
|
|
47
|
+
max-height: 400px;
|
|
48
|
+
overflow-y: hidden;
|
|
53
49
|
overflow-x: hidden;
|
|
54
|
-
padding-right:
|
|
50
|
+
padding-right: 4px;
|
|
55
51
|
|
|
56
52
|
&::-webkit-scrollbar-track {
|
|
57
53
|
box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
|
|
@@ -69,6 +65,10 @@
|
|
|
69
65
|
background-color: var(--color-grey-6);
|
|
70
66
|
opacity: 30%;
|
|
71
67
|
}
|
|
68
|
+
|
|
69
|
+
${({$showingAll:e})=>e?`
|
|
70
|
+
max-height: unset;
|
|
71
|
+
overflow-y: visible;`:""}
|
|
72
72
|
`,VerticalPlaylistWrapper=styled.styled.div`
|
|
73
73
|
display: flex;
|
|
74
74
|
flex-direction: column;
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
padding: 0px 12px 48px 24px;
|
|
77
77
|
margin-right: 24px;
|
|
78
78
|
max-height: 350px;
|
|
79
|
-
overflow-y:
|
|
79
|
+
overflow-y: hidden;
|
|
80
80
|
overflow-x: hidden;
|
|
81
81
|
|
|
82
82
|
&::-webkit-scrollbar-track {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),styled=require("styled-components"),Link=require("next/link"),paragraph=require("../../atoms/typography/paragraph.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Link__default=_interopDefaultCompat(Link);const colorLookup={blue:{bg:"var(--color-hue-blue-2)",icon:"var(--color-hue-blue-1)"},green:{bg:"var(--color-green-8)",icon:"var(--color-green-2)"},grey:{bg:"var(--color-grey-9)",icon:"var(--color-grey-7)"},mint:{bg:"var(--color-hue-mint-2)",icon:"var(--color-hue-mint-1)"},ocean:{bg:"var(--color-hue-ocean-2)",icon:"var(--color-hue-ocean-1)"},orange:{bg:"var(--color-hue-orange-2)",icon:"var(--color-hue-orange-1)"},pink:{bg:"var(--color-hue-pink-2)",icon:"var(--color-hue-pink-1)"},purple:{bg:"var(--color-hue-purple-2)",icon:"var(--color-hue-purple-1)"},red:{bg:"var(--color-red-9)",icon:"var(--color-red-3)"},yellow:{bg:"var(--color-yellow-8)",icon:"var(--color-yellow-3)"}},Tabs=({activeIndex:r,items:e,onChange:a,size:l="large",sx:o})=>{const t=React__default.default.useId();return React__default.default.createElement(Wrapper,{$sx:o},e.map((e,o)=>React__default.default.createElement(Item,{active:r===o,color:e?.color,disabled:e?.disabled,href:e?.href,icon:e?.icon,key:t+o.toString(36),label:e.label,onClick:()=>a&&a(o),size:l})))},Wrapper=styled.styled.div`
|
|
2
|
+
"use strict";var React=require("react"),styled=require("styled-components"),Link=require("next/link"),paragraph=require("../../atoms/typography/paragraph.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Link__default=_interopDefaultCompat(Link);const colorLookup={blue:{bg:"var(--color-hue-blue-2)",icon:"var(--color-hue-blue-1)"},green:{bg:"var(--color-green-8)",icon:"var(--color-green-2)"},grey:{bg:"var(--color-grey-9)",icon:"var(--color-grey-7)"},mint:{bg:"var(--color-hue-mint-2)",icon:"var(--color-hue-mint-1)"},ocean:{bg:"var(--color-hue-ocean-2)",icon:"var(--color-hue-ocean-1)"},orange:{bg:"var(--color-hue-orange-2)",icon:"var(--color-hue-orange-1)"},pink:{bg:"var(--color-hue-pink-2)",icon:"var(--color-hue-pink-1)"},purple:{bg:"var(--color-hue-purple-2)",icon:"var(--color-hue-purple-1)"},red:{bg:"var(--color-red-9)",icon:"var(--color-red-3)"},yellow:{bg:"var(--color-yellow-8)",icon:"var(--color-yellow-3)"},white:{bg:"var(--color-white)",icon:"var(--color-white)"}},Tabs=({activeIndex:r,items:e,onChange:a,size:l="large",sx:o})=>{const t=React__default.default.useId();return React__default.default.createElement(Wrapper,{$sx:o},e.map((e,o)=>React__default.default.createElement(Item,{active:r===o,color:e?.color,disabled:e?.disabled,href:e?.href,icon:e?.icon,key:t+o.toString(36),label:e.label,onClick:()=>a&&a(o),size:l})))},Wrapper=styled.styled.div`
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-flow: row nowrap;
|
|
5
5
|
align-items: flex-end;
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
${({$sx:e})=>e||""}
|
|
16
|
-
`,Item=({active:e,color:o,disabled:r,href:a,icon:l,label:t,onClick:
|
|
16
|
+
`,Item=({active:e,color:o,disabled:r,href:a,icon:l,label:t,onClick:c,size:i="large"})=>{var o=r?"grey":o||"blue",n=colorLookup[o].icon,o=colorLookup[o].bg,p="large"===i?16:"medium"===i?14:12,d="large"===i?24:"medium"===i?20:16;return React__default.default.createElement(Element,{onClick:!r&&c?c:void 0,href:a||"#",scroll:!1,$active:e,$color:n,$disabled:r,$hasIcon:!!l,$size:i},l&&React__default.default.createElement(IconWrapper,{$bg:o},l),React__default.default.createElement(paragraph.P,{$fontSize:p,$lineHeight:d,$semiBold:!0},t))},Element=styled.styled(Link__default.default)`
|
|
17
17
|
position: relative;
|
|
18
18
|
display: flex;
|
|
19
19
|
align-items: center;
|
|
@@ -35,7 +35,13 @@
|
|
|
35
35
|
div > svg {
|
|
36
36
|
fill: ${o};
|
|
37
37
|
}`:`
|
|
38
|
+
p {
|
|
39
|
+
color: ${o};
|
|
40
|
+
}
|
|
38
41
|
&:hover {
|
|
42
|
+
p {
|
|
43
|
+
color: var(--color-grey-6);
|
|
44
|
+
}
|
|
39
45
|
background-color: var(--color-grey-10);
|
|
40
46
|
&:after {
|
|
41
47
|
position: absolute;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
type TabColors = 'blue' | 'grey' | 'green' | 'mint' | 'orange' | 'ocean' | 'pink' | 'purple' | 'red' | 'yellow';
|
|
2
|
+
type TabColors = 'blue' | 'grey' | 'green' | 'mint' | 'orange' | 'ocean' | 'pink' | 'purple' | 'red' | 'yellow' | 'white';
|
|
3
3
|
type TabSizes = 'small' | 'medium' | 'large';
|
|
4
4
|
export interface TabProps {
|
|
5
5
|
activeIndex: number;
|