@soul-refiner/design-system 1.0.6 → 1.1.1

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

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

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

@@ -5,8 +5,8 @@ import { Box } from '../../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 },
+export const PlaylistItem = ({ duration, onClick, playable, progress = 0, shortDescription, thumbnail, title, }) => {
+    return (React.createElement(Wrapper, { onClick: playable ? onClick : undefined, "$playable": playable },
         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 }),
@@ -24,6 +24,7 @@ const Wrapper = styled.div `
   position: relative;
   box-sizing: border-box;
   cursor: pointer;
+  ${({ $playable }) => $playable ? '' : 'pointer-events: none; cursor: initial;'}
 `;
 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)" }),

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

@@ -34,6 +34,10 @@ export interface VideoPlayerProps {
      * @param pip picture in picture is enabled
      */
     pip?: boolean;
+    /**
+     * @param playable whether the video can play
+     */
+    playable: boolean;
     /**
      * @param playlist the media items in the player
      */
@@ -55,5 +59,5 @@ export interface VideoPlayerProps {
  * 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 declare const VideoPlayer: ({ activeIndex, pip, playable, playlist, onPipChange, onProgress, orientation, setMediaItem, subtitle, title, }: VideoPlayerProps) => React.JSX.Element | null;
 export {};

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

@@ -6,12 +6,13 @@ import styled from 'styled-components';
 import { Box } from '../../atoms/box';
 import { H, P } from '../../atoms/typography';
 import { Button } from '../../actions/button';
+import { LockCircle, PlaySolid } from '../../../icons';
 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, }) => {
+export const VideoPlayer = ({ activeIndex, pip, playable, playlist, onPipChange, onProgress, orientation, setMediaItem, subtitle, title, }) => {
     const [showingAll, setShowingAll] = React.useState(false);
     const ref = React.useRef(null);
     const mediaItem = playlist?.[activeIndex];
@@ -25,11 +26,11 @@ export const VideoPlayer = ({ activeIndex, pip, playlist, onPipChange, onProgres
     if (!mediaItem)
         return null;
     return (React.createElement(Wrapper, { "$orientation": orientation },
-        React.createElement(InnerWrapper, { "$orientation": orientation },
+        React.createElement(InnerWrapper, { "$orientation": orientation, "$playable": playable },
             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: {
+            React.createElement(ReactPlayer, { className: "player", config: {
                     file: {
                         attributes: {
                             crossOrigin: 'true',
@@ -45,7 +46,9 @@ export const VideoPlayer = ({ activeIndex, pip, playlist, onPipChange, onProgres
                             srcLang: subtitle.locale,
                         })),
                     },
-                }, controls: true, height: "100%", light: React.createElement(Image, { alt: `thumbnail for ${title}`, layout: "fill", priority: true, style: { objectFit: 'contain' }, src: mediaItem.thumbnail }), onDisablePIP: () => onPipChange && onPipChange(false), onEnablePIP: () => onPipChange && onPipChange(true), onProgress: onProgress, onReady: handleReady, pip: pip, playing: true, ref: ref, style: {
+                }, controls: true, height: "100%", light: React.createElement(Image, { alt: `thumbnail for ${title}`, layout: "fill", priority: true, 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: {
                     backgroundColor: 'var(--color-grey-0)',
                     maxHeight: 720,
                     maxWidth: 1280,
@@ -82,6 +85,16 @@ const InnerWrapper = styled.div `
   flex: 1;
   display: flex;
   justify-content: flex-end;
+
+  ${({ $playable }) => $playable
+    ? ''
+    : `
+    .player {
+      cursor: initial;
+      pointer-events: none;
+      user-select: none;
+    }`}
+
   ${({ $orientation }) => $orientation === 'vertical'
     ? `
     flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "1.0.6",
+  "version": "1.1.1",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {