@zoralabs/nft-components - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

dist/components/MediaObject.js

@@ -48,2 +48,3 @@ "use strict";
                 },
+                isFullPage,
                 mediaLoaded,
@@ -50,0 +51,0 @@ media: content,

dist/constants/style.d.ts

@@ -69,4 +69,7 @@ import { ThemeOptionsType } from "./theme";
         })[];
-        mediaAudioButton: (_: ThemeOptionsType, { playing }: any) => string;
+        mediaPlayButton: (_: ThemeOptionsType, { playing }: any) => string;
+        mediaVideoControls: (_: ThemeOptionsType, { isFullPage }: any) => string;
+        mediaFullscreenButton: (_: ThemeOptionsType) => string;
+        mediaMuteButton: (_: ThemeOptionsType, { muted }: any) => string;
     };
 };

dist/constants/style.js

@@ -15,2 +15,25 @@ "use strict";
 `;
+const buttonCommonSize = (size) => `
+  padding: ${size};
+  width: ${size};
+  height: ${size};
+  background: #eee;
+  border: 0;
+  border-radius: 200px;
+  color: transparent;
+  cursor: pointer;
+  background-repeat: no-repeat;
+  background-position: center;
+  margin: 0 10px;
+`;
+const CENTER_FULL_CONTAINER = `
+  position: absolute;
+  width: 100%;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  justify-items: center;
+  display: flex;
+  height: 100%;
+`;
 exports.Style = {
@@ -220,11 +243,4 @@ theme: theme_1.ThemeOptions,
       opacity: ${mediaLoaded ? "0" : "1"};
-      display: flex;
       transition: 0.2s ease-out opacity;
-      align-content: center;
-      justify-items: center;
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
+      ${CENTER_FULL_CONTAINER}
       ${isFullPage && !mediaLoaded
@@ -249,2 +265,3 @@ ? `
         mediaAudioWrapper: (_) => css_1.css `
+      margin-top: 40px;
       display: flex;
@@ -272,17 +289,28 @@ justify-content: center;
         ],
-        mediaAudioButton: (_, { playing }) => css_1.css `
-      padding: 30px;
-      margin-top: 50px;
-      background: #eee;
-      border: 0;
-      border-radius: 200px;
-      color: transparent;
-      width: 30px;
-      height: 30px;
+        mediaPlayButton: (_, { playing }) => css_1.css `
+      ${buttonCommonSize("32px")}
       background-image: url("data:image/svg+xml,${encodeURIComponent(playing ? svg_icons_1.SVG_PAUSE : svg_icons_1.SVG_PLAY_ARROW)}");
-      cursor: pointer;
-      background-repeat: no-repeat;
-      background-position: center;
     `,
+        mediaVideoControls: (_, { isFullPage }) => css_1.css `
+      ${CENTER_FULL_CONTAINER}
+      ${isFullPage ? `
+        opacity: 0;
+        &:hover {
+          opacity: 1;
+        }
+        transition: opacity 0.6s ease-in-out;
+        transition-delay: 0 0.3s;
+      ` : "display: none;"}
+    `,
+        mediaFullscreenButton: (_) => css_1.css `
+      ${buttonCommonSize("16px")}
+      background-color: #000;
+      background-image: url("data:image/svg+xml,${encodeURIComponent(svg_icons_1.SVG_FULLSCREEN)}");
+    `,
+        mediaMuteButton: (_, { muted }) => css_1.css `
+      ${buttonCommonSize("16px")}
+      background-color: #000;
+      background-image: url("data:image/svg+xml,${encodeURIComponent(muted ? svg_icons_1.SVG_UNMUTED : svg_icons_1.SVG_MUTED)}");
+    `,
     },
 };

dist/constants/svg-icons.d.ts

 export declare const SVG_NEXT_ICON = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"><title>arrow-top-right</title><g stroke-linecap=\"square\" stroke-linejoin=\"miter\" stroke-width=\"2\" fill=\"currentColor\" stroke=\"currentColor\"><line fill=\"none\" stroke-miterlimit=\"10\" x1=\"2\" y1=\"22\" x2=\"22\" y2=\"2\" stroke-linecap=\"butt\"></line> <polyline fill=\"none\" stroke=\"currentColor\" stroke-miterlimit=\"10\" points=\"12,2 22,2 22,12 \"></polyline></g></svg>";
 export declare const SVG_PLAY_ARROW = "<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M28 16C28 15.7 27.8 15.4 27.6 15.2L9.6 2.19998C9.3 1.99998 8.9 1.89998 8.5 2.09998C8.2 2.29998 8 2.59998 8 2.99998V29C8 29.4 8.2 29.7 8.5 29.9C8.7 30 8.8 30 9 30C9.2 30 9.4 29.9 9.6 29.8L27.6 16.8C27.8 16.6 28 16.3 28 16Z\" fill=\"black\"/> </svg>";
 export declare const SVG_PAUSE = "<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M12 1H5C4.73478 1 4.48043 1.10536 4.29289 1.29289C4.10536 1.48043 4 1.73478 4 2V30C4 30.2652 4.10536 30.5196 4.29289 30.7071C4.48043 30.8946 4.73478 31 5 31H12C12.2652 31 12.5196 30.8946 12.7071 30.7071C12.8946 30.5196 13 30.2652 13 30V2C13 1.73478 12.8946 1.48043 12.7071 1.29289C12.5196 1.10536 12.2652 1 12 1Z\" fill=\"black\"/> <path d=\"M27 1H20C19.7348 1 19.4804 1.10536 19.2929 1.29289C19.1054 1.48043 19 1.73478 19 2V30C19 30.2652 19.1054 30.5196 19.2929 30.7071C19.4804 30.8946 19.7348 31 20 31H27C27.2652 31 27.5196 30.8946 27.7071 30.7071C27.8946 30.5196 28 30.2652 28 30V2C28 1.73478 27.8946 1.48043 27.7071 1.29289C27.5196 1.10536 27.2652 1 27 1Z\" fill=\"black\"/></svg>";
+export declare const SVG_MUTED = "<svg width=\"15\" height=\"20\" viewBox=\"0 0 15 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <g filter=\"url(#filter0_d)\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.23011 1.16321C5.01982 0.652528 4.43536 0.409003 3.92468 0.619286C3.41399 0.829568 3.17047 1.41403 3.38075 1.92471L4.64704 4.99998H2C1.4 4.99998 1 5.39998 1 5.99998V12C1 12.6 1.4 13 2 13H7.7L8.0324 13.2216L9.61925 17.0754C9.82953 17.586 10.414 17.8296 10.9247 17.6193C11.4354 17.409 11.6789 16.8245 11.4686 16.3139L11.0137 15.2091L13.4 16.8C14.1 17.2 15 16.8 15 16V1.99998C15 1.19998 14.1 0.699982 13.4 1.19998L7.7 4.99998H6.80995L5.23011 1.16321Z\" fill=\"white\"/> </g> <defs> <filter id=\"filter0_d\" x=\"0\" y=\"0.543701\" width=\"15\" height=\"19.1512\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"> <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/> <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"/> <feOffset dx=\"-1\" dy=\"2\"/> <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/> <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/> <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/> </filter> </defs> </svg> ";
+export declare const SVG_UNMUTED = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <g clip-path=\"url(#clip0)\"> <path d=\"M13.4 0.199947L7.7 3.99995H2C1.4 3.99995 1 4.39995 1 4.99995V10.9999C1 11.5999 1.4 11.9999 2 11.9999H7.7L13.4 15.7999C14.1 16.1999 15 15.7999 15 14.9999V0.999947C15 0.199947 14.1 -0.300053 13.4 0.199947Z\" fill=\"white\"/> </g> <defs> <clipPath id=\"clip0\"> <rect width=\"16\" height=\"16\" fill=\"white\"/> </clipPath> </defs> </svg> ";
+export declare const SVG_FULLSCREEN = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M2 6H0V1C0 0.4 0.4 0 1 0H6V2H2V6Z\" fill=\"white\"/> <path d=\"M16 6H14V2H10V0H15C15.6 0 16 0.4 16 1V6Z\" fill=\"white\"/> <path d=\"M15 16H10V14H14V10H16V15C16 15.6 15.6 16 15 16Z\" fill=\"white\"/> <path d=\"M6 16H1C0.4 16 0 15.6 0 15V10H2V14H6V16Z\" fill=\"white\"/> </svg> ";

dist/constants/svg-icons.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SVG_PAUSE = exports.SVG_PLAY_ARROW = exports.SVG_NEXT_ICON = void 0;
+exports.SVG_FULLSCREEN = exports.SVG_UNMUTED = exports.SVG_MUTED = exports.SVG_PAUSE = exports.SVG_PLAY_ARROW = exports.SVG_NEXT_ICON = void 0;
 exports.SVG_NEXT_ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><title>arrow-top-right</title><g stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" fill="currentColor" stroke="currentColor"><line fill="none" stroke-miterlimit="10" x1="2" y1="22" x2="22" y2="2" stroke-linecap="butt"></line> <polyline fill="none" stroke="currentColor" stroke-miterlimit="10" points="12,2 22,2 22,12 "></polyline></g></svg>';
 exports.SVG_PLAY_ARROW = '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M28 16C28 15.7 27.8 15.4 27.6 15.2L9.6 2.19998C9.3 1.99998 8.9 1.89998 8.5 2.09998C8.2 2.29998 8 2.59998 8 2.99998V29C8 29.4 8.2 29.7 8.5 29.9C8.7 30 8.8 30 9 30C9.2 30 9.4 29.9 9.6 29.8L27.6 16.8C27.8 16.6 28 16.3 28 16Z" fill="black"/> </svg>';
 exports.SVG_PAUSE = '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 1H5C4.73478 1 4.48043 1.10536 4.29289 1.29289C4.10536 1.48043 4 1.73478 4 2V30C4 30.2652 4.10536 30.5196 4.29289 30.7071C4.48043 30.8946 4.73478 31 5 31H12C12.2652 31 12.5196 30.8946 12.7071 30.7071C12.8946 30.5196 13 30.2652 13 30V2C13 1.73478 12.8946 1.48043 12.7071 1.29289C12.5196 1.10536 12.2652 1 12 1Z" fill="black"/> <path d="M27 1H20C19.7348 1 19.4804 1.10536 19.2929 1.29289C19.1054 1.48043 19 1.73478 19 2V30C19 30.2652 19.1054 30.5196 19.2929 30.7071C19.4804 30.8946 19.7348 31 20 31H27C27.2652 31 27.5196 30.8946 27.7071 30.7071C27.8946 30.5196 28 30.2652 28 30V2C28 1.73478 27.8946 1.48043 27.7071 1.29289C27.5196 1.10536 27.2652 1 27 1Z" fill="black"/></svg>';
+exports.SVG_MUTED = '<svg width="15" height="20" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g filter="url(#filter0_d)"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5.23011 1.16321C5.01982 0.652528 4.43536 0.409003 3.92468 0.619286C3.41399 0.829568 3.17047 1.41403 3.38075 1.92471L4.64704 4.99998H2C1.4 4.99998 1 5.39998 1 5.99998V12C1 12.6 1.4 13 2 13H7.7L8.0324 13.2216L9.61925 17.0754C9.82953 17.586 10.414 17.8296 10.9247 17.6193C11.4354 17.409 11.6789 16.8245 11.4686 16.3139L11.0137 15.2091L13.4 16.8C14.1 17.2 15 16.8 15 16V1.99998C15 1.19998 14.1 0.699982 13.4 1.19998L7.7 4.99998H6.80995L5.23011 1.16321Z" fill="white"/> </g> <defs> <filter id="filter0_d" x="0" y="0.543701" width="15" height="19.1512" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> <feOffset dx="-1" dy="2"/> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/> </filter> </defs> </svg> ';
+exports.SVG_UNMUTED = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0)"> <path d="M13.4 0.199947L7.7 3.99995H2C1.4 3.99995 1 4.39995 1 4.99995V10.9999C1 11.5999 1.4 11.9999 2 11.9999H7.7L13.4 15.7999C14.1 16.1999 15 15.7999 15 14.9999V0.999947C15 0.199947 14.1 -0.300053 13.4 0.199947Z" fill="white"/> </g> <defs> <clipPath id="clip0"> <rect width="16" height="16" fill="white"/> </clipPath> </defs> </svg> ';
+exports.SVG_FULLSCREEN = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2 6H0V1C0 0.4 0.4 0 1 0H6V2H2V6Z" fill="white"/> <path d="M16 6H14V2H10V0H15C15.6 0 16 0.4 16 1V6Z" fill="white"/> <path d="M15 16H10V14H14V10H16V15C16 15.6 15.6 16 15 16Z" fill="white"/> <path d="M6 16H1C0.4 16 0 15.6 0 15V10H2V14H6V16Z" fill="white"/> </svg> ';

dist/content-components/Audio.d.ts

 /// <reference types="react" />
 import { MediaRendererProps } from ".";
-export declare const Audio: ({ objectProps: { onLoad, ...mediaObject }, mediaLoaded, }: MediaRendererProps) => JSX.Element;
+export declare const Audio: import("react").ForwardRefExoticComponent<MediaRendererProps & import("react").RefAttributes<HTMLAudioElement>>;

dist/content-components/Audio.js

@@ -7,2 +7,3 @@ "use strict";
 const useMediaContext_1 = require("../context/useMediaContext");
+const useSyncRef_1 = require("../utils/useSyncRef");
 const FakeWaveformCanvas = ({ audioRef, setPlaying, }) => {
@@ -67,5 +68,6 @@ const canvasRef = react_1.useRef(null);
 };
-const Audio = ({ objectProps: { onLoad, ...mediaObject }, mediaLoaded, }) => {
+exports.Audio = react_1.forwardRef(({ objectProps: { onLoad, ...mediaObject }, mediaLoaded, }, ref) => {
     const { getStyles } = useMediaContext_1.useMediaContext();
     const audioRef = react_1.useRef(null);
+    useSyncRef_1.useSyncRef(audioRef, ref);
     const [playing, setPlaying] = react_1.useState(false);
@@ -81,6 +83,5 @@ const wrapper = react_1.useRef();
     }, [audioRef, playing]);
-    return (jsx_runtime_1.jsxs("div", Object.assign({ ref: wrapper }, getStyles("mediaAudioWrapper"), { children: [mediaLoaded && (jsx_runtime_1.jsxs(react_1.Fragment, { children: [jsx_runtime_1.jsx("button", Object.assign({ onClick: togglePlay }, getStyles("mediaAudioButton", { playing }), { children: playing ? "Pause" : "Play" }), void 0),
+    return (jsx_runtime_1.jsxs("div", Object.assign({ ref: wrapper }, getStyles("mediaAudioWrapper"), { children: [mediaLoaded && (jsx_runtime_1.jsxs(react_1.Fragment, { children: [jsx_runtime_1.jsx("button", Object.assign({ onClick: togglePlay }, getStyles("mediaPlayButton", { playing }), { children: playing ? "Pause" : "Play" }), void 0),
                     jsx_runtime_1.jsx("div", Object.assign({}, getStyles("mediaAudioWaveform"), { children: jsx_runtime_1.jsx(FakeWaveformCanvas, { audioRef: audioRef, setPlaying: setPlaying }, void 0) }), void 0)] }, void 0)),
             jsx_runtime_1.jsx("audio", Object.assign({ loop: true, ref: audioRef, style: { display: "none" }, preload: "auto", onLoadedData: onLoad }, mediaObject), void 0)] }), void 0));
-};
-exports.Audio = Audio;
+});

dist/content-components/Image.d.ts

 /// <reference types="react" />
 import { MediaRendererProps } from ".";
-export declare const Image: ({ objectProps }: MediaRendererProps) => JSX.Element;
+export declare const Image: import("react").ForwardRefExoticComponent<MediaRendererProps & import("react").RefAttributes<HTMLImageElement>>;

dist/content-components/Image.js

@@ -5,5 +5,5 @@ "use strict";
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Image = ({ objectProps }) => {
-    return jsx_runtime_1.jsx("img", Object.assign({}, objectProps), void 0);
-};
-exports.Image = Image;
+const react_1 = require("react");
+exports.Image = react_1.forwardRef(({ objectProps }, ref) => {
+    return jsx_runtime_1.jsx("img", Object.assign({ ref: ref }, objectProps), void 0);
+});

dist/content-components/index.d.ts

@@ -13,4 +13,5 @@ /// <reference types="react" />
     mediaLoaded: boolean;
+    isFullPage: boolean;
 };
-export declare type MediaRendererComponent = (mediaProps: MediaRendererProps) => JSX.Element;
+export declare type MediaRendererComponent = (mediaProps: MediaRendererProps) => JSX.Element | null;
 export declare type RendererRecord = {
@@ -17,0 +18,0 @@ renderer: MediaRendererComponent;

dist/content-components/Video.d.ts

 /// <reference types="react" />
 import { MediaRendererProps } from ".";
-export declare const Video: ({ objectProps: { onLoad, ...props }, }: MediaRendererProps) => JSX.Element;
+export declare const Video: import("react").ForwardRefExoticComponent<MediaRendererProps & import("react").RefAttributes<HTMLVideoElement>>;

dist/content-components/Video.js

@@ -5,5 +5,49 @@ "use strict";
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Video = ({ objectProps: { onLoad, ...props }, }) => {
-    return (jsx_runtime_1.jsx("video", Object.assign({ preload: "metadata", autoPlay: true, loop: true, muted: true }, props, { onLoadedData: onLoad }), void 0));
-};
-exports.Video = Video;
+const react_1 = require("react");
+const useSyncRef_1 = require("../utils/useSyncRef");
+const useMediaContext_1 = require("../context/useMediaContext");
+exports.Video = react_1.forwardRef(({ objectProps: { onLoad, ...props }, isFullPage }, ref) => {
+    const { getStyles } = useMediaContext_1.useMediaContext();
+    const [isPlaying, setIsPlaying] = react_1.useState(true);
+    const [isMuted, setIsMuted] = react_1.useState(true);
+    const video = react_1.useRef(null);
+    useSyncRef_1.useSyncRef(video, ref);
+    const togglePlay = react_1.useCallback(() => {
+        var _a;
+        if (!video.current) {
+            return;
+        }
+        if (video.current.paused) {
+            setIsPlaying(true);
+            video.current.play();
+        }
+        else {
+            setIsPlaying(false);
+            (_a = video.current) === null || _a === void 0 ? void 0 : _a.pause();
+        }
+    }, [video]);
+    const openFullscreen = react_1.useCallback(() => {
+        const elem = video.current;
+        if (elem && elem.requestFullscreen) {
+            elem.muted = false;
+            setIsMuted(false);
+            return elem.requestFullscreen();
+        }
+        return;
+    }, [video]);
+    const toggleMute = react_1.useCallback(() => {
+        if (!video.current) {
+            return;
+        }
+        if (video.current.muted) {
+            setIsMuted(false);
+        }
+        else {
+            setIsMuted(true);
+        }
+    }, [video]);
+    return (jsx_runtime_1.jsxs(react_1.Fragment, { children: [video.current && (jsx_runtime_1.jsxs("div", Object.assign({}, getStyles("mediaVideoControls", { isFullPage }), { children: [jsx_runtime_1.jsx("button", Object.assign({}, getStyles("mediaFullscreenButton", { muted: isMuted }), { onClick: openFullscreen }, { children: isMuted ? "Unmute" : "Mute" }), void 0),
+                    jsx_runtime_1.jsx("button", Object.assign({}, getStyles("mediaPlayButton", { playing: isPlaying }), { onClick: togglePlay }, { children: isPlaying ? "Play" : "Pause" }), void 0),
+                    jsx_runtime_1.jsx("button", Object.assign({}, getStyles("mediaMuteButton", { muted: isMuted }), { onClick: toggleMute }, { children: isMuted ? "Unmute" : "Mute" }), void 0)] }), void 0)),
+            jsx_runtime_1.jsx("video", Object.assign({ preload: "metadata", autoPlay: true, loop: true, muted: isMuted }, props, { ref: video, onLoadedData: onLoad }), void 0)] }, void 0));
+});

dist/context/useMediaContext.d.ts

@@ -770,3 +770,3 @@ import { Strings } from "../constants/strings";
             })[];
-            mediaAudioButton: (_: {
+            mediaPlayButton: (_: {
                 previewCard: {
@@ -796,2 +796,77 @@ width: string;
             }, { playing }: any) => string;
+            mediaVideoControls: (_: {
+                previewCard: {
+                    width: string;
+                    height: string;
+                    background: string;
+                };
+                textBlockPadding: string;
+                borderStyle: string;
+                lineSpacing: number;
+                linkColor: string;
+                bodyFont: string;
+                titleFont: string;
+                headerFont: string;
+                mediaContentFont: {
+                    fontFamily: string;
+                };
+                buttonColor: {
+                    primaryBackground: string;
+                    primaryText: string;
+                    background: string;
+                    text: string;
+                };
+                defaultBorderRadius: number;
+                fontSizeFull: number;
+            }, { isFullPage }: any) => string;
+            mediaFullscreenButton: (_: {
+                previewCard: {
+                    width: string;
+                    height: string;
+                    background: string;
+                };
+                textBlockPadding: string;
+                borderStyle: string;
+                lineSpacing: number;
+                linkColor: string;
+                bodyFont: string;
+                titleFont: string;
+                headerFont: string;
+                mediaContentFont: {
+                    fontFamily: string;
+                };
+                buttonColor: {
+                    primaryBackground: string;
+                    primaryText: string;
+                    background: string;
+                    text: string;
+                };
+                defaultBorderRadius: number;
+                fontSizeFull: number;
+            }) => string;
+            mediaMuteButton: (_: {
+                previewCard: {
+                    width: string;
+                    height: string;
+                    background: string;
+                };
+                textBlockPadding: string;
+                borderStyle: string;
+                lineSpacing: number;
+                linkColor: string;
+                bodyFont: string;
+                titleFont: string;
+                headerFont: string;
+                mediaContentFont: {
+                    fontFamily: string;
+                };
+                buttonColor: {
+                    primaryBackground: string;
+                    primaryText: string;
+                    background: string;
+                    text: string;
+                };
+                defaultBorderRadius: number;
+                fontSizeFull: number;
+            }, { muted }: any) => string;
         };
@@ -798,0 +873,0 @@ };

package.json

 {
   "name": "@zoralabs/nft-components",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "NFT Media Rendering Components",
@@ -27,2 +27,3 @@ "typings": "dist/index.d.ts",
     "@babel/core": "^7.14.2",
+    "@storybook/addon-a11y": "^6.2.9",
     "@storybook/addon-actions": "^6.2.9",
@@ -29,0 +30,0 @@ "@storybook/addon-essentials": "^6.2.9",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

145196

increased by8.68%

Number of package files

89

increased by2.3%

Lines of code

3268

increased by6.41%

Worsened metrics

Dev dependency count

11

increased by10%

No dependency changes