@fuzionx/framework 0.1.48 → 0.1.50

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

@@ -0,0 +1,573 @@
+<!--
+  LiveRoom.vue — 화상채팅 페이지.
+
+  역할 선택 (Publisher / Viewer) → 입장.
+  Publisher: FuzionXPublisher (mode=videochat) — 카메라 ON + 리모트 수신.
+  Viewer: FuzionXViewer (mode=videochat) — 리모트 수신만.
+  최대 9인 3×3 그리드 + 로컬 카메라 + 채팅 사이드바.
+-->
+<template>
+  <!-- ── 역할 선택 화면 ── -->
+  <div v-if="!joined" class="container">
+    <section class="hero-section" style="padding:3rem 0 2rem;">
+      <h1 class="hero-title">
+        👥 <span class="gradient-text">VideoChat</span>
+      </h1>
+      <p class="hero-subtitle">채널: <strong>{{ channelId }}</strong></p>
+    </section>
+
+    <div class="glass-card" style="max-width:480px;margin:0 auto;padding:2rem;">
+      <div class="form-group">
+        <label class="form-label">{{ t('live.nickname', '닉네임') }}</label>
+        <input v-model="nickname" type="text" class="form-input" placeholder="닉네임 입력" maxlength="20" />
+      </div>
+
+      <div class="form-group">
+        <label class="form-label">{{ t('live.role', '역할 선택') }}</label>
+        <div class="live-role-selector">
+          <button
+            :class="['live-role-btn', { active: role === 'publisher' }]"
+            @click="role = 'publisher'"
+          >
+            <span class="live-role-icon">🎥</span>
+            <span class="live-role-name">{{ t('live.publisher', '송출자') }}</span>
+            <span class="live-role-desc">카메라 ON</span>
+          </button>
+          <button
+            :class="['live-role-btn', { active: role === 'viewer' }]"
+            @click="role = 'viewer'"
+          >
+            <span class="live-role-icon">👁</span>
+            <span class="live-role-name">{{ t('live.viewer', '시청자') }}</span>
+            <span class="live-role-desc">카메라 OFF</span>
+          </button>
+        </div>
+      </div>
+
+      <div v-if="joinError" class="alert alert-error" style="margin-top:1rem;">{{ joinError }}</div>
+
+      <button
+        class="btn btn-hero-primary btn-full"
+        style="margin-top:1.5rem;"
+        :disabled="joining"
+        @click="joinRoom"
+      >
+        {{ joining ? t('live.connecting', '연결 중...') : t('live.join_room', '입장') }}
+      </button>
+
+      <button class="btn btn-outline btn-full" style="margin-top:0.5rem;" @click="goBack">
+        ← {{ t('live.back', '목록으로') }}
+      </button>
+    </div>
+  </div>
+
+  <!-- ── 화상채팅 화면 ── -->
+  <div v-else class="live-room-layout">
+    <!-- Video Area -->
+    <div class="live-room-video-area">
+      <div class="live-room-topbar">
+        <button class="btn btn-outline" style="padding:0.3rem 0.75rem;font-size:0.8rem;" @click="leaveRoom">
+          ← {{ t('live.leave', '나가기') }}
+        </button>
+        <div class="live-room-info">
+          <span class="live-badge badge-videochat">👥 VideoChat</span>
+          <span style="font-weight:600;color:#e0e0e0;">{{ channelId }}</span>
+          <span style="font-size:0.75rem;color:var(--text-muted);">
+            {{ role === 'publisher' ? '🎥 송출자' : '👁 시청자' }}
+          </span>
+        </div>
+        <span :class="['live-status', `live-status-${status}`]">{{ statusText }}</span>
+      </div>
+
+      <!-- Remote 3×3 Grid -->
+      <div class="live-room-grid">
+        <div v-for="i in 9" :key="i - 1" class="live-room-slot">
+          <video :ref="el => setSlotRef(i - 1, el)" autoplay playsinline></video>
+          <div class="live-room-slot-label">
+            {{ slotLabels[i - 1] || `Slot ${i - 1}` }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Chat Sidebar -->
+    <aside class="live-chat-sidebar">
+      <!-- Local Camera (Publisher only) — 채팅 상단 -->
+      <div v-if="role === 'publisher' && joined" class="live-local-preview">
+        <video ref="localVideoEl" autoplay playsinline muted></video>
+      </div>
+      <div class="live-chat-header">
+        <h3>💬 {{ t('live.chat', 'Chat') }}</h3>
+        <button
+          v-if="role === 'publisher' && joined"
+          :class="['btn', 'btn-outline', 'btn-mic', { 'mic-off': !micEnabled }]"
+          @click="toggleMic"
+        >
+          {{ micEnabled ? '🎙 ON' : '🔇 OFF' }}
+        </button>
+      </div>
+      <div ref="chatContainer" class="live-chat-messages">
+        <template v-for="(msg, idx) in chatMessages" :key="idx">
+          <div v-if="msg.system" class="chat-msg-system">{{ msg.text }}</div>
+          <div v-else class="live-chat-msg">
+            <span class="live-chat-nick">{{ msg.nickname }}</span>
+            <span class="live-chat-text">{{ msg.text }}</span>
+          </div>
+        </template>
+      </div>
+      <div class="live-chat-input-area">
+        <input
+          v-model="chatText"
+          type="text"
+          class="form-input"
+          :placeholder="t('live.chat_placeholder', '메시지 입력...')"
+          style="flex:1;"
+          @keydown.enter="sendChat"
+        />
+        <button class="btn btn-primary" style="padding:0.4rem 0.75rem;" @click="sendChat">
+          {{ t('live.send', '전송') }}
+        </button>
+      </div>
+    </aside>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useLocale } from '../composables/useLocale.js';
+import { useAuthStore } from '../stores/auth.js';
+import { FuzionXPublisher, FuzionXViewer } from '@fuzionx/player';
+
+const { t } = useLocale();
+const route = useRoute();
+const router = useRouter();
+const authStore = useAuthStore();
+
+const channelId = route.params.channelId;
+const hubUrl = route.query.hub || 'http://127.0.0.1:9100';
+
+/* ── State ── */
+const joined = ref(false);
+const joining = ref(false);
+const joinError = ref('');
+const nickname = ref(route.query.nickname || authStore.user?.name || '');
+const role = ref(route.query.role || 'publisher');   // 'publisher' | 'viewer'
+const status = ref('connecting');
+const statusText = ref('connecting...');
+const chatMessages = ref([]);
+const chatText = ref('');
+const slotLabels = ref({});
+const micEnabled = ref(true);
+
+const localVideoEl = ref(null);
+const chatContainer = ref(null);
+const pendingLocalStream = ref(null);
+
+// slot video refs (dynamic)
+const slotRefs = {};
+function setSlotRef(index, el) {
+  if (el) slotRefs[index] = el;
+}
+
+let connection = null;  // FuzionXPublisher or FuzionXViewer
+
+/* ── Lifecycle ── */
+onMounted(() => {
+  // query param으로 role, nickname이 전달되면 바로 입장
+  if (route.query.role && nickname.value) {
+    joinRoom();
+  }
+});
+
+onUnmounted(() => {
+  leaveRoom();
+});
+
+/* ── Join ── */
+async function joinRoom() {
+  if (!nickname.value.trim()) {
+    joinError.value = '닉네임을 입력하세요.';
+    return;
+  }
+
+  joining.value = true;
+  joinError.value = '';
+
+  try {
+    if (role.value === 'publisher') {
+      await joinAsPublisher();
+    } else {
+      await joinAsViewer();
+    }
+    joined.value = true;
+    // media 이벤트가 joined 전에 발생할 수 있으므로, DOM 렌더링 후 로컬 스트림 적용
+    nextTick(() => {
+      if (pendingLocalStream.value && localVideoEl.value) {
+        localVideoEl.value.srcObject = pendingLocalStream.value;
+        pendingLocalStream.value = null;
+      }
+    });
+  } catch (e) {
+    joinError.value = e.message || String(e);
+  } finally {
+    joining.value = false;
+  }
+}
+
+/* ── Publisher ── */
+async function joinAsPublisher() {
+  connection = new FuzionXPublisher({
+    hubUrl,
+    channelId,
+    mode: 'videochat',
+    nickname: nickname.value.trim(),
+  });
+
+  connection.on('media', (localStream) => {
+    // joined 전이면 DOM에 localVideoEl이 없으므로 보관
+    if (localVideoEl.value) {
+      localVideoEl.value.srcObject = localStream;
+    } else {
+      pendingLocalStream.value = localStream;
+    }
+  });
+
+  connection.on('ready', () => {
+    status.value = 'connected';
+    statusText.value = 'Connected';
+    appendSystem('WebRTC 연결됨 (송출 중)');
+  });
+
+  connection.on('stream', (stream, slotIndex) => {
+    appendSystem(`리모트 스트림 수신: Slot ${slotIndex}`);
+    nextTick(() => {
+      const videoEl = slotRefs[slotIndex];
+      if (videoEl) {
+        videoEl.srcObject = stream;
+        videoEl.play().catch(() => {});
+      }
+    });
+  });
+
+  connection.on('slot', (slot) => {
+    slotLabels.value = { ...slotLabels.value, [slot.slotIndex]: slot.nickname };
+  });
+
+  connection.on('slot_remove', ({ slotIndex }) => {
+    const labels = { ...slotLabels.value };
+    delete labels[slotIndex];
+    slotLabels.value = labels;
+    // 비디오 정리
+    const videoEl = slotRefs[slotIndex];
+    if (videoEl) videoEl.srcObject = null;
+    appendSystem(`Slot ${slotIndex} 해제됨`);
+  });
+
+  connection.on('chat', ({ nickname: nick, text }) => {
+    appendChat(nick, text);
+  });
+
+  connection.on('error', (err) => {
+    status.value = 'error';
+    statusText.value = 'Error';
+    appendSystem(`❌ ${err.message || err}`);
+  });
+
+  connection.on('close', () => {
+    status.value = 'disconnected';
+    statusText.value = 'Disconnected';
+    appendSystem('연결 끊김');
+  });
+
+  await connection.connect();
+}
+
+/* ── Viewer ── */
+async function joinAsViewer() {
+  connection = new FuzionXViewer({
+    hubUrl,
+    channelId,
+    mode: 'videochat',
+    nickname: nickname.value.trim(),
+  });
+
+  connection.on('stream', (stream, slotIndex) => {
+    appendSystem(`리모트 스트림 수신: Slot ${slotIndex}`);
+    nextTick(() => {
+      const videoEl = slotRefs[slotIndex];
+      if (videoEl) {
+        videoEl.srcObject = stream;
+        videoEl.play().catch(() => {});
+      }
+    });
+  });
+
+  connection.on('connected', () => {
+    status.value = 'connected';
+    statusText.value = 'Connected';
+    appendSystem('WebRTC 연결됨 (시청 중)');
+  });
+
+  connection.on('slot', (slot) => {
+    slotLabels.value = { ...slotLabels.value, [slot.slotIndex]: slot.nickname };
+  });
+
+  connection.on('slot_remove', ({ slotIndex }) => {
+    const labels = { ...slotLabels.value };
+    delete labels[slotIndex];
+    slotLabels.value = labels;
+    const videoEl = slotRefs[slotIndex];
+    if (videoEl) videoEl.srcObject = null;
+    appendSystem(`Slot ${slotIndex} 해제됨`);
+  });
+
+  connection.on('chat', ({ nickname: nick, text }) => {
+    appendChat(nick, text);
+  });
+
+  connection.on('error', (err) => {
+    status.value = 'error';
+    statusText.value = 'Error';
+    appendSystem(`❌ ${err.message || err}`);
+  });
+
+  connection.on('close', () => {
+    status.value = 'disconnected';
+    statusText.value = 'Disconnected';
+    appendSystem('연결 끊김');
+  });
+
+  await connection.connect();
+}
+
+/* ── Leave ── */
+function leaveRoom() {
+  if (connection) {
+    if (typeof connection.disconnect === 'function') {
+      connection.disconnect();
+    }
+    connection = null;
+  }
+  joined.value = false;
+  status.value = 'connecting';
+  statusText.value = 'connecting...';
+  chatMessages.value = [];
+  slotLabels.value = {};
+}
+
+/* ── Chat ── */
+function sendChat() {
+  const text = chatText.value.trim();
+  if (!text || !connection) return;
+  connection.chat(text);
+  appendChat(nickname.value, text);
+  chatText.value = '';
+}
+
+function appendChat(nick, text) {
+  chatMessages.value.push({ nickname: nick, text, system: false });
+  scrollChat();
+}
+
+function appendSystem(text) {
+  chatMessages.value.push({ text, system: true });
+  scrollChat();
+}
+
+function scrollChat() {
+  nextTick(() => {
+    if (chatContainer.value) {
+      chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
+    }
+  });
+}
+
+function goBack() {
+  router.push({ name: 'live' });
+}
+
+function toggleMic() {
+  if (!pendingLocalStream.value && !localVideoEl.value?.srcObject) return;
+  const stream = localVideoEl.value?.srcObject || pendingLocalStream.value;
+  if (!stream) return;
+  micEnabled.value = !micEnabled.value;
+  stream.getAudioTracks().forEach(t => { t.enabled = micEnabled.value; });
+}
+</script>
+
+<style scoped>
+/* ── Role Selector ── */
+.live-role-selector {
+  display: flex;
+  gap: 1rem;
+}
+.live-role-btn {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 1.25rem;
+  border: 2px solid var(--border-color, rgba(255,255,255,0.08));
+  border-radius: 12px;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.live-role-btn.active {
+  border-color: rgba(99, 102, 241, 0.6);
+  background: rgba(99, 102, 241, 0.1);
+}
+.live-role-btn:hover {
+  border-color: rgba(99, 102, 241, 0.4);
+}
+.live-role-icon { font-size: 2rem; }
+.live-role-name { font-weight: 600; color: #e0e0e0; font-size: 0.95rem; }
+.live-role-desc { font-size: 0.75rem; color: var(--text-muted, #888); }
+
+/* ── Room Layout ── */
+.live-room-layout {
+  display: flex;
+  height: calc(100vh - 60px);
+  overflow: hidden;
+}
+
+.live-room-video-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: #0a0a0f;
+}
+
+.live-room-topbar {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.5rem 1rem;
+  background: rgba(10, 10, 15, 0.95);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.live-room-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+}
+
+/* ── 3×3 Grid ── */
+.live-room-grid {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: 2px;
+  padding: 2px;
+}
+
+.live-room-slot {
+  position: relative;
+  background: #111;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.live-room-slot video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.live-room-slot-label {
+  position: absolute;
+  bottom: 4px;
+  left: 4px;
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.7rem;
+}
+
+/* ── Local Camera Preview (chat sidebar top) ── */
+.live-local-preview {
+  padding: 0.5rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+.live-local-preview video {
+  width: 100%;
+  border-radius: 6px;
+  max-height: 180px;
+  object-fit: cover;
+}
+.btn-mic {
+  padding: 0.25rem 0.6rem;
+  font-size: 0.75rem;
+}
+.btn-mic.mic-off {
+  color: #ef4444;
+  border-color: #ef4444;
+}
+
+/* ── Chat Sidebar (shared with LiveWatch) ── */
+.live-chat-sidebar {
+  width: 320px;
+  background: rgba(18, 18, 31, 0.95);
+  border-left: 1px solid rgba(255, 255, 255, 0.06);
+  display: flex;
+  flex-direction: column;
+}
+.live-chat-header {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.live-chat-header h3 { font-size: 0.9rem; color: #e0e0e0; margin: 0; }
+.live-chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.75rem;
+  font-size: 0.8rem;
+  line-height: 1.5;
+}
+.live-chat-msg { margin-bottom: 0.4rem; }
+.live-chat-nick { color: #818cf8; font-weight: 600; margin-right: 0.4rem; }
+.live-chat-text { color: #d0d0d0; }
+.live-chat-input-area {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+/* badges / status */
+.live-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.2rem 0.6rem;
+  border-radius: 9999px;
+  font-size: 0.7rem;
+  font-weight: 600;
+}
+.badge-videochat {
+  background: rgba(99, 102, 241, 0.15);
+  color: #818cf8;
+}
+.live-status {
+  font-size: 0.75rem;
+  padding: 0.2rem 0.6rem;
+  border-radius: 9999px;
+}
+.live-status-connecting { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
+.live-status-connected { background: rgba(16, 185, 129, 0.2); color: #10b981; }
+.live-status-error { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
+.live-status-disconnected { background: rgba(107, 114, 128, 0.2); color: #6b7280; }
+
+@media (max-width: 768px) {
+  .live-room-layout { flex-direction: column; }
+  .live-chat-sidebar { width: 100%; height: 40vh; }
+  .live-room-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
+}
+</style>