@soul-refiner/design-system 1.0.6 → 1.1.0

package/dist/components/hooks/click-outside.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useClickOutside: (ref: React.Ref<HTMLElement>, cb: (...args: any[]) => unknown) => void;

package/dist/components/hooks/click-outside.js

@@ -0,0 +1,10 @@
+'use client';
+import { useEventListener } from './event-listenter';
+export const useClickOutside = (ref, cb) => {
+    useEventListener('click', (e) => {
+        if (ref?.current == null ||
+            ref?.current?.contains(e.target))
+            return;
+        cb(e);
+    }, document);
+};

package/dist/components/hooks/event-listenter.d.ts

@@ -0,0 +1 @@
+export declare const useEventListener: (eventType: string, callback: (...args: any[]) => unknown, element?: Window & typeof globalThis) => void;

package/dist/components/hooks/event-listenter.js

@@ -0,0 +1,15 @@
+'use client';
+import React from 'react';
+export const useEventListener = (eventType, callback, element = window) => {
+    const callbackRef = React.useRef(callback);
+    React.useEffect(() => {
+        callbackRef.current = callback;
+    }, [callback]);
+    React.useEffect(() => {
+        if (element == null)
+            return;
+        const handler = (e) => callbackRef.current(e);
+        element.addEventListener(eventType, handler);
+        return () => element.removeEventListener(eventType, handler);
+    }, [eventType, element]);
+};

package/dist/components/hooks/hover.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useHover: (ref: React.Ref<HTMLElement>) => boolean;

package/dist/components/hooks/hover.js

@@ -0,0 +1,9 @@
+'use client';
+import React from 'react';
+import { useEventListener } from './event-listenter';
+export const useHover = (ref) => {
+    const [hovered, setHovered] = React.useState(false);
+    useEventListener('mouseover', () => setHovered(true), ref?.current);
+    useEventListener('mouseout', () => setHovered(false), ref?.current);
+    return hovered;
+};

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

@@ -0,0 +1,4 @@
+export { useClickOutside } from './click-outside';
+export { useEventListener } from './event-listenter';
+export { useHover } from './hover';
+export { useWindowSize } from './window-size';

package/dist/components/hooks/index.js

@@ -0,0 +1,4 @@
+export { useClickOutside } from './click-outside';
+export { useEventListener } from './event-listenter';
+export { useHover } from './hover';
+export { useWindowSize } from './window-size';

package/dist/components/hooks/window-size.d.ts

@@ -0,0 +1,4 @@
+export declare const useWindowSize: () => {
+    width: number;
+    height: number;
+};

package/dist/components/hooks/window-size.js

@@ -0,0 +1,13 @@
+'use client';
+import React from 'react';
+import { useEventListener } from './event-listenter';
+export const useWindowSize = () => {
+    const [windowSize, setWindowSize] = React.useState({
+        width: window.innerWidth,
+        height: window.innerHeight,
+    });
+    useEventListener('resize', () => {
+        setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+    });
+    return windowSize;
+};

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 '../../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-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/dist/components/surfaces/post/helpers.d.ts

@@ -0,0 +1 @@
+export declare const abbrTimeBeforeDate: (date: Date) => string;

package/dist/components/surfaces/post/helpers.js

@@ -0,0 +1,26 @@
+export const abbrTimeBeforeDate = (date) => {
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    if (diff < 60000) {
+        // under 1 min
+        return 'Just now';
+    }
+    else if (diff < 3600000) {
+        // under one hour
+        const minutes = Math.floor(diff / 60000);
+        return `${minutes} ${minutes === 1 ? 'min' : 'mins'}`;
+    }
+    else if (diff < 86400000) {
+        // under one day
+        const hours = Math.floor(diff / 3600000);
+        return `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
+    }
+    else if (diff < 604800000) {
+        // under one week
+        const days = Math.floor(diff / 86400000);
+        return `${days} ${days === 1 ? 'day' : 'days'}`;
+    }
+    else {
+        return date.toDateString().slice(4);
+    }
+};

package/package.json

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