@soul-refiner/design-system 2.14.44 → 2.14.46
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"),styled=require("styled-components"),date$1=require("../../../common/date.js"),button=require("../../actions/button/button.js"),paragraph=require("../../atoms/typography/paragraph.js"),chevron_left=require("../../../icons/arrow/chevron_left.js"),chevron_right=require("../../../icons/arrow/chevron_right.js"),arrow_right=require("../../../icons/arrow/arrow_right.js"),date=require("../../../utils/date.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const DatePicker=({endDate:e,label:t,onSelect:o,startDate:a})=>{const u=new Date,r=(u.setHours(0),u.setMinutes(0),u.setSeconds(0),u.setMilliseconds(0),new Date(u)),l=(r.setDate(1),r.getMonth()+1),n=r.getFullYear(),s=!e,
|
|
2
|
+
"use strict";var React=require("react"),styled=require("styled-components"),date$1=require("../../../common/date.js"),button=require("../../actions/button/button.js"),paragraph=require("../../atoms/typography/paragraph.js"),chevron_left=require("../../../icons/arrow/chevron_left.js"),chevron_right=require("../../../icons/arrow/chevron_right.js"),arrow_right=require("../../../icons/arrow/arrow_right.js"),date=require("../../../utils/date.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const DatePicker=({endDate:e,label:t,onSelect:o,startDate:a})=>{const u=new Date,r=(u.setHours(0),u.setMinutes(0),u.setSeconds(0),u.setMilliseconds(0),new Date(u)),l=(r.setDate(1),r.getMonth()+1),n=r.getFullYear(),s=!e,i=React__default.default.useRef(null),[d,c]=React__default.default.useState(!1),[p,f]=React__default.default.useState(()=>e?.toDateString()??a.toDateString()),[g,y]=React__default.default.useState(()=>a.toDateString()),[m,b]=React__default.default.useState(()=>e?.toDateString()??a.toDateString()),[x,h]=React__default.default.useState(!0);React__default.default.useEffect(()=>{y(a.toDateString())},[a]),React__default.default.useEffect(()=>{b((e??new Date)?.toDateString())},[e]),React__default.default.useEffect(()=>{var e;!s&&new Date(g).getTime()>new Date(m).getTime()&&(e=g,y(m),b(e))},[m,g]);const v=({type:e,value:t})=>{("start"===e?y:b)(t.toDateString())},_=e=>{s||h(e=>!e);var e=e.target,t=x?"start":"end",a=e.getAttribute("data-day"),r=e.getAttribute("data-month"),e=e.getAttribute("data-year");v({type:t,value:new Date(r+`-${a}-`+e)}),s?(o({type:"start",value:new Date(r+`-${a}-`+e)}),requestAnimationFrame(()=>{c(!1)})):x||(o({type:"start",value:new Date(g)}),o({type:"end",value:new Date(r+`-${a}-`+e)}),h(!0),requestAnimationFrame(()=>{c(!1)}))};var D=date.buildCalendar(new Date(p).getMonth()+1,new Date(p).getFullYear());const w=new Date(g).getTime(),R=new Date(m).getTime();var k=new Date(p);const S=new Date(k),E=(S.setDate(1),new Date(k));return E.setDate(date.getMonthDays(k.getMonth()+1)),React__default.default.createElement(Wrapper,{onBlurCapture:e=>{i?.current&&!i?.current?.contains(e.relatedTarget)&&c(!1)},ref:i,tabIndex:0},React__default.default.createElement(Trigger,{onClick:()=>c(e=>!e)},t&&React__default.default.createElement(React__default.default.Fragment,null,t," | "),React__default.default.createElement("span",null,a.toLocaleDateString("en-US").replaceAll("/","-")),!!e&&a.toDateString()!==e?.toDateString()&&React__default.default.createElement(arrow_right.ArrowRight,{sx:"padding: 0px 8px; margin-bottom: -2px;"}),a.toDateString()!==e?.toDateString()&&React__default.default.createElement("span",null,e?.toLocaleDateString("en-US").replaceAll("/","-"))),d&&React__default.default.createElement(DateSelector,null,React__default.default.createElement(InnerWrapper,null,!!e&&React__default.default.createElement(Left,null,React__default.default.createElement(button.Button,{size:"small",type:"text",onClick:()=>{v({type:"start",value:u}),v({type:"end",value:u}),f(u.toDateString()),h(!0),o({type:"start",value:u}),s||o({type:"end",value:u}),requestAnimationFrame(()=>{c(!1)})}},"Today"),React__default.default.createElement(button.Button,{size:"small",type:"text",onClick:()=>{var e=new Date(u.getFullYear(),u.getMonth(),u.getDate()-1);v({type:"start",value:e}),v({type:"end",value:e}),f(u.toDateString()),h(!0),o({type:"start",value:e}),s||o({type:"end",value:e}),requestAnimationFrame(()=>{c(!1)})}},"Yesterday"),React__default.default.createElement(button.Button,{size:"small",type:"text",onClick:()=>{var e=new Date(u.getFullYear(),u.getMonth(),u.getDate()-7);v({type:"start",value:e}),v({type:"end",value:u}),f(u.toDateString()),h(!0),o({type:"start",value:e}),s||o({type:"end",value:u}),requestAnimationFrame(()=>{c(!1)})}},"Last 7 days"),React__default.default.createElement(button.Button,{size:"small",type:"text",onClick:()=>{var e=new Date(u);e.setMonth(l-2),v({type:"start",value:e}),v({type:"end",value:u}),f(u.toDateString()),h(!0),o({type:"start",value:e}),s||o({type:"end",value:u}),requestAnimationFrame(()=>{c(!1)})}},"Last 30 days"),React__default.default.createElement(button.Button,{size:"small",type:"text",onClick:()=>{var e=new Date(r.getFullYear(),r.getMonth(),date.getMonthDays());v({type:"start",value:r}),v({type:"end",value:e}),f(u.toDateString()),h(!0),o({type:"start",value:r}),s||o({type:"end",value:e}),requestAnimationFrame(()=>{c(!1)})}},"This month"),React__default.default.createElement(button.Button,{size:"small",type:"text",onClick:()=>{var e=new Date(r),t=(e.setMonth(l-2),new Date(e.getFullYear(),e.getMonth(),date.getMonthDays(e.getMonth()+1)));v({type:"start",value:e}),v({type:"end",value:t}),f(e.toDateString()),h(!0),o({type:"start",value:e}),s||o({type:"end",value:t}),requestAnimationFrame(()=>{c(!1)})}},"Last month"),React__default.default.createElement(button.Button,{size:"small",type:"text",onClick:()=>{var e=new Date(u);e.setFullYear(n-1),v({type:"start",value:e}),v({type:"end",value:u}),f(u.toDateString()),h(!0),o({type:"start",value:e}),s||o({type:"end",value:u}),requestAnimationFrame(()=>{c(!1)})}},"Last Year")),React__default.default.createElement("div",null,React__default.default.createElement(MonthBar,null,React__default.default.createElement(Arrow,{onClick:()=>{f(e=>{e=new Date(e);return e.setMonth(e.getMonth()-1),e.toDateString()})}},React__default.default.createElement(chevron_left.ChevronLeft,{size:24})),React__default.default.createElement(paragraph.P,null,Object.values(date$1.MONTHS)[Math.max(0,Math.min(new Date(p).getMonth(),11))]+" "+new Date(p).getFullYear()),React__default.default.createElement(Arrow,{onClick:()=>{f(e=>{e=new Date(e);return e.setMonth(e.getMonth()+1),e.toDateString()})}},React__default.default.createElement(chevron_right.ChevronRight,{size:24}))),React__default.default.createElement(WeekdayWrapper,null,Object.values(date$1.WEEKDAYS).map(e=>React__default.default.createElement(paragraph.P,{key:e},e))),React__default.default.createElement(Calendar,null,D.map((e,t)=>React__default.default.createElement(Week,{key:"week-"+t.toString(36)},e.map((e,t)=>{var a=e[1]!==date.zeroPad(new Date(p).getMonth()+1,2),r=new Date(`${e[1]}-${e[2]}-`+e[0]),o=Math.abs(r.getTime()-u.getTime())<.5,l=r.toDateString(),n=l===g,i=!s&&l===m,r=!s&&w<=r.getTime()&&r.getTime()<=R&&!n&&!i,d=S.toDateString()===l,l=E.toDateString()===l;return React__default.default.createElement(Day,{className:((o?"today":"")+(a?" not-current":"")+(n?" start-date":"")+(i?" end-date":"")+(r?" between":"")+(d?" first-of-month":"")+(l?" last-of-month":"")).trim(),"data-day":e[2],"data-month":e[1],"data-year":e[0],key:"day-"+t.toString(36),onClick:_},(""+e[2]).startsWith("0")?(""+e[2])[1]:e[2])}))))))))},Wrapper=styled.styled.div`
|
|
3
3
|
position: relative;
|
|
4
4
|
width: fit-content;
|
|
5
5
|
font-family: var(--font-inter);
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
|
|
44
44
|
`,InnerWrapper=styled.styled.div`
|
|
45
45
|
display: flex;
|
|
46
|
-
gap:
|
|
47
|
-
padding:
|
|
46
|
+
gap: 20px;
|
|
47
|
+
padding: 18px;
|
|
48
48
|
position: relative;
|
|
49
49
|
border-radius: 25px;
|
|
50
50
|
|
|
@@ -90,13 +90,13 @@
|
|
|
90
90
|
display: flex;
|
|
91
91
|
justify-content: space-between;
|
|
92
92
|
align-items: center;
|
|
93
|
-
margin-bottom:
|
|
93
|
+
margin-bottom: 18px;
|
|
94
94
|
user-select: none;
|
|
95
95
|
`,Arrow=styled.styled.button`
|
|
96
96
|
appearance: none;
|
|
97
97
|
border: none;
|
|
98
98
|
outline: none;
|
|
99
|
-
padding:
|
|
99
|
+
padding: 8px;
|
|
100
100
|
display: flex;
|
|
101
101
|
justify-content: center;
|
|
102
102
|
align-items: center;
|
|
@@ -104,6 +104,10 @@
|
|
|
104
104
|
cursor: pointer;
|
|
105
105
|
background-color: transparent;
|
|
106
106
|
|
|
107
|
+
svg {
|
|
108
|
+
fill: var(--color-primary-blue-2);
|
|
109
|
+
}
|
|
110
|
+
|
|
107
111
|
&:hover {
|
|
108
112
|
background-color: var(--color-primary-blue-2);
|
|
109
113
|
border-color: #ffffff;
|
|
@@ -112,19 +116,32 @@
|
|
|
112
116
|
}
|
|
113
117
|
}
|
|
114
118
|
`,WeekdayWrapper=styled.styled.div`
|
|
115
|
-
display:
|
|
116
|
-
|
|
119
|
+
display: grid;
|
|
120
|
+
grid-template-columns: repeat(7, 1fr);
|
|
121
|
+
gap: 20px;
|
|
117
122
|
user-select: none;
|
|
123
|
+
width: 100%;
|
|
124
|
+
|
|
125
|
+
& > * {
|
|
126
|
+
text-align: center;
|
|
127
|
+
width: 28px;
|
|
128
|
+
display: flex;
|
|
129
|
+
justify-content: center;
|
|
130
|
+
align-items: center;
|
|
131
|
+
}
|
|
118
132
|
`,Calendar=styled.styled.div`
|
|
119
133
|
display: flex;
|
|
120
134
|
flex-direction: column;
|
|
121
|
-
gap:
|
|
122
|
-
margin:
|
|
135
|
+
gap: 16px;
|
|
136
|
+
margin: 16px 0px 5px 0;
|
|
123
137
|
user-select: none;
|
|
138
|
+
width: 100%;
|
|
124
139
|
`,Week=styled.styled.div`
|
|
125
|
-
display:
|
|
126
|
-
|
|
140
|
+
display: grid;
|
|
141
|
+
grid-template-columns: repeat(7, 1fr);
|
|
142
|
+
gap: 20px;
|
|
127
143
|
border-radius: 24px;
|
|
144
|
+
width: 100%;
|
|
128
145
|
`,Day=styled.styled.button`
|
|
129
146
|
outline: none;
|
|
130
147
|
border: none;
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
svg {
|
|
9
9
|
fill: var(--color-white);
|
|
10
10
|
}
|
|
11
|
-
`,type:"text"}),React__default.default.createElement(ReactPlayer__default.default,{className:"player",config:{file:{attributes:{crossOrigin:"true",disablePictureInPicture:"true"},forceHLS:!0,hlsOptions:{autoStartLoad:!0},tracks:(j?.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 "+d,layout:"fill",priority:!0,quality:100,style:{objectFit:"contain"},src:j.thumbnail}),progressInterval:4e3,onProgress:e=>H(e,P?D[k]?.id:void 0),onStart:W,onClickPreview:T,onReady:()=>{w||0===m?.current?.getCurrentTime()&&(P?0!==D?.[k]?.progress&&m.current.seekTo(D?.[k].progress):0!==j?.progress&&m.current.seekTo(j.progress))},pip:t,playIcon:a||w||P?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:m,url:j.src,width:"100%",volume:F,onVolumeChange:e=>{X(e.target.volume)}}),t&&React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(Resizer,{className:"top horizontal",draggable:"false",onDrag:f,onMouseDown:p,onDragEnd:()=>S([0,0]),tabIndex:0}),React__default.default.createElement(Resizer,{className:"bottom horizontal",draggable:"false",onDrag:f,onMouseDown:p,onDragEnd:()=>S([0,0]),tabIndex:0}),React__default.default.createElement(Resizer,{className:"right vertical",draggable:"false",onDrag:f,onMouseDown:p,onDragEnd:()=>S([0,0]),tabIndex:0}),React__default.default.createElement(Resizer,{className:"left vertical",draggable:"false",onDrag:f,onMouseDown:p,onDragEnd:()=>S([0,0]),tabIndex:0}))),"horizontal"===i&&React__default.default.createElement(Side,null,React__default.default.createElement(ScalableContainerWrapper,{$showingAll:y},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},d),React__default.default.createElement(paragraph.P,{as:"h3",$bold:!0,$color:"grey-8"},B)),React__default.default.createElement(box.Box,{$align:"center"},React__default.default.createElement(tabs.Tabs,{activeIndex:x,onChange:e=>b(e),items:A,size:"medium",sx:"justify-content: flex-start;"}),React__default.default.createElement(misc.ButtonViewAll,{showingAll:y,orientation:i,toggleShowingAll:g})),0===x?React__default.default.createElement(HorizontalPlaylistWrapper,{ref:n,$showingAll:y},l.map((t,e)=>React__default.default.createElement(playlistItem.PlaylistItem,{key:t.id,playlistItemId:t.id,onClick:()=>{E(t.id),C(e)},title:t.title,thumbnail:t.thumbnail,shortDescription:t.shortDescription,duration:t.duration,progress:t.progress,playable:a,nowplaying:v,comingSoon:t.comingSoon||!1,ref:e=>{h.current[t.id]=e}}))):le?React__default.default.createElement(HorizontalPlaylistWrapper,{$showingAll:y},!!D.length&&React__default.default.createElement(accordion.Accordion,{defaultOpen:0},[0].map(e=>React__default.default.createElement(accordion.Accordion.Item,{key:e,buttonSx:"padding: 0;",trigger:React__default.default.createElement("div",{style:{display:"flex",alignItems:"center",gap:16,marginBottom:24}},React__default.default.createElement(chevron_down.ChevronDown,{size:20,color:"white"}),React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:16,$semiBold:!0},"Leaders"))},D.map((t,e)=>React__default.default.createElement(playlistItem.PlaylistItem,{key:t.id,playlistItemId:t.id,onClick:()=>{E(t.id),C(e,!0)},progress:t.progress,duration:t.duration,title:t.name,thumbnail:t.thumbnail||"",shortDescription:t.shortDescription,playable:!0,nowplaying:v,ref:e=>{h.current[t.id]=e}}))))),!!z.length&&React__default.default.createElement(accordion.Accordion,{defaultOpen:0},[0].map(e=>React__default.default.createElement(accordion.Accordion.Item,{key:e,buttonSx:"padding: 0;",trigger:React__default.default.createElement("div",{style:{display:"flex",alignItems:"center",gap:16,marginBottom:24}},React__default.default.createElement(chevron_down.ChevronDown,{size:20,color:"white"}),React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:16,$semiBold:!0},"Tools & Documents"))},z.map(e=>React__default.default.createElement(playlistItem.PlaylistItem,{key:e.id,onClick:()=>{window.open(e.src,"_blank")},title:e.name,thumbnail:e.thumbnail||"",shortDescription:e.shortDescription,playable:!0,isFile:!0})))))):e&&c?React__default.default.createElement(misc.TrailerListItem,{title:d,handleSetPlayingTrailer:R,trailer:c}):null)),"vertical"===i&&React__default.default.createElement(box.Box,{$dir:"column",$gap:24,sx:y?"z-index: 3; position:relative;":"height: auto"},React__default.default.createElement(ScalableContainerWrapperVertical,{$showingAll:y},React__default.default.createElement(box.Box,{sx:"padding: 0 1.5rem;",$align:"center"},React__default.default.createElement(tabs.Tabs,{activeIndex:x,onChange:e=>b(e),items:A,size:"medium",sx:"justify-content: flex-start;"}),React__default.default.createElement(misc.ButtonViewAll,{showingAll:y,orientation:i,toggleShowingAll:g})),[React__default.default.createElement(VerticalPlaylistWrapper,{ref:n,$showingAll:y},l.map((t,e)=>React__default.default.createElement(playlistItem.PlaylistItem,{comingSoon:t.comingSoon||!1,nowplaying:v,playlistItemId:t.id,duration:t.duration,key:t.id,ref:e=>{h.current[t.id]=e},onClick:()=>{C(e),E(t.id)},playable:a,progress:t.progress,shortDescription:t.shortDescription,thumbnail:t.thumbnail,title:t.title}))),React__default.default.createElement(VerticalPlaylistWrapper,{$showingAll:y},!!D.length&&React__default.default.createElement(accordion.Accordion,{defaultOpen:0},[0].map(e=>React__default.default.createElement(accordion.Accordion.Item,{key:e,buttonSx:"padding: 0;",trigger:React__default.default.createElement("div",{style:{display:"flex",alignItems:"center",gap:16,marginBottom:24}},React__default.default.createElement(chevron_down.ChevronDown,{size:20,color:"white"}),React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:16,$semiBold:!0},"Leaders"))},D.map((t,e)=>React__default.default.createElement(playlistItem.PlaylistItem,{key:t.id,playlistItemId:t.id,onClick:()=>{E(t.id),C(e,!0)},progress:t.progress,duration:t.duration,title:t.name,thumbnail:t.thumbnail||"",shortDescription:t.shortDescription,playable:!0,nowplaying:v,ref:e=>{h.current[t.id]=e}}))))),!!z.length&&React__default.default.createElement(accordion.Accordion,{defaultOpen:0},[0].map(e=>React__default.default.createElement(accordion.Accordion.Item,{key:e,buttonSx:"padding: 0;",trigger:React__default.default.createElement("div",{style:{display:"flex",alignItems:"center",gap:16,marginBottom:24}},React__default.default.createElement(chevron_down.ChevronDown,{size:20,color:"white"}),React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:16,$semiBold:!0},"Tools & Documents"))},z.map(e=>React__default.default.createElement(playlistItem.PlaylistItem,{key:e.id,onClick:()=>{window.open(e.src,"_blank")},title:e.name,thumbnail:e.thumbnail||"",shortDescription:e.shortDescription,playable:!0,isFile:!0})))))),!!c&&React__default.default.createElement(box.Box,{$dir:"column",$gap:8,sx:"margin: 0px 24px;"},React__default.default.createElement(misc.TrailerListItem,{title:d,handleSetPlayingTrailer:R,trailer:c}))][x])))):null},Wrapper=styled.styled.div`
|
|
11
|
+
`,type:"text"}),React__default.default.createElement(ReactPlayer__default.default,{className:"player",config:{file:{attributes:{crossOrigin:"true",disablePictureInPicture:"true"},forceHLS:!0,hlsOptions:{autoStartLoad:!0},tracks:(j?.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 "+d,layout:"fill",priority:!0,quality:100,style:{objectFit:"contain"},src:j.thumbnail}),progressInterval:4e3,onProgress:e=>H(e,P?D[k]?.id:void 0),onStart:W,onClickPreview:T,onReady:()=>{w||0===m?.current?.getCurrentTime()&&(P?0!==D?.[k]?.progress&&m.current.seekTo(D?.[k].progress):0!==j?.progress&&m.current.seekTo(j.progress))},pip:t,playIcon:a||w||P?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:m,url:j.src,width:"100%",volume:F,onVolumeChange:e=>{X(e.target.volume)}}),t&&React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(Resizer,{className:"top horizontal",draggable:"false",onDrag:f,onMouseDown:p,onDragEnd:()=>S([0,0]),tabIndex:0}),React__default.default.createElement(Resizer,{className:"bottom horizontal",draggable:"false",onDrag:f,onMouseDown:p,onDragEnd:()=>S([0,0]),tabIndex:0}),React__default.default.createElement(Resizer,{className:"right vertical",draggable:"false",onDrag:f,onMouseDown:p,onDragEnd:()=>S([0,0]),tabIndex:0}),React__default.default.createElement(Resizer,{className:"left vertical",draggable:"false",onDrag:f,onMouseDown:p,onDragEnd:()=>S([0,0]),tabIndex:0}))),"horizontal"===i&&React__default.default.createElement(Side,null,React__default.default.createElement(ScalableContainerWrapper,{$showingAll:y},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},d),React__default.default.createElement(paragraph.P,{as:"h3",$bold:!0,$color:"grey-8"},B)),React__default.default.createElement(box.Box,{$align:"center"},React__default.default.createElement(tabs.Tabs,{activeIndex:x,onChange:e=>b(e),items:A,size:"medium",sx:"justify-content: flex-start;"}),React__default.default.createElement(misc.ButtonViewAll,{showingAll:y,orientation:i,toggleShowingAll:g})),0===x?React__default.default.createElement(HorizontalPlaylistWrapper,{ref:n,$showingAll:y},l.map((t,e)=>React__default.default.createElement(playlistItem.PlaylistItem,{key:t.id,playlistItemId:t.id,onClick:()=>{E(t.id),C(e)},title:t.title,thumbnail:t.thumbnail,shortDescription:t.shortDescription,duration:t.duration,progress:t.progress,playable:a,nowplaying:v,comingSoon:t.comingSoon||!1,ref:e=>{h.current[t.id]=e}}))):le?React__default.default.createElement(HorizontalPlaylistWrapper,{$showingAll:y},!!D.length&&React__default.default.createElement(accordion.Accordion,{defaultOpen:0},[0].map(e=>React__default.default.createElement(accordion.Accordion.Item,{key:e,buttonSx:"padding: 0;",trigger:React__default.default.createElement("div",{style:{display:"flex",alignItems:"center",gap:16,marginBottom:24}},React__default.default.createElement(chevron_down.ChevronDown,{size:20,color:"white"}),React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:16,$semiBold:!0},"Leaders")),sx:"flex-direction: column; gap: 8px;"},D.map((t,e)=>React__default.default.createElement(playlistItem.PlaylistItem,{key:t.id,playlistItemId:t.id,onClick:()=>{E(t.id),C(e,!0)},progress:t.progress,duration:t.duration,title:t.name,thumbnail:t.thumbnail||"",shortDescription:t.shortDescription,playable:!0,nowplaying:v,ref:e=>{h.current[t.id]=e}}))))),!!z.length&&React__default.default.createElement(accordion.Accordion,{defaultOpen:0},[0].map(e=>React__default.default.createElement(accordion.Accordion.Item,{key:e,buttonSx:"padding: 0;",trigger:React__default.default.createElement("div",{style:{display:"flex",alignItems:"center",gap:16,marginBottom:24}},React__default.default.createElement(chevron_down.ChevronDown,{size:20,color:"white"}),React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:16,$semiBold:!0},"Tools & Documents")),sx:"flex-direction: column; gap: 8px;"},z.map(e=>React__default.default.createElement(playlistItem.PlaylistItem,{key:e.id,onClick:()=>{window.open(e.src,"_blank")},title:e.name,thumbnail:e.thumbnail||"",shortDescription:e.shortDescription,playable:!0,isFile:!0})))))):e&&c?React__default.default.createElement(misc.TrailerListItem,{title:d,handleSetPlayingTrailer:R,trailer:c}):null)),"vertical"===i&&React__default.default.createElement(box.Box,{$dir:"column",$gap:24,sx:y?"z-index: 3; position:relative;":"height: auto"},React__default.default.createElement(ScalableContainerWrapperVertical,{$showingAll:y},React__default.default.createElement(box.Box,{sx:"padding: 0 1.5rem;",$align:"center"},React__default.default.createElement(tabs.Tabs,{activeIndex:x,onChange:e=>b(e),items:A,size:"medium",sx:"justify-content: flex-start;"}),React__default.default.createElement(misc.ButtonViewAll,{showingAll:y,orientation:i,toggleShowingAll:g})),[React__default.default.createElement(VerticalPlaylistWrapper,{ref:n,$showingAll:y},l.map((t,e)=>React__default.default.createElement(playlistItem.PlaylistItem,{comingSoon:t.comingSoon||!1,nowplaying:v,playlistItemId:t.id,duration:t.duration,key:t.id,ref:e=>{h.current[t.id]=e},onClick:()=>{C(e),E(t.id)},playable:a,progress:t.progress,shortDescription:t.shortDescription,thumbnail:t.thumbnail,title:t.title}))),React__default.default.createElement(VerticalPlaylistWrapper,{$showingAll:y},!!D.length&&React__default.default.createElement(accordion.Accordion,{defaultOpen:0},[0].map(e=>React__default.default.createElement(accordion.Accordion.Item,{key:e,buttonSx:"padding: 0;",trigger:React__default.default.createElement("div",{style:{display:"flex",alignItems:"center",gap:16,marginBottom:24}},React__default.default.createElement(chevron_down.ChevronDown,{size:20,color:"white"}),React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:16,$semiBold:!0},"Leaders")),sx:"flex-direction: column; gap: 8px;"},D.map((t,e)=>React__default.default.createElement(playlistItem.PlaylistItem,{key:t.id,playlistItemId:t.id,onClick:()=>{E(t.id),C(e,!0)},progress:t.progress,duration:t.duration,title:t.name,thumbnail:t.thumbnail||"",shortDescription:t.shortDescription,playable:!0,nowplaying:v,ref:e=>{h.current[t.id]=e}}))))),!!z.length&&React__default.default.createElement(accordion.Accordion,{defaultOpen:0},[0].map(e=>React__default.default.createElement(accordion.Accordion.Item,{key:e,buttonSx:"padding: 0;",trigger:React__default.default.createElement("div",{style:{display:"flex",alignItems:"center",gap:16,marginBottom:24}},React__default.default.createElement(chevron_down.ChevronDown,{size:20,color:"white"}),React__default.default.createElement(paragraph.P,{$color:"white",$fontSize:16,$semiBold:!0},"Tools & Documents")),sx:"flex-direction: column; gap: 8px;"},z.map(e=>React__default.default.createElement(playlistItem.PlaylistItem,{key:e.id,onClick:()=>{window.open(e.src,"_blank")},title:e.name,thumbnail:e.thumbnail||"",shortDescription:e.shortDescription,playable:!0,isFile:!0})))))),!!c&&React__default.default.createElement(box.Box,{$dir:"column",$gap:8,sx:"margin: 0px 24px;"},React__default.default.createElement(misc.TrailerListItem,{title:d,handleSetPlayingTrailer:R,trailer:c}))][x])))):null},Wrapper=styled.styled.div`
|
|
12
12
|
display: flex;
|
|
13
13
|
justify-content: center;
|
|
14
14
|
background-color: var(--color-grey-0);
|