@uniai-fe/uds-templates 0.6.5 → 0.6.7

package/dist/styles.css

@@ -110,6 +110,7 @@
   --cctv-live-state-dot-off: var(--color-border-strong);
   --cctv-live-state-text-off: var(--color-label-disabled);
   /* Error */
+  --cctv-status-text-color: var(--color-common-99);
   --cctv-error-text-color: var(--color-label-disabled);
   --cctv-error-icon-color: var(--color-label-disabled);
   /* Pagination */
@@ -1795,9 +1796,26 @@
   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 {
+  display: none;
   margin-bottom: 2px;
   fill: var(--cctv-error-icon-color);
 }
@@ -1806,6 +1824,20 @@
   font-size: 13px;
   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;
+}
+.cctv-video-overlay-body.is-error .cctv-video-error-message {
+  color: var(--cctv-error-text-color);
   font-weight: 600;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.6.5",
+  "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/variables.scss

@@ -22,6 +22,7 @@
   --cctv-live-state-text-off: var(--color-label-disabled);
 
   /* Error */
+  --cctv-status-text-color: var(--color-common-99);
   --cctv-error-text-color: var(--color-label-disabled);
   --cctv-error-icon-color: var(--color-label-disabled);
 

package/src/cctv/styles/video.scss

@@ -137,8 +137,26 @@
   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;
   margin-bottom: 2px;
   fill: var(--cctv-error-icon-color);
 }
@@ -146,7 +164,26 @@
   font-size: 13px;
   color: var(--cctv-error-text-color);
   line-height: 1.5em;
-  font-weight: 600;
+  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;
+  }
+
+  .cctv-video-error-message {
+    color: var(--cctv-error-text-color);
+    font-weight: 600;
+  }
 }
 
 .cctv-video-status-text {

package/src/cctv/utils/video-state.ts

@@ -7,7 +7,7 @@ import type {
 export const CCTV_MESSAGE = {
   selectCam: "카메라를 선택하세요.",
   fetching: "CCTV 데이터를 불러오는 중입니다.",
-  preparing: "스트림을 준비하고 있습니다.",
+  preparing: "CCTV 영상을 연결하고 있습니다.",
   sessionEnded:
     "장시간 미사용으로 연결이 종료되었습니다. 계속 확인하시려면 다시 연결해 주세요.",
   tokenError: "토큰을 발급하지 못했습니다.",
@@ -21,6 +21,10 @@ const RTC_PREPARING_STATES = new Set<RTCPeerConnectionState>([
   "closed",
 ]);
 
+const RTC_SESSION_ENDED_RECONNECT_STATES = new Set<RTCPeerConnectionState>([
+  "closed",
+]);
+
 /**
  * CCTV; 스트리밍 상태에 따른 메시지 추출
  * @param {CctvVideoOverlayMessageParams} params 상태 파라미터
@@ -51,12 +55,14 @@ export function getOverlayMessage({
   }
 
   if (!cam.cam_online) return CCTV_MESSAGE.offline;
-  if (canReconnect) return CCTV_MESSAGE.sessionEnded;
   // 에러 상태가 준비 상태와 겹칠 때는 에러 문구가 최종 표시 계약을 우선한다.
   if (isTokenError) return CCTV_MESSAGE.tokenError;
   if (streamError) return streamError;
-  if (isTokenLoading || isStreaming) return CCTV_MESSAGE.preparing;
   if (connectionState === "failed") return CCTV_MESSAGE.offline;
+  if (canReconnect && RTC_SESSION_ENDED_RECONNECT_STATES.has(connectionState)) {
+    return CCTV_MESSAGE.sessionEnded;
+  }
+  if (isTokenLoading || isStreaming) return CCTV_MESSAGE.preparing;
   if (RTC_PREPARING_STATES.has(connectionState)) return CCTV_MESSAGE.preparing;
   return null;
 }