@fuzionx/framework 0.1.48 → 0.1.50

package/cli/templates/make/app-spa/views/default/spa/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fuzionx/player": "^0.1.1",
     "pinia": "^3.0.4",
     "vue": "^3.5.0",
     "vue-router": "^4.5.0"

package/cli/templates/make/app-spa/views/default/spa/src/components/FileUpload.vue

@@ -54,7 +54,8 @@
       </div>
       <div class="progress-info" style="display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.85rem; color: #aaa;">
         <span>{{ progressText }}</span>
-        <span>{{ speedText }}</span>
+        <span>{{ sizeText }}</span>
+        <span>{{ speedLabel }}</span>
       </div>
     </div>
   </div>
@@ -62,6 +63,9 @@
 
 <script setup>
 import { ref, computed } from 'vue';
+import { useLocale } from '../composables/useLocale.js';
+
+const { t } = useLocale();
 
 /**
  * @prop {string} label - 레이블 텍스트
@@ -83,14 +87,16 @@ const selectedFiles = ref([]);
 const uploading = ref(false);
 const progress = ref(0);
 const progressText = ref('0%');
-const speedText = ref('');
+const sizeText = ref('');
+const speedLabel = ref('');
 const progressColor = ref('linear-gradient(90deg, #667eea, #764ba2)');
 
 /** 파일 크기 포맷 */
 function formatSize(bytes) {
   if (bytes < 1024) return bytes + ' B';
   if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
-  return (bytes / 1048576).toFixed(1) + ' MB';
+  if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB';
+  return (bytes / 1073741824).toFixed(2) + ' GB';
 }
 
 /** 파일 선택 이벤트 */
@@ -122,23 +128,32 @@ function setFiles(fileList) {
 }
 
 /** 진행률 업데이트 (외부에서 호출) */
-function setProgress(pct, speed) {
+function setProgress(pct, speed, loaded, total) {
   uploading.value = true;
   progress.value = pct;
   progressText.value = pct + '%';
-  speedText.value = speed || '';
+
+  // 파일 크기 표시
+  if (loaded !== undefined && total !== undefined) {
+    sizeText.value = formatSize(loaded) + ' / ' + formatSize(total);
+  }
+
+  // 속도 레이블
+  if (speed) {
+    speedLabel.value = t('board.upload_speed', '속도') + ': ' + speed;
+  }
 }
 
 /** 업로드 완료 */
-function setComplete(text = '업로드 완료!') {
+function setComplete(text) {
   progress.value = 100;
-  progressText.value = text;
-  speedText.value = '';
+  progressText.value = text || t('board.upload_complete', '업로드 완료!');
+  speedLabel.value = '';
 }
 
 /** 업로드 오류 */
-function setError(text = '오류 발생') {
-  progressText.value = text;
+function setError(text) {
+  progressText.value = text || t('board.upload_error', '오류 발생');
   progressColor.value = '#e74c3c';
 }
 
@@ -153,7 +168,8 @@ function reset() {
   uploading.value = false;
   progress.value = 0;
   progressText.value = '0%';
-  speedText.value = '';
+  sizeText.value = '';
+  speedLabel.value = '';
   progressColor.value = 'linear-gradient(90deg, #667eea, #764ba2)';
 }
 

package/cli/templates/make/app-spa/views/default/spa/src/components/Navbar.vue

@@ -14,6 +14,7 @@
         <router-link to="/features" class="nav-link">{{ t('nav.features', 'Features') }}</router-link>
         <router-link to="/chat" class="nav-link">{{ t('nav.chat', 'Chat Demo') }}</router-link>
         <router-link to="/board" class="nav-link">{{ t('nav.board', '게시판') }}</router-link>
+        <router-link to="/live" class="nav-link">{{ t('nav.live', 'Live') }}</router-link>
         <template v-if="authStore.isAuthenticated">
           <router-link to="/profile" class="nav-link">{{ t('nav.profile', '프로필') }}</router-link>
           <button class="nav-link btn-link" @click="handleLogout">{{ t('nav.logout', '로그아웃') }}</button>

package/cli/templates/make/app-spa/views/default/spa/src/composables/useApi.js

@@ -80,7 +80,7 @@ export function useApi() {
    * XHR 업로드 — 진행률 콜백 지원.
    * @param {string} url - 업로드 URL
    * @param {FormData} formData - 폼 데이터
-   * @param {Function} onProgress - 진행률 콜백 (percent, speed)
+   * @param {Function} onProgress - 진행률 콜백 (percent, speed, loaded, total)
    * @param {string} [method='POST'] - HTTP 메서드
    * @returns {Promise<{ok: boolean, responseURL: string}>}
    */
@@ -100,7 +100,7 @@ export function useApi() {
             ? (bps / 1048576).toFixed(1) + ' MB/s'
             : (bps / 1024).toFixed(0) + ' KB/s';
         }
-        onProgress(pct, speed);
+        onProgress(pct, speed, ev.loaded, ev.total);
       };
 
       xhr.onload = () => {

package/cli/templates/make/app-spa/views/default/spa/src/router/index.js

@@ -15,6 +15,11 @@ export const routes = [
   { path: '/', name: 'home', component: HomeView },
   { path: '/features', name: 'features', component: () => import('../views/FeaturesView.vue') },
 
+  // ── Live (인증 필요) ──
+  { path: '/live', name: 'live', component: () => import('../views/LiveList.vue'), meta: { auth: true } },
+  { path: '/live/watch/:channelId', name: 'live-watch', component: () => import('../views/LiveWatch.vue'), meta: { auth: true } },
+  { path: '/live/room/:channelId', name: 'live-room', component: () => import('../views/LiveRoom.vue'), meta: { auth: true } },
+
   // ── 게스트 전용 (로그인 상태면 홈으로) ──
   { path: '/login', name: 'login', component: () => import('../views/Login.vue'), meta: { guest: true } },
   { path: '/register', name: 'register', component: () => import('../views/Register.vue'), meta: { guest: true } },

package/cli/templates/make/app-spa/views/default/spa/src/views/BoardForm.vue

@@ -162,10 +162,10 @@ async function handleSubmit() {
   try {
     if (hasFiles) {
       // XHR 업로드 + 진행률
-      const result = await api.uploadWithProgress(uploadUrl, formData, (pct, speed) => {
-        fileUploader.value?.setProgress(pct, speed);
+      const result = await api.uploadWithProgress(uploadUrl, formData, (pct, speed, loaded, total) => {
+        fileUploader.value?.setProgress(pct, speed, loaded, total);
       }, method);
-      fileUploader.value?.setComplete('업로드 완료!');
+      fileUploader.value?.setComplete();
       toast.success(isEdit.value ? t('board.updated', '글이 수정되었습니다.') : t('board.created', '글이 작성되었습니다.'));
       setTimeout(() => {
         router.push(isEdit.value ? `/board/${route.params.id}` : '/board');

package/cli/templates/make/app-spa/views/default/spa/src/views/LiveList.vue

@@ -0,0 +1,488 @@
+<!--
+  LiveList.vue — 라이브 채널 목록 + 생성/종료.
+
+  Hub API (GET /api/channels) 폴링으로 채널 표시.
+  생성 모달: Broadcast (URL / 파일) 또는 VideoChat.
+  종료: DELETE /api/channels/:id.
+-->
+<template>
+  <div class="container">
+    <!-- ── Header ── -->
+    <section class="hero-section" style="padding:3rem 0 2rem;">
+      <h1 class="hero-title">
+        <span class="gradient-text">Live Channels</span>
+      </h1>
+      <p class="hero-subtitle">{{ t('live.hero_sub', 'WebRTC Live Broadcast · VideoChat') }}</p>
+    </section>
+
+    <!-- ── Hub URL 설정 ── -->
+    <div class="live-hub-bar glass-card" style="margin-bottom:1.5rem;padding:0.75rem 1.25rem;display:flex;align-items:center;gap:0.75rem;">
+      <label style="font-size:0.8rem;color:var(--text-muted);white-space:nowrap;">Hub URL</label>
+      <input
+        v-model="hubUrl"
+        type="text"
+        class="form-input"
+        style="flex:1;padding:0.4rem 0.75rem;font-size:0.85rem;"
+        placeholder="http://127.0.0.1:9100"
+      />
+      <button class="btn btn-primary" style="padding:0.4rem 1rem;font-size:0.85rem;" @click="fetchChannels">
+        {{ t('live.refresh', '새로고침') }}
+      </button>
+      <button class="btn btn-hero-primary" style="padding:0.4rem 1rem;font-size:0.85rem;" @click="showCreateModal = true">
+        + {{ t('live.create', '새 채널') }}
+      </button>
+    </div>
+
+    <!-- ── Error ── -->
+    <div v-if="error" class="alert alert-error" style="margin-bottom:1rem;">
+      {{ error }}
+    </div>
+
+    <!-- ── Channel List ── -->
+    <div v-if="channels.length === 0 && !loading" class="glass-card" style="text-align:center;padding:3rem;">
+      <p style="color:var(--text-muted);font-size:1rem;">{{ t('live.no_channels', '활성 채널이 없습니다.') }}</p>
+      <p style="color:var(--text-muted);font-size:0.85rem;margin-top:0.5rem;">{{ t('live.start_hint', 'Create a new channel to get started.') }}</p>
+    </div>
+
+    <div v-else class="live-grid">
+      <div v-for="ch in channels" :key="ch.channel_id" class="glass-card live-card">
+        <div class="live-card-header">
+          <span :class="['live-badge', ch.source_type === 'webrtc' ? 'badge-videochat' : 'badge-broadcast']">
+            {{ ch.source_type === 'webrtc' ? '👥 ' + t('live.videochat', 'VideoChat') : '🔴 ' + t('live.broadcast', 'Broadcast') }}
+          </span>
+          <span class="live-viewers">
+            👁 {{ ch.viewer_count || 0 }}
+          </span>
+        </div>
+        <div class="live-card-body">
+          <h3 class="live-card-title">{{ ch.channel_id }}</h3>
+          <p class="live-card-meta">
+            <span v-if="ch.source_url" style="word-break:break-all;">{{ ch.source_url }}</span>
+            <span v-else>{{ ch.source_type }}</span>
+          </p>
+          <p class="live-card-meta" style="font-size:0.75rem;">
+            Media: {{ ch.media_id }} · {{ ch.media_ip }}:{{ ch.webrtc_port }}
+          </p>
+        </div>
+        <div class="live-card-actions">
+          <button
+            class="btn btn-primary"
+            style="flex:1;"
+            @click="joinChannel(ch)"
+          >
+            {{ t('live.join', '입장') }}
+          </button>
+          <button
+            class="btn btn-outline"
+            style="color:#ef4444;border-color:#ef4444;"
+            @click="stopChannel(ch.channel_id)"
+          >
+            {{ t('live.stop', '종료') }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── Create Modal ── -->
+    <div v-if="showCreateModal" class="live-modal-overlay" @click.self="showCreateModal = false">
+      <div class="glass-card live-modal">
+        <h2 style="margin-bottom:1.5rem;">📡 {{ t('live.create_title', '새 채널 만들기') }}</h2>
+
+        <div class="form-group">
+          <label class="form-label">{{ t('live.channel_id', '채널 ID') }}</label>
+          <input v-model="createForm.channelId" type="text" class="form-input" placeholder="my-channel" />
+        </div>
+
+        <div class="form-group">
+          <label class="form-label">{{ t('live.type', '타입') }}</label>
+          <div class="live-type-selector">
+            <button
+              :class="['live-type-btn', { active: createForm.type === 'broadcast' }]"
+              @click="createForm.type = 'broadcast'"
+            >
+              🔴 {{ t('live.broadcast', '방송') }}
+            </button>
+            <button
+              :class="['live-type-btn', { active: createForm.type === 'videochat' }]"
+              @click="createForm.type = 'videochat'"
+            >
+              👥 {{ t('live.videochat', '화상채팅') }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Broadcast 옵션 -->
+        <template v-if="createForm.type === 'broadcast'">
+          <div class="form-group">
+            <label class="form-label">{{ t('live.source', '소스') }}</label>
+            <div class="live-type-selector">
+              <button
+                :class="['live-type-btn', { active: createForm.sourceMode === 'url' }]"
+                @click="createForm.sourceMode = 'url'"
+              >
+                🌐 {{ t('live.url_stream', '외부 URL') }}
+              </button>
+              <button
+                :class="['live-type-btn', { active: createForm.sourceMode === 'file' }]"
+                @click="createForm.sourceMode = 'file'"
+              >
+                📁 {{ t('live.file_stream', '파일 스트리밍') }}
+              </button>
+            </div>
+          </div>
+
+          <div v-if="createForm.sourceMode === 'url'" class="form-group">
+            <label class="form-label">{{ t('live.source_url', '스트리밍 URL') }}</label>
+            <input v-model="createForm.sourceUrl" type="text" class="form-input" placeholder="rtmp://... 또는 http://..." />
+          </div>
+
+          <div v-if="createForm.sourceMode === 'file'" class="form-group">
+            <label class="form-label">{{ t('live.file_path', '파일 경로') }}</label>
+            <input v-model="createForm.sourceUrl" type="text" class="form-input" placeholder="/path/to/video.mp4" />
+          </div>
+        </template>
+
+        <!-- 인코딩 옵션 (Broadcast 전용) -->
+        <template v-if="createForm.type === 'broadcast'">
+          <div class="form-group" style="margin-top:0.5rem;">
+            <label class="form-label">⚙️ {{ t('live.options', '인코딩 옵션') }}</label>
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;">
+              <div>
+                <label class="form-label" style="font-size:0.75rem;">{{ t('live.resolution', '해상도') }}</label>
+                <select v-model="createForm.resolution" class="form-input" style="padding:0.4rem 0.5rem;font-size:0.85rem;">
+                  <option value="">{{ t('live.default', 'Default') }}</option>
+                  <option value="1920x1080">1920×1080 (FHD)</option>
+                  <option value="1280x720">1280×720 (HD)</option>
+                  <option value="854x480">854×480 (SD)</option>
+                  <option value="640x360">640×360</option>
+                </select>
+              </div>
+              <div>
+                <label class="form-label" style="font-size:0.75rem;">{{ t('live.video_bitrate', '영상 비트레이트') }}</label>
+                <select v-model="createForm.videoBitrate" class="form-input" style="padding:0.4rem 0.5rem;font-size:0.85rem;">
+                  <option value="">{{ t('live.default', 'Default') }}</option>
+                  <option value="8000">8000 kbps</option>
+                  <option value="5000">5000 kbps</option>
+                  <option value="3000">3000 kbps</option>
+                  <option value="1500">1500 kbps</option>
+                  <option value="800">800 kbps</option>
+                </select>
+              </div>
+              <div>
+                <label class="form-label" style="font-size:0.75rem;">{{ t('live.audio_bitrate', '오디오 비트레이트') }}</label>
+                <select v-model="createForm.audioBitrate" class="form-input" style="padding:0.4rem 0.5rem;font-size:0.85rem;">
+                  <option value="">{{ t('live.default', 'Default') }}</option>
+                  <option value="320">320 kbps</option>
+                  <option value="192">192 kbps</option>
+                  <option value="128">128 kbps</option>
+                  <option value="64">64 kbps</option>
+                </select>
+              </div>
+              <div>
+                <label class="form-label" style="font-size:0.75rem;">{{ t('live.video_codec', '비디오 코덱') }}</label>
+                <select v-model="createForm.videoCodec" class="form-input" style="padding:0.4rem 0.5rem;font-size:0.85rem;">
+                  <option value="">{{ t('live.default', 'Default') }}</option>
+                  <option value="h264">H.264</option>
+                  <option value="vp8">VP8</option>
+                  <option value="vp9">VP9</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <div v-if="createError" class="alert alert-error" style="margin-top:1rem;">{{ createError }}</div>
+
+        <div style="display:flex;gap:0.75rem;margin-top:1.5rem;">
+          <button class="btn btn-outline" style="flex:1;" @click="showCreateModal = false">
+            {{ t('live.cancel', '취소') }}
+          </button>
+          <button class="btn btn-hero-primary" style="flex:1;" :disabled="creating" @click="createChannel">
+            {{ creating ? '...' : t('live.create_btn', '생성') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ── Footer ── -->
+  <footer class="site-footer">
+    <div class="container">
+      <div class="footer-content">
+        <span class="footer-brand">FuzionX</span>
+        <span class="footer-text">Powered by <code>@fuzionx/player</code> WebRTC SDK</span>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useLocale } from '../composables/useLocale.js';
+import { useAuthStore } from '../stores/auth.js';
+
+const { t } = useLocale();
+const router = useRouter();
+const authStore = useAuthStore();
+
+/* ── State ── */
+const hubUrl = ref('http://127.0.0.1:9100');
+const channels = ref([]);
+const loading = ref(false);
+const error = ref('');
+const showCreateModal = ref(false);
+const creating = ref(false);
+const createError = ref('');
+
+const createForm = ref({
+  channelId: '',
+  type: 'broadcast',       // 'broadcast' | 'videochat'
+  sourceMode: 'url',       // 'url' | 'file'
+  sourceUrl: '',
+  resolution: '',          // '1920x1080', '1280x720', etc.
+  videoBitrate: '',        // kbps
+  audioBitrate: '',        // kbps
+  videoCodec: '',          // 'h264', 'vp8', 'vp9'
+});
+
+let pollTimer = null;
+
+/* ── Lifecycle ── */
+onMounted(() => {
+  fetchChannels();
+  pollTimer = setInterval(fetchChannels, 5000);
+});
+
+onUnmounted(() => {
+  if (pollTimer) clearInterval(pollTimer);
+});
+
+/* ── Hub API ── */
+async function fetchChannels() {
+  try {
+    // 첫 로드에만 loading 표시 (폴링 시 깜빡임 방지)
+    const isFirstLoad = channels.value.length === 0 && !error.value;
+    if (isFirstLoad) loading.value = true;
+    const res = await fetch(`${hubUrl.value}/api/channels`);
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const newData = await res.json();
+    // 성공 시 에러 초기화
+    error.value = '';
+    // 데이터가 변경된 경우에만 업데이트 (Vue 불필요 재렌더 방지)
+    if (JSON.stringify(newData) !== JSON.stringify(channels.value)) {
+      channels.value = newData;
+    }
+  } catch (e) {
+    // 폴링 에러 시 기존 채널 목록은 유지 (깜빡임 방지)
+    // 첫 로드 실패 시에만 빈 목록 표시
+    if (channels.value.length === 0) {
+      error.value = `Hub ${t('live.connection_failed', 'connection failed')}: ${e.message}`;
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function createChannel() {
+  const form = createForm.value;
+  if (!form.channelId.trim()) {
+    createError.value = t('live.enter_channel_id', 'Please enter a channel ID.');
+    return;
+  }
+
+  creating.value = true;
+  createError.value = '';
+
+  try {
+    const channelId = form.channelId.trim();
+
+    // 화상채팅: SDK(FuzionXPublisher.connect)가 채널 생성을 처리하므로
+    // Hub API를 직접 호출하지 않고 바로 room 입장
+    if (form.type === 'videochat') {
+      showCreateModal.value = false;
+      createForm.value = { channelId: '', type: 'broadcast', sourceMode: 'url', sourceUrl: '', resolution: '', videoBitrate: '', audioBitrate: '', videoCodec: '' };
+      const nick = authStore.user?.name || 'host-' + Math.random().toString(36).slice(2, 6);
+      router.push({ name: 'live-room', params: { channelId }, query: { hub: hubUrl.value, role: 'publisher', nickname: nick } });
+      return;
+    }
+
+    // 방송: Hub API로 채널 생성 (always_on=true, 영구 보존)
+    const body = {
+      channel_id: channelId,
+      source_type: 'url',
+    };
+
+    if (form.sourceUrl.trim()) {
+      body.source_url = form.sourceUrl.trim();
+    }
+
+    // 인코딩 옵션 조립
+    const opts = { always_on: true };
+    if (form.resolution) opts.resolution = form.resolution;
+    if (form.videoBitrate) {
+      opts.video = { bitrate_kbps: parseInt(form.videoBitrate) };
+      if (form.videoCodec) opts.video.codec = form.videoCodec;
+    } else if (form.videoCodec) {
+      opts.video = { codec: form.videoCodec };
+    }
+    if (form.audioBitrate) opts.audio = { bitrate_kbps: parseInt(form.audioBitrate) };
+    body.options = opts;
+
+    const res = await fetch(`${hubUrl.value}/api/channels`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+
+    if (res.status === 409) {
+      createError.value = t('live.channel_exists', 'Channel already exists.');
+      return;
+    }
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}));
+      createError.value = data.error || `${t('live.create_failed', 'Create failed')} (${res.status})`;
+      return;
+    }
+
+    showCreateModal.value = false;
+    createForm.value = { channelId: '', type: 'broadcast', sourceMode: 'url', sourceUrl: '', resolution: '', videoBitrate: '', audioBitrate: '', videoCodec: '' };
+    await fetchChannels();
+  } catch (e) {
+    createError.value = `Hub 연결 실패: ${e.message}`;
+  } finally {
+    creating.value = false;
+  }
+}
+
+async function stopChannel(channelId) {
+  try {
+    await fetch(`${hubUrl.value}/api/channels/${channelId}`, { method: 'DELETE' });
+    await fetchChannels();
+  } catch (e) {
+    error.value = `${t('live.stop_failed', 'Stop failed')}: ${e.message}`;
+  }
+}
+
+function joinChannel(ch) {
+  if (ch.source_type === 'webrtc') {
+    router.push({ name: 'live-room', params: { channelId: ch.channel_id }, query: { hub: hubUrl.value } });
+  } else {
+    router.push({ name: 'live-watch', params: { channelId: ch.channel_id }, query: { hub: hubUrl.value } });
+  }
+}
+</script>
+
+<style scoped>
+.live-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 1.25rem;
+}
+
+.live-card {
+  display: flex;
+  flex-direction: column;
+  padding: 1.25rem;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+.live-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
+}
+
+.live-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.live-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+.badge-broadcast {
+  background: rgba(239, 68, 68, 0.15);
+  color: #f87171;
+  border: 1px solid rgba(239, 68, 68, 0.3);
+}
+.badge-videochat {
+  background: rgba(99, 102, 241, 0.15);
+  color: #818cf8;
+  border: 1px solid rgba(99, 102, 241, 0.3);
+}
+
+.live-viewers {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.live-card-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--text-primary, #e0e0e0);
+}
+
+.live-card-meta {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  margin-bottom: 0.25rem;
+}
+
+.live-card-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: auto;
+  padding-top: 1rem;
+}
+
+/* Modal */
+.live-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.live-modal {
+  width: 90%;
+  max-width: 480px;
+  padding: 2rem;
+}
+
+.live-type-selector {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.live-type-btn {
+  flex: 1;
+  padding: 0.6rem;
+  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 0.85rem;
+  transition: all 0.2s;
+}
+.live-type-btn.active {
+  background: rgba(99, 102, 241, 0.15);
+  color: #818cf8;
+  border-color: rgba(99, 102, 241, 0.4);
+}
+.live-type-btn:hover {
+  border-color: rgba(99, 102, 241, 0.3);
+}
+</style>