refactor: flatten project structure, remove ti2026h-web subdirectory

2026-08-01 16:08:44 +08:00
parent 6bbe83e1f1
commit 386d8d5852
26 changed files with 18 additions and 1 deletions
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+defineProps<{
+  streamUrl: string | null
+  isLive: boolean
+  error: string | null
+}>()
+</script>
+
+<template>
+  <div class="live-view">
+    <div class="video-container">
+      <!-- Native <img> handles MJPEG (multipart/x-mixed-replace) natively — no CORS issues -->
+      <img
+        v-if="streamUrl && isLive"
+        :key="streamUrl"
+        :src="streamUrl"
+        alt="MJPEG Stream"
+        class="video-frame"
+      />
+      <!-- Placeholder when no stream -->
+      <div v-else class="video-placeholder">
+        <span v-if="error" class="error-text">{{ error }}</span>
+        <span v-else>Stream not started — configure and apply a stream URL above</span>
+      </div>
+
+      <!-- Live indicator -->
+      <div v-if="isLive" class="live-badge">
+        <span class="live-dot"></span>
+        LIVE
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.live-view {
+  width: 100%;
+}
+
+.video-container {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background: #1a1a2e;
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.video-frame {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.video-placeholder {
+  color: #666;
+  font-size: 1.1rem;
+  text-align: center;
+  padding: 2rem;
+}
+
+.error-text {
+  color: #e74c3c;
+}
+
+.live-badge {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(0, 0, 0, 0.65);
+  color: #ff4444;
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  padding: 4px 10px;
+  border-radius: 4px;
+}
+
+.live-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #ff4444;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+</style>