init commit

remotion/node_modules/@remotion/studio/dist/components/Notifications/ColorDot.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ColorDot: React.FC<{
+    readonly color: string;
+}>;

remotion/node_modules/@remotion/studio/dist/components/Notifications/ColorDot.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorDot = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const container = {
+    height: 16,
+    width: 16,
+    backgroundColor: 'red',
+    border: '1px solid rgba(255, 255, 255, 0.2)',
+    borderRadius: 8,
+};
+const ColorDot = ({ color }) => {
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            backgroundColor: color,
+        };
+    }, [color]);
+    return (0, jsx_runtime_1.jsx)("div", { style: style });
+};
+exports.ColorDot = ColorDot;

remotion/node_modules/@remotion/studio/dist/components/Notifications/Notification.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const Notification: React.FC<{
+    readonly children: React.ReactNode;
+    readonly created: number;
+    readonly duration: number | null;
+    readonly id: string;
+    readonly onRemove: (id: string) => void;
+}>;

remotion/node_modules/@remotion/studio/dist/components/Notifications/Notification.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Notification = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const notification = {
+    backgroundColor: '#111111',
+    color: 'white',
+    fontFamily: 'Arial, Helvetica, sans-serif',
+    display: 'inline-flex',
+    padding: '8px 14px',
+    borderRadius: 4,
+    fontSize: 15,
+    border: '0.25px solid rgba(255, 255, 255, 0.1)',
+    boxShadow: '0 2px 3px rgba(0, 0, 0, 1)',
+    marginTop: 3,
+    marginBottom: 3,
+    alignItems: 'center',
+};
+const Notification = ({ children, id, duration, created, onRemove }) => {
+    (0, react_1.useEffect)(() => {
+        if (duration === null) {
+            return;
+        }
+        const timeout = setTimeout(() => {
+            onRemove(id);
+        }, duration - (Date.now() - created));
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [created, duration, id, onRemove]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: notification, children: children }));
+};
+exports.Notification = Notification;

remotion/node_modules/@remotion/studio/dist/components/Notifications/NotificationCenter.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type CreatedNotification = {
+    replaceContent: (newContent: React.ReactNode, durationInMs: number | null) => void;
+};
+export declare const showNotification: (content: React.ReactNode, durationInMs: number | null) => CreatedNotification;
+export declare const NotificationCenter: React.FC;
+export {};

remotion/node_modules/@remotion/studio/dist/components/Notifications/NotificationCenter.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationCenter = exports.showNotification = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Notification_1 = require("./Notification");
+const container = {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    width: '100%',
+    flexDirection: 'column',
+    paddingTop: 20,
+    pointerEvents: 'none',
+    backgroundColor: 'transparent',
+};
+const notificationCenter = (0, react_1.createRef)();
+const showNotification = (content, durationInMs) => {
+    return notificationCenter.current.addNotification({
+        content,
+        duration: durationInMs,
+        created: Date.now(),
+        id: String(Math.random()).replace('0.', ''),
+    });
+};
+exports.showNotification = showNotification;
+const NotificationCenter = () => {
+    const [notifications, setNotifications] = (0, react_1.useState)([]);
+    const onRemove = (0, react_1.useCallback)((id) => {
+        setNotifications((not) => {
+            return not.filter((n) => n.id !== id);
+        });
+    }, []);
+    const addNotification = (0, react_1.useCallback)((notification) => {
+        setNotifications((previousNotifications) => {
+            return [...previousNotifications, notification];
+        });
+        return {
+            replaceContent: (newContent, durationInMs) => {
+                setNotifications((oldNotifications) => {
+                    return oldNotifications.map((notificationToMap) => {
+                        if (notificationToMap.id === notification.id) {
+                            return {
+                                ...notificationToMap,
+                                duration: durationInMs,
+                                content: newContent,
+                                created: Date.now(),
+                            };
+                        }
+                        return notificationToMap;
+                    });
+                });
+            },
+        };
+    }, []);
+    (0, react_1.useImperativeHandle)(notificationCenter, () => {
+        return {
+            addNotification,
+        };
+    }, [addNotification]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: notifications.map((n) => {
+            return ((0, jsx_runtime_1.jsx)(Notification_1.Notification, { created: n.created, duration: n.duration, id: n.id, onRemove: onRemove, children: n.content }, n.id));
+        }) }));
+};
+exports.NotificationCenter = NotificationCenter;

remotion/node_modules/@remotion/studio/dist/components/Notifications/ServerDisconnected.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ServerDisconnected: React.FC;

remotion/node_modules/@remotion/studio/dist/components/Notifications/ServerDisconnected.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServerDisconnected = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_id_1 = require("../../helpers/client-id");
+const container = {
+    position: 'fixed',
+    justifyContent: 'flex-end',
+    alignItems: 'flex-start',
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    flexDirection: 'column',
+    padding: 30,
+    pointerEvents: 'none',
+    backgroundColor: 'transparent',
+    fontFamily: 'SF Pro, Arial, Helvetica, sans-serif',
+};
+const message = {
+    backgroundColor: '#e74c3c',
+    color: 'white',
+    paddingLeft: 20,
+    paddingRight: 20,
+    paddingTop: 12,
+    paddingBottom: 12,
+    borderRadius: 4,
+    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.4)',
+    lineHeight: 1.5,
+};
+const inlineCode = {
+    fontSize: 16,
+    fontFamily: 'monospace',
+};
+let pageIsGoingToReload = false;
+window.addEventListener('beforeunload', () => {
+    pageIsGoingToReload = true;
+});
+const ServerDisconnected = () => {
+    const { previewServerState: ctx } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const fav = document.getElementById('__remotion_favicon');
+    if (ctx.type !== 'disconnected') {
+        fav.setAttribute('href', '/favicon.ico');
+        return null;
+    }
+    if (pageIsGoingToReload) {
+        return null;
+    }
+    const base64Favicon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAARiSURBVHgB7d1NThRBFAfw/2tGgru5gXMD8QZ4AmVjAi6kN0TiAm8gnkBcGARNumcx4E48Ae0JaE9gewLHlQSZelaNgyHGL/RVd1X3+y10RQL58+rVx1QBKKWUUkoppZRSSimllFJKKVUjQs32stEiJcktZiwxzKL9Fvqzb6S0/44JVBKbtwa9aj29U6JjagtkJzsYzBEyBi9d5utsQIULCcxvelgo03R5jBarJZCXw/17E+bt82r4Hy4gtuEQekUbK8h7IHvDV5vMZht+VAlRfmYw3EhXKrSA10Ce2X7RIzpGDVzlgM1wPb2bI2JeA9nN99/b/waoV+XCmTAex1g13gLZyUZrdjjJ0CAbTB5bMN4C2ctHxwxaRABiCsZLIG6KmxC/R2BiCCaBBwn4NgJk10B2GOWj3Wz/IQLlpUL28oOjyy4AG1AZppuhVYt4hWRZ1o8gDGc6rL4YHjxCQMQDOcNCEI38bxnmLTc9d30PARAPZAITZP/4A1ctx3bjcw0NEw8koeQ64tRnu25qeggTb+q2/BmRcyv9K7yw3MTOsmiFuLMOtICblJzS5+Mm+opoIBOgFYHMuL5yVHcoooFQuwJxag9FNJCIG/rv1BqKaCDfzshbqbZQxAJxK3SJI9qATUPJstdef0axQGJbof+jwRc6eQ2PxAIx4DZXx3duSrybv3oCTyR7yACdYR762sIXDKQbFfId4ZGPJi8YCA3QLf05YvF+IhYIEV1Dx9hNu8XdbLQFQV6OcDuFaFNyKiwWiJ19DNBN/VN8XoMQrRABDFqCEJ32CiBisT08rRAZAwjRQAKjgcgQO+rVQARMb3gJ0UAkML+DEA1EwAQkdkNMcnOx1Zcxf8V9ol7y88GSm4tdDKRy1xsgSIes/0BM4ndN5HZ7OzZkMePperqSQ5jkkFWhO6r76WrYJ4b2N+YTumF60QeeSG6/d2DI4rHvW1eCPaT9Q9YZw/sVOMlZVoUWM8zpg/Su97dVJGdZFVrKhbFR05MdYoFcwWmF1rF9kbG8UeP7KaI3qBp628QTHrueUccwdZHw/ZDWNHY7tU1u1B2GIxqIYSO2Dd0Ud79wnq/eaOpBgR4EMVDW/oijINu87d7U6hYaJBrInA0k0iu4bvVtZ1KrBRrm4Vr06GNkF3cO7RCVhvK4pmiFOISkjOStk1lVrBQIiPh5SAyN3fWKWeMuEBjxCmEkh3bVvokAzd5idL2iQqDEA1nASXmK+XFIfeTCo5gFAudllvo8G20TUeNVElMQ58QrxLHD1jbB3GumSnhsz7qHE9BhTEGc87aOm16KJHi7rfqj8yfI53E1j/l9eK8L651stJUQeXx/iuzU1QztZLGIsRp+xvtOh3Qo3/qCedumEC6qZetpJztwz7O6UAa4FNsP7ELTfXbWbskUdjgq9M9VCJoFcwvTlfyPDd9t3XNJjA+2IZcGpmxi+7tpjW3OupurJziZhtKWPzWhlFJKKaWUUkoppZRSSiml/uwrgZ/Bfwo/wccAAAAASUVORK5CYII=';
+    fav.setAttribute('href', base64Favicon);
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset", children: (0, jsx_runtime_1.jsxs)("div", { style: message, children: ["The studio server has disconnected. ", (0, jsx_runtime_1.jsx)("br", {}), window.remotion_studioServerCommand ? ((0, jsx_runtime_1.jsxs)("span", { children: ["Run", ' ', (0, jsx_runtime_1.jsx)("code", { style: inlineCode, children: window.remotion_studioServerCommand }), ' ', "to run it again."] })) : ((0, jsx_runtime_1.jsx)("span", { children: "Fast refresh will not work." }))] }) }));
+};
+exports.ServerDisconnected = ServerDisconnected;