@cross-nft-marketplace/auction-house-nft-components
Version:
NFT Media Rendering Components
112 lines (111 loc) • 5.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Video = exports.VideoRenderer = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const MediaLoader_1 = require("./MediaLoader");
const RendererConfig_1 = require("./RendererConfig");
const Image_1 = require("./Image");
const useSyncRef_1 = require("../utils/useSyncRef");
const useA11yIdPrefix_1 = require("../utils/useA11yIdPrefix");
const Utils_1 = require("./Utils");
exports.VideoRenderer = (0, react_1.forwardRef)((props, ref) => {
const { getString, getStyles, request, theme, media, a11yIdPrefix } = props;
const [isPlaying, setIsPlaying] = (0, react_1.useState)(true);
const [isMuted, setIsMuted] = (0, react_1.useState)(true);
const [isFullScreen, setIsFullScreen] = (0, react_1.useState)(false);
const video = (0, react_1.useRef)(null);
const appropriateMedia = media;
const controlAriaId = (0, useA11yIdPrefix_1.useA11yIdPrefix)("video-renderer");
const uri = appropriateMedia === null || appropriateMedia === void 0 ? void 0 : appropriateMedia.url;
const { props: mediaProps, loading, error, } = (0, MediaLoader_1.useMediaObjectProps)({
uri,
request,
a11yIdPrefix,
getStyles,
preferredIPFSGateway: theme.preferredIPFSGateway,
});
(0, useSyncRef_1.useSyncRef)(video, ref);
(0, react_1.useEffect)(() => {
const fullScreenCallback = () => {
setIsFullScreen(!!document.fullscreenElement);
};
document.addEventListener("fullscreenchange", fullScreenCallback);
return () => {
document.removeEventListener("fullscreenchange", fullScreenCallback);
};
}, []);
const togglePlay = (0, react_1.useCallback)(() => {
var _a;
if (!video.current) {
return;
}
if (video.current.paused) {
video.current.play();
}
else {
(_a = video.current) === null || _a === void 0 ? void 0 : _a.pause();
}
}, [video]);
const openFullscreen = (0, react_1.useCallback)(() => {
const elem = video.current;
if (elem && elem.requestFullscreen) {
setIsMuted(false);
return elem.requestFullscreen();
}
// Thank Apple for this one :(. Needed for iOS
// @ts-ignore
if (elem && elem.webkitSetPresentationMode) {
setIsMuted(false);
// @ts-ignore
return elem.webkitSetPresentationMode("fullscreen");
}
return;
}, [video]);
const onCanPlay = (0, react_1.useCallback)(() => {
var _a;
setIsPlaying(!((_a = video.current) === null || _a === void 0 ? void 0 : _a.paused));
}, []);
const toggleMute = (0, react_1.useCallback)(() => {
if (!video.current) {
return;
}
if (video.current.muted) {
setIsMuted(false);
}
else {
setIsMuted(true);
}
}, [video]);
const playLoop = (0, react_1.useCallback)(() => {
if (!video.current) {
return;
}
video.current.currentTime = 0;
}, [video.current]);
const playingText = isPlaying
? getString("VIDEO_CONTROLS_PAUSE")
: getString("VIDEO_CONTROLS_PLAY");
// Fallback to rendering an image if loading the video fails
if (error) { //todo remove me
let media = (0, Utils_1.getAppropriateMedia)(props.contextMedias, {
mimeTypes: [RendererConfig_1.MIME_TYPES_CONTENT.IMAGE],
mediaSize: (0, Utils_1.getMediaSizeForRendering)(props.request.renderingContext)
}, {
cdnHosts: theme.cdnHosts,
maxPreviewSizeInBytes: theme.maxPreviewMediaSize
});
return (0, jsx_runtime_1.jsx)(Image_1.ImageRenderer, { ...props, media: media });
}
return ((0, jsx_runtime_1.jsxs)(MediaLoader_1.MediaLoader, { getStyles: getStyles, loading: loading, error: error, children: [video.current && ((0, jsx_runtime_1.jsxs)("div", { "aria-label": getString("VIDEO_CONTROLS_LABEL"), id: controlAriaId, tabIndex: "0",
// @ts-ignore Blur is kinda invalid but okay to be unsafe here.
onMouseOut: (evt) => evt.target.blur(), ...getStyles("mediaVideoControls", undefined, {
isFullPage: request.renderingContext === "FULL",
}), children: [(0, jsx_runtime_1.jsx)("button", { ...getStyles("mediaFullscreenButton"), "aria-pressed": isFullScreen ? true : false, onClick: openFullscreen, title: getString("VIDEO_CONTROLS_FULLSCREEN"), children: getString("VIDEO_CONTROLS_FULLSCREEN") }), (0, jsx_runtime_1.jsx)("button", { ...getStyles("mediaPlayButton", undefined, {
playing: isPlaying,
}), "aria-live": "polite", "aria-pressed": isPlaying ? false : true, onClick: togglePlay, title: playingText, children: playingText }), (0, jsx_runtime_1.jsx)("button", { ...getStyles("mediaMuteButton", undefined, { muted: isMuted }), onClick: toggleMute, "aria-pressed": isMuted ? false : true, children: getString("VIDEO_CONTROLS_MUTE") })] })), (0, jsx_runtime_1.jsx)("video", { ...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 })] }));
});
exports.Video = {
render: exports.VideoRenderer,
supportedMimeTypes: [RendererConfig_1.MIME_TYPES_CONTENT.VIDEO],
};