@uniai-fe/uds-templates 0.6.6 → 0.6.7

package/dist/styles.css

@@ -1796,6 +1796,22 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 2px;
+}
+
+.cctv-video-loading-icon {
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  color: var(--cctv-error-text-color);
+}
+.cctv-video-loading-icon .alternate-loading-icon {
+  width: 24px;
+  height: 24px;
+}
+.cctv-video-loading-icon svg stop:first-child {
+  stop-color: currentColor;
 }
 
 .cctv-video-error-icon {
@@ -1806,11 +1822,17 @@
 
 .cctv-video-error-message {
   font-size: 13px;
-  color: var(--cctv-status-text-color);
+  color: var(--cctv-error-text-color);
   line-height: 1.5em;
   font-weight: 500;
 }
 
+.cctv-video-overlay-body.is-error .cctv-video-error {
+  gap: 0;
+}
+.cctv-video-overlay-body.is-error .cctv-video-loading-icon {
+  display: none;
+}
 .cctv-video-overlay-body.is-error .cctv-video-error-icon {
   display: block;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.6.6",
+  "version": "0.6.7",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,

package/src/cctv/components/video/overlay/body/Error.tsx

@@ -1,3 +1,4 @@
+import { Alternate } from "@uniai-fe/uds-primitives";
 import CCTVErrorIcon from "../../../../img/error.svg";
 
 export default function CCTVVideoError({
@@ -7,6 +8,9 @@ export default function CCTVVideoError({
 }) {
   return (
     <div className="cctv-video-error">
+      <span className="cctv-video-loading-icon" aria-hidden="true">
+        <Alternate.LoadingIcon size="small" />
+      </span>
       <figure className="cctv-video-error-icon">
         <CCTVErrorIcon width={24} height={24} />
       </figure>

package/src/cctv/hooks/useRtcStream.ts

@@ -23,8 +23,24 @@ import { getIsLive } from "../utils/video-state";
 import { useFormContext, useWatch } from "react-hook-form";
 
 const AUTO_RECONNECT_INTERVAL_MS = 3000;
+const DISCONNECTED_RECONNECT_GRACE_MS = 5000;
+const DISCONNECTED_RECONNECT_STAGGER_MS = 5000;
 const TOKEN_EXPIRY_SAFETY_MS = 30 * 1000;
 
+const getStableStaggerMs = (value: string): number => {
+  let hash = 0;
+
+  for (let i = 0; i < value.length; i += 1) {
+    hash =
+      (hash * 31 + value.charCodeAt(i)) % DISCONNECTED_RECONNECT_STAGGER_MS;
+  }
+
+  return hash;
+};
+
+const getDisconnectedReconnectDelayMs = (identityKey: string): number =>
+  DISCONNECTED_RECONNECT_GRACE_MS + getStableStaggerMs(identityKey);
+
 const decodeBase64Url = (value: string): string | null => {
   try {
     const base64 = value.replace(/-/g, "+").replace(/_/g, "/");
@@ -121,6 +137,8 @@ export function useCctvRtcStream({
   // 현재 스트림 연결 절차가 진행 중인지 여부.
   const [isStreaming, setStreaming] = useState(false);
   const [hasConnected, setHasConnected] = useState(false);
+  const [isDisconnectedReconnectReady, setDisconnectedReconnectReady] =
+    useState(false);
 
   // react-hook-form 컨텍스트에서 token username과 WHEP username override를 추적한다.
   const { control } = useFormContext();
@@ -181,6 +199,34 @@ export function useCctvRtcStream({
     setHasConnected(false);
   }, [streamIdentityKey]);
 
+  useEffect(() => {
+    if (
+      connectionState !== "disconnected" ||
+      !hasConnected ||
+      !streamIdentityKey
+    ) {
+      setDisconnectedReconnectReady(false);
+      return;
+    }
+
+    setDisconnectedReconnectReady(false);
+
+    const timeout = setTimeout(() => {
+      setDisconnectedReconnectReady(true);
+    }, getDisconnectedReconnectDelayMs(streamIdentityKey));
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [connectionState, hasConnected, streamIdentityKey]);
+
+  const displayConnectionState =
+    connectionState === "disconnected" &&
+    hasConnected &&
+    !isDisconnectedReconnectReady
+      ? "connected"
+      : connectionState;
+
   const hasReusableRegistryStream = useMemo(() => {
     if (!streamKeyCandidate) return false;
 
@@ -331,13 +377,14 @@ export function useCctvRtcStream({
     if (isTokenLoading || isStreaming) return false;
     if (isTokenError || streamError) return true;
     if (connectionState === "failed") return true;
-    if (connectionState === "disconnected") return true;
+    if (connectionState === "disconnected") return isDisconnectedReconnectReady;
     if (connectionState === "closed") return true;
     return false;
   }, [
     cam?.cam_online,
     connectionState,
     hasConnected,
+    isDisconnectedReconnectReady,
     isStreaming,
     isTokenError,
     isTokenLoading,
@@ -377,7 +424,7 @@ export function useCctvRtcStream({
       cam
         ? getIsLive({
             cam,
-            connectionState,
+            connectionState: displayConnectionState,
             isTokenLoading,
             isTokenError,
             isStreaming,
@@ -386,7 +433,7 @@ export function useCctvRtcStream({
         : false,
     [
       cam,
-      connectionState,
+      displayConnectionState,
       isTokenLoading,
       isTokenError,
       isStreaming,
@@ -431,7 +478,7 @@ export function useCctvRtcStream({
   // 호출자에게 video ref와 상태값, 토큰 쿼리 상태를 전달한다.
   return {
     videoRef,
-    connectionState,
+    connectionState: displayConnectionState,
     streamError,
     isStreaming,
     isTokenLoading,

package/src/cctv/styles/video.scss

@@ -137,6 +137,23 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 2px;
+}
+.cctv-video-loading-icon {
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  color: var(--cctv-error-text-color);
+
+  .alternate-loading-icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  svg stop:first-child {
+    stop-color: currentColor;
+  }
 }
 .cctv-video-error-icon {
   display: none;
@@ -145,12 +162,20 @@
 }
 .cctv-video-error-message {
   font-size: 13px;
-  color: var(--cctv-status-text-color);
+  color: var(--cctv-error-text-color);
   line-height: 1.5em;
   font-weight: 500;
 }
 
 .cctv-video-overlay-body.is-error {
+  .cctv-video-error {
+    gap: 0;
+  }
+
+  .cctv-video-loading-icon {
+    display: none;
+  }
+
   .cctv-video-error-icon {
     display: block;
   }