@zoralabs/nft-components - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/components/MediaObject.js

@@ -45,3 +45,3 @@ "use strict";
         setRenderingInfo(sortedRenderers[0]);
-    }, [metadata, contentURI, mediaType.content]);
+    }, [renderers, metadata, contentURI, mediaType.content]);
     if (renderingInfo) {
@@ -51,4 +51,4 @@ const RenderingComponent = renderingInfo.render;
     }
-    return jsx_runtime_1.jsx("span", { children: "hai" }, void 0);
+    return jsx_runtime_1.jsx("span", {}, void 0);
 };
 exports.MediaObject = MediaObject;

dist/content-components/Audio.js

@@ -9,3 +9,3 @@ "use strict";
 const RendererConfig_1 = require("./RendererConfig");
-const FakeWaveformCanvas = ({ audioRef }) => {
+const FakeWaveformCanvas = ({ audioRef, uri }) => {
     const canvasRef = react_1.useRef(null);
@@ -27,2 +27,5 @@ const [width, setWidth] = react_1.useState();
     }, [updateWidth]);
+    const uriEntropy = react_1.useMemo(() => uri
+        .split("")
+        .reduce((last, char) => last ^ (last + char.charCodeAt(0)), 0), [uri]);
     react_1.useEffect(() => {
@@ -50,4 +53,5 @@ updateCanvasLines();
             context.clearRect(0, 0, width, height);
+            console.log({ uriEntropy });
             for (let i = 0; i < width; i += 5) {
-                const sinRnd = Math.sin(i) * 10000;
+                const sinRnd = Math.sin(i + uriEntropy) * 10000;
                 const lineHeight = Math.floor(Math.min(Math.sin((i / width) * 0.2) +
@@ -70,3 +74,9 @@ 2 * (sinRnd - Math.floor(sinRnd)) * 40, height));
     var _a, _b;
-    const { props, loading, error } = MediaLoader_1.useMediaObjectProps(((_a = request.media.content) === null || _a === void 0 ? void 0 : _a.uri) || ((_b = request.media.animation) === null || _b === void 0 ? void 0 : _b.uri), request, a11yIdPrefix);
+    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 { props, loading, error } = MediaLoader_1.useMediaObjectProps({
+        uri,
+        request,
+        a11yIdPrefix,
+        getStyles,
+    });
     const audioRef = react_1.useRef(null);
@@ -100,4 +110,4 @@ useSyncRef_1.useSyncRef(audioRef, ref);
     const playingText = playing ? "Pause" : "Play";
-    return (jsx_runtime_1.jsx(MediaLoader_1.MediaLoader, Object.assign({ 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, { 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", 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)),
                 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));
@@ -104,0 +114,0 @@ });

dist/content-components/HTML.js

@@ -8,5 +8,9 @@ "use strict";
 const RendererConfig_1 = require("./RendererConfig");
-const HTMLRenderer = ({ request }) => {
+const HTMLRenderer = (requestProps) => {
     var _a, _b;
-    const { props, loading, error } = MediaLoader_1.useMediaObjectProps(((_a = request.media.content) === null || _a === void 0 ? void 0 : _a.uri) || ((_b = request.media.animation) === null || _b === void 0 ? void 0 : _b.uri), request);
+    const { getStyles, request } = requestProps;
+    const { props, loading, error } = MediaLoader_1.useMediaObjectProps({
+        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),
+        ...requestProps,
+    });
     const [windowHeight, setWindowHeight] = react_1.useState(() => window.innerHeight);
@@ -22,3 +26,3 @@ react_1.useEffect(() => {
     });
-    return (jsx_runtime_1.jsx(MediaLoader_1.MediaLoader, Object.assign({ loading: loading, error: error }, { children: jsx_runtime_1.jsx("iframe", Object.assign({ sandbox: "allow-scripts", height: Math.floor(windowHeight * 0.6), width: "100%", style: { border: 0 } }, props), void 0) }), void 0));
+    return (jsx_runtime_1.jsx(MediaLoader_1.MediaLoader, Object.assign({ getStyles: getStyles, loading: loading, error: error }, { children: jsx_runtime_1.jsx("iframe", Object.assign({ sandbox: "allow-scripts", height: Math.floor(windowHeight * 0.6), width: "100%", style: { border: 0 } }, props), void 0) }), void 0));
 };
@@ -25,0 +29,0 @@ exports.HTML = {

dist/content-components/Image.js

@@ -8,6 +8,10 @@ "use strict";
 const RendererConfig_1 = require("./RendererConfig");
-exports.ImageRenderer = react_1.forwardRef(({ request, a11yIdPrefix }, ref) => {
+exports.ImageRenderer = react_1.forwardRef((requestProps, ref) => {
     var _a, _b;
-    const { props, loading, error } = MediaLoader_1.useMediaObjectProps(((_a = request.media.content) === null || _a === void 0 ? void 0 : _a.uri) || ((_b = request.media.image) === null || _b === void 0 ? void 0 : _b.uri), request, a11yIdPrefix);
-    return (jsx_runtime_1.jsx(MediaLoader_1.MediaLoader, Object.assign({ loading: loading, error: error }, { children: jsx_runtime_1.jsx("img", Object.assign({ ref: ref }, props), void 0) }), void 0));
+    const { getStyles, request } = requestProps;
+    const { props, loading, error } = MediaLoader_1.useMediaObjectProps({
+        uri: ((_a = request.media.content) === null || _a === void 0 ? void 0 : _a.uri) || ((_b = request.media.image) === null || _b === void 0 ? void 0 : _b.uri),
+        ...requestProps,
+    });
+    return (jsx_runtime_1.jsx(MediaLoader_1.MediaLoader, Object.assign({ getStyles: getStyles, loading: loading, error: error }, { children: jsx_runtime_1.jsx("img", Object.assign({ ref: ref }, props), void 0) }), void 0));
 });
@@ -14,0 +18,0 @@ exports.Image = {

dist/content-components/index.d.ts

@@ -7,4 +7,3 @@ import { Text } from "./Text";
 import { Unknown } from "./Unknown";
-import * as RendererConfigTypes from "./RendererConfig";
-declare const MediaRendererDefaults: RendererConfigTypes.RendererConfig[];
-export { Text, HTML, Image, Video, Audio, Unknown, RendererConfigTypes, MediaRendererDefaults, };
+export declare const MediaRendererDefaults: import("./RendererConfig").RendererConfig[];
+export { Text, HTML, Image, Video, Audio, Unknown, };

dist/content-components/index.js

 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MediaRendererDefaults = exports.RendererConfigTypes = exports.Unknown = exports.Audio = exports.Video = exports.Image = exports.HTML = exports.Text = void 0;
+exports.Unknown = exports.Audio = exports.Video = exports.Image = exports.HTML = exports.Text = exports.MediaRendererDefaults = void 0;
 const Text_1 = require("./Text");
@@ -35,5 +16,2 @@ Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
 Object.defineProperty(exports, "Unknown", { enumerable: true, get: function () { return Unknown_1.Unknown; } });
-const RendererConfigTypes = __importStar(require("./RendererConfig"));
-exports.RendererConfigTypes = RendererConfigTypes;
-const MediaRendererDefaults = [Audio_1.Audio, Text_1.Text, HTML_1.HTML, Image_1.Image, Video_1.Video, Unknown_1.Unknown];
-exports.MediaRendererDefaults = MediaRendererDefaults;
+exports.MediaRendererDefaults = [Audio_1.Audio, Text_1.Text, HTML_1.HTML, Image_1.Image, Video_1.Video, Unknown_1.Unknown];

dist/content-components/LoadingError.d.ts

 /// <reference types="react" />
-export declare const LoadingError: (_: any) => JSX.Element;
+export declare const LoadingError: ({ getStyles }: any) => JSX.Element;

dist/content-components/LoadingError.js

@@ -5,7 +5,5 @@ "use strict";
 const jsx_runtime_1 = require("react/jsx-runtime");
-const useMediaContext_1 = require("../context/useMediaContext");
-const LoadingError = (_) => {
-    const { getStyles } = useMediaContext_1.useMediaContext();
+const LoadingError = ({ getStyles }) => {
     return (jsx_runtime_1.jsx("span", Object.assign({}, getStyles("mediaObjectMessage"), { children: "Error loading content" }), void 0));
 };
 exports.LoadingError = LoadingError;

dist/content-components/MediaLoader.d.ts

 import React from "react";
-import { RenderRequest } from "./RendererConfig";
-export declare function useMediaObjectProps(uri: string | undefined, request: RenderRequest, a11yIdPrefix?: string): {
+import type { RenderRequest } from "./RendererConfig";
+export declare function useMediaObjectProps({ uri, request, a11yIdPrefix, getStyles, }: {
+    uri: string | undefined;
+    request: RenderRequest;
+    a11yIdPrefix?: string;
+    getStyles: any;
+}): {
     loading: boolean;
@@ -8,3 +13,4 @@ error: string | undefined;
 };
-export declare const MediaLoader: ({ children, loading, error, }: {
+export declare const MediaLoader: ({ getStyles, children, loading, error, }: {
+    getStyles: any;
     children: React.ReactNode;
@@ -11,0 +17,0 @@ loading: boolean;

dist/content-components/MediaLoader.js

@@ -25,7 +25,5 @@ "use strict";
 const react_1 = __importStar(require("react"));
-const useMediaContext_1 = require("../context/useMediaContext");
-function useMediaObjectProps(uri, request, a11yIdPrefix) {
+function useMediaObjectProps({ uri, request, a11yIdPrefix, getStyles, }) {
     const [loading, setLoading] = react_1.useState(true);
     const [error, setError] = react_1.useState();
-    const { getStyles } = useMediaContext_1.useMediaContext();
     return {
@@ -49,4 +47,3 @@ loading,
 exports.useMediaObjectProps = useMediaObjectProps;
-const MediaLoader = ({ children, loading, error, }) => {
-    const { getStyles } = useMediaContext_1.useMediaContext();
+const MediaLoader = ({ getStyles, children, loading, error, }) => {
     if (!loading && !error) {
@@ -53,0 +50,0 @@ return jsx_runtime_1.jsx(react_1.default.Fragment, { children: children }, void 0);

dist/content-components/RendererConfig.d.ts

@@ -1,2 +0,2 @@
-import React from "react";
+/// <reference types="react" />
 export declare enum RenderingPreference {
@@ -3,0 +3,0 @@ INVALID = -1,

dist/content-components/Text.js

@@ -22,4 +22,4 @@ "use strict";
         const media = nft_hooks_1.useNFTContent((_a = request.media.content) === null || _a === void 0 ? void 0 : _a.uri);
-        return (jsx_runtime_1.jsx(MediaLoader_1.MediaLoader, Object.assign({ loading: media.content ? false : true, error: media.error }, { children: jsx_runtime_1.jsx("div", Object.assign({}, getStyles("mediaContentText"), { children: media.content && "text" in media.content ? media.content.text : "" }), void 0) }), void 0));
+        return (jsx_runtime_1.jsx(MediaLoader_1.MediaLoader, Object.assign({ getStyles: getStyles, loading: media.content ? false : true, error: media.error }, { children: jsx_runtime_1.jsx("div", Object.assign({}, getStyles("mediaContentText"), { children: media.content && "text" in media.content ? media.content.text : "" }), void 0) }), void 0));
     },
 };

dist/content-components/Video.js

@@ -20,3 +20,8 @@ "use strict";
         : ((_c = request.media.content) === null || _c === void 0 ? void 0 : _c.uri) || ((_d = request.media.animation) === null || _d === void 0 ? void 0 : _d.uri);
-    const { props, loading, error } = MediaLoader_1.useMediaObjectProps(uri, request, a11yIdPrefix);
+    const { props, loading, error } = MediaLoader_1.useMediaObjectProps({
+        uri,
+        request,
+        a11yIdPrefix,
+        getStyles,
+    });
     useSyncRef_1.useSyncRef(video, ref);
@@ -83,3 +88,3 @@ react_1.useEffect(() => {
         : getString("VIDEO_CONTROLS_PLAY");
-    return (jsx_runtime_1.jsxs(MediaLoader_1.MediaLoader, Object.assign({ loading: loading, error: error }, { children: [video.current && (jsx_runtime_1.jsxs("div", Object.assign({ "aria-label": getString("VIDEO_CONTROLS_LABEL"), id: controlAriaId, tabIndex: "0", 
+    return (jsx_runtime_1.jsxs(MediaLoader_1.MediaLoader, Object.assign({ getStyles: getStyles, loading: loading, error: error }, { children: [video.current && (jsx_runtime_1.jsxs("div", Object.assign({ "aria-label": getString("VIDEO_CONTROLS_LABEL"), id: controlAriaId, tabIndex: "0", 
                 // @ts-ignore Blur is kinda invalid but okay to be unsafe here.
@@ -86,0 +91,0 @@ onMouseOut: (evt) => evt.target.blur() }, getStyles("mediaVideoControls", {

dist/context/MediaConfiguration.d.ts

 import React from "react";
 import { NetworkIDs } from "@zoralabs/nft-hooks";
-import { Strings } from "../constants/strings";
-import { RecursivePartial } from "../utils/RecursivePartial";
-import { RendererConfig } from "../content-components/RendererConfig";
+import type { Strings } from "../constants/strings";
+import type { RecursivePartial } from "../utils/RecursivePartial";
+import type { RendererConfig } from "../content-components/RendererConfig";
 import { ThemeType } from "./MediaContext";
@@ -7,0 +7,0 @@ declare type MediaContextConfigurationProps = {

dist/context/MediaConfiguration.js

@@ -10,4 +10,7 @@ "use strict";
 const MediaContext_1 = require("./MediaContext");
-const MediaConfiguration = ({ networkId = nft_hooks_1.Networks.MAINNET, style = {}, children, strings = {}, renderers = content_components_1.MediaRendererDefaults, }) => {
+const MediaConfiguration = ({ networkId = nft_hooks_1.Networks.MAINNET, style = {}, children, strings = {}, renderers, }) => {
     const superContext = react_1.useContext(MediaContext_1.MediaContext);
+    if (!renderers) {
+        renderers = content_components_1.MediaRendererDefaults;
+    }
     let newContext = {
@@ -14,0 +17,0 @@ // TODO(iain): Fix typing

dist/context/MediaContext.d.ts

@@ -5,3 +5,3 @@ /// <reference types="react" />
 import { Style } from "../constants/style";
-import { RendererConfig } from "../content-components/RendererConfig";
+import type { RendererConfig } from "../content-components/RendererConfig";
 export declare type ThemeType = typeof Style;
@@ -8,0 +8,0 @@ export declare type MediaContextType = {

dist/context/NFTDataContext.d.ts

 /// <reference types="react" />
-import { useNFTMetadataType, useNFTType, useZNFTType } from "@zoralabs/nft-hooks";
+import type { useNFTMetadataType, useNFTType, useZNFTType } from "@zoralabs/nft-hooks";
 export declare type NFTDataContext = {
@@ -4,0 +4,0 @@ nft: useNFTType | useZNFTType;

dist/context/NFTDataProvider.d.ts

@@ -1,2 +0,2 @@
-import React from "react";
+/// <reference types="react" />
 import { useNFTType, useNFTMetadataType } from "@zoralabs/nft-hooks";
@@ -3,0 +3,0 @@ export declare type NFTDataProviderProps = {

dist/context/useMediaContext.d.ts

@@ -1,2 +0,2 @@
-import { Strings } from "../constants/strings";
+import type { Strings } from "../constants/strings";
 import { ThemeType } from "./MediaContext";
@@ -3,0 +3,0 @@ export declare function useMediaContext(): {

dist/index.d.ts

@@ -5,2 +5,3 @@ import { Networks } from "@zoralabs/nft-hooks";
 import * as MediaRenderers from "./content-components";
+import * as RendererConfigTypes from "./content-components/RendererConfig";
 import { NFTDataProvider } from "./context/NFTDataProvider";
@@ -11,2 +12,2 @@ import { MediaObject } from "./components/MediaObject";
 import { NFTFullPage, FullComponents } from "./nft-full";
-export { Networks, MediaConfiguration, AuctionHouseList, NFTPreview, PreviewComponents, NFTFullPage, FullComponents, NFTDataProvider, NFTDataContext, MediaObject, MediaRenderers, };
+export { Networks, MediaConfiguration, AuctionHouseList, NFTPreview, PreviewComponents, NFTFullPage, FullComponents, NFTDataProvider, NFTDataContext, MediaObject, MediaRenderers, RendererConfigTypes, };

dist/index.js

@@ -22,3 +22,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MediaRenderers = exports.MediaObject = exports.NFTDataContext = exports.NFTDataProvider = exports.FullComponents = exports.NFTFullPage = exports.PreviewComponents = exports.NFTPreview = exports.AuctionHouseList = exports.MediaConfiguration = exports.Networks = void 0;
+exports.RendererConfigTypes = exports.MediaRenderers = exports.MediaObject = exports.NFTDataContext = exports.NFTDataProvider = exports.FullComponents = exports.NFTFullPage = exports.PreviewComponents = exports.NFTPreview = exports.AuctionHouseList = exports.MediaConfiguration = exports.Networks = void 0;
 const nft_hooks_1 = require("@zoralabs/nft-hooks");
@@ -32,2 +32,4 @@ Object.defineProperty(exports, "Networks", { enumerable: true, get: function () { return nft_hooks_1.Networks; } });
 exports.MediaRenderers = MediaRenderers;
+const RendererConfigTypes = __importStar(require("./content-components/RendererConfig"));
+exports.RendererConfigTypes = RendererConfigTypes;
 const NFTDataProvider_1 = require("./context/NFTDataProvider");
@@ -34,0 +36,0 @@ Object.defineProperty(exports, "NFTDataProvider", { enumerable: true, get: function () { return NFTDataProvider_1.NFTDataProvider; } });

dist/nft-full/BidHistory.js

@@ -85,3 +85,3 @@ "use strict";
             .sort((bidA, bidB) => (bidA.createdAt > bidB.createdAt ? -1 : 1))
-            .map((bidItem) => (react_1.createElement("li", Object.assign({}, getStyles("fullPageHistoryItem"), { key: bidItem.createdAt }),
+            .map((bidItem) => (react_1.createElement("li", Object.assign({}, getStyles("fullPageHistoryItem"), { key: `${bidItem.actor}-${bidItem.createdAt}` }),
             jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsxs("span", Object.assign({}, getStyles("pricingAmount"), { children: [jsx_runtime_1.jsx(AddressView_1.AddressView, { address: bidItem.actor }, void 0), " "] }), void 0), bidItem.activityDescription, " ", bidItem.pricing] }, void 0),
@@ -88,0 +88,0 @@ bidItem.createdAt && (jsx_runtime_1.jsx("time", Object.assign({ dateTime: dateFromTimestamp(bidItem.createdAt).toISOString() }, getStyles("fullPageHistoryItemDatestamp"), { children: formatDate(bidItem.createdAt) }), void 0)))));

dist/nft-full/InfoContainer.d.ts

 /// <reference types="react" />
-import { Strings } from "../constants/strings";
+import type { Strings } from "../constants/strings";
 export declare type InfoContainerProps = {
@@ -4,0 +4,0 @@ children: React.ReactNode;

dist/utils/PricingString.d.ts

 /// <reference types="react" />
-import { PricingInfo } from "@zoralabs/nft-hooks";
+import type { PricingInfo } from "@zoralabs/nft-hooks";
 export declare const PricingString: ({ pricing, showUSD, }: {
@@ -4,0 +4,0 @@ pricing: PricingInfo;

package.json

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

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

Lines of code

4458

increased by0.2%

Worsened metrics

Total package byte prevSize

199585

decreased by-0.16%

No dependency changes