@uniai-fe/uds-templates 0.6.5 → 0.6.6

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 */
@@ -1798,14 +1799,23 @@
 }
 
 .cctv-video-error-icon {
+  display: none;
   margin-bottom: 2px;
   fill: var(--cctv-error-icon-color);
 }
 
 .cctv-video-error-message {
   font-size: 13px;
-  color: var(--cctv-error-text-color);
+  color: var(--cctv-status-text-color);
   line-height: 1.5em;
+  font-weight: 500;
+}
+
+.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.6",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,

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

@@ -139,14 +139,26 @@
   justify-content: center;
 }
 .cctv-video-error-icon {
+  display: none;
   margin-bottom: 2px;
   fill: var(--cctv-error-icon-color);
 }
 .cctv-video-error-message {
   font-size: 13px;
-  color: var(--cctv-error-text-color);
+  color: var(--cctv-status-text-color);
   line-height: 1.5em;
-  font-weight: 600;
+  font-weight: 500;
+}
+
+.cctv-video-overlay-body.is-error {
+  .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;
 }