@soul-refiner/design-system 1.6.5 → 1.6.7

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.
Files changed (6) hide show
  1. package/dist/components/card/feature/feature.js +1 -1
  2. package/dist/components/media/video-player/playlist-item.d.ts +2 -2
  3. package/dist/components/media/video-player/playlist-item.js +6 -6
  4. package/dist/components/media/video-player/video.d.ts +13 -3
  5. package/dist/components/media/video-player/video.js +24 -9
  6. package/package.json +1 -1
package/dist/components/card/feature/feature.js CHANGED
@@ -77,7 +77,7 @@ const Wrapper = styled.div `
77
77
  text-decoration: none;
78
78
  `;
79
79
  const Figure = styled.figure `
80
- max-width: 352px;
80
+ max-width: min-content;
81
81
  box-sizing: border-box;
82
82
  display: flex;
83
83
  flex-flow: column nowrap;
package/dist/components/media/video-player/playlist-item.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import React from 'react';
2
2
  interface PlaylistItemProps {
3
- duration: number;
3
+ duration?: number;
4
4
  onClick: () => void;
5
5
  playable?: boolean;
6
6
  progress?: number;
7
- shortDescription: string;
7
+ shortDescription?: string;
8
8
  thumbnail: string;
9
9
  title: string;
10
10
  }
package/dist/components/media/video-player/playlist-item.js CHANGED
@@ -4,17 +4,17 @@ import styled from 'styled-components';
4
4
  import { Box } from '../../atoms/box';
5
5
  import { SecToDuration } from '../../atoms/seconds_to_duration';
6
6
  import { P } from '../../atoms/typography';
7
- import { PlaySolid } from '../../../icons/audio_video';
7
+ import { Lock, PlaySolid } from '../../../icons';
8
8
  export const PlaylistItem = ({ duration, onClick, playable, progress = 0, shortDescription, thumbnail, title, }) => {
9
9
  return (React.createElement(Wrapper, { onClick: playable ? onClick : undefined, "$playable": playable },
10
- React.createElement(PlaySolid, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" }),
10
+ playable ? (React.createElement(PlaySolid, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" })) : (React.createElement(Lock, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" })),
11
11
  React.createElement(Image, { alt: `thumbnail for ${title}`, height: 75, quality: 100, src: thumbnail, width: 133 }),
12
- React.createElement(ProgressBar, { progressPercent: progress / duration }),
12
+ progress && duration && (React.createElement(ProgressBar, { progressPercent: progress / duration })),
13
13
  React.createElement(Box, { "$dir": "column", "$gap": 4, sx: "margin-left: 16px; margin-right: auto; flex: 0 1 auto; flex-basis: content;" },
14
14
  React.createElement(P, { "$color": "grey-10", "$semiBold": true }, title),
15
- React.createElement(P, { "$color": "grey-9", "$fontSize": 14, "$lineHeight": 20, "$textClampLines": 2, sx: "max-width: min(500px, 75%);" }, shortDescription)),
16
- React.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, sx: "flex-shrink: 0;" },
17
- React.createElement(SecToDuration, { seconds: duration }))));
15
+ shortDescription && (React.createElement(P, { "$color": "grey-9", "$fontSize": 14, "$lineHeight": 20, "$textClampLines": 2, sx: "max-width: min(500px, 75%);" }, shortDescription))),
16
+ duration && (React.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, sx: "flex-shrink: 0;" },
17
+ React.createElement(SecToDuration, { seconds: duration })))));
18
18
  };
19
19
  const Wrapper = styled.div `
20
20
  width: 100%;
package/dist/components/media/video-player/video.d.ts CHANGED
@@ -10,6 +10,12 @@ interface MediaItem {
10
10
  thumbnail: string;
11
11
  title: string;
12
12
  }
13
+ interface Trailer {
14
+ id: number;
15
+ src: string;
16
+ subtitles: Subtitle[];
17
+ thumbnail: string;
18
+ }
13
19
  export interface VideoPlayerProps {
14
20
  /**
15
21
  * @param activeIndex the media item from the playlist currently playing
@@ -42,6 +48,10 @@ export interface VideoPlayerProps {
42
48
  * @param playlist the media items in the player
43
49
  */
44
50
  playlist: MediaItem[];
51
+ /**
52
+ * @param setMediaItem sets the index of the item to be played
53
+ */
54
+ setMediaItem: (index: number) => void;
45
55
  /**
46
56
  * @param subtitle the video player's subtitle
47
57
  */
@@ -51,13 +61,13 @@ export interface VideoPlayerProps {
51
61
  */
52
62
  title: string;
53
63
  /**
54
- * @param setMediaItem sets the index of the item to be played
64
+ * @param trailer if in
55
65
  */
56
- setMediaItem: (index: number) => void;
66
+ trailer?: Trailer;
57
67
  }
58
68
  /**
59
69
  * ReactPlayer props reference -> https://www.npmjs.com/package/react-player#props
60
70
  * HLS Option props reference -> https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
61
71
  */
62
- export declare const VideoPlayer: ({ activeIndex, pip, playable, playlist, onPipChange, onProgress, orientation, setMediaItem, subtitle, title, }: VideoPlayerProps) => React.JSX.Element | null;
72
+ export declare const VideoPlayer: ({ activeIndex, pip, playable, playlist, onPipChange, onProgress, orientation, setMediaItem, subtitle, title, trailer, }: VideoPlayerProps) => React.JSX.Element | null;
63
73
  export {};
package/dist/components/media/video-player/video.js CHANGED
@@ -12,21 +12,28 @@ import { PlaylistItem } from './playlist-item';
12
12
  * ReactPlayer props reference -> https://www.npmjs.com/package/react-player#props
13
13
  * HLS Option props reference -> https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
14
14
  */
15
- export const VideoPlayer = ({ activeIndex, pip, playable, playlist, onPipChange, onProgress, orientation, setMediaItem, subtitle, title, }) => {
15
+ export const VideoPlayer = ({ activeIndex, pip, playable, playlist, onPipChange, onProgress, orientation, setMediaItem, subtitle, title, trailer, }) => {
16
16
  const [showingAll, setShowingAll] = React.useState(false);
17
+ const [playingTrailer, setPlayingTrailer] = React.useState(!playable);
17
18
  const ref = React.useRef(null);
18
- const mediaItem = playlist?.[activeIndex];
19
+ const mediaItem = playingTrailer ? trailer : playlist?.[activeIndex];
19
20
  const handleReady = () => {
20
- const currTime = ref?.current?.getCurrentTime();
21
- if (currTime === 0 && mediaItem?.progress !== 0) {
22
- ref.current.seekTo(mediaItem.progress);
21
+ if (!playingTrailer) {
22
+ const currTime = ref?.current?.getCurrentTime();
23
+ if (currTime === 0 && mediaItem?.progress !== 0) {
24
+ ref.current.seekTo(mediaItem.progress);
25
+ }
23
26
  }
24
27
  };
28
+ const handleMediaItemChange = (id) => {
29
+ setPlayingTrailer(false);
30
+ setMediaItem(id);
31
+ };
25
32
  const toggleShowingAll = () => setShowingAll((prev) => !prev);
26
33
  if (!mediaItem)
27
34
  return null;
28
35
  return (React.createElement(Wrapper, { "$orientation": orientation },
29
- React.createElement(InnerWrapper, { "$orientation": orientation, "$playable": playable },
36
+ React.createElement(InnerWrapper, { "$orientation": orientation, "$playable": playable || playingTrailer },
30
37
  orientation === 'vertical' && (React.createElement(Box, { "$dir": "column", "$gap": 4, sx: "margin: 24px;" },
31
38
  React.createElement(H, { as: "h2", "$bold": true, "$color": "white", "$fontSize": 28, "$lineHeight": 36 }, title),
32
39
  React.createElement(P, { as: "h3", "$bold": true, "$color": "grey-8" }, subtitle))),
@@ -48,7 +55,7 @@ export const VideoPlayer = ({ activeIndex, pip, playable, playlist, onPipChange,
48
55
  },
49
56
  }, controls: true, height: "100%", light: React.createElement(Image, { alt: `thumbnail for ${title}`, layout: "fill", priority: true, quality: 100, style: {
50
57
  objectFit: 'contain',
51
- }, 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: {
58
+ }, 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: {
52
59
  backgroundColor: 'var(--color-grey-0)',
53
60
  maxHeight: 720,
54
61
  maxWidth: 1280,
@@ -60,14 +67,22 @@ export const VideoPlayer = ({ activeIndex, pip, playable, playlist, onPipChange,
60
67
  React.createElement(Box, { "$dir": "column", "$gap": 4 },
61
68
  React.createElement(H, { as: "h2", "$bold": true, "$color": "white", "$fontSize": 28, "$lineHeight": 36 }, title),
62
69
  React.createElement(P, { as: "h3", "$bold": true, "$color": "grey-8" }, subtitle)),
70
+ !!trailer && (React.createElement(Box, { "$dir": "column", "$gap": 8, sx: `
71
+ margin-bottom: 8x;
72
+ border-bottom: 1px solid var(--color-grey-4);
73
+ padding-bottom: 16px;
74
+ ` },
75
+ React.createElement(Box, { "$align": "center", "$justify": "space-between", sx: "padding: 8px 0px 8px 14px;" },
76
+ React.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, "$semiBold": true }, "Trailer")),
77
+ React.createElement(PlaylistItem, { onClick: () => setPlayingTrailer(true), playable: true, thumbnail: trailer.thumbnail, title: `${title} Trailer` }))),
63
78
  React.createElement(Box, { "$align": "center", "$justify": "space-between", sx: "padding: 8px 0px 8px 14px;" },
64
79
  React.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, "$semiBold": true }, "All lessons")),
65
- 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 })))))),
80
+ 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 })))))),
66
81
  orientation === 'vertical' && (React.createElement(Box, { "$dir": "column", "$gap": 24 },
67
82
  React.createElement(Box, { "$align": "center", "$justify": "space-between", sx: "padding: 8px 0px; margin: 0px 24px; border-bottom: 1px solid var(--color-grey-3);" },
68
83
  React.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, "$semiBold": true }, "All lessons"),
69
84
  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')),
70
- 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 })))))))));
85
+ React.createElement(VerticalPlaylistWrapper, { "$showingAll": showingAll }, playlist.map((playlistItem, index) => (React.createElement(PlaylistItem, { key: playlistItem.id, duration: playlistItem.duration, onClick: () => handleMediaItemChange(index), progress: playlistItem.progress, shortDescription: playlistItem.shortDescription, thumbnail: playlistItem.thumbnail, title: playlistItem.title })))))))));
71
86
  };
72
87
  const Wrapper = styled.div `
73
88
  display: flex;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@soul-refiner/design-system",
3
- "version": "1.6.5",
3
+ "version": "1.6.7",
4
4
  "main": "dist/index.js",
5
5
  "license": "MIT",
6
6
  "publishConfig": {