@zoralabs/nft-components - npm Package Compare versions

Comparing version 0.1.12 to 0.1.13-pre1

dist/constants/style.d.ts

@@ -33,3 +33,8 @@ import { ThemeOptionsType } from "./theme";
         fontSizeFull: number;
+        audioColors: {
+            waveformColor: string;
+            progressColor: string;
+        };
     };
+    useDefaultStyles: boolean;
     styles: {
@@ -36,0 +41,0 @@ auctionHouseList: (_: ThemeOptionsType) => string;

dist/constants/style.js

@@ -51,2 +51,3 @@ "use strict";
     theme: theme_1.ThemeOptions,
+    useDefaultStyles: true,
     styles: {
@@ -53,0 +54,0 @@ auctionHouseList: (_) => css_1.css `

dist/constants/theme.d.ts

@@ -91,3 +91,11 @@ export declare const ThemeOptions: {
     fontSizeFull: number;
+    /**
+     * Audio Player Color configurations
+     * @default {waveformColor: '#999, progressColor: '#333'}
+     */
+    audioColors: {
+        waveformColor: string;
+        progressColor: string;
+    };
 };
 export declare type ThemeOptionsType = typeof ThemeOptions;

dist/constants/theme.js

@@ -103,2 +103,10 @@ "use strict";
     fontSizeFull: 16,
+    /**
+     * Audio Player Color configurations
+     * @default {waveformColor: '#999, progressColor: '#333'}
+     */
+    audioColors: {
+        waveformColor: '#999',
+        progressColor: '#333'
+    }
 };

dist/content-components/Audio.js

@@ -9,3 +9,3 @@ "use strict";
 const RendererConfig_1 = require("./RendererConfig");
-const FakeWaveformCanvas = ({ audioRef, uri }) => {
+const FakeWaveformCanvas = ({ audioRef, uri, audioColors }) => {
     const canvasRef = react_1.useRef(null);
@@ -58,6 +58,6 @@ const [width, setWidth] = react_1.useState();
                     i / width) {
-                    context.fillStyle = "#333";
+                    context.fillStyle = audioColors.progressColor;
                 }
                 else {
-                    context.fillStyle = "#999";
+                    context.fillStyle = audioColors.waveformColor;
                 }
@@ -70,3 +70,3 @@ context.fillRect(i, (height - lineHeight) / 2, 2, lineHeight);
 };
-exports.AudioRenderer = react_1.forwardRef(({ request, getStyles, a11yIdPrefix }, ref) => {
+exports.AudioRenderer = react_1.forwardRef(({ request, getStyles, a11yIdPrefix, theme }, ref) => {
     var _a, _b;
@@ -108,4 +108,4 @@ const uri = ((_a = request.media.content) === null || _a === void 0 ? void 0 : _a.uri) || ((_b = request.media.animation) === null || _b === void 0 ? void 0 : _b.uri);
     const playingText = playing ? "Pause" : "Play";
-    return (jsx_runtime_1.jsx(MediaLoader_1.MediaLoader, Object.assign({ getStyles: getStyles, loading: loading, error: error }, { children: jsx_runtime_1.jsxs("div", Object.assign({ ref: wrapper }, getStyles("mediaAudioWrapper"), { children: [!loading && (jsx_runtime_1.jsxs(react_1.Fragment, { children: [jsx_runtime_1.jsx("button", Object.assign({ "aria-live": "polite", onClick: togglePlay, title: playingText }, getStyles("mediaPlayButton", { playing }), { children: playingText }), void 0),
-                        jsx_runtime_1.jsx("div", Object.assign({}, getStyles("mediaAudioWaveform"), { children: jsx_runtime_1.jsx(FakeWaveformCanvas, { uri: uri || "", audioRef: audioRef }, void 0) }), void 0)] }, void 0)),
+    return (jsx_runtime_1.jsx(MediaLoader_1.MediaLoader, Object.assign({ getStyles: getStyles, loading: loading, error: error }, { children: jsx_runtime_1.jsxs("div", Object.assign({ ref: wrapper }, getStyles("mediaAudioWrapper"), { children: [!loading && (jsx_runtime_1.jsxs(react_1.Fragment, { children: [jsx_runtime_1.jsx("button", Object.assign({ "aria-live": "polite", "aria-pressed": playing ? true : false, onClick: togglePlay, title: playingText }, getStyles("mediaPlayButton", { playing }), { children: playingText }), void 0),
+                        jsx_runtime_1.jsx("div", Object.assign({}, getStyles("mediaAudioWaveform"), { children: jsx_runtime_1.jsx(FakeWaveformCanvas, { uri: uri || "", audioRef: audioRef, audioColors: theme.audioColors }, void 0) }), void 0)] }, void 0)),
                 jsx_runtime_1.jsx("audio", Object.assign({ loop: true, ref: audioRef, preload: "auto", playsInline: true, onPlay: () => setPlaying(true), onPause: () => setPlaying(false) }, props, { onLoadedData: props.onLoad, onCanPlayThrough: props.onLoad, onLoad: undefined }), void 0)] }), void 0) }), void 0));
@@ -112,0 +112,0 @@ });

dist/content-components/MediaLoader.js

@@ -49,3 +49,3 @@ "use strict";
                 mediaLoaded: !loading,
-                isFullPage: request.renderingContext === "FULL",
+                isFullPage: request.renderingContext === "FULL"
             }),
@@ -52,0 +52,0 @@ },

dist/content-components/Video.js

@@ -97,5 +97,5 @@ "use strict";
                 isFullPage: request.renderingContext === "FULL",
-            }), { children: [jsx_runtime_1.jsx("button", Object.assign({}, getStyles("mediaFullscreenButton"), { "aria-pressed": isFullScreen ? "true" : "false", onClick: openFullscreen, title: getString("VIDEO_CONTROLS_FULLSCREEN") }, { children: getString("VIDEO_CONTROLS_FULLSCREEN") }), void 0),
-                    jsx_runtime_1.jsx("button", Object.assign({}, getStyles("mediaPlayButton", { playing: isPlaying }), { "aria-live": "polite", onClick: togglePlay, title: playingText }, { children: playingText }), void 0),
-                    jsx_runtime_1.jsx("button", Object.assign({}, getStyles("mediaMuteButton", { muted: isMuted }), { onClick: toggleMute, "aria-pressed": isMuted ? "false" : "true" }, { children: getString("VIDEO_CONTROLS_MUTE") }), void 0)] }), void 0)),
+            }), { children: [jsx_runtime_1.jsx("button", Object.assign({}, getStyles("mediaFullscreenButton"), { "aria-pressed": isFullScreen ? true : false, onClick: openFullscreen, title: getString("VIDEO_CONTROLS_FULLSCREEN") }, { children: getString("VIDEO_CONTROLS_FULLSCREEN") }), void 0),
+                    jsx_runtime_1.jsx("button", Object.assign({}, getStyles("mediaPlayButton", { playing: isPlaying }), { "aria-live": "polite", "aria-pressed": isPlaying ? false : true, onClick: togglePlay, title: playingText }, { children: playingText }), void 0),
+                    jsx_runtime_1.jsx("button", Object.assign({}, getStyles("mediaMuteButton", { muted: isMuted }), { onClick: toggleMute, "aria-pressed": isMuted ? false : true }, { children: getString("VIDEO_CONTROLS_MUTE") }), void 0)] }), void 0)),
             jsx_runtime_1.jsx("video", Object.assign({}, mediaProps, { "aria-controls": controlAriaId, autoPlay: true, controls: isFullScreen, loop: true, muted: isMuted, onCanPlayThrough: onCanPlay, onEnded: playLoop, onLoadedData: mediaProps.onLoad, onPause: () => setIsPlaying(false), onPlay: () => setIsPlaying(true), playsInline: true, preload: "metadata", ref: video }), void 0)] }), void 0));
@@ -102,0 +102,0 @@ });

dist/context/useMediaContext.d.ts

@@ -37,3 +37,8 @@ import type { Strings } from "../constants/strings";
             fontSizeFull: number;
+            audioColors: {
+                waveformColor: string;
+                progressColor: string;
+            };
         };
+        useDefaultStyles: boolean;
         styles: {
@@ -70,2 +75,6 @@ auctionHouseList: (_: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -102,2 +111,6 @@ cardOuter: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }, { hasClickEvent }: any) => string;
@@ -134,2 +147,6 @@ cardLink: (_: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -166,2 +183,6 @@ cardHeader: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -198,2 +219,6 @@ cardMediaWrapper: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -230,2 +255,6 @@ cardItemInfo: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -262,2 +291,6 @@ cardAuctionPricing: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }, { type, }: {
@@ -296,2 +329,6 @@ type: "unknown" | "perpetual" | "reserve-active" | "reserve-pending";
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -328,2 +365,6 @@ fullPage: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -360,2 +401,6 @@ fullMediaWrapper: (_: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -392,2 +437,6 @@ fullItemInfo: (_: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -424,2 +473,6 @@ fullTitle: (_: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -456,2 +509,6 @@ fullDescription: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -488,2 +545,6 @@ fullOwnerAddress: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string[];
@@ -520,2 +581,6 @@ fullLabel: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string[];
@@ -552,2 +617,6 @@ fullPageHistoryItem: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string[];
@@ -584,2 +653,6 @@ fullPageHistoryItemDescription: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -618,2 +691,6 @@ fullPageHistoryItemMeta: () => string;
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -650,2 +727,6 @@ nftProposalInfoLayout: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -682,2 +763,6 @@ nftProposalActionList: (_: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -714,2 +799,6 @@ nftProposalLabelWrapper: (_: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -746,2 +835,6 @@ nftProposalUserView: (_: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -778,2 +871,6 @@ nftProposalLabel: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string[];
@@ -810,2 +907,6 @@ fullPageHistoryItemDatestamp: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string[];
@@ -842,2 +943,6 @@ fullPageDataGrid: (_: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -874,2 +979,6 @@ infoContainer: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }, { bottomPadding }: any) => string;
@@ -914,2 +1023,6 @@ fullInfoSpacer: (_: any, { height }: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -946,2 +1059,6 @@ fullCreatorOwnerSection: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string[];
@@ -978,2 +1095,6 @@ button: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }, { primary }: any) => string;
@@ -1010,2 +1131,6 @@ textSubdued: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string[];
@@ -1042,2 +1167,6 @@ pricingAmount: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -1074,2 +1203,6 @@ nftProposal: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -1107,2 +1240,6 @@ nftProposalActions: () => string;
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }, { action }: {
@@ -1141,2 +1278,6 @@ action: "deny" | "approve";
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -1173,2 +1314,6 @@ nftProposalTitle: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -1205,2 +1350,6 @@ mediaLoader: (_: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }, { mediaLoaded, isFullPage }: any) => string;
@@ -1237,2 +1386,6 @@ mediaObject: (_: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }, { mediaLoaded, isFullPage }: any) => string;
@@ -1269,2 +1422,6 @@ mediaAudioWrapper: (_: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -1301,2 +1458,6 @@ mediaAudioWaveform: (_: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -1333,2 +1494,6 @@ mediaObjectMessage: (_: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -1365,2 +1530,6 @@ mediaContentText: (theme: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => (string | {
@@ -1399,2 +1568,6 @@ fontFamily: string;
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }, { playing }: any) => string;
@@ -1431,2 +1604,6 @@ mediaVideoControls: (_: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }, { isFullPage }: any) => string;
@@ -1463,2 +1640,6 @@ mediaFullscreenButton: (_: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }) => string;
@@ -1495,2 +1676,6 @@ mediaMuteButton: (_: {
                 fontSizeFull: number;
+                audioColors: {
+                    waveformColor: string;
+                    progressColor: string;
+                };
             }, { muted }: any) => string;
@@ -1497,0 +1682,0 @@ };

dist/context/useMediaContext.js

@@ -7,2 +7,3 @@ "use strict";
 const MediaContext_1 = require("./MediaContext");
+const camelCase_1 = require("../utils/camelCase");
 function useMediaContext() {
@@ -15,4 +16,19 @@ const mediaContext = react_1.useContext(MediaContext_1.MediaContext);
         const styles = mediaContext.style.styles[themeKey](mediaContext.style.theme, flags);
+        const getUtilitySelectors = (flagsObject) => {
+            if (Object.keys(flagsObject).length) {
+                return Object.entries(flagsObject)
+                    .map(key => {
+                    const objectType = typeof key[1];
+                    return objectType === 'boolean' && key[1] ? `zora-${themeKey}--${key[0]}`
+                        : objectType === 'string' ? `zora-${themeKey}__${key[0]}--${camelCase_1.camelCase(key[1])}`
+                            : '';
+                })
+                    .join(' ');
+            }
+            else {
+                return '';
+            }
+        };
         return {
-            className: `zora-${themeKey} ${css_1.css(styles)}`,
+            className: `zora-${themeKey}${mediaContext.style.useDefaultStyles ? ` ${css_1.css(styles)}` : ''} ${getUtilitySelectors(flags)}`,
         };
@@ -19,0 +35,0 @@ };

package.json

 {
   "name": "@zoralabs/nft-components",
-  "version": "0.1.12",
+  "version": "0.1.13-pre1",
   "description": "NFT Media Rendering Components",
@@ -5,0 +5,0 @@ "typings": "dist/index.d.ts",

No alert changes

Improved metrics

Total package byte prevSize

257834

increased by3.42%

Number of package files

109

increased by1.87%

Lines of code

5079

increased by5.09%

No dependency changes