@twick/studio 0.15.13 → 0.15.14

package/dist/components/panel/text-panel.d.ts

@@ -1,4 +1,4 @@
 import { TextPanelState, TextPanelActions } from '../../hooks/use-text-panel';
 
 export type TextPanelProps = TextPanelState & TextPanelActions;
-export declare function TextPanel({ textContent, fontSize, selectedFont, isBold, isItalic, textColor, strokeColor, applyShadow, shadowColor, strokeWidth, fonts, operation, setTextContent, setFontSize, setSelectedFont, setIsBold, setIsItalic, setTextColor, setStrokeColor, setApplyShadow, setShadowColor, setStrokeWidth, handleApplyChanges, }: TextPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextPanel({ textContent, fontSize, selectedFont, isBold, isItalic, textColor, strokeColor, applyShadow, shadowColor, strokeWidth, applyBackground, backgroundColor, backgroundOpacity, fonts, operation, setTextContent, setFontSize, setSelectedFont, setIsBold, setIsItalic, setTextColor, setStrokeColor, setApplyShadow, setShadowColor, setStrokeWidth, setApplyBackground, setBackgroundColor, setBackgroundOpacity, handleApplyChanges, }: TextPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/use-text-panel.d.ts

@@ -27,6 +27,9 @@ export interface TextPanelState {
     applyShadow: boolean;
     shadowColor: string;
     strokeWidth: number;
+    applyBackground: boolean;
+    backgroundColor: string;
+    backgroundOpacity: number;
     fonts: string[];
     operation: string;
 }
@@ -41,6 +44,9 @@ export interface TextPanelActions {
     setApplyShadow: (shadow: boolean) => void;
     setShadowColor: (color: string) => void;
     setStrokeWidth: (width: number) => void;
+    setApplyBackground: (apply: boolean) => void;
+    setBackgroundColor: (color: string) => void;
+    setBackgroundOpacity: (opacity: number) => void;
     handleApplyChanges: () => void;
 }
 export declare const useTextPanel: ({ selectedElement, addElement, updateElement, }: {

package/dist/index.js

@@ -1526,6 +1526,9 @@ function TextPanel({
   applyShadow,
   shadowColor,
   strokeWidth,
+  applyBackground,
+  backgroundColor,
+  backgroundOpacity,
   fonts,
   operation,
   setTextContent,
@@ -1538,6 +1541,9 @@ function TextPanel({
   setApplyShadow,
   setShadowColor,
   setStrokeWidth,
+  setApplyBackground,
+  setBackgroundColor,
+  setBackgroundOpacity,
   handleApplyChanges
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
@@ -1706,6 +1712,69 @@ function TextPanel({
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "slider-value", children: strokeWidth })
       ] })
     ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Background" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "checkbox-control", children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "checkbox-label", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: applyBackground,
+              onChange: (e) => setApplyBackground(e.target.checked),
+              className: "checkbox-purple"
+            }
+          ),
+          "Apply Background"
+        ] }) }),
+        applyBackground && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-control", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-small", children: "Background Color" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-inputs", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "color",
+                  value: backgroundColor,
+                  onChange: (e) => setBackgroundColor(e.target.value),
+                  className: "color-picker"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "text",
+                  value: backgroundColor,
+                  onChange: (e) => setBackgroundColor(e.target.value),
+                  className: "color-text"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-small", children: "Background Opacity" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "slider-container", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "range",
+                  min: "0",
+                  max: "1",
+                  step: 0.1,
+                  value: backgroundOpacity,
+                  onChange: (e) => setBackgroundOpacity(Number(e.target.value)),
+                  className: "slider-purple"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "slider-value", children: [
+                Math.round(backgroundOpacity * 100),
+                "%"
+              ] })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleApplyChanges, className: "btn-primary w-full", children: operation }) })
   ] });
 }
@@ -1740,6 +1809,9 @@ const useTextPanel = ({
   const [applyShadow, setApplyShadow] = react.useState(DEFAULT_TEXT_PROPS.applyShadow);
   const [shadowColor, setShadowColor] = react.useState(DEFAULT_TEXT_PROPS.shadowColor);
   const [strokeWidth, setStrokeWidth] = react.useState(DEFAULT_TEXT_PROPS.strokeWidth);
+  const [applyBackground, setApplyBackground] = react.useState(false);
+  const [backgroundColor, setBackgroundColor] = react.useState("#FACC15");
+  const [backgroundOpacity, setBackgroundOpacity] = react.useState(1);
   const fonts = Object.values(VideoEditor.AVAILABLE_TEXT_FONTS);
   const handleApplyChanges = async () => {
     let textElement;
@@ -1754,35 +1826,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 timeline.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);
     }
   };
@@ -1802,6 +1880,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);
@@ -1813,6 +1897,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 {
@@ -1838,6 +1925,12 @@ const useTextPanel = ({
     setApplyShadow,
     setShadowColor,
     setStrokeWidth,
+    applyBackground,
+    backgroundColor,
+    backgroundOpacity,
+    setApplyBackground,
+    setBackgroundColor,
+    setBackgroundOpacity,
     handleApplyChanges
   };
 };
@@ -2548,7 +2641,7 @@ const useSubtitlesPanel = () => {
   const subtitlesTrack = react.useRef(null);
   const { editor } = timeline.useTimelineContext();
   const fetchSubtitles = async () => {
-    const editorSubtitlesTrack = editor.getSubtiltesTrack();
+    const editorSubtitlesTrack = editor.getSubtitlesTrack();
     if (editorSubtitlesTrack) {
       subtitlesTrack.current = editorSubtitlesTrack;
       setSubtitles(