@remotion/studio 4.0.455 → 4.0.456

package/dist/components/CompSelectorRef.js

@@ -4,14 +4,16 @@ exports.CompSelectorRef = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
+const folders_1 = require("../state/folders");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const CompSelectorRef = ({ children }) => {
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const [foldersExpanded, setFoldersExpanded] = (0, react_1.useState)((0, persist_open_folders_1.loadExpandedFolders)('compositions'));
+    const { compositionFoldersExpanded, setCompositionFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
-        setFoldersExpanded((p) => {
+        setCompositionFoldersExpanded((p) => {
             var _a;
             const key = (0, persist_open_folders_1.openFolderKey)({ folderName, parentName });
             const prev = (_a = p[key]) !== null && _a !== void 0 ? _a : false;
@@ -22,7 +24,7 @@ const CompSelectorRef = ({ children }) => {
             (0, persist_open_folders_1.persistExpandedFolders)('compositions', foldersExpandedState);
             return foldersExpandedState;
         });
-    }, []);
+    }, [setCompositionFoldersExpanded]);
     (0, react_1.useImperativeHandle)(remotion_1.Internals.compositionSelectorRef, () => {
         return {
             expandComposition: (compName) => {
@@ -34,25 +36,13 @@ const CompSelectorRef = ({ children }) => {
                 if (folderName === null) {
                     return;
                 }
-                setFoldersExpanded((previousState) => {
+                setCompositionFoldersExpanded((previousState) => {
+                    const keysToExpand = (0, create_folder_tree_1.getKeysToExpand)(folderName, parentFolderName);
                     const foldersExpandedState = {
                         ...previousState,
                     };
-                    const currentFolder = folderName;
-                    const currentParentName = parentFolderName;
-                    const key = (0, persist_open_folders_1.openFolderKey)({
-                        folderName: currentFolder,
-                        parentName: currentParentName,
-                    });
-                    const splitted = key.split('/');
-                    for (let i = 0; i < splitted.length - 1; i++) {
-                        const allExceptLast = i === 0
-                            ? (0, persist_open_folders_1.openFolderKey)({
-                                folderName: splitted.filter((s) => s !== 'no-parent')[0],
-                                parentName: null,
-                            })
-                            : splitted.slice(0, i + 1).join('/');
-                        foldersExpandedState[allExceptLast] = true;
+                    for (const key of keysToExpand) {
+                        foldersExpandedState[key] = true;
                     }
                     (0, persist_open_folders_1.persistExpandedFolders)('compositions', foldersExpandedState);
                     return foldersExpandedState;
@@ -69,14 +59,22 @@ const CompSelectorRef = ({ children }) => {
                 toggleFolder(folderName, parentName);
             },
         };
-    }, [compositions, selectComposition, toggleFolder]);
+    }, [
+        compositions,
+        selectComposition,
+        setCompositionFoldersExpanded,
+        toggleFolder,
+    ]);
     const contextValue = (0, react_1.useMemo)(() => {
         return {
-            foldersExpanded,
-            setFoldersExpanded,
+            foldersExpanded: compositionFoldersExpanded,
+            setFoldersExpanded: (foldersExpanded) => {
+                setCompositionFoldersExpanded(foldersExpanded);
+                (0, persist_open_folders_1.persistExpandedFolders)('compositions', foldersExpanded);
+            },
             toggleFolder,
         };
-    }, [foldersExpanded, setFoldersExpanded, toggleFolder]);
+    }, [compositionFoldersExpanded, setCompositionFoldersExpanded, toggleFolder]);
     return (jsx_runtime_1.jsx(persist_open_folders_1.ExpandedFoldersContext.Provider, { value: contextValue, children: children }));
 };
 exports.CompSelectorRef = CompSelectorRef;

package/dist/components/CompositionSelector.d.ts

@@ -3,5 +3,4 @@ export declare const useCompositionNavigation: () => {
     navigateToNextComposition: () => void;
     navigateToPreviousComposition: () => void;
 };
-export declare const getKeysToExpand: (initialFolderName: string, parentFolderName: string | null, initial?: string[]) => string[];
 export declare const CompositionSelector: React.FC;

package/dist/components/CompositionSelector.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompositionSelector = exports.getKeysToExpand = exports.useCompositionNavigation = void 0;
+exports.CompositionSelector = exports.useCompositionNavigation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -82,18 +82,6 @@ const shortcutLabel = {
     fontSize: 11,
     opacity: 0.6,
 };
-const getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
-    initial.push((0, persist_open_folders_1.openFolderKey)({
-        folderName: initialFolderName,
-        parentName: parentFolderName,
-    }));
-    const { name, parent } = (0, create_folder_tree_1.splitParentIntoNameAndParent)(parentFolderName);
-    if (!name) {
-        return initial;
-    }
-    return (0, exports.getKeysToExpand)(name, parent, initial);
-};
-exports.getKeysToExpand = getKeysToExpand;
 const CompositionSelector = () => {
     const { compositions, canvasContent, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { foldersExpanded } = (0, react_1.useContext)(persist_open_folders_1.ExpandedFoldersContext);

package/dist/components/InitialCompositionLoader.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InitialCompositionLoader = exports.useSelectComposition = exports.useSelectAsset = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const mobile_layout_1 = require("../helpers/mobile-layout");
+const persist_open_folders_1 = require("../helpers/persist-open-folders");
 const url_state_1 = require("../helpers/url-state");
 const folders_1 = require("../state/folders");
 const sidebar_1 = require("../state/sidebar");
-const CompositionSelector_1 = require("./CompositionSelector");
 const ExplorerPanel_1 = require("./ExplorerPanel");
 const load_canvas_content_from_url_1 = require("./load-canvas-content-from-url");
 const use_static_files_1 = require("./use-static-files");
@@ -49,13 +50,14 @@ const useSelectComposition = () => {
         const { folderName, parentFolderName } = c;
         if (folderName !== null) {
             setCompositionFoldersExpanded((ex) => {
-                const keysToExpand = (0, CompositionSelector_1.getKeysToExpand)(folderName, parentFolderName);
+                const keysToExpand = (0, create_folder_tree_1.getKeysToExpand)(folderName, parentFolderName);
                 const newState = {
                     ...ex,
                 };
                 for (const key of keysToExpand) {
                     newState[key] = true;
                 }
+                (0, persist_open_folders_1.persistExpandedFolders)('compositions', newState);
                 return newState;
             });
             if (isMobileLayout) {

package/dist/components/Timeline/TimelineExpandArrowButton.d.ts

@@ -3,5 +3,6 @@ export declare const TimelineExpandArrowButton: React.FC<{
     readonly isExpanded: boolean;
     readonly onClick: () => void;
     readonly label: string;
+    readonly hasExpandableContent: boolean;
 }>;
 export declare const TimelineExpandArrowSpacer: React.FC;

package/dist/components/Timeline/TimelineExpandArrowButton.js

@@ -22,14 +22,15 @@ const arrowButton = {
     lineHeight: 1,
 };
 const svgStyle = { display: 'block' };
-const TimelineExpandArrowButton = ({ isExpanded, onClick, label }) => {
+const TimelineExpandArrowButton = ({ isExpanded, onClick, label, hasExpandableContent }) => {
     const style = (0, react_1.useMemo)(() => {
         return {
             ...arrowButton,
             transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+            opacity: hasExpandableContent ? 1 : 0.2,
         };
-    }, [isExpanded]);
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: onClick, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${label}`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "white" }) }) }));
+    }, [isExpanded, hasExpandableContent]);
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: onClick, disabled: !hasExpandableContent, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${label}`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "white" }) }) }));
 };
 exports.TimelineExpandArrowButton = TimelineExpandArrowButton;
 const TimelineExpandArrowSpacer = () => {

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -113,7 +113,7 @@ const TimelineExpandedSection = ({ sequence, originalLocation, nestedDepth, node
         if (node.kind === 'group') {
             const isExpanded = (_a = expandedTracks[node.id]) !== null && _a !== void 0 ? _a : false;
             return (jsx_runtime_1.jsxs("div", { style: { ...groupRowBase, paddingLeft }, children: [
-                    jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.id), label: `${node.label} section` }), jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label })
+                    jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.id), label: `${node.label} section`, hasExpandableContent: true }), jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label })
                 ] }));
         }
         if (node.field) {

package/dist/components/Timeline/TimelineListItem.js

@@ -167,6 +167,13 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     const outer = (0, react_1.useMemo)(() => {
         return {
             height: (0, timeline_layout_1.getTimelineLayerHeight)(sequence.type) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
+            borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
+        };
+    }, [sequence.type]);
+    const inner = (0, react_1.useMemo)(() => {
+        return {
+            // TODO: Not so small
+            height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO,
             color: 'white',
             fontFamily: 'Arial, Helvetica, sans-serif',
             display: 'flex',
@@ -175,13 +182,12 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
             wordBreak: 'break-all',
             textAlign: 'left',
             paddingLeft: exports.SPACING,
-            borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
         };
-    }, [sequence.type]);
+    }, []);
     const hasExpandableContent = Boolean(sequence.controls) || sequence.effects.length > 0;
-    const trackRow = (jsx_runtime_1.jsxs("div", { style: outer, children: [
-            jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx("div", { style: padder }), sequence.parent && nestedDepth > 0 ? jsx_runtime_1.jsx("div", { style: space }) : null, visualModeActive ? (hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties" })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}))) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
-        ] }));
+    const trackRow = (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsxs("div", { style: inner, children: [
+                jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx("div", { style: padder }), sequence.parent && nestedDepth > 0 ? jsx_runtime_1.jsx("div", { style: space }) : null, visualModeActive ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", hasExpandableContent: hasExpandableContent })) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
+            ] }) }));
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [visualModeEnvEnabled ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: trackRow })) : (trackRow), visualModeActive && isExpanded && hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation, nestedDepth: nestedDepth, nodePath: nodePath })) : null] }));
 };
 exports.TimelineListItem = TimelineListItem;

package/dist/components/Timeline/TimelineStack/index.js

@@ -136,6 +136,8 @@ const TimelineStack = ({ isCompact, sequence, originalLocation }) => {
             textOverflow: 'ellipsis',
             overflow: 'hidden',
             flexShrink: 100000,
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
         };
     }, [opening, stackHovered, stackHoverable]);
     const titleStyle = (0, react_1.useMemo)(() => {

package/dist/error-overlay/remotion-overlay/CopyStackTrace.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 export declare const CopyStackTrace: React.FC<{
-    readonly canHaveKeyboardShortcuts: boolean;
     readonly errorText: string;
 }>;

package/dist/error-overlay/remotion-overlay/CopyStackTrace.js

@@ -4,9 +4,7 @@ exports.CopyStackTrace = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Button_1 = require("../../components/Button");
-const use_keybinding_1 = require("../../helpers/use-keybinding");
-const ShortcutHint_1 = require("./ShortcutHint");
-const CopyStackTrace = ({ canHaveKeyboardShortcuts, errorText }) => {
+const CopyStackTrace = ({ errorText }) => {
     const [copyState, setCopyState] = (0, react_1.useState)('idle');
     const handleCopyToClipboard = (0, react_1.useCallback)(() => {
         navigator.clipboard
@@ -20,22 +18,6 @@ const CopyStackTrace = ({ canHaveKeyboardShortcuts, errorText }) => {
             setTimeout(() => setCopyState('idle'), 2000);
         });
     }, [errorText]);
-    const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
-    (0, react_1.useEffect)(() => {
-        if (!canHaveKeyboardShortcuts) {
-            return;
-        }
-        const { unregister } = registerKeybinding({
-            event: 'keydown',
-            key: 't',
-            callback: handleCopyToClipboard,
-            commandCtrlKey: true,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        return () => unregister();
-    }, [canHaveKeyboardShortcuts, handleCopyToClipboard, registerKeybinding]);
     const label = (0, react_1.useMemo)(() => {
         if (copyState === 'copied') {
             return 'Copied!';
@@ -45,6 +27,6 @@ const CopyStackTrace = ({ canHaveKeyboardShortcuts, errorText }) => {
         }
         return 'Copy Stacktrace';
     }, [copyState]);
-    return (jsx_runtime_1.jsxs(Button_1.Button, { onClick: handleCopyToClipboard, children: [label, ' ', copyState === 'idle' && canHaveKeyboardShortcuts ? (jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { cmdOrCtrl: true, keyToPress: "t" })) : null] }));
+    return jsx_runtime_1.jsx(Button_1.Button, { onClick: handleCopyToClipboard, children: label });
 };
 exports.CopyStackTrace = CopyStackTrace;

package/dist/error-overlay/remotion-overlay/ErrorDisplay.js

@@ -64,7 +64,7 @@ const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButto
                     jsx_runtime_1.jsx(HelpLink_1.HelpLink, { link: helpLink, canHaveKeyboardShortcuts: keyboardShortcuts }), jsx_runtime_1.jsx("div", { style: spacer })
                 ] })) : null, display.stackFrames.length > 0 && window.remotion_editorName ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(OpenInEditor_1.OpenInEditor, { canHaveKeyboardShortcuts: keyboardShortcuts, stack: display.stackFrames[0] }), jsx_runtime_1.jsx("div", { style: spacer })
-                ] })) : null, jsx_runtime_1.jsx(CopyStackTrace_1.CopyStackTrace, { canHaveKeyboardShortcuts: keyboardShortcuts, errorText: errorTextForCopy }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(SearchGitHubIssues_1.SearchGithubIssues, { canHaveKeyboardShortcuts: keyboardShortcuts, message: display.error.message }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(AskOnDiscord_1.AskOnDiscord, { canHaveKeyboardShortcuts: keyboardShortcuts }), onRetry ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                ] })) : null, jsx_runtime_1.jsx(CopyStackTrace_1.CopyStackTrace, { errorText: errorTextForCopy }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(SearchGitHubIssues_1.SearchGithubIssues, { canHaveKeyboardShortcuts: keyboardShortcuts, message: display.error.message }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(AskOnDiscord_1.AskOnDiscord, { canHaveKeyboardShortcuts: keyboardShortcuts }), onRetry ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(Retry_1.RetryButton, { onClick: onRetry, label: calculateMetadata ? 'Retry calculateMetadata()' : 'Retry' })
                 ] })) : null, calculateMetadata ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5 }), jsx_runtime_1.jsx(CalculateMetadataErrorExplainer_1.CalculateMetadataErrorExplainer, {})

package/dist/error-overlay/remotion-overlay/StackFrame.js

@@ -4,6 +4,7 @@ exports.StackElement = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Button_1 = require("../../components/Button");
+const open_in_editor_1 = require("../../helpers/open-in-editor");
 const carets_1 = require("./carets");
 const CodeFrame_1 = require("./CodeFrame");
 const format_location_1 = require("./format-location");
@@ -40,13 +41,33 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName }) => {
             !((_b = s.originalFileName) === null || _b === void 0 ? void 0 : _b.startsWith('webpack/'))) ||
             isFirst;
     });
+    const [locationHovered, setLocationHovered] = (0, react_1.useState)(false);
+    const canOpenFileLocation = Boolean(window.remotion_editorName && s.originalFileName);
+    const onOpenFileLocation = (0, react_1.useCallback)(() => {
+        if (!canOpenFileLocation) {
+            return;
+        }
+        (0, open_in_editor_1.openInEditor)(s).catch((err) => {
+            // eslint-disable-next-line no-console
+            console.log('Could not open in editor', err);
+        });
+    }, [canOpenFileLocation, s]);
     const toggleCodeFrame = (0, react_1.useCallback)(() => {
         setShowCodeFrame((f) => !f);
     }, []);
     return (jsx_runtime_1.jsxs("div", { className: "css-reset", children: [
             jsx_runtime_1.jsxs("div", { style: header, children: [
                     jsx_runtime_1.jsxs("div", { style: left, children: [
-                            jsx_runtime_1.jsx("div", { style: fnName, children: (_a = s.originalFunctionName) !== null && _a !== void 0 ? _a : defaultFunctionName }), s.originalFileName ? (jsx_runtime_1.jsxs("div", { style: location, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : null] }), s.originalScriptCode && s.originalScriptCode.length > 0 ? (jsx_runtime_1.jsx(Button_1.Button, { onClick: toggleCodeFrame, children: showCodeFrame ? jsx_runtime_1.jsx(carets_1.CaretDown, { invert: false }) : jsx_runtime_1.jsx(carets_1.CaretRight, {}) })) : null] }), jsx_runtime_1.jsx("div", { children: s.originalScriptCode &&
+                            jsx_runtime_1.jsx("div", { style: fnName, children: (_a = s.originalFunctionName) !== null && _a !== void 0 ? _a : defaultFunctionName }), s.originalFileName ? (jsx_runtime_1.jsx("div", { style: location, children: canOpenFileLocation ? (jsx_runtime_1.jsxs("span", { onClick: onOpenFileLocation, onPointerEnter: () => {
+                                        setLocationHovered(true);
+                                    }, onPointerLeave: () => {
+                                        setLocationHovered(false);
+                                    }, style: {
+                                        ...location,
+                                        cursor: 'pointer',
+                                        textDecoration: locationHovered ? 'underline' : 'none',
+                                        textUnderlineOffset: locationHovered ? 4 : undefined,
+                                    }, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) })) : null] }), s.originalScriptCode && s.originalScriptCode.length > 0 ? (jsx_runtime_1.jsx(Button_1.Button, { onClick: toggleCodeFrame, children: showCodeFrame ? jsx_runtime_1.jsx(carets_1.CaretDown, { invert: false }) : jsx_runtime_1.jsx(carets_1.CaretRight, {}) })) : null] }), jsx_runtime_1.jsx("div", { children: s.originalScriptCode &&
                     s.originalScriptCode.length > 0 &&
                     showCodeFrame ? (jsx_runtime_1.jsx(CodeFrame_1.CodeFrame, { lineNumberWidth: lineNumberWidth, source: s.originalScriptCode })) : null })
         ] }));