@soul-refiner/design-system 1.4.2 → 1.6.1-alpha.0

package/dist/components/media/video-player/video.js

@@ -12,21 +12,28 @@ import { PlaylistItem } from './playlist-item';
  * ReactPlayer props reference -> https://www.npmjs.com/package/react-player#props
  * HLS Option props reference -> https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
  */
-export const VideoPlayer = ({ activeIndex, pip, playable, playlist, onPipChange, onProgress, orientation, setMediaItem, subtitle, title, }) => {
+export const VideoPlayer = ({ activeIndex, pip, playable, playlist, onPipChange, onProgress, orientation, setMediaItem, subtitle, title, trailer, }) => {
     const [showingAll, setShowingAll] = React.useState(false);
+    const [playingTrailer, setPlayingTrailer] = React.useState(!playable);
     const ref = React.useRef(null);
-    const mediaItem = playlist?.[activeIndex];
+    const mediaItem = playingTrailer ? trailer : playlist?.[activeIndex];
     const handleReady = () => {
-        const currTime = ref?.current?.getCurrentTime();
-        if (currTime === 0 && mediaItem?.progress !== 0) {
-            ref.current.seekTo(mediaItem.progress);
+        if (!playingTrailer) {
+            const currTime = ref?.current?.getCurrentTime();
+            if (currTime === 0 && mediaItem?.progress !== 0) {
+                ref.current.seekTo(mediaItem.progress);
+            }
         }
     };
+    const handleMediaItemChange = (id) => {
+        setPlayingTrailer(false);
+        setMediaItem(id);
+    };
     const toggleShowingAll = () => setShowingAll((prev) => !prev);
     if (!mediaItem)
         return null;
     return (React.createElement(Wrapper, { "$orientation": orientation },
-        React.createElement(InnerWrapper, { "$orientation": orientation, "$playable": playable },
+        React.createElement(InnerWrapper, { "$orientation": orientation, "$playable": playable || playingTrailer },
             orientation === 'vertical' && (React.createElement(Box, { "$dir": "column", "$gap": 4, sx: "margin: 24px;" },
                 React.createElement(H, { as: "h2", "$bold": true, "$color": "white", "$fontSize": 28, "$lineHeight": 36 }, title),
                 React.createElement(P, { as: "h3", "$bold": true, "$color": "grey-8" }, subtitle))),
@@ -48,7 +55,7 @@ export const VideoPlayer = ({ activeIndex, pip, playable, playlist, onPipChange,
                     },
                 }, controls: true, height: "100%", light: React.createElement(Image, { alt: `thumbnail for ${title}`, layout: "fill", priority: true, quality: 100, style: {
                         objectFit: 'contain',
-                    }, src: mediaItem.thumbnail }), progressInterval: 4000, onDisablePIP: () => onPipChange && onPipChange(false), onEnablePIP: () => onPipChange && onPipChange(true), onProgress: onProgress, onReady: handleReady, pip: pip, playIcon: playable ? (React.createElement(PlaySolid, { color: "white", size: 24, sx: "position: absolute; width: 54px; height: 54px;" })) : (React.createElement(LockCircle, { color: "white", size: 24, sx: "position: absolute; width: 54px; height: 54px;" })), playing: playable, ref: ref, style: {
+                    }, src: mediaItem.thumbnail }), progressInterval: 4000, onDisablePIP: () => onPipChange && onPipChange(false), onEnablePIP: () => onPipChange && onPipChange(true), onProgress: onProgress, onReady: handleReady, pip: pip, playIcon: playable || playingTrailer ? (React.createElement(PlaySolid, { color: "white", size: 24, sx: "position: absolute; width: 54px; height: 54px;" })) : (React.createElement(LockCircle, { color: "white", size: 24, sx: "position: absolute; width: 54px; height: 54px;" })), playing: playable, ref: ref, style: {
                     backgroundColor: 'var(--color-grey-0)',
                     maxHeight: 720,
                     maxWidth: 1280,
@@ -60,14 +67,26 @@ export const VideoPlayer = ({ activeIndex, pip, playable, playlist, onPipChange,
                 React.createElement(Box, { "$dir": "column", "$gap": 4 },
                     React.createElement(H, { as: "h2", "$bold": true, "$color": "white", "$fontSize": 28, "$lineHeight": 36 }, title),
                     React.createElement(P, { as: "h3", "$bold": true, "$color": "grey-8" }, subtitle)),
+                !!trailer && (React.createElement(Box, { "$dir": "column", "$gap": 8, sx: `
+                margin-bottom: 8x;
+                border-bottom: 1px solid var(--color-grey-4);
+                padding-bottom: 16px;
+                ` },
+                    React.createElement(Box, { "$align": "center", "$justify": "space-between", sx: "padding: 8px 0px 8px 14px;" },
+                        React.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, "$semiBold": true }, "Trailer")),
+                    React.createElement(PlaylistItem, { onClick: () => setPlayingTrailer(true), playable: true, thumbnail: trailer.thumbnail, title: `${title} Trailer` }))),
                 React.createElement(Box, { "$align": "center", "$justify": "space-between", sx: "padding: 8px 0px 8px 14px;" },
                     React.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, "$semiBold": true }, "All lessons")),
-                React.createElement(HorizontalPlaylistWrapper, null, playlist.map((playlistItem, index) => (React.createElement(PlaylistItem, { key: playlistItem.id, duration: playlistItem.duration, onClick: () => setMediaItem(index), playable: playable, progress: playlistItem.progress, shortDescription: playlistItem.shortDescription, thumbnail: playlistItem.thumbnail, title: playlistItem.title })))))),
+                React.createElement(HorizontalPlaylistWrapper, null, playlist.map((playlistItem, index) => (React.createElement(PlaylistItem, { key: playlistItem.id, duration: playlistItem.duration, onClick: () => handleMediaItemChange(index), playable: playable, progress: playlistItem.progress, shortDescription: playlistItem.shortDescription, thumbnail: playlistItem.thumbnail, title: playlistItem.title })))))),
             orientation === 'vertical' && (React.createElement(Box, { "$dir": "column", "$gap": 24 },
+                !!trailer && (React.createElement(Box, { "$dir": "column", "$gap": 8, sx: "margin: 0px 24px;" },
+                    React.createElement(Box, { "$align": "center", "$justify": "space-between", sx: "padding: 8px 0px 8px 14px;" },
+                        React.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, "$semiBold": true }, "Trailer")),
+                    React.createElement(PlaylistItem, { onClick: () => setPlayingTrailer(true), playable: true, thumbnail: trailer.thumbnail, title: `${title} Trailer` }))),
                 React.createElement(Box, { "$align": "center", "$justify": "space-between", sx: "padding: 8px 0px; margin: 0px 24px; border-bottom: 1px solid var(--color-grey-3);" },
                     React.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, "$semiBold": true }, "All lessons"),
                     React.createElement(Button, { onClick: toggleShowingAll, size: "small", sx: "background-color: var(--color-grey-2); border-color: var(--color-grey-8); color: var(--color-grey-8);", type: "text" }, showingAll ? 'Collapse' : 'View all')),
-                React.createElement(VerticalPlaylistWrapper, { "$showingAll": showingAll }, playlist.map((playlistItem, index) => (React.createElement(PlaylistItem, { key: playlistItem.id, duration: playlistItem.duration, onClick: () => setMediaItem(index), progress: playlistItem.progress, shortDescription: playlistItem.shortDescription, thumbnail: playlistItem.thumbnail, title: playlistItem.title })))))))));
+                React.createElement(VerticalPlaylistWrapper, { "$showingAll": showingAll }, playlist.map((playlistItem, index) => (React.createElement(PlaylistItem, { key: playlistItem.id, duration: playlistItem.duration, onClick: () => handleMediaItemChange(index), playable: playable, progress: playlistItem.progress, shortDescription: playlistItem.shortDescription, thumbnail: playlistItem.thumbnail, title: playlistItem.title })))))))));
 };
 const Wrapper = styled.div `
   display: flex;

package/dist/components/media/video-player/video.stories.d.ts

@@ -0,0 +1,6 @@
+import { StoryFn, Meta } from '@storybook/react';
+import { VideoPlayerProps } from './video';
+declare const meta: Meta;
+declare const Story: StoryFn<Pick<VideoPlayerProps, 'onProgress' | 'orientation' | 'playlist' | 'subtitle' | 'title' | 'pip' | 'playable' | 'trailer'>>;
+export declare const Default: typeof Story;
+export default meta;

package/dist/components/surfaces/carousel/card/card.js

@@ -71,7 +71,7 @@ const Inner = styled.div `
 `;
 const Button = styled.button `
   position: absolute;
-  z-index: 25;
+  z-index: 1;
   top: 0px;
   height: 100%;
   display: flex;