@optifye/dashboard-core 6.12.17 → 6.12.19

package/dist/automation.js

@@ -1943,14 +1943,13 @@ var VideoCard = React__default.default.memo(({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `workspace-card relative bg-gray-950 rounded-md overflow-hidden cursor-pointer transform hover:scale-[1.005] active:scale-[0.995] transition-transform duration-200 shadow-sm touch-manipulation ${className}`,
+      className: `workspace-card relative bg-gray-950 rounded-md overflow-hidden cursor-pointer shadow-[0_1px_3px_rgba(15,23,42,0.16),0_0_0_1px_rgba(255,255,255,0.06)] transition-[box-shadow] duration-200 hover:shadow-[0_10px_24px_rgba(15,23,42,0.28),0_0_0_1px_rgba(255,255,255,0.10)] active:shadow-[0_1px_3px_rgba(15,23,42,0.16),0_0_0_1px_rgba(255,255,255,0.06)] touch-manipulation ${className}`,
       style: { width: "100%", height: "100%" },
       onClick: handleClick,
       onMouseEnter,
       onMouseLeave,
       onTouchStart: (e) => e.currentTarget.classList.add("touch-active"),
       onTouchEnd: (e) => e.currentTarget.classList.remove("touch-active"),
-      title: displayName,
       tabIndex: 0,
       "aria-label": `Open workspace ${displayName}`,
       onKeyDown: (e) => {
@@ -1998,7 +1997,7 @@ var VideoCard = React__default.default.memo(({
             "div",
             {
               "data-testid": "video-card-metric-badge",
-              className: `bg-black/70 backdrop-blur-sm rounded ${compact ? "px-1.5 py-1" : "px-2 py-1"} text-white border border-white/10`,
+              className: `bg-black/70 rounded ${compact ? "px-1.5 py-1" : "px-2 py-1"} text-white border border-white/10`,
               title: badgeTitle,
               children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${compact ? "text-[10px]" : "text-xs"} font-semibold`, children: badgeLabel })
             }

package/dist/automation.mjs

@@ -1936,14 +1936,13 @@ var VideoCard = React.memo(({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `workspace-card relative bg-gray-950 rounded-md overflow-hidden cursor-pointer transform hover:scale-[1.005] active:scale-[0.995] transition-transform duration-200 shadow-sm touch-manipulation ${className}`,
+      className: `workspace-card relative bg-gray-950 rounded-md overflow-hidden cursor-pointer shadow-[0_1px_3px_rgba(15,23,42,0.16),0_0_0_1px_rgba(255,255,255,0.06)] transition-[box-shadow] duration-200 hover:shadow-[0_10px_24px_rgba(15,23,42,0.28),0_0_0_1px_rgba(255,255,255,0.10)] active:shadow-[0_1px_3px_rgba(15,23,42,0.16),0_0_0_1px_rgba(255,255,255,0.06)] touch-manipulation ${className}`,
       style: { width: "100%", height: "100%" },
       onClick: handleClick,
       onMouseEnter,
       onMouseLeave,
       onTouchStart: (e) => e.currentTarget.classList.add("touch-active"),
       onTouchEnd: (e) => e.currentTarget.classList.remove("touch-active"),
-      title: displayName,
       tabIndex: 0,
       "aria-label": `Open workspace ${displayName}`,
       onKeyDown: (e) => {
@@ -1991,7 +1990,7 @@ var VideoCard = React.memo(({
             "div",
             {
               "data-testid": "video-card-metric-badge",
-              className: `bg-black/70 backdrop-blur-sm rounded ${compact ? "px-1.5 py-1" : "px-2 py-1"} text-white border border-white/10`,
+              className: `bg-black/70 rounded ${compact ? "px-1.5 py-1" : "px-2 py-1"} text-white border border-white/10`,
               title: badgeTitle,
               children: /* @__PURE__ */ jsx("span", { className: `${compact ? "text-[10px]" : "text-xs"} font-semibold`, children: badgeLabel })
             }

package/dist/index.css

@@ -4918,6 +4918,14 @@ body {
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.shadow-\[0_1px_3px_rgba\(15\,23\,42\,0\.16\)\,0_0_0_1px_rgba\(255\,255\,255\,0\.06\)\] {
+  --tw-shadow: 0 1px 3px rgba(15,23,42,0.16),0 0 0 1px rgba(255,255,255,0.06);
+  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 .shadow-\[0_2px_10px_-3px_rgba\(6\,81\,237\,0\.1\)\] {
   --tw-shadow: 0 2px 10px -3px rgba(6,81,237,0.1);
   --tw-shadow-colored: 0 2px 10px -3px var(--tw-shadow-color);
@@ -5344,6 +5352,11 @@ body {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-\[box-shadow\] {
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-\[width\] {
   transition-property: width;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -5537,11 +5550,6 @@ input[type=range]:active::-moz-range-thumb {
   --tw-scale-y: 1.1;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.hover\:scale-\[1\.005\]:hover {
-  --tw-scale-x: 1.005;
-  --tw-scale-y: 1.005;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
 .hover\:scale-\[1\.01\]:hover {
   --tw-scale-x: 1.01;
   --tw-scale-y: 1.01;
@@ -5951,6 +5959,14 @@ input[type=range]:active::-moz-range-thumb {
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.hover\:shadow-\[0_10px_24px_rgba\(15\,23\,42\,0\.28\)\,0_0_0_1px_rgba\(255\,255\,255\,0\.10\)\]:hover {
+  --tw-shadow: 0 10px 24px rgba(15,23,42,0.28),0 0 0 1px rgba(255,255,255,0.10);
+  --tw-shadow-colored: 0 10px 24px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 .hover\:shadow-lg:hover {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -6172,11 +6188,6 @@ input[type=range]:active::-moz-range-thumb {
   --tw-scale-y: 0.98;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.active\:scale-\[0\.995\]:active {
-  --tw-scale-x: 0.995;
-  --tw-scale-y: 0.995;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
 .active\:scale-\[0\.99\]:active {
   --tw-scale-x: 0.99;
   --tw-scale-y: 0.99;
@@ -6198,6 +6209,14 @@ input[type=range]:active::-moz-range-thumb {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
 }
+.active\:shadow-\[0_1px_3px_rgba\(15\,23\,42\,0\.16\)\,0_0_0_1px_rgba\(255\,255\,255\,0\.06\)\]:active {
+  --tw-shadow: 0 1px 3px rgba(15,23,42,0.16),0 0 0 1px rgba(255,255,255,0.06);
+  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 .disabled\:pointer-events-none:disabled {
   pointer-events: none;
 }

package/dist/index.js

@@ -37651,14 +37651,13 @@ var VideoCard = React144__namespace.default.memo(({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `workspace-card relative bg-gray-950 rounded-md overflow-hidden cursor-pointer transform hover:scale-[1.005] active:scale-[0.995] transition-transform duration-200 shadow-sm touch-manipulation ${className}`,
+      className: `workspace-card relative bg-gray-950 rounded-md overflow-hidden cursor-pointer shadow-[0_1px_3px_rgba(15,23,42,0.16),0_0_0_1px_rgba(255,255,255,0.06)] transition-[box-shadow] duration-200 hover:shadow-[0_10px_24px_rgba(15,23,42,0.28),0_0_0_1px_rgba(255,255,255,0.10)] active:shadow-[0_1px_3px_rgba(15,23,42,0.16),0_0_0_1px_rgba(255,255,255,0.06)] touch-manipulation ${className}`,
       style: { width: "100%", height: "100%" },
       onClick: handleClick,
       onMouseEnter,
       onMouseLeave,
       onTouchStart: (e) => e.currentTarget.classList.add("touch-active"),
       onTouchEnd: (e) => e.currentTarget.classList.remove("touch-active"),
-      title: displayName,
       tabIndex: 0,
       "aria-label": `Open workspace ${displayName}`,
       onKeyDown: (e) => {
@@ -37706,7 +37705,7 @@ var VideoCard = React144__namespace.default.memo(({
             "div",
             {
               "data-testid": "video-card-metric-badge",
-              className: `bg-black/70 backdrop-blur-sm rounded ${compact ? "px-1.5 py-1" : "px-2 py-1"} text-white border border-white/10`,
+              className: `bg-black/70 rounded ${compact ? "px-1.5 py-1" : "px-2 py-1"} text-white border border-white/10`,
               title: badgeTitle,
               children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${compact ? "text-[10px]" : "text-xs"} font-semibold`, children: badgeLabel })
             }
@@ -37822,10 +37821,16 @@ var VideoGridView = React144__namespace.default.memo(({
     const ids = workspaces.map((ws) => ws.workspace_uuid || ws.workspace_name);
     return ids.sort().join(",");
   }, [workspaces]);
+  const [resolvedStreamWorkspaceKey, setResolvedStreamWorkspaceKey] = React144.useState(() => videoStreamsLoading ? null : workspaceIdsKey);
   React144.useEffect(() => {
     setFailedStreams(/* @__PURE__ */ new Set());
     setR2FallbackWorkspaces(/* @__PURE__ */ new Set());
   }, [workspaceIdsKey]);
+  React144.useEffect(() => {
+    if (!videoStreamsLoading) {
+      setResolvedStreamWorkspaceKey(workspaceIdsKey);
+    }
+  }, [videoStreamsLoading, workspaceIdsKey]);
   const videoConfig = useVideoConfig();
   const dashboardConfig = useDashboardConfig();
   const timezone = useAppTimezone();
@@ -37919,7 +37924,7 @@ var VideoGridView = React144__namespace.default.memo(({
       return a.workspace_name.localeCompare(b.workspace_name);
     });
   }, [filteredWorkspaces]);
-  const streamsReady = !videoStreamsLoading;
+  const streamsResolvedForWorkspaceSet = resolvedStreamWorkspaceKey === workspaceIdsKey;
   const resolveWorkspaceDisplayName = React144.useCallback((workspace) => {
     return workspace.displayName || displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || workspace.workspace_name;
   }, [displayNames]);
@@ -38111,7 +38116,7 @@ var VideoGridView = React144__namespace.default.memo(({
       const r2Url = workspaceStream?.hls_url;
       const fallbackUrl = getWorkspaceHlsUrl(workspace.workspace_name, workspace.line_id);
       const hasR2Stream = Boolean(r2Url);
-      const useFallback = r2FallbackWorkspaces.has(workspaceId) || streamsReady && !hasR2Stream;
+      const useFallback = r2FallbackWorkspaces.has(workspaceId) || streamsResolvedForWorkspaceSet && !hasR2Stream;
       const hlsUrl = useFallback ? fallbackUrl : r2Url ?? "";
       const isR2Stream = !useFallback && hasR2Stream;
       const canAttemptR2 = hasR2Stream && !r2FallbackWorkspaces.has(workspaceId);
@@ -38138,7 +38143,7 @@ var VideoGridView = React144__namespace.default.memo(({
     lastSeenByWorkspaceId,
     getWorkspaceHlsUrl,
     r2FallbackWorkspaces,
-    streamsReady,
+    streamsResolvedForWorkspaceSet,
     failedStreams
   ]);
   const croppedActiveCount = React144.useMemo(() => {

package/dist/index.mjs

@@ -37622,14 +37622,13 @@ var VideoCard = React144__default.memo(({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `workspace-card relative bg-gray-950 rounded-md overflow-hidden cursor-pointer transform hover:scale-[1.005] active:scale-[0.995] transition-transform duration-200 shadow-sm touch-manipulation ${className}`,
+      className: `workspace-card relative bg-gray-950 rounded-md overflow-hidden cursor-pointer shadow-[0_1px_3px_rgba(15,23,42,0.16),0_0_0_1px_rgba(255,255,255,0.06)] transition-[box-shadow] duration-200 hover:shadow-[0_10px_24px_rgba(15,23,42,0.28),0_0_0_1px_rgba(255,255,255,0.10)] active:shadow-[0_1px_3px_rgba(15,23,42,0.16),0_0_0_1px_rgba(255,255,255,0.06)] touch-manipulation ${className}`,
       style: { width: "100%", height: "100%" },
       onClick: handleClick,
       onMouseEnter,
       onMouseLeave,
       onTouchStart: (e) => e.currentTarget.classList.add("touch-active"),
       onTouchEnd: (e) => e.currentTarget.classList.remove("touch-active"),
-      title: displayName,
       tabIndex: 0,
       "aria-label": `Open workspace ${displayName}`,
       onKeyDown: (e) => {
@@ -37677,7 +37676,7 @@ var VideoCard = React144__default.memo(({
             "div",
             {
               "data-testid": "video-card-metric-badge",
-              className: `bg-black/70 backdrop-blur-sm rounded ${compact ? "px-1.5 py-1" : "px-2 py-1"} text-white border border-white/10`,
+              className: `bg-black/70 rounded ${compact ? "px-1.5 py-1" : "px-2 py-1"} text-white border border-white/10`,
               title: badgeTitle,
               children: /* @__PURE__ */ jsx("span", { className: `${compact ? "text-[10px]" : "text-xs"} font-semibold`, children: badgeLabel })
             }
@@ -37793,10 +37792,16 @@ var VideoGridView = React144__default.memo(({
     const ids = workspaces.map((ws) => ws.workspace_uuid || ws.workspace_name);
     return ids.sort().join(",");
   }, [workspaces]);
+  const [resolvedStreamWorkspaceKey, setResolvedStreamWorkspaceKey] = useState(() => videoStreamsLoading ? null : workspaceIdsKey);
   useEffect(() => {
     setFailedStreams(/* @__PURE__ */ new Set());
     setR2FallbackWorkspaces(/* @__PURE__ */ new Set());
   }, [workspaceIdsKey]);
+  useEffect(() => {
+    if (!videoStreamsLoading) {
+      setResolvedStreamWorkspaceKey(workspaceIdsKey);
+    }
+  }, [videoStreamsLoading, workspaceIdsKey]);
   const videoConfig = useVideoConfig();
   const dashboardConfig = useDashboardConfig();
   const timezone = useAppTimezone();
@@ -37890,7 +37895,7 @@ var VideoGridView = React144__default.memo(({
       return a.workspace_name.localeCompare(b.workspace_name);
     });
   }, [filteredWorkspaces]);
-  const streamsReady = !videoStreamsLoading;
+  const streamsResolvedForWorkspaceSet = resolvedStreamWorkspaceKey === workspaceIdsKey;
   const resolveWorkspaceDisplayName = useCallback((workspace) => {
     return workspace.displayName || displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || workspace.workspace_name;
   }, [displayNames]);
@@ -38082,7 +38087,7 @@ var VideoGridView = React144__default.memo(({
       const r2Url = workspaceStream?.hls_url;
       const fallbackUrl = getWorkspaceHlsUrl(workspace.workspace_name, workspace.line_id);
       const hasR2Stream = Boolean(r2Url);
-      const useFallback = r2FallbackWorkspaces.has(workspaceId) || streamsReady && !hasR2Stream;
+      const useFallback = r2FallbackWorkspaces.has(workspaceId) || streamsResolvedForWorkspaceSet && !hasR2Stream;
       const hlsUrl = useFallback ? fallbackUrl : r2Url ?? "";
       const isR2Stream = !useFallback && hasR2Stream;
       const canAttemptR2 = hasR2Stream && !r2FallbackWorkspaces.has(workspaceId);
@@ -38109,7 +38114,7 @@ var VideoGridView = React144__default.memo(({
     lastSeenByWorkspaceId,
     getWorkspaceHlsUrl,
     r2FallbackWorkspaces,
-    streamsReady,
+    streamsResolvedForWorkspaceSet,
     failedStreams
   ]);
   const croppedActiveCount = useMemo(() => {

package/package.json

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