@optifye/dashboard-core 6.1.7 → 6.1.8

package/dist/index.js

@@ -23095,7 +23095,14 @@ var S3ClipsService = class {
     }
     const limitPerCategory = limit ? Math.min(Math.max(limit, 1), this.maxLimitPerCategory) : this.defaultLimitPerCategory;
     const shouldFetchAll = category === "missing_quality_check" || category === "low_value";
-    const initialFetchLimit = shouldFetchAll ? void 0 : category ? Math.min(limitPerCategory * 3, this.maxInitialFetch) : void 0;
+    let initialFetchLimit;
+    if (shouldFetchAll) {
+      initialFetchLimit = void 0;
+    } else if (category) {
+      initialFetchLimit = Math.min(limitPerCategory * 3, this.maxInitialFetch);
+    } else {
+      initialFetchLimit = this.maxInitialFetch;
+    }
     const s3Uris = await this.listS3Clips({ workspaceId, date, shiftId, maxKeys: initialFetchLimit });
     if (s3Uris.length === 0) {
       console.log(`S3ClipsService: No HLS playlists found for workspace ${workspaceId} on date ${date}, shift ${shiftId}`);
@@ -23221,6 +23228,9 @@ var S3ClipsService = class {
     return videos;
   }
 };
+
+// src/lib/cache/clipsCache.ts
+var clipsCache = {};
 var BottlenecksContent = ({
   workspaceId,
   workspaceName,
@@ -23240,6 +23250,7 @@ var BottlenecksContent = ({
   const videoRef = React19.useRef(null);
   const fullscreenContainerRef = React19.useRef(null);
   const timestampFilterRef = React19.useRef(null);
+  const hlsRef = React19.useRef(null);
   const [isPlaying, setIsPlaying] = React19.useState(false);
   const [currentTime, setCurrentTime] = React19.useState(0);
   const [duration, setDuration] = React19.useState(0);
@@ -23288,21 +23299,36 @@ var BottlenecksContent = ({
       if (timestampEnd) {
         timestampEndFull = `${operationalDate}T${timestampEnd}:00`;
       }
-      const videos = await s3ClipsService.fetchClips({
+      const cacheKey = `${workspaceId}-${operationalDate}-${shift || "all"}-all-meta-1000-${timestampStartFull || ""}-${timestampEndFull || ""}`;
+      const existingEntry = clipsCache[cacheKey];
+      if (existingEntry?.status === "resolved" && existingEntry.data) {
+        setAllVideos(existingEntry.data);
+        return;
+      }
+      if (existingEntry?.status === "pending" && existingEntry.promise) {
+        setIsLoading(true);
+        existingEntry.promise.then((data) => {
+          setAllVideos(data);
+          setIsLoading(false);
+        }).catch(() => setIsLoading(false));
+        return;
+      }
+      setIsLoading(true);
+      const fetchPromise = s3ClipsService.fetchClips({
         workspaceId,
         date: operationalDate,
         shift: shift?.toString(),
-        // Pass the shift parameter
         mode: "full",
         includeCycleTime: true,
         includeMetadata: true,
-        // Always include metadata for timestamp info
         limit: 1e3,
-        // Reasonable limit for UI performance
         timestampStart: timestampStartFull,
         timestampEnd: timestampEndFull
       });
-      if (Array.isArray(videos) && videos.length > 0) {
+      clipsCache[cacheKey] = { status: "pending", promise: fetchPromise };
+      const videos = await fetchPromise;
+      clipsCache[cacheKey] = { status: "resolved", data: videos };
+      if (videos.length > 0) {
         preloadVideoUrl2(videos[0].src);
         const firstHigh = videos.find((v) => v.type === "bottleneck" && v.severity === "high");
         const firstMed = videos.find((v) => v.type === "bottleneck" && v.severity === "medium");
@@ -23326,6 +23352,8 @@ var BottlenecksContent = ({
         ].filter(Boolean));
       }
       setAllVideos(videos);
+      setIsLoading(false);
+      return;
     } catch (err) {
       console.error("Error fetching HLS clips from S3:", err);
       setError("Failed to load clips from storage. Please try again.");
@@ -23445,6 +23473,14 @@ var BottlenecksContent = ({
           } else {
             import('hls.js').then(({ default: Hls3 }) => {
               if (Hls3.isSupported()) {
+                if (hlsRef.current) {
+                  try {
+                    hlsRef.current.destroy();
+                  } catch (err) {
+                    console.warn("Failed to destroy previous HLS instance", err);
+                  }
+                  hlsRef.current = null;
+                }
                 const hls = new Hls3({
                   // Add CORS and error handling configuration
                   xhrSetup: (xhr, url) => {
@@ -23487,7 +23523,8 @@ var BottlenecksContent = ({
                   testBandwidth: false,
                   // Error recovery configuration
                   capLevelOnFPSDrop: false,
-                  capLevelToPlayerSize: false
+                  capLevelToPlayerSize: true,
+                  abrEwmaDefaultEstimate: 5e5
                 });
                 hls.on(Hls3.Events.ERROR, (event, data) => {
                   console.error("HLS.js error:", data);
@@ -23615,6 +23652,13 @@ var BottlenecksContent = ({
         video.removeEventListener("loadedmetadata", onLoadedMetadata);
         video.removeEventListener("ended", onEnded);
         video.removeEventListener("error", onError);
+        if (hlsRef.current) {
+          try {
+            hlsRef.current.destroy();
+          } catch (e) {
+          }
+          hlsRef.current = null;
+        }
       };
     } else if (videoRef.current) {
       videoRef.current.pause();
@@ -33423,6 +33467,29 @@ var WorkspaceDetailView = ({
   const isHistoricView = Boolean(date && parsedShiftId !== void 0);
   const initialTab = getInitialTab(sourceType, defaultTab, fromMonthly, date);
   const [activeTab, setActiveTab] = React19.useState(initialTab);
+  const dashboardConfig = useDashboardConfig();
+  React19.useEffect(() => {
+    if (!dashboardConfig?.s3Config) return;
+    const operationalDate2 = date || getOperationalDate();
+    const cacheKey = `${workspaceId}-${operationalDate2}-${shift || "all"}-all-meta-1000--`;
+    if (clipsCache[cacheKey]?.status) return;
+    const service = new S3ClipsService(dashboardConfig);
+    const promise = service.fetchClips({
+      workspaceId,
+      date: operationalDate2,
+      shift: shift?.toString(),
+      mode: "full",
+      includeCycleTime: true,
+      includeMetadata: true,
+      limit: 1e3
+    });
+    clipsCache[cacheKey] = { status: "pending", promise };
+    promise.then((videos) => {
+      clipsCache[cacheKey] = { status: "resolved", data: videos };
+    }).catch((err) => {
+      clipsCache[cacheKey] = { status: "rejected", error: err };
+    });
+  }, [workspaceId, date, shift, dashboardConfig]);
   const [isTransitioning, setIsTransitioning] = React19.useState(false);
   const [usingFallbackData, setUsingFallbackData] = React19.useState(false);
   const [showIdleTime, setShowIdleTime] = React19.useState(false);

package/dist/index.mjs

@@ -23066,7 +23066,14 @@ var S3ClipsService = class {
     }
     const limitPerCategory = limit ? Math.min(Math.max(limit, 1), this.maxLimitPerCategory) : this.defaultLimitPerCategory;
     const shouldFetchAll = category === "missing_quality_check" || category === "low_value";
-    const initialFetchLimit = shouldFetchAll ? void 0 : category ? Math.min(limitPerCategory * 3, this.maxInitialFetch) : void 0;
+    let initialFetchLimit;
+    if (shouldFetchAll) {
+      initialFetchLimit = void 0;
+    } else if (category) {
+      initialFetchLimit = Math.min(limitPerCategory * 3, this.maxInitialFetch);
+    } else {
+      initialFetchLimit = this.maxInitialFetch;
+    }
     const s3Uris = await this.listS3Clips({ workspaceId, date, shiftId, maxKeys: initialFetchLimit });
     if (s3Uris.length === 0) {
       console.log(`S3ClipsService: No HLS playlists found for workspace ${workspaceId} on date ${date}, shift ${shiftId}`);
@@ -23192,6 +23199,9 @@ var S3ClipsService = class {
     return videos;
   }
 };
+
+// src/lib/cache/clipsCache.ts
+var clipsCache = {};
 var BottlenecksContent = ({
   workspaceId,
   workspaceName,
@@ -23211,6 +23221,7 @@ var BottlenecksContent = ({
   const videoRef = useRef(null);
   const fullscreenContainerRef = useRef(null);
   const timestampFilterRef = useRef(null);
+  const hlsRef = useRef(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
@@ -23259,21 +23270,36 @@ var BottlenecksContent = ({
       if (timestampEnd) {
         timestampEndFull = `${operationalDate}T${timestampEnd}:00`;
       }
-      const videos = await s3ClipsService.fetchClips({
+      const cacheKey = `${workspaceId}-${operationalDate}-${shift || "all"}-all-meta-1000-${timestampStartFull || ""}-${timestampEndFull || ""}`;
+      const existingEntry = clipsCache[cacheKey];
+      if (existingEntry?.status === "resolved" && existingEntry.data) {
+        setAllVideos(existingEntry.data);
+        return;
+      }
+      if (existingEntry?.status === "pending" && existingEntry.promise) {
+        setIsLoading(true);
+        existingEntry.promise.then((data) => {
+          setAllVideos(data);
+          setIsLoading(false);
+        }).catch(() => setIsLoading(false));
+        return;
+      }
+      setIsLoading(true);
+      const fetchPromise = s3ClipsService.fetchClips({
         workspaceId,
         date: operationalDate,
         shift: shift?.toString(),
-        // Pass the shift parameter
         mode: "full",
         includeCycleTime: true,
         includeMetadata: true,
-        // Always include metadata for timestamp info
         limit: 1e3,
-        // Reasonable limit for UI performance
         timestampStart: timestampStartFull,
         timestampEnd: timestampEndFull
       });
-      if (Array.isArray(videos) && videos.length > 0) {
+      clipsCache[cacheKey] = { status: "pending", promise: fetchPromise };
+      const videos = await fetchPromise;
+      clipsCache[cacheKey] = { status: "resolved", data: videos };
+      if (videos.length > 0) {
         preloadVideoUrl2(videos[0].src);
         const firstHigh = videos.find((v) => v.type === "bottleneck" && v.severity === "high");
         const firstMed = videos.find((v) => v.type === "bottleneck" && v.severity === "medium");
@@ -23297,6 +23323,8 @@ var BottlenecksContent = ({
         ].filter(Boolean));
       }
       setAllVideos(videos);
+      setIsLoading(false);
+      return;
     } catch (err) {
       console.error("Error fetching HLS clips from S3:", err);
       setError("Failed to load clips from storage. Please try again.");
@@ -23416,6 +23444,14 @@ var BottlenecksContent = ({
           } else {
             import('hls.js').then(({ default: Hls3 }) => {
               if (Hls3.isSupported()) {
+                if (hlsRef.current) {
+                  try {
+                    hlsRef.current.destroy();
+                  } catch (err) {
+                    console.warn("Failed to destroy previous HLS instance", err);
+                  }
+                  hlsRef.current = null;
+                }
                 const hls = new Hls3({
                   // Add CORS and error handling configuration
                   xhrSetup: (xhr, url) => {
@@ -23458,7 +23494,8 @@ var BottlenecksContent = ({
                   testBandwidth: false,
                   // Error recovery configuration
                   capLevelOnFPSDrop: false,
-                  capLevelToPlayerSize: false
+                  capLevelToPlayerSize: true,
+                  abrEwmaDefaultEstimate: 5e5
                 });
                 hls.on(Hls3.Events.ERROR, (event, data) => {
                   console.error("HLS.js error:", data);
@@ -23586,6 +23623,13 @@ var BottlenecksContent = ({
         video.removeEventListener("loadedmetadata", onLoadedMetadata);
         video.removeEventListener("ended", onEnded);
         video.removeEventListener("error", onError);
+        if (hlsRef.current) {
+          try {
+            hlsRef.current.destroy();
+          } catch (e) {
+          }
+          hlsRef.current = null;
+        }
       };
     } else if (videoRef.current) {
       videoRef.current.pause();
@@ -33394,6 +33438,29 @@ var WorkspaceDetailView = ({
   const isHistoricView = Boolean(date && parsedShiftId !== void 0);
   const initialTab = getInitialTab(sourceType, defaultTab, fromMonthly, date);
   const [activeTab, setActiveTab] = useState(initialTab);
+  const dashboardConfig = useDashboardConfig();
+  useEffect(() => {
+    if (!dashboardConfig?.s3Config) return;
+    const operationalDate2 = date || getOperationalDate();
+    const cacheKey = `${workspaceId}-${operationalDate2}-${shift || "all"}-all-meta-1000--`;
+    if (clipsCache[cacheKey]?.status) return;
+    const service = new S3ClipsService(dashboardConfig);
+    const promise = service.fetchClips({
+      workspaceId,
+      date: operationalDate2,
+      shift: shift?.toString(),
+      mode: "full",
+      includeCycleTime: true,
+      includeMetadata: true,
+      limit: 1e3
+    });
+    clipsCache[cacheKey] = { status: "pending", promise };
+    promise.then((videos) => {
+      clipsCache[cacheKey] = { status: "resolved", data: videos };
+    }).catch((err) => {
+      clipsCache[cacheKey] = { status: "rejected", error: err };
+    });
+  }, [workspaceId, date, shift, dashboardConfig]);
   const [isTransitioning, setIsTransitioning] = useState(false);
   const [usingFallbackData, setUsingFallbackData] = useState(false);
   const [showIdleTime, setShowIdleTime] = useState(false);

package/package.json

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