@soul-refiner/design-system 1.0.3 → 1.0.5

package/dist/components/card/video/video.js

@@ -51,7 +51,7 @@ const Wrapper = styled.a `
     z-index: 6;
 
     .hidden {
-      display: flex;
+      display: -webkit-box;
     }
 
     .not-hover {

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

@@ -10,4 +10,4 @@ export interface VideoProps {
     style?: React.CSSProperties;
     thumbnail: string;
 }
-export declare const Video: ({ controls, loop, playsInline, src, subtitles, style, thumbnail, }: VideoProps) => React.JSX.Element;
+export declare const Video: ({ controls, loop, muted, playsInline, src, subtitles, style, thumbnail, }: VideoProps) => React.JSX.Element;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactPlayer from 'react-player';
 import Image from 'next/image';
-export const Video = ({ controls = true, loop = false, playsInline, src, subtitles, style, thumbnail, }) => {
+export const Video = ({ controls = true, loop = false, muted, playsInline, src, subtitles, style, thumbnail, }) => {
     const ref = React.useRef(null);
     return (React.createElement(ReactPlayer, { config: {
             file: {
@@ -19,7 +19,7 @@ export const Video = ({ controls = true, loop = false, playsInline, src, subtitl
                     srcLang: subtitle.locale,
                 })),
             },
-        }, controls: controls, height: "100%", light: thumbnail ? (React.createElement(Image, { alt: "thumbnail for trailer", layout: "fill", objectFit: "contain", priority: true, src: thumbnail })) : undefined, loop: loop, pip: false, playsinline: playsInline, playing: true, ref: ref, style: {
+        }, controls: controls, height: "100%", light: thumbnail ? (React.createElement(Image, { alt: "thumbnail for trailer", height: 720, priority: true, src: thumbnail, style: { objectFit: 'contain' }, width: 1280 })) : undefined, loop: loop, muted: muted, pip: false, playsinline: playsInline, playing: true, ref: ref, style: {
             backgroundColor: 'var(--color-grey-0)',
             maxHeight: 720,
             maxWidth: 1280,

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

@@ -45,7 +45,7 @@ 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", 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: {
+                }, controls: true, height: "100%", light: React.createElement(Image, { alt: `thumbnail for ${title}`, height: 720, priority: true, style: { objectFit: 'contain' }, src: mediaItem.thumbnail, width: 1280 }), onDisablePIP: () => onPipChange && onPipChange(false), onEnablePIP: () => onPipChange && onPipChange(true), onProgress: onProgress, onReady: handleReady, pip: pip, playing: true, ref: ref, style: {
                     backgroundColor: 'var(--color-grey-0)',
                     maxHeight: 720,
                     maxWidth: 1280,

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

@@ -56,10 +56,9 @@ const Inner = styled.div `
   flex-flow: row nowrap;
   scroll-behavior: smooth;
   padding-right: 32px;
-  margin-top: -200px;
-  padding-top: 200px;
-  margin-bottom: -200px;
-  padding-bottom: 200px;
+  margin-top: -56px;
+  padding-top: 56px;
+  padding-bottom: 92px;
 
   & > * {
     flex-shrink: 0;

package/package.json

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