@remotion/studio
Version:
APIs for interacting with the Remotion Studio
159 lines (158 loc) • 6.66 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (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 () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PreviewServerConnection = exports.StudioServerConnectionCtx = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const remotion_1 = require("remotion");
const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
const PlayBeepSound_1 = __importDefault(require("../components/PlayBeepSound"));
const context_1 = require("../components/RenderQueue/context");
const url_state_1 = require("./url-state");
exports.StudioServerConnectionCtx = react_1.default.createContext({
previewServerState: {
type: 'init',
},
subscribeToEvent: () => {
throw new Error('Context not initalized');
},
});
const PreviewServerConnection = ({ children, readOnlyStudio }) => {
const listeners = (0, react_1.useRef)([]);
const subscribeToEvent = (0, react_1.useCallback)((type, listener) => {
listeners.current.push({ type, listener });
return () => {
listeners.current = listeners.current.filter((l) => l.type !== type || l.listener !== listener);
};
}, []);
const openEventSource = (0, react_1.useCallback)(() => {
const source = new EventSource('/events');
source.addEventListener('message', (event) => {
var _a, _b, _c;
const newEvent = JSON.parse(event.data);
if (newEvent.type === 'new-input-props' ||
newEvent.type === 'new-env-variables') {
(0, url_state_1.reloadUrl)();
}
if (newEvent.type === 'init') {
setState({
type: 'connected',
clientId: newEvent.clientId,
});
listeners.current.forEach((l) => {
if (l.type === 'undo-redo-stack-changed') {
l.listener({
type: 'undo-redo-stack-changed',
undoFile: newEvent.undoFile,
redoFile: newEvent.redoFile,
});
}
});
}
if (newEvent.type === 'render-queue-updated') {
(_a = context_1.renderJobsRef.current) === null || _a === void 0 ? void 0 : _a.updateRenderJobs(newEvent.queue);
for (const job of newEvent.queue) {
if (job.status === 'done' && job.beepOnFinish) {
(0, PlayBeepSound_1.default)(job.id);
}
}
}
if (newEvent.type === 'client-renders-updated') {
(_b = context_1.renderJobsRef.current) === null || _b === void 0 ? void 0 : _b.updateClientRenders(newEvent.renders);
}
if (newEvent.type === 'render-job-failed') {
(0, NotificationCenter_1.showNotification)(`Rendering "${newEvent.compositionId}" failed`, 2000);
}
if (newEvent.type === 'new-public-folder') {
const payload = {
files: newEvent.files,
};
window.remotion_staticFiles = newEvent.files;
window.remotion_publicFolderExists = newEvent.folderExists;
window.dispatchEvent(new CustomEvent(remotion_1.Internals.WATCH_REMOTION_STATIC_FILES, {
detail: payload,
}));
}
if (newEvent.type === 'hmr') {
(_c = window.__remotion_processHmrEvent) === null || _c === void 0 ? void 0 : _c.call(window, newEvent.hmrEvent);
}
listeners.current.forEach((l) => {
if (l.type === newEvent.type) {
l.listener(newEvent);
}
});
});
source.addEventListener('open', () => {
source.addEventListener('error', () => {
setState({ type: 'disconnected' });
// Display an error message that the studio server has disconnected.
source === null || source === void 0 ? void 0 : source.close();
// Retry later
setTimeout(() => {
openEventSource();
}, 1000);
}, { once: true });
});
const close = () => {
source.close();
};
return {
close,
};
}, []);
(0, react_1.useEffect)(() => {
if (readOnlyStudio) {
return;
}
const { close } = openEventSource();
return () => {
close();
};
}, [openEventSource, readOnlyStudio]);
const [state, setState] = react_1.default.useState({
type: 'init',
});
const context = (0, react_1.useMemo)(() => {
return {
previewServerState: state,
subscribeToEvent,
};
}, [state, subscribeToEvent]);
return (jsx_runtime_1.jsx(exports.StudioServerConnectionCtx.Provider, { value: context, children: children }));
};
exports.PreviewServerConnection = PreviewServerConnection;