@twick/video-editor 0.14.5 → 0.14.6

package/dist/index.js

@@ -17520,67 +17520,67 @@ This message will only show in development mode. It won't appear in production.
         setZoomLevel(zoomLevel - ZOOM_STEP);
       }
     }, [zoomLevel, setZoomLevel]);
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-16 bg-gray-800 border-t border-gray-700 p-4 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: handleDelete,
-              disabled: !selectedItem,
-              title: "Delete",
-              className: `btn btn-ghost ${!!selectedItem ? "text-red-400 hover:text-red-300" : "text-gray-500 cursor-not-allowed"}`,
-              children: /* @__PURE__ */ jsxRuntime.jsx(Trash2, { className: "w-5 h-5" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: handleSplit,
-              disabled: !(selectedItem instanceof timeline.TrackElement),
-              title: "Split",
-              className: `btn btn-ghost ${selectedItem instanceof timeline.TrackElement ? "text-purple-400 hover:text-purple-300" : "text-gray-500 cursor-not-allowed"}`,
-              children: /* @__PURE__ */ jsxRuntime.jsx(Scissors, { className: "w-5 h-5" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            UndoRedoControls,
-            {
-              canUndo,
-              canRedo,
-              onUndo,
-              onRedo
-            }
-          )
-        ] }),
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `player-controls ${className}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "edit-controls", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleDelete,
+            disabled: !selectedItem,
+            title: "Delete",
+            className: `control-btn delete-btn ${!selectedItem ? "btn-disabled" : ""}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Trash2, { className: "icon-md" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleSplit,
+            disabled: !(selectedItem instanceof timeline.TrackElement),
+            title: "Split",
+            className: `control-btn split-btn ${!(selectedItem instanceof timeline.TrackElement) ? "btn-disabled" : ""}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Scissors, { className: "icon-md" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          UndoRedoControls,
+          {
+            canUndo,
+            canRedo,
+            onUndo,
+            onRedo
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "playback-controls", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: togglePlayback,
             disabled: playerState === livePlayer.PLAYER_STATE.REFRESH,
             title: playerState === livePlayer.PLAYER_STATE.PLAYING ? "Pause" : playerState === livePlayer.PLAYER_STATE.REFRESH ? "Refreshing" : "Play",
-            className: "btn btn-ghost text-white",
-            children: playerState === livePlayer.PLAYER_STATE.PLAYING ? /* @__PURE__ */ jsxRuntime.jsx(Pause, { className: "w-6 h-6" }) : playerState === livePlayer.PLAYER_STATE.REFRESH ? /* @__PURE__ */ jsxRuntime.jsx(LoaderCircle, { className: "w-6 h-6 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(Play, { className: "w-6 h-6" })
+            className: "control-btn play-pause-btn",
+            children: playerState === livePlayer.PLAYER_STATE.PLAYING ? /* @__PURE__ */ jsxRuntime.jsx(Pause, { className: "icon-lg" }) : playerState === livePlayer.PLAYER_STATE.REFRESH ? /* @__PURE__ */ jsxRuntime.jsx(LoaderCircle, { className: "icon-lg animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(Play, { className: "icon-lg" })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-gray-300", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: formatTime(currentTime) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "/" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: formatTime(duration) })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "time-display", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "current-time", children: formatTime(currentTime) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "time-separator", children: "/" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "total-time", children: formatTime(duration) })
         ] })
       ] }),
-      setZoomLevel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      setZoomLevel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twick-track-zoom-container", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: handleZoomOut,
             disabled: zoomLevel <= MIN_ZOOM,
             title: "Zoom Out",
-            className: `btn btn-ghost ${zoomLevel > MIN_ZOOM ? "text-gray-300 hover:text-white" : "text-gray-500 cursor-not-allowed"}`,
-            children: /* @__PURE__ */ jsxRuntime.jsx(ZoomOut, { className: "w-5 h-5" })
+            className: `control-btn ${zoomLevel <= MIN_ZOOM ? "btn-disabled" : ""}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ZoomOut, { className: "icon-md" })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-300 font-medium min-w-[3rem] text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zoom-level", children: [
           Math.round(zoomLevel * 100),
           "%"
         ] }),
@@ -17590,12 +17590,12 @@ This message will only show in development mode. It won't appear in production.
             onClick: handleZoomIn,
             disabled: zoomLevel >= MAX_ZOOM,
             title: "Zoom In",
-            className: `btn btn-ghost ${zoomLevel < MAX_ZOOM ? "text-gray-300 hover:text-white" : "text-gray-500 cursor-not-allowed"}`,
-            children: /* @__PURE__ */ jsxRuntime.jsx(ZoomIn, { className: "w-5 h-5" })
+            className: `control-btn ${zoomLevel >= MAX_ZOOM ? "btn-disabled" : ""}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ZoomIn, { className: "icon-md" })
           }
         )
       ] })
-    ] }) });
+    ] });
   };
   const usePlayerControl = () => {
     const { playerState, setPlayerState } = livePlayer.useLivePlayerContext();