@soul-refiner/design-system 2.7.26 → 2.7.27
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"),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")
|
|
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"),tabs=(require("../../navigation/breadcrumb/breadcrumb.js"),require("../../navigation/inner/inner.js"),require("../../navigation/tabs/tabs.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 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(ButtonViewAllWrapper,null,React__default.default.createElement(button.Button,{onClick:t,size:"small",type:"text"},e?"Collapse":"View all")),VideoPlayer=({activeIndex:e,pip:t,playable:a,playlist:l,onClickPreview:r,onPipChange:i,onProgress:o,onStart:n,orientation:d,setMediaItem:c,forwardedRef:s,subtitle:u,title:p,trailer:f,volume:g=1})=>{const[b,x]=React__default.default.useState(0),[h,m]=React__default.default.useState(!1),[y,_]=React__default.default.useState(!a),[w,v]=React__default.default.useState(l?.[e].id||null);var R=React__default.default.useRef(null);const $=s||R,k=React__default.default.useRef({});s=React__default.default.useRef(null);const E=y?f:l?.[e];React__default.default.useEffect(()=>{const e=()=>{const e=k.current[w];e&&setTimeout(()=>{e.scrollIntoView({behavior:"smooth",block:"center"})},0)};return l?.length&&w&&("undefined"!=typeof window&&window.addEventListener("load",e),e()),()=>{"undefined"!=typeof window&&window.removeEventListener("load",e)}},[l,w]);const I=e=>{_(!1),c(e)};R=()=>m(e=>!e);return E?React__default.default.createElement(Wrapper,{$orientation:d},React__default.default.createElement(InnerWrapper,{$orientation:d,$playable:a||y},"vertical"===d&&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},p),React__default.default.createElement(paragraph.P,{as:"h3",$bold:!0,$color:"grey-8"},u)),React__default.default.createElement(ReactPlayer__default.default,{className:"player",config:{file:{attributes:{crossOrigin:"true"},forceHLS:!0,hlsOptions:{autoStartLoad:!0},tracks:(E?.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 "+p,layout:"fill",priority:!0,quality:100,style:{objectFit:"contain"},src:E.thumbnail}),progressInterval:4e3,onDisablePIP:()=>i&&i(!1),onEnablePIP:()=>i&&i(!0),onProgress:o,onStart:n,onClickPreview:r,onReady:()=>{y||0===$?.current?.getCurrentTime()&&0!==E?.progress&&$.current.seekTo(E.progress)},pip:t,playIcon:a||y?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:$,style:{backgroundColor:"var(--color-grey-0)",maxHeight:720,maxWidth:"100%",minHeight:480,overflow:"hidden",position:"relative"},url:E.src,width:"100%",volume:g}),"horizontal"===d&&React__default.default.createElement(Side,null,React__default.default.createElement(ScalableContainerWrapper,{$showingAll:h},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},p),React__default.default.createElement(paragraph.P,{as:"h3",$bold:!0,$color:"grey-8"},u)),React__default.default.createElement(box.Box,{$align:"center"},React__default.default.createElement(tabs.Tabs,{activeIndex:b,onChange:e=>x(e),items:[{label:"All lessons",color:"dark"},{label:"Trailer",color:"dark"}],size:"medium",sx:"justify-content: flex-start;"}),React__default.default.createElement(ButtonViewAll,{showingAll:h,toggleShowingAll:R})),[React__default.default.createElement(HorizontalPlaylistWrapper,{ref:s,$showingAll:h},l.map((t,e)=>React__default.default.createElement(playlistItem.PlaylistItem,{nowplaying:w,key:t.id,ref:e=>{k.current[t.id]=e},playlistItemId:t.id,duration:t.duration,onClick:()=>{I(e),v(t.id)},playable:!0,progress:t.progress,shortDescription:t.shortDescription,thumbnail:t.thumbnail,title:t.title}))),!!f&&React__default.default.createElement(TrailerListItem,{title:p,handleSetPlayingTrailer:_,trailer:f})][b])),"vertical"===d&&React__default.default.createElement(box.Box,{$dir:"column",$gap:24,sx:h?"z-index: 3; position:relative;":"height: auto"},React__default.default.createElement(ScalableContainerWrapperVertical,{$showingAll:h},React__default.default.createElement(box.Box,{sx:"padding: 0 1.5rem;",$align:"center"},React__default.default.createElement(tabs.Tabs,{activeIndex:b,onChange:e=>x(e),items:[{label:"All lessons",color:"dark"},{label:"Trailer",color:"dark"}],size:"medium",sx:"justify-content: flex-start;"}),React__default.default.createElement(ButtonViewAll,{showingAll:h,toggleShowingAll:R})),[React__default.default.createElement(VerticalPlaylistWrapper,{ref:s,$showingAll:h},l.map((t,e)=>React__default.default.createElement(playlistItem.PlaylistItem,{nowplaying:w,playlistItemId:t.id,duration:t.duration,key:t.id,ref:e=>{k.current[t.id]=e},onClick:()=>{I(e),v(t.id)},playable:a,progress:t.progress,shortDescription:t.shortDescription,thumbnail:t.thumbnail,title:t.title}))),!!f&&React__default.default.createElement(box.Box,{$dir:"column",$gap:8,sx:"margin: 0px 24px;"},React__default.default.createElement(TrailerListItem,{title:p,handleSetPlayingTrailer:_,trailer:f}))][b])))):null},Wrapper=styled.styled.div`
|
|
3
3
|
display: flex;
|
|
4
4
|
justify-content: center;
|
|
5
5
|
background-color: var(--color-grey-0);
|
|
@@ -15,6 +15,10 @@ export interface VideoPlayerProps {
|
|
|
15
15
|
* @param orientation the orientation of the player
|
|
16
16
|
*/
|
|
17
17
|
orientation: 'horizontal' | 'vertical';
|
|
18
|
+
/**
|
|
19
|
+
* @param onClickPreview the handler for clicking the preview to play the video
|
|
20
|
+
*/
|
|
21
|
+
onClickPreview?: (event: React.SyntheticEvent) => void;
|
|
18
22
|
/**
|
|
19
23
|
* @param onPipChange when the pip changes
|
|
20
24
|
*/
|
|
@@ -26,6 +30,10 @@ export interface VideoPlayerProps {
|
|
|
26
30
|
playedSeconds: number;
|
|
27
31
|
loadedSeconds: number;
|
|
28
32
|
}) => void;
|
|
33
|
+
/**
|
|
34
|
+
* @param onStart the handler for mounting the video
|
|
35
|
+
*/
|
|
36
|
+
onStart?: () => void;
|
|
29
37
|
/**
|
|
30
38
|
* @param pip picture in picture is enabled
|
|
31
39
|
*/
|
|
@@ -54,6 +62,11 @@ export interface VideoPlayerProps {
|
|
|
54
62
|
* @param trailer if in
|
|
55
63
|
*/
|
|
56
64
|
trailer?: Trailer;
|
|
65
|
+
/**
|
|
66
|
+
* @param volume the volume of the player
|
|
67
|
+
* @default 1 (100%)
|
|
68
|
+
*/
|
|
69
|
+
volume?: number;
|
|
57
70
|
/**
|
|
58
71
|
* @param forwardedRef the reference to the video player
|
|
59
72
|
*/
|
|
@@ -63,5 +76,5 @@ export interface VideoPlayerProps {
|
|
|
63
76
|
* ReactPlayer props reference -> https://www.npmjs.com/package/react-player#props
|
|
64
77
|
* HLS Option props reference -> https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
|
|
65
78
|
*/
|
|
66
|
-
export declare const VideoPlayer: ({ activeIndex, pip, playable, playlist, onPipChange, onProgress, orientation, setMediaItem, forwardedRef, subtitle, title, trailer, }: VideoPlayerProps) => React.JSX.Element | null;
|
|
79
|
+
export declare const VideoPlayer: ({ activeIndex, pip, playable, playlist, onClickPreview, onPipChange, onProgress, onStart, orientation, setMediaItem, forwardedRef, subtitle, title, trailer, volume, }: VideoPlayerProps) => React.JSX.Element | null;
|
|
67
80
|
export {};
|