@remotion/studio
Version:
APIs for interacting with the Remotion Studio
88 lines (87 loc) • 4.29 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MediaPlaybackErrorExplainer = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const colors_1 = require("../../helpers/colors");
const container = {
borderRadius: 3,
color: 'white',
padding: 12,
backgroundColor: colors_1.BORDER_COLOR,
fontSize: 14,
fontFamily: 'sans-serif',
lineHeight: 1.5,
};
const codeStyle = {
backgroundColor: 'rgba(255,255,255,0.1)',
padding: '2px 5px',
borderRadius: 3,
fontFamily: 'monospace',
fontSize: 13,
};
const linkStyle = {
color: '#58a6ff',
};
const MediaPlaybackErrorExplainer = ({ src }) => {
const [result, setResult] = (0, react_1.useState)({ type: 'loading' });
(0, react_1.useEffect)(() => {
fetch(src, { method: 'HEAD' })
.then((res) => {
var _a;
if (res.status === 404) {
setResult({ type: 'not-found' });
}
else if (!res.ok) {
setResult({ type: 'other-error', statusCode: res.status });
}
else {
const contentType = (_a = res.headers.get('content-type')) !== null && _a !== void 0 ? _a : '';
if (contentType.includes('text/html') ||
contentType.includes('application/json')) {
setResult({ type: 'wrong-content-type', contentType });
}
else {
setResult({ type: 'ok' });
}
}
})
.catch(() => {
setResult({ type: 'fetch-error' });
});
}, [src]);
if (result.type === 'loading') {
return null;
}
if (result.type === 'not-found') {
return (jsx_runtime_1.jsxs("div", { style: container, children: ["The file ",
jsx_runtime_1.jsx("code", { style: codeStyle, children: src }),
" was not found (404).",
jsx_runtime_1.jsx("br", {}),
"If the file is in your ",
jsx_runtime_1.jsx("code", { style: codeStyle, children: "public/" }),
" folder, make sure to use", ' ', jsx_runtime_1.jsx("a", { style: linkStyle, href: "https://remotion.dev/docs/staticfile", target: "_blank", children: jsx_runtime_1.jsx("code", { style: codeStyle, children: "staticFile()" }) }), ' ', "to reference it.",
jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("a", { style: linkStyle, href: "https://remotion.dev/docs/media-playback-error", target: "_blank", children: "Learn more" })
] }));
}
if (result.type === 'other-error') {
return (jsx_runtime_1.jsxs("div", { style: container, children: ["\u26A0\uFE0F Fetching ",
jsx_runtime_1.jsx("code", { style: codeStyle, children: src }),
" returned status code", ' ', result.statusCode, ".",
jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("a", { style: linkStyle, href: "https://remotion.dev/docs/media-playback-error", target: "_blank", children: "Learn more" })
] }));
}
if (result.type === 'wrong-content-type') {
return (jsx_runtime_1.jsxs("div", { style: container, children: ["\u26A0\uFE0F Fetching ",
jsx_runtime_1.jsx("code", { style: codeStyle, children: src }),
" returned a", ' ', jsx_runtime_1.jsx("code", { style: codeStyle, children: result.contentType }),
" content type.",
jsx_runtime_1.jsx("br", {}),
"\uD83D\uDC49 If the file is in your ",
jsx_runtime_1.jsx("code", { style: codeStyle, children: "public/" }), ' ', "folder, make sure to use", ' ', jsx_runtime_1.jsx("a", { style: linkStyle, href: "https://remotion.dev/docs/staticfile", target: "_blank", children: jsx_runtime_1.jsx("code", { style: codeStyle, children: "staticFile()" }) }), ' ', "to reference it.",
jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("a", { style: linkStyle, href: "https://remotion.dev/docs/media-playback-error", target: "_blank", children: "Learn more" })
] }));
}
return null;
};
exports.MediaPlaybackErrorExplainer = MediaPlaybackErrorExplainer;