@optifye/dashboard-core 6.10.21 → 6.10.22

package/dist/index.js

@@ -8,7 +8,7 @@ var dateFns = require('date-fns');
 var mixpanel = require('mixpanel-browser');
 var events = require('events');
 var supabaseJs = require('@supabase/supabase-js');
-var Hls3 = require('hls.js');
+var Hls = require('hls.js');
 var useSWR = require('swr');
 var motionUtils = require('motion-utils');
 var motionDom = require('motion-dom');
@@ -49,7 +49,7 @@ function _interopNamespace(e) {
 
 var React25__namespace = /*#__PURE__*/_interopNamespace(React25);
 var mixpanel__default = /*#__PURE__*/_interopDefault(mixpanel);
-var Hls3__default = /*#__PURE__*/_interopDefault(Hls3);
+var Hls__default = /*#__PURE__*/_interopDefault(Hls);
 var useSWR__default = /*#__PURE__*/_interopDefault(useSWR);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 var html2canvas__default = /*#__PURE__*/_interopDefault(html2canvas);
@@ -458,6 +458,9 @@ var _getSupabaseInstance = () => {
   }
   return supabaseInstance;
 };
+var _getSupabaseInstanceOptional = () => {
+  return supabaseInstance;
+};
 
 // src/lib/services/actionService.ts
 var actionService = {
@@ -2089,6 +2092,11 @@ var workspaceService = {
   _workspacesInFlight: /* @__PURE__ */ new Map(),
   _workspacesCacheExpiryMs: 10 * 60 * 1e3,
   // 10 minutes cache
+  // Cache for workspace video streams (R2 mapping + crops)
+  _workspaceVideoStreamsCache: /* @__PURE__ */ new Map(),
+  _workspaceVideoStreamsInFlight: /* @__PURE__ */ new Map(),
+  _workspaceVideoStreamsCacheExpiryMs: 5 * 60 * 1e3,
+  // 5 minutes cache
   async getWorkspaces(lineId, options) {
     const enabledOnly = options?.enabledOnly ?? false;
     const force = options?.force ?? false;
@@ -2135,6 +2143,61 @@ var workspaceService = {
   async getEnabledWorkspaces(lineId, options) {
     return this.getWorkspaces(lineId, { enabledOnly: true, force: options?.force });
   },
+  async getWorkspaceVideoStreams(params) {
+    const workspaceIds = (params.workspaceIds || []).filter(Boolean);
+    const lineIds = (params.lineIds || []).filter(Boolean);
+    const force = params.force ?? false;
+    if (!workspaceIds.length && !lineIds.length) {
+      return {};
+    }
+    const workspaceKey = workspaceIds.slice().sort().join(",");
+    const lineKey = lineIds.slice().sort().join(",");
+    const cacheKey = workspaceKey ? `workspaces:${workspaceKey}` : `lines:${lineKey}`;
+    const now2 = Date.now();
+    const cached = this._workspaceVideoStreamsCache.get(cacheKey);
+    if (!force && cached && now2 - cached.timestamp < this._workspaceVideoStreamsCacheExpiryMs) {
+      return cached.streams;
+    }
+    const inFlight = this._workspaceVideoStreamsInFlight.get(cacheKey);
+    if (!force && inFlight) {
+      return inFlight;
+    }
+    const fetchPromise = (async () => {
+      try {
+        const token = await getAuthToken2();
+        const apiUrl = getBackendUrl2();
+        const response = await fetch(`${apiUrl}/api/workspaces/video-streams`, {
+          method: "POST",
+          headers: {
+            "Authorization": `Bearer ${token}`,
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            workspace_ids: workspaceIds.length ? workspaceIds : void 0,
+            line_ids: lineIds.length ? lineIds : void 0
+          })
+        });
+        if (!response.ok) {
+          const errorText = await response.text();
+          throw new Error(`Backend API error (${response.status}): ${errorText}`);
+        }
+        const data = await response.json();
+        const streams = data.streams || {};
+        this._workspaceVideoStreamsCache.set(cacheKey, {
+          streams,
+          timestamp: Date.now()
+        });
+        return streams;
+      } catch (error) {
+        console.error("Error fetching workspace video streams:", error);
+        throw error;
+      } finally {
+        this._workspaceVideoStreamsInFlight.delete(cacheKey);
+      }
+    })();
+    this._workspaceVideoStreamsInFlight.set(cacheKey, fetchPromise);
+    return fetchPromise;
+  },
   /**
    * Fetches workspace display names from the database
    * Returns a map of workspace_id -> display_name
@@ -4944,13 +5007,98 @@ function isValidShiftId(shiftId) {
   const id3 = typeof shiftId === "string" ? parseInt(shiftId, 10) : shiftId;
   return Number.isFinite(id3) && id3 >= 0;
 }
+var createSupabaseClient = (url, key) => supabaseJs.createClient(url, key, {
+  auth: {
+    autoRefreshToken: true,
+    persistSession: true,
+    detectSessionInUrl: true,
+    flowType: "pkce",
+    // Enable debug logging in development
+    debug: process.env.NODE_ENV === "development"
+  },
+  db: {
+    schema: "public"
+    // Default schema, we'll use .schema('ai') in queries
+  },
+  global: {
+    headers: {
+      "x-application-name": "optifye-dashboard"
+    },
+    // Add global fetch timeout (5 minutes)
+    fetch: async (url2, options = {}) => {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 3e5);
+      try {
+        const response = await fetch(url2, {
+          ...options,
+          signal: controller.signal
+        });
+        clearTimeout(timeoutId);
+        return response;
+      } catch (error) {
+        clearTimeout(timeoutId);
+        throw error;
+      }
+    }
+  }
+});
+var getAnonClient = () => {
+  const url = process.env.NEXT_PUBLIC_SUPABASE_URL || "";
+  const key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || "";
+  if (!url || !key) {
+    console.warn("[dashboard-core] Missing supabase env variables");
+  }
+  return supabaseJs.createClient(url, key, {
+    auth: {
+      autoRefreshToken: true,
+      persistSession: true,
+      detectSessionInUrl: true,
+      flowType: "pkce",
+      debug: process.env.NODE_ENV === "development"
+    },
+    global: {
+      headers: {
+        "x-application-name": "optifye-dashboard"
+      },
+      // Add global fetch timeout (5 minutes)
+      fetch: async (url2, options = {}) => {
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 3e5);
+        try {
+          const response = await fetch(url2, {
+            ...options,
+            signal: controller.signal
+          });
+          clearTimeout(timeoutId);
+          return response;
+        } catch (error) {
+          clearTimeout(timeoutId);
+          throw error;
+        }
+      }
+    }
+  });
+};
+
+// src/lib/api/s3-clips-supabase.ts
+var cachedClient = null;
+var cachedConfig = null;
 var getSupabaseClient = () => {
+  const existing = _getSupabaseInstanceOptional();
+  if (existing) {
+    return existing;
+  }
   const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
   const key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
   if (!url || !key) {
     throw new Error("Supabase configuration missing");
   }
-  return supabaseJs.createClient(url, key);
+  if (!cachedClient || cachedConfig?.url !== url || cachedConfig?.key !== key) {
+    cachedClient = createSupabaseClient(url, key);
+    cachedConfig = { url, key };
+    _setSupabaseInstance(cachedClient);
+  }
+  return cachedClient;
 };
 var getAuthToken3 = async () => {
   try {
@@ -6012,9 +6160,13 @@ var createSupervisorService = (supabase) => {
 var simulateApiDelay = (ms = 1e3) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
+
+// src/lib/services/timezone.ts
 var TimezoneService = class _TimezoneService {
   constructor() {
     this.timezoneCache = /* @__PURE__ */ new Map();
+    this.fallbackClient = null;
+    this.fallbackConfig = null;
     this.supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || "";
     this.supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || "";
   }
@@ -6024,6 +6176,21 @@ var TimezoneService = class _TimezoneService {
     }
     return _TimezoneService.instance;
   }
+  getClient() {
+    const existing = _getSupabaseInstanceOptional();
+    if (existing) {
+      return existing;
+    }
+    if (!this.supabaseUrl || !this.supabaseAnonKey) {
+      throw new Error("Supabase configuration missing");
+    }
+    if (!this.fallbackClient || this.fallbackConfig?.url !== this.supabaseUrl || this.fallbackConfig?.key !== this.supabaseAnonKey) {
+      this.fallbackClient = createSupabaseClient(this.supabaseUrl, this.supabaseAnonKey);
+      this.fallbackConfig = { url: this.supabaseUrl, key: this.supabaseAnonKey };
+      _setSupabaseInstance(this.fallbackClient);
+    }
+    return this.fallbackClient;
+  }
   /**
    * Fetch timezone for a specific line from Supabase
    */
@@ -6032,7 +6199,7 @@ var TimezoneService = class _TimezoneService {
       return this.timezoneCache.get(lineId);
     }
     try {
-      const supabase = supabaseJs.createClient(this.supabaseUrl, this.supabaseAnonKey);
+      const supabase = this.getClient();
       const { data, error } = await supabase.from("line_operating_hours").select("timezone").eq("line_id", lineId).order("created_at", { ascending: false }).limit(1).single();
       if (error) {
         console.warn(`Failed to fetch timezone for line ${lineId}:`, error);
@@ -6057,7 +6224,7 @@ var TimezoneService = class _TimezoneService {
       return this.timezoneCache.get(cacheKey);
     }
     try {
-      const supabase = supabaseJs.createClient(this.supabaseUrl, this.supabaseAnonKey);
+      const supabase = this.getClient();
       const { data, error } = await supabase.from("line_operating_hours").select(`
           timezone,
           line:lines!inner(
@@ -6087,7 +6254,7 @@ var TimezoneService = class _TimezoneService {
       return this.timezoneCache.get(cacheKey);
     }
     try {
-      const supabase = supabaseJs.createClient(this.supabaseUrl, this.supabaseAnonKey);
+      const supabase = this.getClient();
       const { data: workspaceData, error: workspaceError } = await supabase.from("workspaces").select("line_id").eq("id", workspaceId).single();
       if (workspaceError) {
         console.warn(`Failed to fetch workspace ${workspaceId}:`, workspaceError);
@@ -6119,7 +6286,7 @@ var TimezoneService = class _TimezoneService {
       return result;
     }
     try {
-      const supabase = supabaseJs.createClient(this.supabaseUrl, this.supabaseAnonKey);
+      const supabase = this.getClient();
       const { data, error } = await supabase.from("line_operating_hours").select("line_id, timezone").in("line_id", uncachedLineIds).order("created_at", { ascending: false });
       if (error) {
         console.warn("Failed to fetch timezones for lines:", error);
@@ -7137,12 +7304,16 @@ var SupabaseProvider = ({ client, children }) => {
   const contextValue = React25.useMemo(() => ({ supabase: client }), [client]);
   return /* @__PURE__ */ jsxRuntime.jsx(SupabaseContext.Provider, { value: contextValue, children });
 };
-var useSupabase = () => {
+var useOptionalSupabase = () => {
   const context = React25.useContext(SupabaseContext);
-  if (context === void 0) {
+  return context?.supabase ?? null;
+};
+var useSupabase = () => {
+  const client = useOptionalSupabase();
+  if (!client) {
     throw new Error("useSupabase must be used within a SupabaseProvider.");
   }
-  return context.supabase;
+  return client;
 };
 
 // src/lib/hooks/useSessionKeepAlive.ts
@@ -10899,16 +11070,63 @@ var useWorkspaceOperators = (workspaceId, options) => {
     refetch: fetchData
   };
 };
+
+// src/lib/services/hlsAuthService.ts
+async function getAuthTokenForHls(supabase) {
+  try {
+    const { data: { session } } = await supabase.auth.getSession();
+    if (!session?.access_token) {
+      console.warn("[HLS Auth] No active session, R2 streaming may fail");
+      return null;
+    }
+    console.log("[HLS Auth] Retrieved token for HLS.js requests");
+    return session.access_token;
+  } catch (error) {
+    console.error("[HLS Auth] Error getting auth token:", error);
+    return null;
+  }
+}
+
+// src/lib/utils/r2Detection.ts
+function isR2WorkerUrl(url, r2WorkerDomain) {
+  if (!url || !r2WorkerDomain) return false;
+  try {
+    const workerDomain = new URL(r2WorkerDomain).hostname;
+    return url.includes(workerDomain);
+  } catch {
+    return url.includes(r2WorkerDomain.replace(/https?:\/\//, ""));
+  }
+}
+
+// src/lib/utils/browser.ts
+function isSafari() {
+  if (typeof window === "undefined") return false;
+  const ua = window.navigator.userAgent;
+  const isSafariUA = /^((?!chrome|android).)*safari/i.test(ua);
+  const isIOS = /iPad|iPhone|iPod/.test(ua) && !window.MSStream;
+  return isSafariUA || isIOS;
+}
+function getBrowserName() {
+  if (typeof window === "undefined") return "server";
+  const ua = window.navigator.userAgent;
+  if (/chrome/i.test(ua) && !/edge/i.test(ua)) return "chrome";
+  if (/safari/i.test(ua) && !/chrome/i.test(ua)) return "safari";
+  if (/firefox/i.test(ua)) return "firefox";
+  if (/edge/i.test(ua)) return "edge";
+  return "unknown";
+}
+
+// src/lib/hooks/useHlsStream.ts
 var HLS_CONFIG = {
-  // Buffer configuration for instant playback
-  maxBufferLength: 30,
-  // Increased for smoother playback
+  // Buffer configuration for 60s segments
+  maxBufferLength: 180,
+  // Allow ~3 segments buffered for stability
   maxMaxBufferLength: 600,
   // 10 minutes max buffer
   maxBufferSize: 120 * 1e3 * 1e3,
   // 120MB buffer size
-  maxBufferHole: 0.1,
-  // Minimal tolerance for buffer holes
+  maxBufferHole: 0.5,
+  // Tolerate minor timestamp gaps
   // Low latency optimizations
   lowLatencyMode: false,
   // We prioritize stability over latency
@@ -10919,7 +11137,7 @@ var HLS_CONFIG = {
   // Auto-select quality
   autoStartLoad: true,
   startPosition: -1,
-  // Start from beginning
+  // Start at live edge when available
   // Network optimization
   manifestLoadingMaxRetry: 6,
   levelLoadingMaxRetry: 6,
@@ -10928,9 +11146,10 @@ var HLS_CONFIG = {
   // Faster retries
   levelLoadingRetryDelay: 250,
   fragLoadingRetryDelay: 250,
-  manifestLoadingTimeOut: 2e4,
-  levelLoadingTimeOut: 2e4,
-  fragLoadingTimeOut: 2e4,
+  manifestLoadingTimeOut: 9e4,
+  levelLoadingTimeOut: 9e4,
+  fragLoadingTimeOut: 9e4,
+  maxConcurrentLoading: 2,
   // ABR (Adaptive Bitrate) settings
   abrEwmaFastLive: 3,
   abrEwmaSlowLive: 9,
@@ -10942,7 +11161,7 @@ var HLS_CONFIG = {
   abrBandWidthUpFactor: 0.7,
   abrMaxWithRealBitrate: true,
   // Fragment loading optimization
-  maxFragLookUpTolerance: 0.25,
+  maxFragLookUpTolerance: 1,
   // Enable all optimizations
   enableCEA708Captions: false,
   // Disable if not needed
@@ -10952,12 +11171,21 @@ var HLS_CONFIG = {
   // Disable if not needed
   // Progressive loading
   progressive: true,
-  liveSyncDurationCount: 2
-  // Follow live edge aggressively
+  liveSyncDurationCount: 2,
+  // Stay ~2 segments behind live for a full segment buffer
+  liveMaxLatencyDurationCount: 3,
+  // Cap drift to ~3 segments
+  maxLiveSyncPlaybackRate: 1
+  // Do not chase live edge; prioritize continuity
 };
 var failedUrls = /* @__PURE__ */ new Map();
 var MAX_FAILURES_PER_URL = 3;
 var FAILURE_EXPIRY_MS = 5 * 60 * 1e3;
+var LIVE_RELOAD_MIN_INTERVAL_MS = 15 * 1e3;
+var DEFAULT_LIVE_OFFSET_SECONDS = 120;
+var DEFAULT_MAX_MANIFEST_AGE_MS = 10 * 60 * 1e3;
+var STALE_MANIFEST_POLL_INITIAL_DELAY_MS = 15 * 1e3;
+var STALE_MANIFEST_POLL_MAX_DELAY_MS = 60 * 1e3;
 function resetFailedUrl(url) {
   if (failedUrls.has(url)) {
     console.log(`[HLS] Manually resetting failed URL: ${url}`);
@@ -10968,7 +11196,11 @@ function isUrlPermanentlyFailed(url) {
   const failure = failedUrls.get(url);
   return failure?.permanentlyFailed || false;
 }
-function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
+function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
+  const latestSrcRef = React25.useRef(src);
+  latestSrcRef.current = src;
+  const shouldPlayRef = React25.useRef(shouldPlay);
+  shouldPlayRef.current = shouldPlay;
   const urlFailure = failedUrls.get(src);
   const isPermanentlyFailed = urlFailure?.permanentlyFailed || false;
   const cleanupFailedUrls = () => {
@@ -10991,7 +11223,194 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
   const lastTimeUpdateRef = React25.useRef(0);
   const softRestartCountRef = React25.useRef(0);
   const isNativeHlsRef = React25.useRef(false);
+  const playbackRateIntervalRef = React25.useRef(null);
   const waitingTimerRef = React25.useRef(null);
+  const playRetryTimerRef = React25.useRef(null);
+  const playRetryCountRef = React25.useRef(0);
+  const manifestWatchdogRef = React25.useRef(null);
+  const lastHiddenAtRef = React25.useRef(null);
+  const manifestRetryTimerRef = React25.useRef(null);
+  const manifestRetryDelayRef = React25.useRef(5e3);
+  const lastLiveReloadRef = React25.useRef(0);
+  const isR2StreamRef = React25.useRef(false);
+  const nativeStreamUrlRef = React25.useRef(null);
+  const forcedLiveStartRef = React25.useRef(false);
+  const activeStreamUrlRef = React25.useRef(null);
+  const targetDurationRef = React25.useRef(null);
+  const lastManifestLoadRef = React25.useRef(0);
+  const lastFragLoadRef = React25.useRef(0);
+  const lastFragSnRef = React25.useRef(null);
+  const lastWindowStartSnRef = React25.useRef(null);
+  const lastWindowEndSnRef = React25.useRef(null);
+  const lastFragTimeoutSnRef = React25.useRef(null);
+  const lastFragTimeoutAtRef = React25.useRef(null);
+  const fragTimeoutCountRef = React25.useRef(0);
+  const lastManifestEndSnRef = React25.useRef(null);
+  const lastManifestEndSnUpdatedAtRef = React25.useRef(null);
+  const staleManifestTriggeredRef = React25.useRef(false);
+  const staleManifestUrlRef = React25.useRef(null);
+  const staleManifestEndSnRef = React25.useRef(null);
+  const staleManifestPollTimerRef = React25.useRef(null);
+  const staleManifestPollDelayRef = React25.useRef(STALE_MANIFEST_POLL_INITIAL_DELAY_MS);
+  const authTokenRef = React25.useRef(null);
+  const proxyEnabled = process.env.NEXT_PUBLIC_HLS_PROXY_ENABLED === "true";
+  const proxyBaseUrl = (process.env.NEXT_PUBLIC_HLS_PROXY_URL || "/api/stream").replace(/\/$/, "");
+  const debugEnabled = process.env.NEXT_PUBLIC_HLS_DEBUG === "true";
+  const maxManifestAgeMs = (() => {
+    const raw = process.env.NEXT_PUBLIC_HLS_MAX_MANIFEST_AGE_MS;
+    const parsed = raw ? Number(raw) : NaN;
+    return Number.isFinite(parsed) ? parsed : DEFAULT_MAX_MANIFEST_AGE_MS;
+  })();
+  const debugLog = (...args) => {
+    if (debugEnabled) {
+      console.log(...args);
+    }
+  };
+  const getProgramDateTimeMs = (value) => {
+    if (value instanceof Date) return value.getTime();
+    if (typeof value === "number") return value;
+    if (typeof value === "string") {
+      const parsed = Date.parse(value);
+      return Number.isNaN(parsed) ? null : parsed;
+    }
+    return null;
+  };
+  const parseManifestStatus = (manifestText) => {
+    let mediaSequence = null;
+    let segmentCount = 0;
+    let lastProgramDateTimeMs = null;
+    const lines = manifestText.split(/\r?\n/);
+    for (const rawLine of lines) {
+      const line = rawLine.trim();
+      if (!line) continue;
+      if (line.startsWith("#EXT-X-MEDIA-SEQUENCE:")) {
+        const value = Number.parseInt(line.replace("#EXT-X-MEDIA-SEQUENCE:", ""), 10);
+        if (Number.isFinite(value)) {
+          mediaSequence = value;
+        }
+      } else if (line.startsWith("#EXT-X-PROGRAM-DATE-TIME:")) {
+        const timestamp = line.replace("#EXT-X-PROGRAM-DATE-TIME:", "").trim();
+        const parsed = Date.parse(timestamp);
+        if (!Number.isNaN(parsed)) {
+          lastProgramDateTimeMs = parsed;
+        }
+      } else if (line.startsWith("#EXTINF:")) {
+        segmentCount += 1;
+      }
+    }
+    let lastSequenceNumber = null;
+    if (mediaSequence !== null && segmentCount > 0) {
+      lastSequenceNumber = mediaSequence + segmentCount - 1;
+    }
+    return { lastProgramDateTimeMs, lastSequenceNumber };
+  };
+  const stopStaleManifestPolling = () => {
+    if (staleManifestPollTimerRef.current) {
+      clearTimeout(staleManifestPollTimerRef.current);
+      staleManifestPollTimerRef.current = null;
+    }
+    staleManifestTriggeredRef.current = false;
+    staleManifestUrlRef.current = null;
+    staleManifestEndSnRef.current = null;
+    staleManifestPollDelayRef.current = STALE_MANIFEST_POLL_INITIAL_DELAY_MS;
+  };
+  const pollStaleManifestOnce = async () => {
+    if (!staleManifestTriggeredRef.current) return;
+    if (!shouldPlayRef.current) {
+      stopStaleManifestPolling();
+      return;
+    }
+    const manifestUrl = staleManifestUrlRef.current;
+    if (!manifestUrl) {
+      stopStaleManifestPolling();
+      return;
+    }
+    try {
+      const headers = {};
+      if (authTokenRef.current) {
+        headers.Authorization = `Bearer ${authTokenRef.current}`;
+      }
+      const response = await fetch(buildCacheBustedUrl(manifestUrl), {
+        method: "GET",
+        cache: "no-store",
+        headers
+      });
+      if (!response.ok) {
+        throw new Error(`Manifest poll failed: ${response.status}`);
+      }
+      const manifestText = await response.text();
+      const { lastProgramDateTimeMs, lastSequenceNumber } = parseManifestStatus(manifestText);
+      const now2 = Date.now();
+      const isFreshByProgramDateTime = lastProgramDateTimeMs !== null && now2 - lastProgramDateTimeMs <= maxManifestAgeMs;
+      const priorEndSn = staleManifestEndSnRef.current;
+      const isSequenceAdvanced = typeof lastSequenceNumber === "number" && (priorEndSn === null || lastSequenceNumber > priorEndSn);
+      if (isFreshByProgramDateTime || isSequenceAdvanced) {
+        stopStaleManifestPolling();
+        if (hlsRef.current) {
+          hlsRef.current.startLoad(-1);
+          seekToLiveEdge();
+          attemptPlay("stale manifest recovered");
+        } else {
+          setRestartKey((k) => k + 1);
+        }
+        return;
+      }
+    } catch (error) {
+      debugLog("[HLS] Stale manifest poll failed", error);
+    }
+    staleManifestPollDelayRef.current = Math.min(
+      staleManifestPollDelayRef.current + 5e3,
+      STALE_MANIFEST_POLL_MAX_DELAY_MS
+    );
+    scheduleStaleManifestPoll();
+  };
+  const scheduleStaleManifestPoll = () => {
+    if (!staleManifestTriggeredRef.current) return;
+    if (staleManifestPollTimerRef.current) return;
+    const delay2 = staleManifestPollDelayRef.current;
+    staleManifestPollTimerRef.current = setTimeout(() => {
+      staleManifestPollTimerRef.current = null;
+      void pollStaleManifestOnce();
+    }, delay2);
+  };
+  const startStaleManifestPolling = (reason) => {
+    if (staleManifestTriggeredRef.current) return;
+    staleManifestTriggeredRef.current = true;
+    staleManifestUrlRef.current = activeStreamUrlRef.current || latestSrcRef.current;
+    staleManifestEndSnRef.current = lastManifestEndSnRef.current;
+    staleManifestPollDelayRef.current = STALE_MANIFEST_POLL_INITIAL_DELAY_MS;
+    const hls = hlsRef.current;
+    if (hls) {
+      hls.stopLoad();
+    }
+    const video = videoRef.current;
+    if (video) {
+      video.pause();
+    }
+    console.warn(`[HLS] Manifest stale, pausing playback (${reason})`);
+    scheduleStaleManifestPoll();
+  };
+  const isProxyUrl = (url) => {
+    if (!proxyEnabled || !proxyBaseUrl) return false;
+    try {
+      const base = proxyBaseUrl.startsWith("http") ? proxyBaseUrl : new URL(proxyBaseUrl, window.location.origin).toString();
+      return url.startsWith(base);
+    } catch {
+      return url.includes(proxyBaseUrl);
+    }
+  };
+  const getR2CameraUuid = (url) => {
+    try {
+      const parsed = new URL(url);
+      const match2 = parsed.pathname.match(/\/segments\/([^\/]+)\/index\.m3u8$/);
+      if (match2) {
+        return match2[1];
+      }
+    } catch {
+    }
+    const match = url.match(/\/segments\/([^\/]+)\/index\.m3u8/);
+    return match ? match[1] : null;
+  };
   const cleanup = () => {
     if (stallCheckIntervalRef.current) {
       clearInterval(stallCheckIntervalRef.current);
@@ -11001,10 +11420,48 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
       clearTimeout(noProgressTimerRef.current);
       noProgressTimerRef.current = null;
     }
+    if (playbackRateIntervalRef.current) {
+      clearInterval(playbackRateIntervalRef.current);
+      playbackRateIntervalRef.current = null;
+    }
     if (waitingTimerRef.current) {
       clearTimeout(waitingTimerRef.current);
       waitingTimerRef.current = null;
     }
+    if (playRetryTimerRef.current) {
+      clearTimeout(playRetryTimerRef.current);
+      playRetryTimerRef.current = null;
+    }
+    if (manifestWatchdogRef.current) {
+      clearInterval(manifestWatchdogRef.current);
+      manifestWatchdogRef.current = null;
+    }
+    if (manifestRetryTimerRef.current) {
+      clearTimeout(manifestRetryTimerRef.current);
+      manifestRetryTimerRef.current = null;
+    }
+    stopStaleManifestPolling();
+    lastHiddenAtRef.current = null;
+    if (nativeStreamUrlRef.current) {
+      nativeStreamUrlRef.current = null;
+    }
+    activeStreamUrlRef.current = null;
+    forcedLiveStartRef.current = false;
+    lastLiveReloadRef.current = 0;
+    targetDurationRef.current = null;
+    lastManifestLoadRef.current = 0;
+    lastFragLoadRef.current = 0;
+    lastFragSnRef.current = null;
+    lastWindowStartSnRef.current = null;
+    lastWindowEndSnRef.current = null;
+    lastFragTimeoutSnRef.current = null;
+    lastFragTimeoutAtRef.current = null;
+    fragTimeoutCountRef.current = 0;
+    lastManifestEndSnRef.current = null;
+    lastManifestEndSnUpdatedAtRef.current = null;
+    staleManifestTriggeredRef.current = false;
+    manifestRetryDelayRef.current = 5e3;
+    playRetryCountRef.current = 0;
     if (hlsRef.current) {
       hlsRef.current.destroy();
       hlsRef.current = null;
@@ -11016,11 +11473,24 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
       video.load();
       video.removeEventListener("waiting", handleWaiting);
       video.removeEventListener("timeupdate", handleTimeUpdate);
+      video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+      video.removeEventListener("canplay", handleCanPlay);
+      video.removeEventListener("ended", handleEnded);
       video.removeEventListener("error", handleNativeError);
+      if (typeof document !== "undefined") {
+        document.removeEventListener("visibilitychange", handleVisibilityChange);
+      }
     }
     lastTimeUpdateRef.current = 0;
     softRestartCountRef.current = 0;
   };
+  const getLiveOffsetSeconds = () => {
+    const targetDuration = targetDurationRef.current;
+    if (targetDuration && Number.isFinite(targetDuration)) {
+      return Math.max(targetDuration * 2, targetDuration);
+    }
+    return DEFAULT_LIVE_OFFSET_SECONDS;
+  };
   const seekToLiveEdge = () => {
     const hls = hlsRef.current;
     const video = videoRef.current;
@@ -11029,19 +11499,237 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
       video.currentTime = hls.liveSyncPosition;
     } else if (hls.levels?.[hls.currentLevel]?.details) {
       const levelDetails = hls.levels[hls.currentLevel].details;
-      if (levelDetails && levelDetails.edge !== void 0) {
-        video.currentTime = Math.max(0, levelDetails.edge - 5);
+      const edge = levelDetails?.edge;
+      if (edge !== void 0 && edge !== null) {
+        const offset = getLiveOffsetSeconds();
+        video.currentTime = Math.max(0, edge - offset);
+      }
+    }
+  };
+  const getLiveEdgeTime = () => {
+    const video = videoRef.current;
+    if (!video || video.seekable.length === 0) return null;
+    const end = video.seekable.end(video.seekable.length - 1);
+    if (!Number.isFinite(end)) return null;
+    const offset = getLiveOffsetSeconds();
+    return Math.max(0, end - offset);
+  };
+  const getWaitingTimeoutMs = () => {
+    const targetDuration = targetDurationRef.current;
+    if (targetDuration && Number.isFinite(targetDuration)) {
+      return Math.max(2e4, targetDuration * 1e3 * 0.5);
+    }
+    return 3e4;
+  };
+  const getManifestStaleTimeoutMs = () => {
+    const targetDuration = targetDurationRef.current;
+    if (targetDuration && Number.isFinite(targetDuration)) {
+      return Math.max(targetDuration * 2e3, 12e4);
+    }
+    return 12e4;
+  };
+  const isManifestUrl = (url) => url.includes(".m3u8");
+  const getBufferGap = (video) => {
+    if (!video.buffered.length) return null;
+    const end = video.buffered.end(video.buffered.length - 1);
+    if (!Number.isFinite(end)) return null;
+    return Math.max(0, end - video.currentTime);
+  };
+  const getBufferThresholds = () => {
+    const targetDuration = targetDurationRef.current ?? 60;
+    return {
+      low: Math.max(5, targetDuration * 0.1),
+      mid: Math.max(10, targetDuration * 0.2),
+      high: Math.max(18, targetDuration * 0.35)
+    };
+  };
+  const shouldAttemptRecovery = () => {
+    if (!isR2StreamRef.current) return true;
+    if (!lastManifestLoadRef.current) return false;
+    const now2 = Date.now();
+    const timeoutMs = getManifestStaleTimeoutMs();
+    const manifestAge = now2 - lastManifestLoadRef.current;
+    return manifestAge > timeoutMs;
+  };
+  const getDesiredLivePosition = () => {
+    const hls = hlsRef.current;
+    if (hls?.liveSyncPosition !== null && hls?.liveSyncPosition !== void 0) {
+      if (Number.isFinite(hls.liveSyncPosition)) {
+        return hls.liveSyncPosition;
+      }
+    }
+    if (hls?.levels?.[hls.currentLevel]?.details) {
+      const levelDetails = hls.levels[hls.currentLevel].details;
+      const edge = levelDetails?.edge;
+      if (edge !== void 0 && edge !== null) {
+        return Math.max(0, edge - getLiveOffsetSeconds());
+      }
+    }
+    return getLiveEdgeTime();
+  };
+  const schedulePlayRetry = (reason) => {
+    if (playRetryTimerRef.current) return;
+    if (playRetryCountRef.current >= 3) return;
+    playRetryCountRef.current += 1;
+    playRetryTimerRef.current = setTimeout(() => {
+      playRetryTimerRef.current = null;
+      attemptPlay();
+    }, 1e3);
+  };
+  const attemptPlay = (reason) => {
+    const video = videoRef.current;
+    if (!video || !shouldPlayRef.current) return;
+    if (!video.paused || video.seeking) return;
+    if (video.readyState < 2) return;
+    video.play().then(() => {
+      playRetryCountRef.current = 0;
+    }).catch((err) => {
+      if (err?.name === "AbortError") {
+        schedulePlayRetry();
+        return;
       }
+      console.error("[HLS] Play failed:", err);
+    });
+  };
+  const handleCanPlay = () => {
+    attemptPlay();
+  };
+  const handleVisibilityChange = () => {
+    if (typeof document === "undefined") return;
+    if (document.hidden) {
+      lastHiddenAtRef.current = Date.now();
+      return;
+    }
+    const lastHiddenAt = lastHiddenAtRef.current;
+    lastHiddenAtRef.current = null;
+    if (!lastHiddenAt) return;
+    if (Date.now() - lastHiddenAt < 3e4) return;
+    refreshLiveStream("tab visible after idle");
+    attemptPlay();
+  };
+  const startManifestWatchdog = () => {
+    if (manifestWatchdogRef.current) return;
+    if (!isR2StreamRef.current) return;
+    manifestWatchdogRef.current = setInterval(() => {
+      if (staleManifestTriggeredRef.current) return;
+      if (!lastManifestLoadRef.current) return;
+      const now2 = Date.now();
+      const staleTimeoutMs = getManifestStaleTimeoutMs();
+      if (now2 - lastManifestLoadRef.current < staleTimeoutMs) return;
+      if (now2 - lastLiveReloadRef.current < LIVE_RELOAD_MIN_INTERVAL_MS) return;
+      lastLiveReloadRef.current = now2;
+      softRestart("manifest stale watchdog");
+    }, 15e3);
+  };
+  const scheduleManifestRetry = (reason) => {
+    if (manifestRetryTimerRef.current) return;
+    const delay2 = manifestRetryDelayRef.current;
+    manifestRetryTimerRef.current = setTimeout(() => {
+      manifestRetryTimerRef.current = null;
+      softRestart(reason);
+      manifestRetryDelayRef.current = Math.min(manifestRetryDelayRef.current + 5e3, 3e4);
+    }, delay2);
+  };
+  const resetManifestRetry = () => {
+    if (manifestRetryTimerRef.current) {
+      clearTimeout(manifestRetryTimerRef.current);
+      manifestRetryTimerRef.current = null;
+    }
+    manifestRetryDelayRef.current = 5e3;
+  };
+  const markStaleStream = (reason) => {
+    startStaleManifestPolling(reason);
+  };
+  const setPlaybackRate = (rate) => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (!Number.isFinite(rate)) return;
+    if (Math.abs(video.playbackRate - rate) < 0.01) return;
+    video.playbackRate = rate;
+  };
+  const startPlaybackGovernor = () => {
+    if (playbackRateIntervalRef.current) return;
+    playbackRateIntervalRef.current = setInterval(() => {
+      const video = videoRef.current;
+      if (!video || video.paused || video.seeking) return;
+      if (!isR2StreamRef.current) return;
+      const bufferGap = getBufferGap(video);
+      if (bufferGap === null) return;
+      const { low, mid, high } = getBufferThresholds();
+      let desiredRate = 1;
+      if (bufferGap < low) {
+        desiredRate = 0.8;
+      } else if (bufferGap < mid) {
+        desiredRate = 0.9;
+      } else if (bufferGap < high) {
+        desiredRate = 0.95;
+      }
+      setPlaybackRate(desiredRate);
+    }, 2e3);
+  };
+  const buildCacheBustedUrl = (url) => {
+    if (typeof window === "undefined") {
+      return url;
+    }
+    try {
+      const parsed = new URL(url, window.location.origin);
+      parsed.searchParams.set("ts", Date.now().toString());
+      return parsed.toString();
+    } catch {
+      const separator = url.includes("?") ? "&" : "?";
+      return `${url}${separator}ts=${Date.now()}`;
+    }
+  };
+  const refreshLiveStream = (reason) => {
+    if (!isR2StreamRef.current) return;
+    const now2 = Date.now();
+    if (now2 - lastLiveReloadRef.current < LIVE_RELOAD_MIN_INTERVAL_MS) {
+      return;
+    }
+    lastLiveReloadRef.current = now2;
+    const video = videoRef.current;
+    const hls = hlsRef.current;
+    if (hls) {
+      console.log(`[HLS] Live reload (${reason})`);
+      softRestart(reason);
+      return;
+    }
+    if (video && nativeStreamUrlRef.current) {
+      console.log(`[HLS] Native live reload (${reason})`);
+      const refreshedUrl = buildCacheBustedUrl(nativeStreamUrlRef.current);
+      video.src = refreshedUrl;
+      video.load();
+      const edgeTime = getLiveEdgeTime();
+      if (edgeTime !== null) {
+        video.currentTime = edgeTime;
+      }
+      attemptPlay();
     }
   };
   const softRestart = (reason) => {
+    if (staleManifestTriggeredRef.current) {
+      debugLog("[HLS] Skip soft restart while manifest is stale", reason);
+      return;
+    }
     console.warn(`[HLS] Soft restart: ${reason}`);
     const hls = hlsRef.current;
     if (!hls) return;
     try {
+      const video = videoRef.current;
+      const isR2Stream = isR2StreamRef.current;
+      const desiredPosition = isR2Stream ? getDesiredLivePosition() : null;
       hls.stopLoad();
-      hls.startLoad(-1);
-      seekToLiveEdge();
+      if (desiredPosition !== null && Number.isFinite(desiredPosition)) {
+        hls.startLoad(desiredPosition);
+        if (video) {
+          video.currentTime = desiredPosition;
+        }
+      } else {
+        hls.startLoad(-1);
+        if (!isR2Stream) {
+          seekToLiveEdge();
+        }
+      }
       softRestartCountRef.current++;
       if (softRestartCountRef.current >= 5) {
         hardRestart(`${reason} (escalated after ${softRestartCountRef.current} soft restarts)`);
@@ -11052,11 +11740,16 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
     }
   };
   const hardRestart = (reason) => {
+    if (staleManifestTriggeredRef.current) {
+      debugLog("[HLS] Skip hard restart while manifest is stale", reason);
+      return;
+    }
     console.warn(`[HLS] Hard restart: ${reason}`);
     cleanupFailedUrls();
     const failure = failedUrls.get(src);
     const failureCount = failure ? failure.count : 0;
-    if (failureCount >= MAX_FAILURES_PER_URL) {
+    const isR2Stream = isR2StreamRef.current;
+    if (!isR2Stream && failureCount >= MAX_FAILURES_PER_URL) {
       console.error(`[HLS] URL has failed ${failureCount} times. Marking as permanently failed: ${src}`);
       failedUrls.set(src, {
         count: failureCount,
@@ -11069,11 +11762,15 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
       }
       return;
     }
-    failedUrls.set(src, {
-      count: failureCount + 1,
-      timestamp: Date.now(),
-      permanentlyFailed: false
-    });
+    if (!isR2Stream) {
+      failedUrls.set(src, {
+        count: failureCount + 1,
+        timestamp: Date.now(),
+        permanentlyFailed: false
+      });
+    } else if (failedUrls.has(src)) {
+      failedUrls.delete(src);
+    }
     cleanup();
     setRestartKey((k) => k + 1);
     softRestartCountRef.current = 0;
@@ -11083,12 +11780,49 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
       }
     }
   };
+  const handleLoadedMetadata = () => {
+    if (!isR2StreamRef.current) return;
+    const video = videoRef.current;
+    if (!video) return;
+    const edgeTime = getLiveEdgeTime();
+    if (edgeTime !== null) {
+      video.currentTime = edgeTime;
+    }
+  };
+  const handleEnded = () => {
+    if (isNativeHlsRef.current) {
+      refreshLiveStream("ended");
+      return;
+    }
+    if (isR2StreamRef.current) {
+      softRestart("ended");
+    }
+  };
   const handleWaiting = () => {
-    if (isNativeHlsRef.current) return;
-    console.log("[HLS] Video waiting (buffer underrun)");
     if (waitingTimerRef.current) {
       clearTimeout(waitingTimerRef.current);
     }
+    if (isNativeHlsRef.current) {
+      if (!isR2StreamRef.current) return;
+      waitingTimerRef.current = setTimeout(() => {
+        refreshLiveStream("native waiting timeout");
+      }, getWaitingTimeoutMs());
+      return;
+    }
+    console.log("[HLS] Video waiting (buffer underrun)");
+    if (isR2StreamRef.current) {
+      waitingTimerRef.current = setTimeout(() => {
+        const video = videoRef.current;
+        if (video && video.readyState < 3) {
+          if (shouldAttemptRecovery()) {
+            softRestart("waiting timeout");
+          } else {
+            handleWaiting();
+          }
+        }
+      }, getWaitingTimeoutMs());
+      return;
+    }
     waitingTimerRef.current = setTimeout(() => {
       const video = videoRef.current;
       if (video && video.readyState < 3) {
@@ -11100,6 +11834,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
     const video = videoRef.current;
     if (!video) return;
     lastTimeUpdateRef.current = video.currentTime;
+    playRetryCountRef.current = 0;
     if (waitingTimerRef.current) {
       clearTimeout(waitingTimerRef.current);
       waitingTimerRef.current = null;
@@ -11110,19 +11845,33 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
     hardRestart("native video error");
   };
   const startStallDetection = () => {
-    if (isNativeHlsRef.current) return;
+    if (isNativeHlsRef.current || isR2StreamRef.current) return;
     stallCheckIntervalRef.current = setInterval(() => {
       const video = videoRef.current;
       if (!video || video.paused || video.ended) return;
+      if (video.readyState < 3 || video.seeking) return;
       const currentTime = video.currentTime;
       const lastTime = lastTimeUpdateRef.current;
+      const bufferGap = getBufferGap(video);
+      const nearBufferEnd = bufferGap !== null && bufferGap < 0.5;
       if (Math.abs(currentTime - lastTime) < 0.1 && video.readyState >= 2) {
+        if (nearBufferEnd && !shouldAttemptRecovery()) {
+          if (noProgressTimerRef.current) {
+            clearTimeout(noProgressTimerRef.current);
+            noProgressTimerRef.current = null;
+          }
+          return;
+        }
         console.warn("[HLS] Playback stall detected");
         if (!noProgressTimerRef.current) {
           noProgressTimerRef.current = setTimeout(() => {
+            if (nearBufferEnd && !shouldAttemptRecovery()) {
+              noProgressTimerRef.current = null;
+              return;
+            }
             softRestart("playback stall");
             noProgressTimerRef.current = null;
-          }, 8e3);
+          }, nearBufferEnd ? getWaitingTimeoutMs() : 12e3);
         }
       } else {
         if (noProgressTimerRef.current) {
@@ -11133,65 +11882,311 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
     }, 7e3);
   };
   React25.useEffect(() => {
-    if (isPermanentlyFailed) {
+    if (!src || !shouldPlay) {
+      cleanup();
+      return;
+    }
+    let isCancelled = false;
+    const r2WorkerDomain = process.env.NEXT_PUBLIC_R2_WORKER_DOMAIN || "https://r2-stream-proxy.optifye-r2.workers.dev";
+    const isR2Stream = isR2WorkerUrl(src, r2WorkerDomain);
+    isR2StreamRef.current = isR2Stream;
+    if (isPermanentlyFailed && !isR2Stream) {
       console.warn(`[HLS] URL is permanently failed, not attempting to load: ${src}`);
       if (onFatalError) {
         onFatalError();
       }
       return;
     }
-    if (!src || !shouldPlay) {
-      cleanup();
-      return;
+    if (isPermanentlyFailed && isR2Stream && failedUrls.has(src)) {
+      failedUrls.delete(src);
     }
     const video = videoRef.current;
     if (!video) return;
-    isNativeHlsRef.current = video.canPlayType("application/vnd.apple.mpegurl") === "probably";
-    if (Hls3__default.default.isSupported() && !isNativeHlsRef.current) {
-      const hls = new Hls3__default.default(HLS_CONFIG);
-      hlsRef.current = hls;
-      hls.attachMedia(video);
-      hls.loadSource(src);
-      hls.on(Hls3__default.default.Events.ERROR, (_, data) => {
-        if (!data.fatal) return;
-        console.error("[HLS] Fatal error:", data.type, data.details);
-        if (data.response?.code === 404) {
-          hardRestart("404 hard restart");
+    if (typeof document !== "undefined") {
+      document.addEventListener("visibilitychange", handleVisibilityChange);
+    }
+    const initialize = async () => {
+      const canUseNative = video.canPlayType("application/vnd.apple.mpegurl") === "probably";
+      isNativeHlsRef.current = canUseNative && !isR2Stream;
+      let authToken = null;
+      if (isR2Stream) {
+        try {
+          const supabase = _getSupabaseInstance();
+          authToken = await getAuthTokenForHls(supabase);
+        } catch (error) {
+          console.warn("[HLS] Unable to retrieve auth token for R2 streaming:", error);
+        }
+      }
+      authTokenRef.current = authToken;
+      if (isCancelled) return;
+      const cameraUuid = isR2Stream ? getR2CameraUuid(src) : null;
+      const proxyPlaylistUrl = proxyEnabled && isR2Stream && proxyBaseUrl && cameraUuid ? `${proxyBaseUrl}/segments/${cameraUuid}/index.m3u8` : null;
+      const resolvedSrc = proxyPlaylistUrl || src;
+      const resolvedHlsSrc = src;
+      const shouldUseProxy = proxyEnabled && isR2Stream && canUseNative && !Hls__default.default.isSupported() && isSafari();
+      if (shouldUseProxy) {
+        if (cameraUuid) {
+          isNativeHlsRef.current = true;
+          nativeStreamUrlRef.current = resolvedSrc;
+          activeStreamUrlRef.current = resolvedSrc;
+          console.log("[HLS] Using proxy playlist for Safari R2 stream");
+          video.src = resolvedSrc;
+          video.addEventListener("waiting", handleWaiting);
+          video.addEventListener("loadedmetadata", handleLoadedMetadata);
+          video.addEventListener("canplay", handleCanPlay);
+          video.addEventListener("ended", handleEnded);
+          video.addEventListener("error", handleNativeError);
+          attemptPlay();
           return;
         }
-        switch (data.type) {
-          case Hls3__default.default.ErrorTypes.NETWORK_ERROR:
-          case Hls3__default.default.ErrorTypes.MEDIA_ERROR:
-            softRestart(`${data.type}: ${data.details}`);
-            break;
-          default:
-            hardRestart(`Fatal ${data.type}: ${data.details}`);
-            break;
-        }
-      });
-      hls.on(Hls3__default.default.Events.MANIFEST_PARSED, () => {
-        if (failedUrls.has(src)) {
-          console.log(`[HLS] Stream loaded successfully, resetting failure count for: ${src}`);
-          failedUrls.delete(src);
+        console.warn("[HLS] Safari R2 proxy unavailable, falling back to direct URL");
+      }
+      if (!proxyEnabled && isR2Stream && canUseNative && !Hls__default.default.isSupported() && isSafari()) {
+        console.warn("[HLS] Safari native R2 streaming requires proxy. Falling back.");
+        if (onFatalError) {
+          onFatalError();
         }
-        video.play().catch((err) => {
-          console.error("[HLS] Play failed:", err);
+        return;
+      }
+      if (Hls__default.default.isSupported() && !isNativeHlsRef.current) {
+        const mergedConfig = {
+          ...HLS_CONFIG,
+          ...hlsConfig,
+          xhrSetup: (xhr, url) => {
+            const usesProxy = isProxyUrl(url);
+            if (isR2WorkerUrl(url, r2WorkerDomain) || usesProxy) {
+              if (isManifestUrl(url)) {
+                xhr.open("GET", buildCacheBustedUrl(url), true);
+              }
+              if (authToken) {
+                xhr.setRequestHeader("Authorization", `Bearer ${authToken}`);
+              }
+            }
+          },
+          fetchSetup: (context, initParams) => {
+            const isR2Url = isR2WorkerUrl(context.url, r2WorkerDomain);
+            const isManifestRequest = isManifestUrl(context.url);
+            const usesProxy = isProxyUrl(context.url);
+            let requestUrl = context.url;
+            if (isR2Url || usesProxy) {
+              if (authToken) {
+                initParams.headers = {
+                  ...initParams.headers,
+                  "Authorization": `Bearer ${authToken}`
+                };
+              }
+              if (isManifestRequest) {
+                requestUrl = buildCacheBustedUrl(context.url);
+                initParams.cache = "no-store";
+              }
+            }
+            return new Request(requestUrl, initParams);
+          }
+        };
+        const hls = new Hls__default.default(mergedConfig);
+        hlsRef.current = hls;
+        hls.attachMedia(video);
+        hls.loadSource(resolvedHlsSrc);
+        activeStreamUrlRef.current = resolvedHlsSrc;
+        hls.on(Hls__default.default.Events.ERROR, (_, data) => {
+          debugLog("[HLS] Error", {
+            type: data.type,
+            details: data.details,
+            fatal: data.fatal,
+            response: data.response?.code,
+            frag: data.frag?.sn
+          });
+          if (data.type === Hls__default.default.ErrorTypes.MEDIA_ERROR && data.details === Hls__default.default.ErrorDetails.BUFFER_STALLED_ERROR) {
+            debugLog("[HLS] Buffer stalled, waiting for next segment");
+            attemptPlay();
+            return;
+          }
+          if (data.type === Hls__default.default.ErrorTypes.NETWORK_ERROR && (data.details === Hls__default.default.ErrorDetails.FRAG_LOAD_TIMEOUT || data.details === Hls__default.default.ErrorDetails.FRAG_LOAD_ERROR)) {
+            const fragSn = data.frag?.sn;
+            const windowStart = lastWindowStartSnRef.current;
+            const windowEnd = lastWindowEndSnRef.current;
+            if (typeof fragSn === "number" && typeof windowStart === "number" && fragSn < windowStart) {
+              softRestart("frag fell out of window");
+              return;
+            }
+            if (typeof fragSn === "number" && typeof windowEnd === "number" && fragSn > windowEnd) {
+              softRestart("frag ahead of window");
+              return;
+            }
+            const now2 = Date.now();
+            if (lastFragTimeoutSnRef.current === fragSn && lastFragTimeoutAtRef.current) {
+              if (now2 - lastFragTimeoutAtRef.current < 12e4) {
+                fragTimeoutCountRef.current += 1;
+              } else {
+                fragTimeoutCountRef.current = 1;
+              }
+            } else {
+              fragTimeoutCountRef.current = 1;
+              lastFragTimeoutSnRef.current = fragSn ?? null;
+            }
+            lastFragTimeoutAtRef.current = now2;
+            if (fragTimeoutCountRef.current >= 2) {
+              softRestart("frag load timeout");
+            }
+            return;
+          }
+          if (data.type === Hls__default.default.ErrorTypes.NETWORK_ERROR && (data.details === Hls__default.default.ErrorDetails.MANIFEST_LOAD_TIMEOUT || data.details === Hls__default.default.ErrorDetails.MANIFEST_LOAD_ERROR)) {
+            scheduleManifestRetry("manifest load timeout");
+            return;
+          }
+          if (!data.fatal) return;
+          console.error("[HLS] Fatal error:", data.type, data.details);
+          if (data.response?.code === 404) {
+            if (data.details === Hls__default.default.ErrorDetails.MANIFEST_LOAD_ERROR || data.details === Hls__default.default.ErrorDetails.LEVEL_LOAD_ERROR) {
+              if (isR2StreamRef.current) {
+                scheduleManifestRetry("manifest 404");
+                return;
+              }
+              hardRestart("404 manifest hard restart");
+              return;
+            }
+            softRestart("frag 404");
+            return;
+          }
+          switch (data.type) {
+            case Hls__default.default.ErrorTypes.NETWORK_ERROR:
+              if (isR2StreamRef.current && data.details === Hls__default.default.ErrorDetails.MANIFEST_LOAD_TIMEOUT) {
+                softRestart("manifest load timeout");
+                break;
+              }
+              softRestart(`${data.type}: ${data.details}`);
+              break;
+            case Hls__default.default.ErrorTypes.MEDIA_ERROR:
+              softRestart(`${data.type}: ${data.details}`);
+              break;
+            default:
+              hardRestart(`Fatal ${data.type}: ${data.details}`);
+              break;
+          }
         });
-      });
-      video.addEventListener("waiting", handleWaiting);
-      video.addEventListener("timeupdate", handleTimeUpdate);
-      startStallDetection();
-    } else if (isNativeHlsRef.current) {
-      console.log("[HLS] Using native HLS");
-      video.src = src;
-      video.addEventListener("error", handleNativeError);
-      video.play().catch((err) => {
-        console.error("[HLS] Native play failed:", err);
-      });
-    } else {
-      console.error("[HLS] HLS not supported");
-    }
-    return cleanup;
+        hls.on(Hls__default.default.Events.MANIFEST_PARSED, () => {
+          if (failedUrls.has(src)) {
+            console.log(`[HLS] Stream loaded successfully, resetting failure count for: ${src}`);
+            failedUrls.delete(src);
+          }
+          if (isR2Stream) {
+            seekToLiveEdge();
+          }
+          attemptPlay();
+        });
+        hls.on(Hls__default.default.Events.LEVEL_LOADED, (_event, data) => {
+          if (!data?.details) return;
+          const details = data.details;
+          if (isR2Stream) {
+            lastManifestLoadRef.current = Date.now();
+            resetManifestRetry();
+            if (details.endList) {
+              details.endList = false;
+            }
+            details.live = true;
+            details.type = "LIVE";
+            if (details.targetduration && Number.isFinite(details.targetduration)) {
+              targetDurationRef.current = details.targetduration;
+            }
+            if (typeof details.startSN === "number") {
+              lastWindowStartSnRef.current = details.startSN;
+            }
+            if (typeof details.endSN === "number") {
+              lastWindowEndSnRef.current = Math.max(details.endSN - 1, details.startSN ?? details.endSN);
+            }
+            if (Array.isArray(details.fragments) && details.fragments.length > 0) {
+              const firstSn = details.fragments[0]?.sn;
+              const lastSn = details.fragments[details.fragments.length - 1]?.sn;
+              if (typeof firstSn === "number") {
+                lastWindowStartSnRef.current = firstSn;
+              }
+              if (typeof lastSn === "number") {
+                lastWindowEndSnRef.current = lastSn;
+              }
+            }
+          }
+          if (maxManifestAgeMs > 0 && !details.endList) {
+            const now2 = Date.now();
+            const fragments = Array.isArray(details.fragments) ? details.fragments : [];
+            const lastFragment = fragments.length ? fragments[fragments.length - 1] : void 0;
+            const programDateTimeMs = getProgramDateTimeMs(lastFragment?.programDateTime);
+            if (programDateTimeMs && now2 - programDateTimeMs > maxManifestAgeMs) {
+              markStaleStream(`segment age ${Math.round((now2 - programDateTimeMs) / 1e3)}s`);
+              return;
+            }
+            const endSn = typeof details.endSN === "number" ? details.endSN : lastFragment?.sn;
+            if (typeof endSn === "number") {
+              if (lastManifestEndSnRef.current === endSn) {
+                const lastUpdatedAt = lastManifestEndSnUpdatedAtRef.current;
+                if (lastUpdatedAt && now2 - lastUpdatedAt > maxManifestAgeMs) {
+                  markStaleStream(`sequence stalled at ${endSn}`);
+                  return;
+                }
+              } else {
+                lastManifestEndSnRef.current = endSn;
+                lastManifestEndSnUpdatedAtRef.current = now2;
+              }
+            }
+          }
+          debugLog("[HLS] Level loaded", {
+            targetduration: details.targetduration,
+            edge: details.edge,
+            fragments: data.details?.fragments?.length
+          });
+          if (isR2Stream && !forcedLiveStartRef.current) {
+            forcedLiveStartRef.current = true;
+            seekToLiveEdge();
+          }
+        });
+        hls.on(Hls__default.default.Events.MANIFEST_LOADED, () => {
+          if (!isR2Stream) return;
+          lastManifestLoadRef.current = Date.now();
+          resetManifestRetry();
+        });
+        hls.on(Hls__default.default.Events.FRAG_LOADED, (_event, data) => {
+          if (!isR2Stream) return;
+          lastFragLoadRef.current = Date.now();
+          if (typeof data?.frag?.sn === "number") {
+            lastFragSnRef.current = data.frag.sn;
+          }
+        });
+        hls.on(Hls__default.default.Events.FRAG_BUFFERED, () => {
+          attemptPlay();
+        });
+        video.addEventListener("waiting", handleWaiting);
+        video.addEventListener("timeupdate", handleTimeUpdate);
+        video.addEventListener("loadedmetadata", handleLoadedMetadata);
+        video.addEventListener("canplay", handleCanPlay);
+        video.addEventListener("ended", handleEnded);
+        startStallDetection();
+        startPlaybackGovernor();
+        startManifestWatchdog();
+        startManifestWatchdog();
+        return;
+      }
+      if (canUseNative) {
+        isNativeHlsRef.current = true;
+        console.log("[HLS] Using native HLS");
+        video.src = resolvedSrc;
+        nativeStreamUrlRef.current = resolvedSrc;
+        activeStreamUrlRef.current = resolvedSrc;
+        video.addEventListener("waiting", handleWaiting);
+        video.addEventListener("loadedmetadata", handleLoadedMetadata);
+        video.addEventListener("canplay", handleCanPlay);
+        video.addEventListener("ended", handleEnded);
+        video.addEventListener("error", handleNativeError);
+        startPlaybackGovernor();
+        startManifestWatchdog();
+        attemptPlay();
+      } else {
+        console.error("[HLS] HLS not supported");
+      }
+    };
+    initialize();
+    return () => {
+      isCancelled = true;
+      cleanup();
+    };
   }, [src, shouldPlay, restartKey, onFatalError, isPermanentlyFailed]);
   return {
     restartKey,
@@ -11199,11 +12194,11 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
   };
 }
 function useHlsStreamWithCropping(videoRef, canvasRef, options) {
-  const { src, shouldPlay, cropping, canvasFps = 30, useRAF = true, onFatalError } = options;
+  const { src, shouldPlay, cropping, canvasFps = 30, useRAF = true, onFatalError, hlsConfig } = options;
   const animationFrameRef = React25.useRef(null);
   const intervalRef = React25.useRef(null);
   const isDrawingRef = React25.useRef(false);
-  const hlsState = useHlsStream(videoRef, { src, shouldPlay, onFatalError });
+  const hlsState = useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig });
   const calculateCropRect = React25.useCallback((video, cropping2) => {
     const videoWidth = video.videoWidth;
     const videoHeight = video.videoHeight;
@@ -11937,6 +12932,95 @@ var useWorkspaceDisplayNamesMap = (workspaceIds, lineId, companyId) => {
     refetch: fetchDisplayNames
   };
 };
+var useWorkspaceVideoStreams = (workspaces) => {
+  const workspaceIdsKey = React25.useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const workspace of workspaces) {
+      if (workspace.workspace_uuid) {
+        ids.add(workspace.workspace_uuid);
+      }
+    }
+    return Array.from(ids).sort().join(",");
+  }, [workspaces]);
+  const lineIdsKey = React25.useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const workspace of workspaces) {
+      if (workspace.line_id) {
+        ids.add(workspace.line_id);
+      }
+    }
+    return Array.from(ids).sort().join(",");
+  }, [workspaces]);
+  const requestKey = React25.useMemo(() => {
+    if (workspaceIdsKey) {
+      return `workspaces:${workspaceIdsKey}`;
+    }
+    if (lineIdsKey) {
+      return `lines:${lineIdsKey}`;
+    }
+    return "";
+  }, [workspaceIdsKey, lineIdsKey]);
+  const workspaceIds = React25.useMemo(
+    () => workspaceIdsKey ? workspaceIdsKey.split(",") : [],
+    [workspaceIdsKey]
+  );
+  const lineIds = React25.useMemo(
+    () => lineIdsKey ? lineIdsKey.split(",") : [],
+    [lineIdsKey]
+  );
+  const [state, setState] = React25.useState(() => ({
+    streamsByWorkspaceId: {},
+    isLoading: Boolean(requestKey),
+    error: null
+  }));
+  const lastKeyRef = React25.useRef(requestKey);
+  React25.useEffect(() => {
+    lastKeyRef.current = requestKey;
+    if (!workspaceIds.length && !lineIds.length) {
+      setState({
+        streamsByWorkspaceId: {},
+        isLoading: false,
+        error: null
+      });
+      return;
+    }
+    let isCancelled = false;
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    const fetchStreams = async () => {
+      try {
+        const streams = await workspaceService.getWorkspaceVideoStreams({
+          workspaceIds,
+          lineIds
+        });
+        if (!isCancelled) {
+          setState({
+            streamsByWorkspaceId: streams,
+            isLoading: false,
+            error: null
+          });
+        }
+      } catch (error) {
+        if (!isCancelled) {
+          setState((prev) => ({
+            ...prev,
+            isLoading: false,
+            error: error instanceof Error ? error.message : "Failed to load video streams"
+          }));
+        }
+      }
+    };
+    fetchStreams();
+    return () => {
+      isCancelled = true;
+    };
+  }, [workspaceIdsKey, lineIdsKey]);
+  const isLoading = state.isLoading || lastKeyRef.current !== requestKey;
+  return {
+    streamsByWorkspaceId: state.streamsByWorkspaceId,
+    isLoading,
+    error: state.error
+  };
+};
 var useActiveBreaks = (lineIds) => {
   const [activeBreaks, setActiveBreaks] = React25.useState([]);
   const [isLoading, setIsLoading] = React25.useState(true);
@@ -17469,24 +18553,6 @@ var createThrottledReload = (interval = 5e3, maxReloads = 3) => {
 };
 var throttledReloadDashboard = createThrottledReload(5e3, 3);
 
-// src/lib/utils/browser.ts
-function isSafari() {
-  if (typeof window === "undefined") return false;
-  const ua = window.navigator.userAgent;
-  const isSafariUA = /^((?!chrome|android).)*safari/i.test(ua);
-  const isIOS = /iPad|iPhone|iPod/.test(ua) && !window.MSStream;
-  return isSafariUA || isIOS;
-}
-function getBrowserName() {
-  if (typeof window === "undefined") return "server";
-  const ua = window.navigator.userAgent;
-  if (/chrome/i.test(ua) && !/edge/i.test(ua)) return "chrome";
-  if (/safari/i.test(ua) && !/chrome/i.test(ua)) return "safari";
-  if (/firefox/i.test(ua)) return "firefox";
-  if (/edge/i.test(ua)) return "edge";
-  return "unknown";
-}
-
 // src/lib/utils/index.ts
 var formatIdleTime = (idleTimeInSeconds) => {
   if (!idleTimeInSeconds || idleTimeInSeconds <= 0) {
@@ -17505,83 +18571,29 @@ var formatIdleTime = (idleTimeInSeconds) => {
   parts.push(`${seconds}s`);
   return parts.join(" ");
 };
-var createSupabaseClient = (url, key) => supabaseJs.createClient(url, key, {
-  auth: {
-    autoRefreshToken: true,
-    persistSession: true,
-    detectSessionInUrl: true,
-    flowType: "pkce",
-    // Enable debug logging in development
-    debug: process.env.NODE_ENV === "development"
-  },
-  db: {
-    schema: "public"
-    // Default schema, we'll use .schema('ai') in queries
-  },
-  global: {
-    headers: {
-      "x-application-name": "optifye-dashboard"
-    },
-    // Add global fetch timeout (5 minutes)
-    fetch: async (url2, options = {}) => {
-      const controller = new AbortController();
-      const timeoutId = setTimeout(() => controller.abort(), 3e5);
-      try {
-        const response = await fetch(url2, {
-          ...options,
-          signal: controller.signal
-        });
-        clearTimeout(timeoutId);
-        return response;
-      } catch (error) {
-        clearTimeout(timeoutId);
-        throw error;
-      }
-    }
+var cachedClient2 = null;
+var cachedConfig2 = null;
+var getCachedClient = (url, key) => {
+  if (cachedClient2 && cachedConfig2?.url === url && cachedConfig2?.key === key) {
+    return cachedClient2;
   }
-});
-var getAnonClient = () => {
-  const url = process.env.NEXT_PUBLIC_SUPABASE_URL || "";
-  const key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || "";
-  if (!url || !key) {
-    console.warn("[dashboard-core] Missing supabase env variables");
-  }
-  return supabaseJs.createClient(url, key, {
-    auth: {
-      autoRefreshToken: true,
-      persistSession: true,
-      detectSessionInUrl: true,
-      flowType: "pkce",
-      debug: process.env.NODE_ENV === "development"
-    },
-    global: {
-      headers: {
-        "x-application-name": "optifye-dashboard"
-      },
-      // Add global fetch timeout (5 minutes)
-      fetch: async (url2, options = {}) => {
-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), 3e5);
-        try {
-          const response = await fetch(url2, {
-            ...options,
-            signal: controller.signal
-          });
-          clearTimeout(timeoutId);
-          return response;
-        } catch (error) {
-          clearTimeout(timeoutId);
-          throw error;
-        }
-      }
-    }
-  });
+  cachedClient2 = createSupabaseClient(url, key);
+  cachedConfig2 = { url, key };
+  _setSupabaseInstance(cachedClient2);
+  return cachedClient2;
 };
-
-// src/lib/supabaseClient.ts
 function useSupabaseClient() {
   const { supabaseUrl, supabaseKey } = useDashboardConfig();
-  const supabase = React25.useMemo(() => createSupabaseClient(supabaseUrl, supabaseKey), [supabaseUrl, supabaseKey]);
+  const providerClient = useOptionalSupabase();
+  const supabase = React25.useMemo(() => {
+    if (providerClient) {
+      return providerClient;
+    }
+    if (!supabaseUrl || !supabaseKey) {
+      throw new Error("Supabase configuration missing in DashboardConfig");
+    }
+    return getCachedClient(supabaseUrl, supabaseKey);
+  }, [providerClient, supabaseUrl, supabaseKey]);
   return supabase;
 }
 var LayoutGroupContext = React25.createContext({});
@@ -27662,22 +28674,14 @@ var VideoCard = React25__namespace.default.memo(({
   const videoRef = React25.useRef(null);
   const canvasRef = React25.useRef(null);
   const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
-  if (cropping) {
-    useHlsStreamWithCropping(videoRef, canvasRef, {
-      src: hlsUrl,
-      shouldPlay,
-      cropping,
-      canvasFps,
-      useRAF,
-      onFatalError: onFatalError ?? (() => throttledReloadDashboard())
-    });
-  } else {
-    useHlsStream(videoRef, {
-      src: hlsUrl,
-      shouldPlay,
-      onFatalError: onFatalError ?? (() => throttledReloadDashboard())
-    });
-  }
+  useHlsStreamWithCropping(videoRef, canvasRef, {
+    src: hlsUrl,
+    shouldPlay,
+    cropping,
+    canvasFps,
+    useRAF,
+    onFatalError: onFatalError ?? (() => throttledReloadDashboard())
+  });
   const workspaceDisplayName = displayName || getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
   const efficiencyColor = getEfficiencyColor(workspace.efficiency, effectiveLegend);
   const efficiencyOverlayClass = efficiencyColor === "green" ? "bg-[#00D654]/25" : efficiencyColor === "yellow" ? "bg-[#FFD700]/30" : "bg-[#FF2D0A]/30";
@@ -27812,6 +28816,8 @@ var VideoGridView = React25__namespace.default.memo(({
   className = "",
   legend,
   videoSources = {},
+  videoStreamsByWorkspaceId,
+  videoStreamsLoading = false,
   displayNames = {},
   onWorkspaceHover,
   onWorkspaceHoverEnd
@@ -27823,6 +28829,15 @@ var VideoGridView = React25__namespace.default.memo(({
   const [gridRows, setGridRows] = React25.useState(1);
   const [visibleWorkspaces, setVisibleWorkspaces] = React25.useState(/* @__PURE__ */ new Set());
   const [failedStreams, setFailedStreams] = React25.useState(/* @__PURE__ */ new Set());
+  const [r2FallbackWorkspaces, setR2FallbackWorkspaces] = React25.useState(/* @__PURE__ */ new Set());
+  const workspaceIdsKey = React25.useMemo(() => {
+    const ids = workspaces.map((ws) => ws.workspace_uuid || ws.workspace_name);
+    return ids.sort().join(",");
+  }, [workspaces]);
+  React25.useEffect(() => {
+    setFailedStreams(/* @__PURE__ */ new Set());
+    setR2FallbackWorkspaces(/* @__PURE__ */ new Set());
+  }, [workspaceIdsKey]);
   const videoConfig = useVideoConfig();
   const dashboardConfig = useDashboardConfig();
   const { cropping, canvasConfig, hlsUrls } = videoConfig;
@@ -27842,13 +28857,16 @@ var VideoGridView = React25__namespace.default.memo(({
     }
     return mergedVideoSources.workspaceHlsUrls[wsName] || mergedVideoSources.defaultHlsUrl;
   }, [mergedVideoSources]);
-  const getWorkspaceCropping = React25.useCallback((workspaceName) => {
+  const getWorkspaceCropping = React25.useCallback((workspaceId, workspaceName) => {
+    if (videoStreamsByWorkspaceId) {
+      return videoStreamsByWorkspaceId[workspaceId]?.crop ?? void 0;
+    }
     if (!cropping) return void 0;
     if (cropping.workspaceOverrides?.[workspaceName]) {
       return cropping.workspaceOverrides[workspaceName];
     }
     return cropping.default;
-  }, [cropping]);
+  }, [cropping, videoStreamsByWorkspaceId]);
   const filteredWorkspaces = React25.useMemo(() => {
     return selectedLine === 1 ? workspaces.filter((w) => {
       if (w.workspace_name === "WS5-5") return true;
@@ -27870,6 +28888,7 @@ var VideoGridView = React25__namespace.default.memo(({
       }
     }) : workspaces;
   }, [workspaces, selectedLine]);
+  const streamsReady = !videoStreamsLoading;
   const calculateOptimalGrid = React25.useCallback(() => {
     if (!containerRef.current) return;
     const containerPadding = 16;
@@ -27973,12 +28992,31 @@ var VideoGridView = React25__namespace.default.memo(({
     const navParams = getWorkspaceNavigationParams(workspaceId, displayName, workspace.line_id);
     router$1.push(`/workspace/${workspaceId}${navParams}`);
   }, [router$1, dashboardConfig]);
-  const handleStreamError = React25.useCallback((workspaceId) => {
+  const handleStreamError = React25.useCallback((workspaceId, options) => {
+    const isR2Stream = options?.isR2Stream ?? false;
+    const hasFallback = Boolean(options?.fallbackUrl);
+    if (isR2Stream && hasFallback) {
+      console.warn(`[VideoGridView] R2 stream failed for workspace: ${workspaceId}. Falling back to media config.`);
+      setR2FallbackWorkspaces((prev) => new Set(prev).add(workspaceId));
+      setFailedStreams((prev) => {
+        const next = new Set(prev);
+        next.delete(workspaceId);
+        return next;
+      });
+      trackCoreEvent("Video Stream Error", {
+        workspace_id: workspaceId,
+        view_type: "video_grid",
+        stream_source: "r2",
+        fallback: "media_config"
+      });
+      return;
+    }
     console.error(`[VideoGridView] Stream failed for workspace: ${workspaceId}`);
     setFailedStreams((prev) => new Set(prev).add(workspaceId));
     trackCoreEvent("Video Stream Error", {
       workspace_id: workspaceId,
-      view_type: "video_grid"
+      view_type: "video_grid",
+      stream_source: isR2Stream ? "r2" : "media_config"
     });
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative overflow-hidden h-full w-full ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "h-full w-full p-3 sm:p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -27990,57 +29028,92 @@ var VideoGridView = React25__namespace.default.memo(({
         gridTemplateRows: `repeat(${gridRows}, 1fr)`,
         gridAutoFlow: "row"
       },
-      children: filteredWorkspaces.sort((a, b) => {
-        if (a.line_id !== b.line_id) {
-          return (a.line_id || "").localeCompare(b.line_id || "");
-        }
-        const aMatch = a.workspace_name.match(/WS(\d+)/);
-        const bMatch = b.workspace_name.match(/WS(\d+)/);
-        if (aMatch && bMatch) {
-          const aNum = parseInt(aMatch[1]);
-          const bNum = parseInt(bMatch[1]);
-          return aNum - bNum;
-        }
-        return a.workspace_name.localeCompare(b.workspace_name);
-      }).map((workspace) => {
-        const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
-        const workspaceKey = `${workspace.line_id || "unknown"}-${workspaceId}`;
-        const isVisible = visibleWorkspaces.has(workspaceId);
-        const isVeryLowEfficiency = workspace.show_exclamation ?? (workspace.efficiency < 50 && workspace.efficiency >= 10);
-        const workspaceCropping = getWorkspaceCropping(workspace.workspace_name);
-        return /* @__PURE__ */ jsxRuntime.jsx(
+      children: (() => {
+        const sortedWorkspaces = [...filteredWorkspaces].sort((a, b) => {
+          if (a.line_id !== b.line_id) {
+            return (a.line_id || "").localeCompare(b.line_id || "");
+          }
+          const aMatch = a.workspace_name.match(/WS(\d+)/);
+          const bMatch = b.workspace_name.match(/WS(\d+)/);
+          if (aMatch && bMatch) {
+            const aNum = parseInt(aMatch[1]);
+            const bNum = parseInt(bMatch[1]);
+            return aNum - bNum;
+          }
+          return a.workspace_name.localeCompare(b.workspace_name);
+        });
+        const workspaceCards = sortedWorkspaces.map((workspace) => {
+          const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
+          `${workspace.line_id || "unknown"}-${workspaceId}`;
+          const isVisible = visibleWorkspaces.has(workspaceId);
+          const isVeryLowEfficiency = workspace.show_exclamation ?? (workspace.efficiency < 50 && workspace.efficiency >= 10);
+          const workspaceCropping = getWorkspaceCropping(workspaceId, workspace.workspace_name);
+          const workspaceStream = videoStreamsByWorkspaceId?.[workspaceId];
+          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 hlsUrl = useFallback ? fallbackUrl : r2Url ?? "";
+          const isR2Stream = !useFallback && hasR2Stream;
+          const canAttemptR2 = hasR2Stream && !r2FallbackWorkspaces.has(workspaceId);
+          const shouldPlay = isVisible && Boolean(hlsUrl) && (!failedStreams.has(workspaceId) || canAttemptR2);
+          return {
+            workspace,
+            workspaceId,
+            isVisible,
+            isVeryLowEfficiency,
+            workspaceCropping,
+            fallbackUrl,
+            hlsUrl,
+            isR2Stream,
+            shouldPlay
+          };
+        });
+        const croppedActiveCount = workspaceCards.reduce((count, card) => {
+          if (card.shouldPlay && card.workspaceCropping) {
+            return count + 1;
+          }
+          return count;
+        }, 0);
+        const throttleCropping = croppedActiveCount > 10;
+        const effectiveCanvasFps = throttleCropping ? 10 : canvasConfig?.fps;
+        const effectiveUseRAF = throttleCropping ? false : canvasConfig?.useRAF;
+        return workspaceCards.map((card) => /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            "data-workspace-id": workspaceId,
+            "data-workspace-id": card.workspaceId,
             className: "workspace-card relative w-full h-full",
             children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsxRuntime.jsx(
               VideoCard,
               {
-                workspace,
-                hlsUrl: getWorkspaceHlsUrl(workspace.workspace_name, workspace.line_id),
-                shouldPlay: isVisible && !failedStreams.has(workspaceId),
-                onClick: () => handleWorkspaceClick(workspace),
-                onFatalError: () => handleStreamError(workspaceId),
-                isVeryLowEfficiency,
+                workspace: card.workspace,
+                hlsUrl: card.hlsUrl,
+                shouldPlay: card.shouldPlay,
+                onClick: () => handleWorkspaceClick(card.workspace),
+                onFatalError: () => handleStreamError(card.workspaceId, {
+                  isR2Stream: card.isR2Stream,
+                  fallbackUrl: card.fallbackUrl
+                }),
+                isVeryLowEfficiency: card.isVeryLowEfficiency,
                 legend: effectiveLegend,
-                cropping: workspaceCropping,
-                canvasFps: canvasConfig?.fps,
+                cropping: card.workspaceCropping,
+                canvasFps: effectiveCanvasFps,
                 displayName: (
                   // Create line-aware lookup key: lineId_workspaceName
                   // This ensures correct mapping when multiple lines have same workspace names
-                  displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || // Always pass line_id to fallback to ensure correct mapping per line
-                  getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id)
+                  displayNames[`${card.workspace.line_id}_${card.workspace.workspace_name}`] || // Always pass line_id to fallback to ensure correct mapping per line
+                  getWorkspaceDisplayName(card.workspace.workspace_name, card.workspace.line_id)
                 ),
-                useRAF: canvasConfig?.useRAF,
+                useRAF: effectiveUseRAF,
                 compact: !selectedLine,
-                onMouseEnter: onWorkspaceHover ? () => onWorkspaceHover(workspaceId) : void 0,
-                onMouseLeave: onWorkspaceHoverEnd ? () => onWorkspaceHoverEnd(workspaceId) : void 0
+                onMouseEnter: onWorkspaceHover ? () => onWorkspaceHover(card.workspaceId) : void 0,
+                onMouseLeave: onWorkspaceHoverEnd ? () => onWorkspaceHoverEnd(card.workspaceId) : void 0
               }
             ) })
           },
-          workspaceKey
-        );
-      })
+          card.workspaceId
+        ));
+      })()
     }
   ) }) });
 });
@@ -29676,33 +30749,6 @@ var VideoControls = ({
     }
   );
 };
-
-// src/lib/utils/r2Detection.ts
-function isR2WorkerUrl(url, r2WorkerDomain) {
-  if (!url || !r2WorkerDomain) return false;
-  try {
-    const workerDomain = new URL(r2WorkerDomain).hostname;
-    return url.includes(workerDomain);
-  } catch {
-    return url.includes(r2WorkerDomain.replace(/https?:\/\//, ""));
-  }
-}
-
-// src/lib/services/hlsAuthService.ts
-async function getAuthTokenForHls(supabase) {
-  try {
-    const { data: { session } } = await supabase.auth.getSession();
-    if (!session?.access_token) {
-      console.warn("[HLS Auth] No active session, R2 streaming may fail");
-      return null;
-    }
-    console.log("[HLS Auth] Retrieved token for HLS.js requests");
-    return session.access_token;
-  } catch (error) {
-    console.error("[HLS Auth] Error getting auth token:", error);
-    return null;
-  }
-}
 var ERROR_MAPPING = {
   "networkError": {
     code: 2,
@@ -30087,24 +31133,24 @@ var HlsVideoPlayer = React25.forwardRef(({
           console.log(`[HlsVideoPlayer] Remuxing enabled - using remux playlist URL: ${remuxUrl}`);
           if (safariMode) {
             video.src = remuxUrl;
-          } else if (Hls3__default.default.isSupported()) {
-            const hls = new Hls3__default.default(mergedHlsConfig);
+          } else if (Hls__default.default.isSupported()) {
+            const hls = new Hls__default.default(mergedHlsConfig);
             hlsRef.current = hls;
-            hls.on(Hls3.Events.MANIFEST_PARSED, () => {
+            hls.on(Hls.Events.MANIFEST_PARSED, () => {
               console.log("[HlsVideoPlayer] Remuxed manifest parsed, ready to play");
               setIsReady(true);
               eventCallbacksRef.current.onReady?.(player);
             });
-            hls.on(Hls3.Events.ERROR, (_event, data) => {
+            hls.on(Hls.Events.ERROR, (_event, data) => {
               console.error("[HlsVideoPlayer] HLS.js error (remuxing):", data);
               if (data.fatal) {
                 let errorInfo;
                 switch (data.type) {
-                  case Hls3.ErrorTypes.NETWORK_ERROR:
+                  case Hls.ErrorTypes.NETWORK_ERROR:
                     errorInfo = ERROR_MAPPING.networkError;
                     hls.startLoad();
                     break;
-                  case Hls3.ErrorTypes.MEDIA_ERROR:
+                  case Hls.ErrorTypes.MEDIA_ERROR:
                     errorInfo = ERROR_MAPPING.mediaError;
                     hls.recoverMediaError();
                     break;
@@ -30116,7 +31162,7 @@ var HlsVideoPlayer = React25.forwardRef(({
                 eventCallbacksRef.current.onError?.(player, errorInfo);
               }
             });
-            hls.on(Hls3.Events.FRAG_LOADED, () => {
+            hls.on(Hls.Events.FRAG_LOADED, () => {
               setIsLoading(false);
               eventCallbacksRef.current.onLoadingChange?.(false);
             });
@@ -30138,19 +31184,19 @@ var HlsVideoPlayer = React25.forwardRef(({
             blobUrlRef.current = blobUrl;
             video.src = blobUrl;
           }
-        } else if (Hls3__default.default.isSupported()) {
+        } else if (Hls__default.default.isSupported()) {
           const blob = new Blob([effectiveSrc], { type: "application/vnd.apple.mpegurl" });
           const blobUrl = URL.createObjectURL(blob);
           blobUrlRef.current = blobUrl;
           console.log(`[HlsVideoPlayer] Non-Safari browser (${browserName}) - using HLS.js with blob URL`);
-          const hls = new Hls3__default.default(mergedHlsConfig);
+          const hls = new Hls__default.default(mergedHlsConfig);
           hlsRef.current = hls;
-          hls.on(Hls3.Events.MANIFEST_PARSED, () => {
+          hls.on(Hls.Events.MANIFEST_PARSED, () => {
             console.log("[HlsVideoPlayer] Manifest parsed, ready to play");
             setIsReady(true);
             eventCallbacksRef.current.onReady?.(player);
           });
-          hls.on(Hls3.Events.ERROR, (event, data) => {
+          hls.on(Hls.Events.ERROR, (event, data) => {
             console.error("[HlsVideoPlayer] HLS.js error:", data);
             if (maybeHandleR2Fallback(data)) {
               return;
@@ -30158,17 +31204,17 @@ var HlsVideoPlayer = React25.forwardRef(({
             if (data.fatal) {
               let errorInfo;
               switch (data.type) {
-                case Hls3.ErrorTypes.NETWORK_ERROR:
+                case Hls.ErrorTypes.NETWORK_ERROR:
                   errorInfo = ERROR_MAPPING.networkError;
                   console.log("[HlsVideoPlayer] Attempting to recover from network error");
                   hls.startLoad();
                   break;
-                case Hls3.ErrorTypes.MEDIA_ERROR:
+                case Hls.ErrorTypes.MEDIA_ERROR:
                   errorInfo = ERROR_MAPPING.mediaError;
                   console.log("[HlsVideoPlayer] Attempting to recover from media error");
                   hls.recoverMediaError();
                   break;
-                case Hls3.ErrorTypes.MUX_ERROR:
+                case Hls.ErrorTypes.MUX_ERROR:
                   errorInfo = ERROR_MAPPING.muxError;
                   break;
                 default:
@@ -30179,9 +31225,9 @@ var HlsVideoPlayer = React25.forwardRef(({
               eventCallbacksRef.current.onError?.(player, errorInfo);
             }
           });
-          hls.on(Hls3.Events.FRAG_LOADING, () => {
+          hls.on(Hls.Events.FRAG_LOADING, () => {
           });
-          hls.on(Hls3.Events.FRAG_LOADED, () => {
+          hls.on(Hls.Events.FRAG_LOADED, () => {
             setIsLoading(false);
             eventCallbacksRef.current.onLoadingChange?.(false);
           });
@@ -30193,14 +31239,14 @@ var HlsVideoPlayer = React25.forwardRef(({
           onError?.(player, errorInfo);
         }
       } else {
-        if (Hls3__default.default.isSupported() && !isSafari()) {
-          const hls = new Hls3__default.default(mergedHlsConfig);
+        if (Hls__default.default.isSupported() && !isSafari()) {
+          const hls = new Hls__default.default(mergedHlsConfig);
           hlsRef.current = hls;
-          hls.on(Hls3.Events.MANIFEST_PARSED, () => {
+          hls.on(Hls.Events.MANIFEST_PARSED, () => {
             setIsReady(true);
             eventCallbacksRef.current.onReady?.(player);
           });
-          hls.on(Hls3.Events.ERROR, (event, data) => {
+          hls.on(Hls.Events.ERROR, (event, data) => {
             console.error("[HlsVideoPlayer] HLS.js error:", data);
             if (maybeHandleR2Fallback(data)) {
               return;
@@ -30208,11 +31254,11 @@ var HlsVideoPlayer = React25.forwardRef(({
             if (data.fatal) {
               let errorInfo;
               switch (data.type) {
-                case Hls3.ErrorTypes.NETWORK_ERROR:
+                case Hls.ErrorTypes.NETWORK_ERROR:
                   errorInfo = ERROR_MAPPING.networkError;
                   hls.startLoad();
                   break;
-                case Hls3.ErrorTypes.MEDIA_ERROR:
+                case Hls.ErrorTypes.MEDIA_ERROR:
                   errorInfo = ERROR_MAPPING.mediaError;
                   hls.recoverMediaError();
                   break;
@@ -31046,25 +32092,8 @@ var CroppedHlsVideoPlayer = React25.forwardRef(({
 });
 CroppedHlsVideoPlayer.displayName = "CroppedHlsVideoPlayer";
 var CroppedVideoPlayer = CroppedHlsVideoPlayer;
-var getSupabaseClient2 = () => {
-  const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
-  const key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
-  if (!url || !key) {
-    throw new Error("Supabase configuration missing");
-  }
-  return supabaseJs.createClient(url, key);
-};
-var getAuthToken4 = async () => {
-  try {
-    const supabase = getSupabaseClient2();
-    const { data: { session } } = await supabase.auth.getSession();
-    return session?.access_token || null;
-  } catch (error) {
-    console.error("[useWorkspaceCrop] Error getting auth token:", error);
-    return null;
-  }
-};
 function useWorkspaceCrop(workspaceId) {
+  const supabase = useSupabase();
   const [crop, setCrop] = React25.useState(null);
   const [isLoading, setIsLoading] = React25.useState(true);
   const [error, setError] = React25.useState(null);
@@ -31077,7 +32106,8 @@ function useWorkspaceCrop(workspaceId) {
       setIsLoading(true);
       setError(null);
       try {
-        const token = await getAuthToken4();
+        const { data: { session } } = await supabase.auth.getSession();
+        const token = session?.access_token || null;
         if (!token) {
           throw new Error("Authentication required");
         }
@@ -31107,7 +32137,7 @@ function useWorkspaceCrop(workspaceId) {
       }
     };
     fetchCrop();
-  }, [workspaceId]);
+  }, [workspaceId, supabase]);
   return { crop, isLoading, error };
 }
 function Skeleton({ className, ...props }) {
@@ -32096,6 +33126,7 @@ var FileManagerFilters = ({
   const [idleLabelFilter, setIdleLabelFilter] = React25.useState(null);
   const [showIdleLabelFilterModal, setShowIdleLabelFilterModal] = React25.useState(false);
   const timezone = useAppTimezone();
+  const supabase = useSupabase();
   const [clipMetadata, setClipMetadata] = React25.useState({});
   const [loadingCategories, setLoadingCategories] = React25.useState(/* @__PURE__ */ new Set());
   const [categoryPages, setCategoryPages] = React25.useState({});
@@ -32166,7 +33197,7 @@ var FileManagerFilters = ({
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          "Authorization": `Bearer ${await getAuthToken5()}`
+          "Authorization": `Bearer ${await getAuthToken4()}`
         },
         body: JSON.stringify({
           action: "clip-metadata",
@@ -32199,13 +33230,8 @@ var FileManagerFilters = ({
       });
     }
   }, [workspaceId, date, shift]);
-  const getAuthToken5 = async () => {
+  const getAuthToken4 = async () => {
     try {
-      const { createClient: createClient5 } = await import('@supabase/supabase-js');
-      const supabase = createClient5(
-        process.env.NEXT_PUBLIC_SUPABASE_URL || "",
-        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || ""
-      );
       const { data: { session } } = await supabase.auth.getSession();
       return session?.access_token || null;
     } catch (error) {
@@ -32225,7 +33251,7 @@ var FileManagerFilters = ({
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          "Authorization": `Bearer ${await getAuthToken5()}`
+          "Authorization": `Bearer ${await getAuthToken4()}`
         },
         body: JSON.stringify({
           action: "percentile-clips",
@@ -33432,6 +34458,7 @@ var BottlenecksContent = ({
 }) => {
   console.log("\u{1F3AB} [BottlenecksContent] Rendered with ticketId:", ticketId || "NONE", "workspaceId:", workspaceId, "date:", date, "shift:", shift);
   const dashboardConfig = useDashboardConfig();
+  const supabase = useSupabase();
   const { session } = useAuth();
   const timezone = useAppTimezone();
   const { shiftConfig, isLoading: isShiftConfigLoading } = useDynamicShiftConfig(lineId);
@@ -33797,26 +34824,21 @@ var BottlenecksContent = ({
       fetchClipCounts();
     }
   }, [workspaceId, effectiveDateString, effectiveShiftId, s3ClipsService, fetchClipCounts, isEffectiveShiftReady]);
-  const getAuthToken5 = React25.useCallback(async () => {
+  const getAuthToken4 = React25.useCallback(async () => {
     try {
-      const { createClient: createClient5 } = await import('@supabase/supabase-js');
-      const supabase = createClient5(
-        process.env.NEXT_PUBLIC_SUPABASE_URL || "",
-        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || ""
-      );
       const { data: { session: session2 } } = await supabase.auth.getSession();
       return session2?.access_token || null;
     } catch (error2) {
       console.error("[BottlenecksContent] Error getting auth token:", error2);
       return null;
     }
-  }, []);
+  }, [supabase]);
   React25.useEffect(() => {
     if (!triageMode || !workspaceId || !isEffectiveShiftReady) return;
     const fetchTriageClips = async () => {
       setIsLoadingTriageClips(true);
       try {
-        const token = await getAuthToken5();
+        const token = await getAuthToken4();
         if (!token) {
           console.error("[BottlenecksContent] No auth token available");
           return;
@@ -33864,7 +34886,7 @@ var BottlenecksContent = ({
       }
     };
     fetchTriageClips();
-  }, [triageMode, workspaceId, effectiveDateString, effectiveShiftId, getAuthToken5, isEffectiveShiftReady]);
+  }, [triageMode, workspaceId, effectiveDateString, effectiveShiftId, getAuthToken4, isEffectiveShiftReady]);
   React25.useEffect(() => {
     if (!triageMode || triageClips.length === 0 || !session?.access_token) {
       return;
@@ -34057,13 +35079,7 @@ var BottlenecksContent = ({
         return;
       }
       console.log(`[BottlenecksContent] Loading metadata for category: ${categoryId}${forceRefresh ? " (force refresh)" : ""}`);
-      const { createClient: createClient5 } = await import('@supabase/supabase-js');
-      const supabase = createClient5(
-        process.env.NEXT_PUBLIC_SUPABASE_URL || "",
-        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || ""
-      );
-      const { data: { session: session2 } } = await supabase.auth.getSession();
-      const authToken = session2?.access_token;
+      const authToken = await getAuthToken4();
       if (!authToken) {
         console.error("Authentication required for metadata loading");
         return;
@@ -34133,10 +35149,10 @@ var BottlenecksContent = ({
         setCategoryMetadata(metadataClips);
         categoryMetadataRef.current = metadataClips;
         console.log(`[BottlenecksContent] Loaded metadata for ${categoryId}: ${metadataClips.length} clips`);
-        if (categoryId === "idle_time" && metadataClips.length > 0 && session2?.access_token) {
+        if (categoryId === "idle_time" && metadataClips.length > 0 && session?.access_token) {
           const idleClipIds2 = metadataClips.map((c) => c.clipId).filter(Boolean);
           console.log(`[BottlenecksContent] Fetching classifications for ${idleClipIds2.length} metadata clips`);
-          fetchClassifications(idleClipIds2, session2.access_token).then((classifications) => {
+          fetchClassifications(idleClipIds2, session.access_token).then((classifications) => {
             console.log("[BottlenecksContent] Received metadata classifications:", Object.keys(classifications).length);
             setClipClassifications((prev) => ({
               ...prev,
@@ -40552,6 +41568,8 @@ var WorkspaceGrid = React25__namespace.default.memo(({
   hasFlowBuffers = false,
   legend = DEFAULT_EFFICIENCY_LEGEND,
   videoSources = {},
+  videoStreamsByWorkspaceId = {},
+  videoStreamsLoading = false,
   displayNames = {},
   onWorkspaceHover,
   onWorkspaceHoverEnd
@@ -40619,6 +41637,8 @@ var WorkspaceGrid = React25__namespace.default.memo(({
           {
             workspaces,
             videoSources,
+            videoStreamsByWorkspaceId,
+            videoStreamsLoading,
             displayNames,
             legend,
             onWorkspaceHover,
@@ -43570,26 +44590,26 @@ var SingleVideoStream = ({
     const hlsStreamUrl = streamUrl || getCameraStreamUrl(workspaceName, baseUrl);
     console.log(`Using camera URL for ${workspaceName}: ${hlsStreamUrl}`);
     const mergedHlsConfig = { ...DEFAULT_HLS_CONFIG, ...hlsConfig };
-    if (Hls3__default.default.isSupported()) {
-      const hls = new Hls3__default.default(mergedHlsConfig);
+    if (Hls__default.default.isSupported()) {
+      const hls = new Hls__default.default(mergedHlsConfig);
       hlsRef.current = hls;
-      hls.on(Hls3__default.default.Events.MEDIA_ATTACHED, () => {
+      hls.on(Hls__default.default.Events.MEDIA_ATTACHED, () => {
         console.log("HLS media attached");
         hls.loadSource(hlsStreamUrl);
       });
-      hls.on(Hls3__default.default.Events.MANIFEST_PARSED, () => {
+      hls.on(Hls__default.default.Events.MANIFEST_PARSED, () => {
         console.log("HLS manifest parsed");
         attemptPlay(video);
       });
-      hls.on(Hls3__default.default.Events.ERROR, (_, data) => {
+      hls.on(Hls__default.default.Events.ERROR, (_, data) => {
         if (data.fatal) {
           console.error("Fatal HLS error:", data.type, data.details);
           switch (data.type) {
-            case Hls3__default.default.ErrorTypes.NETWORK_ERROR:
+            case Hls__default.default.ErrorTypes.NETWORK_ERROR:
               console.error("Fatal network error encountered");
               setError("Network error: Please check your connection");
               break;
-            case Hls3__default.default.ErrorTypes.MEDIA_ERROR:
+            case Hls__default.default.ErrorTypes.MEDIA_ERROR:
               console.error("Fatal media error encountered, trying to recover");
               hls.recoverMediaError();
               break;
@@ -48556,6 +49576,10 @@ function HomeView({
     JSON.stringify(workspaceMetrics.map((w) => `${w.workspace_uuid}-${Math.round(w.efficiency)}-${w.trend}`)),
     selectedLineId
   ]);
+  const {
+    streamsByWorkspaceId: videoStreamsByWorkspaceId,
+    isLoading: videoStreamsLoading
+  } = useWorkspaceVideoStreams(workspaceMetrics);
   const memoizedKPIs = React25.useMemo(() => kpis, [
     // Only update reference when values change by at least 1%
     kpis?.efficiency?.value ? Math.round(kpis.efficiency.value) : null,
@@ -48750,6 +49774,8 @@ function HomeView({
                   factoryView: factoryViewId,
                   legend: efficiencyLegend,
                   videoSources,
+                  videoStreamsByWorkspaceId,
+                  videoStreamsLoading,
                   displayNames: workspaceDisplayNames,
                   hasFlowBuffers,
                   className: "h-full",
@@ -48780,6 +49806,8 @@ function HomeView({
                   factoryView: factoryViewId,
                   legend: efficiencyLegend,
                   videoSources,
+                  videoStreamsByWorkspaceId,
+                  videoStreamsLoading,
                   displayNames: workspaceDisplayNames,
                   hasFlowBuffers,
                   className: "h-full",
@@ -61594,7 +62622,11 @@ async function getManufacturingInsights(userQuestion, lineId, shiftId, companyId
   );
 }
 function createStreamProxyHandler(config) {
-  const cloudFrontDomain = config?.cloudFrontDomain || "https://d1eiob0chi5jw.cloudfront.net";
+  const baseUrl = config?.baseUrl || config?.cloudFrontDomain || "https://d1eiob0chi5jw.cloudfront.net";
+  const forwardAuth = config?.forwardAuth ?? false;
+  const noCacheManifest = config?.noCacheManifest ?? false;
+  const staticAuthToken = config?.staticAuthToken;
+  const debugAuth = config?.debugAuth ?? false;
   return async function handler(req, res) {
     if (req.method !== "GET") {
       return res.status(405).json({ error: "Method not allowed" });
@@ -61604,15 +62636,28 @@ function createStreamProxyHandler(config) {
       return res.status(400).json({ error: "Missing path parameter" });
     }
     const fullPath = path.join("/");
-    const targetUrl = `${cloudFrontDomain}/${fullPath}`;
+    const targetUrl = `${baseUrl}/${fullPath}`;
     try {
       console.log(`[HLS Stream Proxy] Streaming: ${targetUrl}`);
+      const resolvedAuthHeader = (() => {
+        if (forwardAuth && req.headers.authorization) {
+          return req.headers.authorization;
+        }
+        if (staticAuthToken) {
+          return staticAuthToken.startsWith("Bearer ") ? staticAuthToken : `Bearer ${staticAuthToken}`;
+        }
+        return void 0;
+      })();
+      if (debugAuth) {
+        console.log("[HLS Stream Proxy] Auth header present:", Boolean(resolvedAuthHeader));
+      }
       const response = await fetch(targetUrl, {
         method: "GET",
         headers: {
           "User-Agent": "NextJS-HLS-Stream-Proxy",
           // Pass through range headers for partial content requests
-          ...req.headers.range && { "Range": req.headers.range }
+          ...req.headers.range && { "Range": req.headers.range },
+          ...resolvedAuthHeader ? { "Authorization": resolvedAuthHeader } : {}
         }
       });
       if (!response.ok) {
@@ -61633,6 +62678,10 @@ function createStreamProxyHandler(config) {
       }
       if (fullPath.endsWith(".m3u8")) {
         res.setHeader("Content-Type", "application/vnd.apple.mpegurl");
+        if (noCacheManifest) {
+          res.setHeader("Cache-Control", "no-store, must-revalidate");
+          res.setHeader("Pragma", "no-cache");
+        }
       } else if (fullPath.endsWith(".ts")) {
         res.setHeader("Content-Type", "video/mp2t");
       }
@@ -62104,6 +63153,7 @@ exports.useMetrics = useMetrics;
 exports.useMobileMenu = useMobileMenu;
 exports.useMultiLineShiftConfigs = useMultiLineShiftConfigs;
 exports.useNavigation = useNavigation;
+exports.useOptionalSupabase = useOptionalSupabase;
 exports.useOverrides = useOverrides;
 exports.usePageOverride = usePageOverride;
 exports.usePrefetchClipCounts = usePrefetchClipCounts;
@@ -62141,6 +63191,7 @@ exports.useWorkspaceMetrics = useWorkspaceMetrics;
 exports.useWorkspaceNavigation = useWorkspaceNavigation;
 exports.useWorkspaceOperators = useWorkspaceOperators;
 exports.useWorkspaceUptimeTimeline = useWorkspaceUptimeTimeline;
+exports.useWorkspaceVideoStreams = useWorkspaceVideoStreams;
 exports.userService = userService;
 exports.videoPrefetchManager = videoPrefetchManager;
 exports.videoPreloader = videoPreloader;