@optifye/dashboard-core 6.6.8 → 6.6.9

package/dist/index.d.mts

@@ -5959,6 +5959,8 @@ interface CroppedVideoPlayerProps extends VideoPlayerProps {
     crop?: CropConfig | null;
     /** Whether to show debug info */
     debug?: boolean;
+    /** Optional click handler for the video container */
+    onClick?: () => void;
 }
 /**
  * Video player with canvas-based cropping capability

package/dist/index.d.ts

@@ -5959,6 +5959,8 @@ interface CroppedVideoPlayerProps extends VideoPlayerProps {
     crop?: CropConfig | null;
     /** Whether to show debug info */
     debug?: boolean;
+    /** Optional click handler for the video container */
+    onClick?: () => void;
 }
 /**
  * Video player with canvas-based cropping capability

package/dist/index.js

@@ -4053,7 +4053,7 @@ var S3ClipsSupabaseService = class {
         description: this.getDescriptionFromClipType(clip.clip_type_name),
         type: clip.clip_type_name,
         originalUri: `clips:${clip.clip_id}`,
-        cycle_time_seconds: clip.metadata?.request?.metadata?.cycle_time ? clip.metadata.request.metadata.cycle_time / 20 : void 0,
+        cycle_time_seconds: clip.metadata?.request?.metadata?.cycle_time ? clip.metadata.request.metadata.cycle_time / (clip.metadata?.playlist?.fps || 20) : void 0,
         creation_timestamp: clip.created_at,
         percentile: clip.cycle_time_percentile || clip.idle_time_percentile
       }));
@@ -27633,6 +27633,7 @@ VideoPlayer.displayName = "VideoPlayer";
 var CroppedVideoPlayer = React21.forwardRef(({
   crop,
   debug = false,
+  onClick,
   ...videoProps
 }, ref) => {
   const videoContainerRef = React21.useRef(null);
@@ -27650,7 +27651,9 @@ var CroppedVideoPlayer = React21.forwardRef(({
     }
   }, []);
   React21.useImperativeHandle(ref, () => ({
-    player: hiddenVideoRef.current?.player || null,
+    get player() {
+      return hiddenVideoRef.current?.player || null;
+    },
     play: () => hiddenVideoRef.current?.play() || void 0,
     pause: () => hiddenVideoRef.current?.pause(),
     currentTime: (time2) => {
@@ -27667,7 +27670,9 @@ var CroppedVideoPlayer = React21.forwardRef(({
       hiddenVideoRef.current?.dispose();
       stopCanvasRendering();
     },
-    isReady: hiddenVideoRef.current?.isReady || false
+    get isReady() {
+      return hiddenVideoRef.current?.isReady || false;
+    }
   }), [stopCanvasRendering]);
   const calculateCanvasDimensions = React21.useCallback(() => {
     if (!crop || !videoContainerRef.current) return;
@@ -27795,7 +27800,8 @@ var CroppedVideoPlayer = React21.forwardRef(({
     "div",
     {
       ref: videoContainerRef,
-      className: `relative w-full h-full flex items-center justify-center bg-black ${videoProps.className || ""}`,
+      className: `relative w-full h-full flex items-center justify-center bg-black ${onClick ? "cursor-pointer" : ""} ${videoProps.className || ""}`,
+      onClick,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
           VideoPlayer,
@@ -27824,9 +27830,7 @@ var CroppedVideoPlayer = React21.forwardRef(({
             style: {
               display: isVideoReady ? "block" : "none",
               width: `${canvasDimensions.width}px`,
-              height: `${canvasDimensions.height}px`,
-              pointerEvents: "none"
-              // Allow clicks to pass through to controls
+              height: `${canvasDimensions.height}px`
             }
           }
         ),
@@ -28559,7 +28563,6 @@ var FileManagerFilters = ({
             hour12: false,
             hour: "2-digit",
             minute: "2-digit",
-            second: "2-digit",
             timeZone: timezone
             // Use database timezone for display
           });
@@ -30101,6 +30104,7 @@ var BottlenecksContent = ({
               src: currentVideo.src,
               className: "w-full h-full",
               crop: workspaceCrop?.crop || null,
+              onClick: togglePlayback,
               autoplay: true,
               playsInline: true,
               loop: false,
@@ -30125,13 +30129,6 @@ var BottlenecksContent = ({
           ),
           (isTransitioning || isVideoBuffering && isInitialLoading) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
           !isTransitioning && isVideoBuffering && !isInitialLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "absolute inset-0 z-10 cursor-pointer",
-              onClick: togglePlayback
-            }
-          ),
           error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/80 text-white p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center max-w-md", children: [
             /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-16 h-16 mx-auto mb-4 text-red-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 16.5c-.77.833.192 2.5 1.732 2.5z" }) }),
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-2", children: "Video Stream Error" }),
@@ -30177,7 +30174,10 @@ var BottlenecksContent = ({
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
-                onClick: togglePlayback,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  togglePlayback();
+                },
                 className: "p-1.5 hover:bg-white/20 rounded-full focus:outline-none focus:ring-2 focus:ring-white/50",
                 "aria-label": isPlaying ? "Pause" : "Play",
                 children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 00-1 1v2a1 1 0 102 0V9a1 1 0 00-1-1zm5 0a1 1 0 00-1 1v2a1 1 0 102 0V9a1 1 0 00-1-1z", clipRule: "evenodd" }) }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8.118l-.001 3.764a1 1 0 001.555.832l3.196-1.882a1 1 0 000-1.664l-3.196-1.882z", clipRule: "evenodd" }) })

package/dist/index.mjs

@@ -4023,7 +4023,7 @@ var S3ClipsSupabaseService = class {
         description: this.getDescriptionFromClipType(clip.clip_type_name),
         type: clip.clip_type_name,
         originalUri: `clips:${clip.clip_id}`,
-        cycle_time_seconds: clip.metadata?.request?.metadata?.cycle_time ? clip.metadata.request.metadata.cycle_time / 20 : void 0,
+        cycle_time_seconds: clip.metadata?.request?.metadata?.cycle_time ? clip.metadata.request.metadata.cycle_time / (clip.metadata?.playlist?.fps || 20) : void 0,
         creation_timestamp: clip.created_at,
         percentile: clip.cycle_time_percentile || clip.idle_time_percentile
       }));
@@ -27603,6 +27603,7 @@ VideoPlayer.displayName = "VideoPlayer";
 var CroppedVideoPlayer = forwardRef(({
   crop,
   debug = false,
+  onClick,
   ...videoProps
 }, ref) => {
   const videoContainerRef = useRef(null);
@@ -27620,7 +27621,9 @@ var CroppedVideoPlayer = forwardRef(({
     }
   }, []);
   useImperativeHandle(ref, () => ({
-    player: hiddenVideoRef.current?.player || null,
+    get player() {
+      return hiddenVideoRef.current?.player || null;
+    },
     play: () => hiddenVideoRef.current?.play() || void 0,
     pause: () => hiddenVideoRef.current?.pause(),
     currentTime: (time2) => {
@@ -27637,7 +27640,9 @@ var CroppedVideoPlayer = forwardRef(({
       hiddenVideoRef.current?.dispose();
       stopCanvasRendering();
     },
-    isReady: hiddenVideoRef.current?.isReady || false
+    get isReady() {
+      return hiddenVideoRef.current?.isReady || false;
+    }
   }), [stopCanvasRendering]);
   const calculateCanvasDimensions = useCallback(() => {
     if (!crop || !videoContainerRef.current) return;
@@ -27765,7 +27770,8 @@ var CroppedVideoPlayer = forwardRef(({
     "div",
     {
       ref: videoContainerRef,
-      className: `relative w-full h-full flex items-center justify-center bg-black ${videoProps.className || ""}`,
+      className: `relative w-full h-full flex items-center justify-center bg-black ${onClick ? "cursor-pointer" : ""} ${videoProps.className || ""}`,
+      onClick,
       children: [
         /* @__PURE__ */ jsx("div", { className: "hidden", children: /* @__PURE__ */ jsx(
           VideoPlayer,
@@ -27794,9 +27800,7 @@ var CroppedVideoPlayer = forwardRef(({
             style: {
               display: isVideoReady ? "block" : "none",
               width: `${canvasDimensions.width}px`,
-              height: `${canvasDimensions.height}px`,
-              pointerEvents: "none"
-              // Allow clicks to pass through to controls
+              height: `${canvasDimensions.height}px`
             }
           }
         ),
@@ -28529,7 +28533,6 @@ var FileManagerFilters = ({
             hour12: false,
             hour: "2-digit",
             minute: "2-digit",
-            second: "2-digit",
             timeZone: timezone
             // Use database timezone for display
           });
@@ -30071,6 +30074,7 @@ var BottlenecksContent = ({
               src: currentVideo.src,
               className: "w-full h-full",
               crop: workspaceCrop?.crop || null,
+              onClick: togglePlayback,
               autoplay: true,
               playsInline: true,
               loop: false,
@@ -30095,13 +30099,6 @@ var BottlenecksContent = ({
           ),
           (isTransitioning || isVideoBuffering && isInitialLoading) && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
           !isTransitioning && isVideoBuffering && !isInitialLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "absolute inset-0 z-10 cursor-pointer",
-              onClick: togglePlayback
-            }
-          ),
           error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/80 text-white p-4", children: /* @__PURE__ */ jsxs("div", { className: "text-center max-w-md", children: [
             /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 mx-auto mb-4 text-red-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 16.5c-.77.833.192 2.5 1.732 2.5z" }) }),
             /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Video Stream Error" }),
@@ -30147,7 +30144,10 @@ var BottlenecksContent = ({
             /* @__PURE__ */ jsx(
               "button",
               {
-                onClick: togglePlayback,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  togglePlayback();
+                },
                 className: "p-1.5 hover:bg-white/20 rounded-full focus:outline-none focus:ring-2 focus:ring-white/50",
                 "aria-label": isPlaying ? "Pause" : "Play",
                 children: isPlaying ? /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 00-1 1v2a1 1 0 102 0V9a1 1 0 00-1-1zm5 0a1 1 0 00-1 1v2a1 1 0 102 0V9a1 1 0 00-1-1z", clipRule: "evenodd" }) }) : /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8.118l-.001 3.764a1 1 0 001.555.832l3.196-1.882a1 1 0 000-1.664l-3.196-1.882z", clipRule: "evenodd" }) })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optifye/dashboard-core",
-  "version": "6.6.8",
+  "version": "6.6.9",
   "description": "Reusable UI & logic for Optifye dashboard",
   "main": "dist/index.js",
   "module": "dist/index.mjs",