@twick/studio 0.15.13 → 0.15.14

package/dist/index.mjs

@@ -1527,6 +1527,9 @@ function TextPanel({
   applyShadow,
   shadowColor,
   strokeWidth,
+  applyBackground,
+  backgroundColor,
+  backgroundOpacity,
   fonts,
   operation,
   setTextContent,
@@ -1539,6 +1542,9 @@ function TextPanel({
   setApplyShadow,
   setShadowColor,
   setStrokeWidth,
+  setApplyBackground,
+  setBackgroundColor,
+  setBackgroundOpacity,
   handleApplyChanges
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
@@ -1707,6 +1713,69 @@ function TextPanel({
         /* @__PURE__ */ jsx("span", { className: "slider-value", children: strokeWidth })
       ] })
     ] }),
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Background" }),
+      /* @__PURE__ */ jsxs("div", { className: "color-section", children: [
+        /* @__PURE__ */ jsx("div", { className: "checkbox-control", children: /* @__PURE__ */ jsxs("label", { className: "checkbox-label", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: applyBackground,
+              onChange: (e) => setApplyBackground(e.target.checked),
+              className: "checkbox-purple"
+            }
+          ),
+          "Apply Background"
+        ] }) }),
+        applyBackground && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "color-control", children: [
+            /* @__PURE__ */ jsx("label", { className: "label-small", children: "Background Color" }),
+            /* @__PURE__ */ jsxs("div", { className: "color-inputs", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "color",
+                  value: backgroundColor,
+                  onChange: (e) => setBackgroundColor(e.target.value),
+                  className: "color-picker"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  value: backgroundColor,
+                  onChange: (e) => setBackgroundColor(e.target.value),
+                  className: "color-text"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+            /* @__PURE__ */ jsx("label", { className: "label-small", children: "Background Opacity" }),
+            /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: "0",
+                  max: "1",
+                  step: 0.1,
+                  value: backgroundOpacity,
+                  onChange: (e) => setBackgroundOpacity(Number(e.target.value)),
+                  className: "slider-purple"
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "slider-value", children: [
+                Math.round(backgroundOpacity * 100),
+                "%"
+              ] })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] }),
     /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx("button", { onClick: handleApplyChanges, className: "btn-primary w-full", children: operation }) })
   ] });
 }
@@ -1741,6 +1810,9 @@ const useTextPanel = ({
   const [applyShadow, setApplyShadow] = useState(DEFAULT_TEXT_PROPS.applyShadow);
   const [shadowColor, setShadowColor] = useState(DEFAULT_TEXT_PROPS.shadowColor);
   const [strokeWidth, setStrokeWidth] = useState(DEFAULT_TEXT_PROPS.strokeWidth);
+  const [applyBackground, setApplyBackground] = useState(false);
+  const [backgroundColor, setBackgroundColor] = useState("#FACC15");
+  const [backgroundOpacity, setBackgroundOpacity] = useState(1);
   const fonts = Object.values(AVAILABLE_TEXT_FONTS);
   const handleApplyChanges = async () => {
     let textElement;
@@ -1755,35 +1827,41 @@ const useTextPanel = ({
       textElement.setStrokeColor(strokeColor);
       textElement.setLineWidth(strokeWidth);
       textElement.setTextAlign(DEFAULT_TEXT_PROPS.textAlign);
+      const nextProps = { ...textElement.getProps() };
       if (applyShadow) {
-        textElement.setProps({
-          ...textElement.getProps(),
-          shadowColor,
-          shadowOffset: DEFAULT_TEXT_PROPS.shadowOffset,
-          shadowBlur: DEFAULT_TEXT_PROPS.shadowBlur,
-          shadowOpacity: DEFAULT_TEXT_PROPS.shadowOpacity
-        });
+        nextProps.shadowColor = shadowColor;
+        nextProps.shadowOffset = DEFAULT_TEXT_PROPS.shadowOffset;
+        nextProps.shadowBlur = DEFAULT_TEXT_PROPS.shadowBlur;
+        nextProps.shadowOpacity = DEFAULT_TEXT_PROPS.shadowOpacity;
       } else {
-        textElement.setProps({
-          ...textElement.getProps(),
-          shadowColor: void 0,
-          shadowOffset: void 0,
-          shadowBlur: void 0,
-          shadowOpacity: void 0
-        });
+        nextProps.shadowColor = void 0;
+        nextProps.shadowOffset = void 0;
+        nextProps.shadowBlur = void 0;
+        nextProps.shadowOpacity = void 0;
       }
+      if (applyBackground) {
+        nextProps.backgroundColor = backgroundColor;
+        nextProps.backgroundOpacity = backgroundOpacity;
+      } else {
+        nextProps.backgroundColor = void 0;
+        nextProps.backgroundOpacity = void 0;
+      }
+      textElement.setProps(nextProps);
       updateElement(textElement);
     } else {
       textElement = new TextElement(textContent).setFontSize(fontSize).setFontFamily(selectedFont).setFontWeight(isBold ? 700 : 400).setFontStyle(isItalic ? "italic" : "normal").setFill(textColor).setStrokeColor(strokeColor).setLineWidth(strokeWidth).setTextAlign("center");
+      const nextProps = { ...textElement.getProps() };
       if (applyShadow) {
-        textElement.setProps({
-          ...textElement.getProps(),
-          shadowColor,
-          shadowOffset: DEFAULT_TEXT_PROPS.shadowOffset,
-          shadowBlur: DEFAULT_TEXT_PROPS.shadowBlur,
-          shadowOpacity: DEFAULT_TEXT_PROPS.shadowOpacity
-        });
+        nextProps.shadowColor = shadowColor;
+        nextProps.shadowOffset = DEFAULT_TEXT_PROPS.shadowOffset;
+        nextProps.shadowBlur = DEFAULT_TEXT_PROPS.shadowBlur;
+        nextProps.shadowOpacity = DEFAULT_TEXT_PROPS.shadowOpacity;
       }
+      if (applyBackground) {
+        nextProps.backgroundColor = backgroundColor;
+        nextProps.backgroundOpacity = backgroundOpacity;
+      }
+      textElement.setProps(nextProps);
       await addElement(textElement);
     }
   };
@@ -1803,6 +1881,12 @@ const useTextPanel = ({
       if (hasShadow) {
         setShadowColor(textProps.shadowColor ?? DEFAULT_TEXT_PROPS.shadowColor);
       }
+      const hasBackground = textProps.backgroundColor != null && textProps.backgroundColor !== "";
+      setApplyBackground(hasBackground);
+      if (hasBackground) {
+        setBackgroundColor(textProps.backgroundColor ?? "#FACC15");
+        setBackgroundOpacity(textProps.backgroundOpacity ?? 1);
+      }
     } else {
       setTextContent(DEFAULT_TEXT_PROPS.text);
       setFontSize(DEFAULT_TEXT_PROPS.fontSize);
@@ -1814,6 +1898,9 @@ const useTextPanel = ({
       setStrokeWidth(DEFAULT_TEXT_PROPS.strokeWidth);
       setApplyShadow(DEFAULT_TEXT_PROPS.applyShadow);
       setShadowColor(DEFAULT_TEXT_PROPS.shadowColor);
+      setApplyBackground(false);
+      setBackgroundColor("#FACC15");
+      setBackgroundOpacity(1);
     }
   }, [selectedElement]);
   return {
@@ -1839,6 +1926,12 @@ const useTextPanel = ({
     setApplyShadow,
     setShadowColor,
     setStrokeWidth,
+    applyBackground,
+    backgroundColor,
+    backgroundOpacity,
+    setApplyBackground,
+    setBackgroundColor,
+    setBackgroundOpacity,
     handleApplyChanges
   };
 };
@@ -2549,7 +2642,7 @@ const useSubtitlesPanel = () => {
   const subtitlesTrack = useRef(null);
   const { editor } = useTimelineContext();
   const fetchSubtitles = async () => {
-    const editorSubtitlesTrack = editor.getSubtiltesTrack();
+    const editorSubtitlesTrack = editor.getSubtitlesTrack();
     if (editorSubtitlesTrack) {
       subtitlesTrack.current = editorSubtitlesTrack;
       setSubtitles(