@soul-refiner/design-system 0.2.123 → 0.2.125

package/dist/components/atoms/index.d.ts

@@ -1,5 +1,7 @@
 export { Box } from './box';
 export type { BoxProps } from './box';
+export { SecToDuration } from './seconds_to_duration';
+export type { SecondsToDurationProps } from './seconds_to_duration';
 export { Display, H, P, Typography } from './typography';
 export type { DisplayProps, HeadingProps, ParagraphProps, TypographyProps, } from './typography';
 export { TimeAgo } from './time_ago';

package/dist/components/atoms/index.js

@@ -1,3 +1,4 @@
 export { Box } from './box';
+export { SecToDuration } from './seconds_to_duration';
 export { Display, H, P, Typography } from './typography';
 export { TimeAgo } from './time_ago';

package/dist/components/atoms/seconds_to_duration/index.d.ts

@@ -0,0 +1,2 @@
+export { SecToDuration } from './seconds_to_duration';
+export type { SecondsToDurationProps } from './seconds_to_duration';

package/dist/components/atoms/seconds_to_duration/index.js

@@ -0,0 +1 @@
+export { SecToDuration } from './seconds_to_duration';

package/dist/components/atoms/seconds_to_duration/seconds_to_duration.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface SecondsToDurationProps {
+    seconds: number;
+}
+export declare const SecToDuration: ({ seconds }: SecondsToDurationProps) => React.JSX.Element;

package/dist/components/atoms/seconds_to_duration/seconds_to_duration.js

@@ -0,0 +1,27 @@
+import React from 'react';
+export const SecToDuration = ({ seconds }) => {
+    if (seconds <= 0)
+        throw new Error('Seconds cannot be less than 0');
+    if (seconds === 1)
+        return React.createElement(React.Fragment, null, "1 sec");
+    if (seconds < 60)
+        return React.createElement(React.Fragment, null,
+            seconds,
+            " secs");
+    if (Math.round(seconds / 60) === 1)
+        return React.createElement(React.Fragment, null, "1 min");
+    if (seconds < 3600)
+        return React.createElement(React.Fragment, null,
+            Math.round(seconds / 60),
+            " mins");
+    if (Math.round(seconds / 36) === 100)
+        return React.createElement(React.Fragment, null, "1 hr");
+    const hours = Math.floor(seconds / 3600);
+    const hourText = hours === 1 ? '1 hr' : `${hours} hrs`;
+    const min = Math.round((seconds % 3600) / 60);
+    const minText = min === 0 ? '' : min === 1 ? '1 min' : `${min} mins`;
+    return (React.createElement(React.Fragment, null,
+        hourText,
+        " ",
+        minText));
+};

package/dist/components/index.d.ts

@@ -5,6 +5,7 @@ export * from './editor';
 export * from './feedback';
 export * from './iconography';
 export * from './input';
+export * from './media/video';
 export * from './navigation';
 export * from './surfaces';
 export * from './table';

package/dist/components/index.js

@@ -5,6 +5,7 @@ export * from './editor';
 export * from './feedback';
 export * from './iconography';
 export * from './input';
+export * from './media/video';
 export * from './navigation';
 export * from './surfaces';
 export * from './table';

package/dist/components/media/index.d.ts

@@ -0,0 +1,2 @@
+export { VideoPlayer } from './video';
+export type { VideoPlayerProps } from './video';

package/dist/components/media/index.js

@@ -0,0 +1 @@
+export { VideoPlayer } from './video';

package/dist/components/media/video/index.d.ts

@@ -0,0 +1,2 @@
+export { VideoPlayer } from './video';
+export type { VideoPlayerProps } from './video';

package/dist/components/media/video/index.js

@@ -0,0 +1 @@
+export { VideoPlayer } from './video';

package/dist/components/media/video/playlist-item.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface PlaylistItemProps {
+    duration: number;
+    onClick: () => void;
+    progress?: number;
+    shortDescription: string;
+    thumbnail: string;
+    title: string;
+}
+export declare const PlaylistItem: ({ duration, onClick, progress, shortDescription, thumbnail, title, }: PlaylistItemProps) => React.JSX.Element;
+export {};

package/dist/components/media/video/playlist-item.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { Box } from 'components/atoms/box';
+import { SecToDuration } from '../../atoms/seconds_to_duration';
+import { P } from '../../atoms/typography';
+import { PlaySolid } from '../../../icons/audio_video';
+export const PlaylistItem = ({ duration, onClick, progress = 0, shortDescription, thumbnail, title, }) => {
+    return (React.createElement(Wrapper, { onClick: onClick },
+        React.createElement(PlaySolid, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" }),
+        React.createElement(Image, { alt: `thumbnail for ${title}`, height: 75, src: thumbnail, width: 133 }),
+        React.createElement(ProgressBar, { progressPercent: progress / duration }),
+        React.createElement(Box, { "$dir": "column", "$gap": 4, sx: "margin-left: 16px; margin-right: auto; flex: 0 1 auto; flex-basis: content;" },
+            React.createElement(P, { "$color": "grey-10", "$semiBold": true }, title),
+            React.createElement(P, { "$color": "grey-9", "$fontSize": 14, "$lineHeight": 20, "$textClampLines": 2, sx: "max-width: min(500px, 75%);" }, shortDescription)),
+        React.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, sx: "flex-shrink: 0;" },
+            React.createElement(SecToDuration, { seconds: duration }))));
+};
+const Wrapper = styled.div `
+  width: 100%;
+  flex: 0 1 auto;
+  display: flex;
+  align-items: center;
+  position: relative;
+  box-sizing: border-box;
+  cursor: pointer;
+`;
+const ProgressBar = ({ progressPercent }) => (React.createElement(ProgressBarSvg, { viewBox: "0 0 133 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("rect", { width: 133 * progressPercent, height: "2", fill: "var(--color-primary-blue-2)" }),
+    React.createElement("rect", { x: 133 * progressPercent, width: 133 - 133 * progressPercent, height: "2", fill: "var(--color-grey-8)" })));
+const ProgressBarSvg = styled.svg `
+  width: 133px;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+`;

package/dist/components/media/video/video.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+interface MediaItem {
+    id: string;
+    duration: number;
+    progress?: number;
+    src: string;
+    shortDescription: string;
+    thumbnail: string;
+    title: string;
+}
+export interface VideoPlayerProps {
+    /**
+     * @param activeIndex the media item from the playlist currently playing
+     */
+    activeIndex: number;
+    /**
+     * @param orientation the orientation of the player
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * @param onPipChange when the pip changes
+     */
+    onPipChange?: (pip: boolean) => void;
+    /**
+     * @param onProgress the handler as the video progresses
+     */
+    onProgress: (progress: {
+        playedSeconds: number;
+        loadedSeconds: number;
+    }) => void;
+    /**
+     * @param pip picture in picture is enabled
+     */
+    pip?: boolean;
+    /**
+     * @param playlist the media items in the player
+     */
+    playlist: MediaItem[];
+    /**
+     * @param subtitle the video player's subtitle
+     */
+    subtitle: string;
+    /**
+     * @param title the video player's title
+     */
+    title: string;
+    /**
+     * @param setMediaItem sets the index of the item to be played
+     */
+    setMediaItem: (index: number) => void;
+}
+/**
+ * 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 declare const VideoPlayer: ({ activeIndex, pip, playlist, onPipChange, onProgress, orientation, setMediaItem, subtitle, title, }: VideoPlayerProps) => React.JSX.Element | null;
+export {};

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

@@ -0,0 +1,151 @@
+'use client';
+import React from 'react';
+import Image from 'next/image';
+import ReactPlayer from 'react-player';
+import styled from 'styled-components';
+import { Box } from '../../atoms/box';
+import { H, P } from '../../atoms/typography';
+import { Button } from '../../actions/button';
+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, playlist, onPipChange, onProgress, orientation, setMediaItem, subtitle, title, }) => {
+    const [showingAll, setShowingAll] = React.useState(false);
+    const ref = React.useRef(null);
+    const mediaItem = playlist?.[activeIndex];
+    const handleReady = () => {
+        const currTime = ref?.current?.getCurrentTime();
+        if (currTime === 0 && mediaItem?.progress !== 0) {
+            ref.current.seekTo(mediaItem.progress);
+        }
+    };
+    const toggleShowingAll = () => setShowingAll((prev) => !prev);
+    if (!mediaItem)
+        return null;
+    return (React.createElement(Wrapper, { "$orientation": orientation },
+        React.createElement(InnerWrapper, { "$orientation": orientation },
+            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))),
+            React.createElement(ReactPlayer, { config: {
+                    file: {
+                        forceHLS: true,
+                        hlsOptions: {
+                            autoStartLoad: true,
+                        },
+                    },
+                }, controls: true, height: "100%", light: React.createElement(Image, { alt: `thumbnail for ${title}`, layout: "fill", objectFit: "contain", src: mediaItem.thumbnail }), onDisablePIP: () => onPipChange && onPipChange(false), onEnablePIP: () => onPipChange && onPipChange(true), onProgress: onProgress, onReady: handleReady, pip: pip, playing: true, ref: ref, style: {
+                    maxHeight: 720,
+                    maxWidth: 1280,
+                    minHeight: 480,
+                    overflow: 'hidden',
+                    position: 'relative',
+                }, url: mediaItem.src, width: "100%" }),
+            orientation === 'horizontal' && (React.createElement(Side, null,
+                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)),
+                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), progress: playlistItem.progress, shortDescription: playlistItem.shortDescription, thumbnail: playlistItem.thumbnail, title: playlistItem.title })))))),
+            orientation === 'vertical' && (React.createElement(Box, { "$dir": "column", "$gap": 24 },
+                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 })))))))));
+};
+const Wrapper = styled.div `
+  display: flex;
+  justify-content: center;
+  background-color: var(--color-grey-0);
+
+  ${({ $orientation }) => $orientation === 'vertical' ? 'max-width: 960px; height: max-content;' : ''}
+`;
+const InnerWrapper = styled.div `
+  max-width: 2284px;
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+  ${({ $orientation }) => $orientation === 'vertical'
+    ? `
+    flex-direction: column;
+    gap: 24px;
+    justify-content: flex-start;`
+    : `
+      & > div:first-of-type {
+        flex: 5;
+        aspect-ratio: 1280 / 720;
+      }
+      & > div:last-of-type {
+        flex: 3;
+      }`}
+`;
+const Side = styled.div `
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  gap: 24px;
+`;
+const HorizontalPlaylistWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  max-height: 548px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 24px;
+
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
+    -webkit-box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    background-color: var(--color-grey-2);
+    margin: 40px 0px 15px 0px;
+  }
+  &::-webkit-scrollbar {
+    width: 8px;
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: var(--color-grey-6);
+    opacity: 30%;
+  }
+`;
+const VerticalPlaylistWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 0px 12px 48px 24px;
+  margin-right: 24px;
+  max-height: 350px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
+    -webkit-box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    background-color: var(--color-grey-2);
+    margin: 40px 0px 15px 0px;
+  }
+  &::-webkit-scrollbar {
+    width: 8px;
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: var(--color-grey-6);
+    opacity: 30%;
+  }
+
+  ${({ $showingAll }) => $showingAll
+    ? `
+    max-height: unset;
+    overflow-y: visible;`
+    : ''}
+`;

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

@@ -44,13 +44,26 @@ const Wrapper = styled.div `
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
 const Inner = styled.div `
+  position: absolute;
+  width: 100%;
+  z-index: 0;
+  top: 0px;
+  left: 0px;
   overflow-x: scroll;
-  overflow-y: show;
+  overflow-y: visible;
   display: flex;
   gap: 24px;
   flex-flow: row nowrap;
   scroll-behavior: smooth;
   padding-right: 32px;
+  margin-top: -200px;
+  padding-top: 200px;
+  margin-bottom: -200px;
+  padding-bottom: 200px;
+
+  & > * {
+    flex-shrink: 0;
+  }
 
   &::-webkit-scrollbar {
     width: 0px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.123",
+  "version": "0.2.125",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {
@@ -62,6 +62,7 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
+    "react-player": "^2.13.0",
     "react-tooltip": "^5.18.0",
     "scheduler": "^0.23.0",
     "slate": "^0.94.1",
@@ -69,5 +70,12 @@
     "slate-hyperscript": "^0.77.0",
     "slate-react": "^0.97.1",
     "styled-components": "^6.0.0-rc.3"
+  },
+  "peerDependencies": {
+    "next": "13.4.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-player": "^2.13.0",
+    "styled-components": "^6.0.0-rc.3"
   }
 }