@uniai-fe/uds-templates 0.5.11 → 0.5.13

package/package.json

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

package/src/cctv/hooks/useRtcStream.ts

@@ -218,6 +218,7 @@ export function useCctvRtcStream({
   useEffect(() => {
     const camId = cam?.cam_id;
     if (!camId) return;
+
     const instanceKey = instanceKeyRef.current as string;
     setLiveRegistry(prev => {
       const next = { ...prev };
@@ -226,7 +227,13 @@ export function useCctvRtcStream({
       next[camId] = perCam;
       return next;
     });
+  }, [cam?.cam_id, liveState, setLiveRegistry]);
+
+  useEffect(() => {
+    const camId = cam?.cam_id;
+    if (!camId) return;
 
+    const instanceKey = instanceKeyRef.current as string;
     return () => {
       setLiveRegistry(prev => {
         const next = { ...prev };
@@ -240,7 +247,7 @@ export function useCctvRtcStream({
         return next;
       });
     };
-  }, [cam?.cam_id, liveState, setLiveRegistry]);
+  }, [cam?.cam_id, setLiveRegistry]);
 
   // 호출자에게 video ref와 상태값, 토큰 쿼리 상태를 전달한다.
   return {

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

@@ -12,6 +12,13 @@ export const CCTV_MESSAGE = {
   offline: "CCTV 연결 오류",
 } as const;
 
+const RTC_PREPARING_STATES = new Set<RTCPeerConnectionState>([
+  "new",
+  "connecting",
+  "disconnected",
+  "closed",
+]);
+
 /**
  * CCTV; 스트리밍 상태에 따른 메시지 추출
  * @param {CctvVideoOverlayMessageParams} params 상태 파라미터
@@ -27,6 +34,7 @@ export const CCTV_MESSAGE = {
  */
 export function getOverlayMessage({
   cam,
+  connectionState,
   hasCamProp = false,
   isFetching = false,
   isTokenLoading,
@@ -44,6 +52,8 @@ export function getOverlayMessage({
   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 (RTC_PREPARING_STATES.has(connectionState)) return CCTV_MESSAGE.preparing;
   return null;
 }
 
@@ -60,6 +70,7 @@ export function getOverlayMessage({
  */
 export function getIsLive({
   cam,
+  connectionState,
   isTokenLoading,
   isTokenError,
   isStreaming,
@@ -70,6 +81,7 @@ export function getIsLive({
   if (isTokenLoading || isTokenError) return false;
   if (isStreaming) return false;
   if (streamError) return false;
+  if (connectionState !== "connected") return false;
   return true;
 }