@soul-refiner/design-system 2.2.4 → 2.2.5
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,9 +1,9 @@
|
|
|
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:o,orientation:i,setMediaItem:n,
|
|
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:o,orientation:i,setMediaItem:n,forwardedRef:c,subtitle:d,title:p,trailer:s})=>{const[u,x]=React__default.default.useState(!1),[f,g]=React__default.default.useState(!a);var m=React__default.default.useRef(null);const b=c||m,y=f?s:l?.[e];const _=e=>{g(!1),n(e)};return y?React__default.default.createElement(Wrapper,{$orientation:i},React__default.default.createElement(InnerWrapper,{$orientation:i,$playable:a||f},"vertical"===i&&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"},d)),React__default.default.createElement(ReactPlayer__default.default,{className:"player",config:{file:{attributes:{crossOrigin:"true"},forceHLS:!0,hlsOptions:{autoStartLoad:!0},tracks:y.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:y.thumbnail}),progressInterval:4e3,onDisablePIP:()=>r&&r(!1),onEnablePIP:()=>r&&r(!0),onProgress:o,onReady:()=>{f||0===b?.current?.getCurrentTime()&&0!==y?.progress&&b.current.seekTo(y.progress)},pip:t,playIcon:a||f?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:b,style:{backgroundColor:"var(--color-grey-0)",maxHeight:720,maxWidth:1280,minHeight:480,overflow:"hidden",position:"relative"},url:y.src,width:"100%"}),"horizontal"===i&&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},p),React__default.default.createElement(paragraph.P,{as:"h3",$bold:!0,$color:"grey-8"},d)),!!s&&React__default.default.createElement(box.Box,{$dir:"column",$gap:8,sx:`
|
|
3
3
|
margin-bottom: 8x;
|
|
4
4
|
border-bottom: 1px solid var(--color-grey-4);
|
|
5
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:()=>
|
|
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,duration:e.duration,onClick:()=>_(t),playable:a,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:()=>x(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`
|
|
7
7
|
display: flex;
|
|
8
8
|
justify-content: center;
|
|
9
9
|
background-color: var(--color-grey-0);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { MutableRefObject } from 'react';
|
|
2
2
|
import { Subtitle } from '../common';
|
|
3
3
|
interface MediaItem {
|
|
4
4
|
id: string;
|
|
@@ -64,10 +64,14 @@ export interface VideoPlayerProps {
|
|
|
64
64
|
* @param trailer if in
|
|
65
65
|
*/
|
|
66
66
|
trailer?: Trailer;
|
|
67
|
+
/**
|
|
68
|
+
* @param forwardedRef the reference to the video player
|
|
69
|
+
*/
|
|
70
|
+
forwardedRef?: MutableRefObject<any>;
|
|
67
71
|
}
|
|
68
72
|
/**
|
|
69
73
|
* ReactPlayer props reference -> https://www.npmjs.com/package/react-player#props
|
|
70
74
|
* HLS Option props reference -> https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
|
|
71
75
|
*/
|
|
72
|
-
export declare const VideoPlayer: ({ activeIndex, pip, playable, playlist, onPipChange, onProgress, orientation, setMediaItem, subtitle, title, trailer, }: VideoPlayerProps) => React.JSX.Element | null;
|
|
76
|
+
export declare const VideoPlayer: ({ activeIndex, pip, playable, playlist, onPipChange, onProgress, orientation, setMediaItem, forwardedRef, subtitle, title, trailer, }: VideoPlayerProps) => React.JSX.Element | null;
|
|
73
77
|
export {};
|