@zoralabs/nft-components - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

dist/components/MediaObject.js

@@ -12,3 +12,3 @@ "use strict";
     const [renderingInfo, setRenderingInfo] = react_1.useState();
-    const { getStyles, getString, renderers } = useMediaContext_1.useMediaContext();
+    const { getStyles, getString, renderers, style } = useMediaContext_1.useMediaContext();
     const request = {
@@ -49,3 +49,3 @@ media: {
         const RenderingComponent = renderingInfo.render;
-        return (jsx_runtime_1.jsx(RenderingComponent, { a11yIdPrefix: a11yIdPrefix, getStyles: getStyles, getString: getString, request: request }, void 0));
+        return (jsx_runtime_1.jsx(RenderingComponent, { a11yIdPrefix: a11yIdPrefix, getStyles: getStyles, getString: getString, theme: style.theme, request: request }, void 0));
     }
@@ -52,0 +52,0 @@ return jsx_runtime_1.jsx("span", {}, void 0);

dist/content-components/Image.js

@@ -21,3 +21,4 @@ "use strict";
         if (request.media.image) {
-            if (request.media.animation) {
+            // Make low priority only if full screen, move to normal priority if preview
+            if (request.renderingContext === "FULL" && request.media.animation) {
                 return RendererConfig_1.RenderingPreference.LOW;
@@ -24,0 +25,0 @@ }

dist/content-components/RendererConfig.d.ts

 /// <reference types="react" />
+import type { ThemeType } from "../context/MediaContext";
 export declare enum RenderingPreference {
@@ -27,2 +28,3 @@ INVALID = -1,
     getStyles: any;
+    theme: ThemeType["theme"];
     a11yIdPrefix?: string;
@@ -29,0 +31,0 @@ };

dist/content-components/Video.js

@@ -8,6 +8,8 @@ "use strict";
 const RendererConfig_1 = require("./RendererConfig");
+const Image_1 = require("./Image");
 const useSyncRef_1 = require("../utils/useSyncRef");
 const useA11yIdPrefix_1 = require("../utils/useA11yIdPrefix");
-exports.VideoRenderer = react_1.forwardRef(({ getString, getStyles, request, a11yIdPrefix }, ref) => {
+exports.VideoRenderer = react_1.forwardRef((props, ref) => {
     var _a, _b, _c, _d;
+    const { getString, getStyles, request, a11yIdPrefix } = props;
     const [isPlaying, setIsPlaying] = react_1.useState(true);
@@ -21,3 +23,3 @@ const [isMuted, setIsMuted] = react_1.useState(true);
         : ((_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({
+    const { props: mediaProps, loading, error } = MediaLoader_1.useMediaObjectProps({
         uri,
@@ -89,2 +91,6 @@ request,
         : getString("VIDEO_CONTROLS_PLAY");
+    // Fallback to rendering an image if loading the video fails
+    if (error) {
+        return jsx_runtime_1.jsx(Image_1.ImageRenderer, Object.assign({}, props), void 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", 
@@ -97,3 +103,3 @@ // @ts-ignore Blur is kinda invalid but okay to be unsafe here.
                     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({}, props, { "aria-controls": controlAriaId, autoPlay: true, controls: isFullScreen, loop: true, muted: isMuted, onCanPlayThrough: onCanPlay, onEnded: playLoop, onLoadedData: props.onLoad, onPause: () => setIsPlaying(false), onPlay: () => setIsPlaying(true), playsInline: true, preload: "metadata", ref: video }), 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));
 });
@@ -100,0 +106,0 @@ exports.Video = {

package.json

 {
   "name": "@zoralabs/nft-components",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "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

Total package byte prevSize

200091

increased by0.25%

Lines of code

4467

increased by0.2%

No dependency changes