@soul-refiner/design-system 0.2.128 → 0.2.130

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

@@ -4,10 +4,17 @@ interface MediaItem {
     duration: number;
     progress?: number;
     src: string;
+    subtitles: Subtitle[];
     shortDescription: string;
     thumbnail: string;
     title: string;
 }
+interface Subtitle {
+    id: string;
+    label: string;
+    locale: string;
+    src: string;
+}
 export interface VideoPlayerProps {
     /**
      * @param activeIndex the media item from the playlist currently playing

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

@@ -31,10 +31,19 @@ export const VideoPlayer = ({ activeIndex, pip, playlist, onPipChange, onProgres
                 React.createElement(P, { as: "h3", "$bold": true, "$color": "grey-8" }, subtitle))),
             React.createElement(ReactPlayer, { config: {
                     file: {
+                        attributes: {
+                            crossOrigin: 'true',
+                        },
                         forceHLS: true,
                         hlsOptions: {
                             autoStartLoad: true,
                         },
+                        tracks: mediaItem.subtitles.map((subtitle) => ({
+                            kind: 'subtitles',
+                            label: subtitle.label,
+                            src: subtitle.src,
+                            srcLang: subtitle.locale,
+                        })),
                     },
                 }, controls: true, height: "100%", light: React.createElement(Image, { alt: `thumbnail for ${title}`, layout: "fill", objectFit: "contain", priority: true, src: mediaItem.thumbnail }), onDisablePIP: () => onPipChange && onPipChange(false), onEnablePIP: () => onPipChange && onPipChange(true), onProgress: onProgress, onReady: handleReady, pip: pip, playing: true, ref: ref, style: {
                     backgroundColor: 'var(--color-grey-0)',

package/dist/components/navigation/tabs/tabs.d.ts

@@ -6,9 +6,9 @@ export interface TabProps {
     items: {
         color?: TabColors;
         disabled?: boolean;
-        href?: string;
         icon?: React.ReactElement;
         label: string;
+        onClick: () => void;
     }[];
     onChange?: (index: number) => void;
     size?: TabSizes;
@@ -17,7 +17,7 @@ export interface TabProps {
 declare const Tabs: {
     ({ activeIndex, items, onChange, size, sx, }: TabProps): React.JSX.Element;
     Item: {
-        ({ active, color, disabled, href, icon, label, onClick, size, }: TabsItemProps): React.JSX.Element;
+        ({ active, color, disabled, icon, label, onClick, size, }: TabsItemProps): React.JSX.Element;
         displayName: string;
     };
 };
@@ -25,7 +25,6 @@ export interface TabsItemProps {
     active: boolean;
     color?: TabColors;
     disabled?: boolean;
-    href?: string;
     icon?: React.ReactElement;
     label: string;
     onClick?: () => void;

package/dist/components/navigation/tabs/tabs.js

@@ -46,7 +46,10 @@ const colorLookup = {
 };
 const Tabs = ({ activeIndex, items, onChange, size = 'large', sx, }) => {
     const id = React.useId();
-    return (React.createElement(Wrapper, { "$sx": sx }, items.map((item, index) => (React.createElement(Item, { active: activeIndex === index, color: item?.color, disabled: item?.disabled, href: item?.href, icon: item?.icon, key: id + index.toString(36), label: item.label, onClick: () => onChange && onChange(index), size: size })))));
+    return (React.createElement(Wrapper, { "$sx": sx }, items.map((item, index) => (React.createElement(Item, { active: activeIndex === index, color: item?.color, disabled: item?.disabled, icon: item?.icon, key: id + index.toString(36), label: item.label, onClick: () => {
+            item.onClick();
+            onChange && onChange(index);
+        }, size: size })))));
 };
 const Wrapper = styled.div `
   display: flex;
@@ -63,14 +66,13 @@ const Wrapper = styled.div `
 
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const Item = ({ active, color, disabled, href, icon, label, onClick, size = 'large', }) => {
-    const isAnchor = !!href;
+const Item = ({ active, color, disabled, icon, label, onClick, size = 'large', }) => {
     const inputColor = disabled ? 'grey' : color ? color : 'blue';
     const iconColor = colorLookup[inputColor].icon;
     const bgColor = colorLookup[inputColor].bg;
     const fontSize = size === 'large' ? 16 : size === 'medium' ? 14 : 12;
     const lineHeight = size === 'large' ? 24 : size === 'medium' ? 20 : 16;
-    return (React.createElement(Element, { as: isAnchor ? 'a' : 'div', href: href, onClick: !disabled && onClick ? onClick : undefined, "$active": active, "$color": iconColor, "$disabled": disabled, "$hasIcon": !!icon, "$size": size },
+    return (React.createElement(Element, { as: "a", onClick: !disabled && onClick ? onClick : undefined, "$active": active, "$color": iconColor, "$disabled": disabled, "$hasIcon": !!icon, "$size": size },
         icon && React.createElement(IconWrapper, { "$bg": bgColor }, icon),
         React.createElement(P, { "$fontSize": fontSize, "$lineHeight": lineHeight, "$semiBold": true }, label)));
 };

package/package.json

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