@fuzionx/framework 0.1.49 → 0.1.50

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

@@ -0,0 +1,319 @@
+<!--
+  LiveWatch.vue — 방송 시청 페이지.
+
+  FuzionXViewer (mode=broadcast) 사용.
+  Hub API에서 채널 정보 조회 후 자동 연결.
+  비디오 플레이어 + 채팅 사이드바.
+-->
+<template>
+  <div class="live-watch-layout">
+    <!-- ── Video Area ── -->
+    <div class="live-watch-video">
+      <div class="live-watch-topbar">
+        <button class="btn btn-outline" style="padding:0.3rem 0.75rem;font-size:0.8rem;" @click="goBack">
+          ← {{ t('live.back', '목록으로') }}
+        </button>
+        <div class="live-watch-info">
+          <span class="live-badge badge-broadcast">🔴 Broadcast</span>
+          <span class="live-watch-channel">{{ channelId }}</span>
+          <span class="live-viewers">👁 {{ viewerCount }}</span>
+        </div>
+        <span :class="['live-status', `live-status-${status}`]">{{ statusText }}</span>
+      </div>
+
+      <div class="live-watch-player">
+        <video ref="videoEl" autoplay playsinline></video>
+        <div v-if="!connected" class="live-watch-placeholder">
+          <div v-if="error" style="color:#f87171;">❌ {{ error }}</div>
+          <div v-else>{{ t('live.connecting', '연결 중...') }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── Chat Sidebar ── -->
+    <aside class="live-chat-sidebar">
+      <div class="live-chat-header">
+        <h3>💬 {{ t('live.chat', 'Chat') }}</h3>
+      </div>
+      <div ref="chatContainer" class="live-chat-messages">
+        <template v-for="(msg, i) in chatMessages" :key="i">
+          <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 { FuzionXViewer } from '@fuzionx/player';
+
+const { t } = useLocale();
+const route = useRoute();
+const router = useRouter();
+
+const channelId = route.params.channelId;
+const hubUrl = route.query.hub || 'http://127.0.0.1:9100';
+
+/* ── State ── */
+const videoEl = ref(null);
+const chatContainer = ref(null);
+const connected = ref(false);
+const status = ref('connecting');
+const statusText = ref('connecting...');
+const error = ref('');
+const viewerCount = ref(0);
+const chatMessages = ref([]);
+const chatText = ref('');
+
+let viewer = null;
+
+/* ── Lifecycle ── */
+onMounted(() => {
+  connectViewer();
+});
+
+onUnmounted(() => {
+  if (viewer) {
+    viewer.disconnect();
+    viewer = null;
+  }
+});
+
+/* ── Connect ── */
+function connectViewer() {
+  viewer = new FuzionXViewer({
+    hubUrl,
+    channelId,
+    mode: 'broadcast',
+    nickname: 'viewer-' + Math.random().toString(36).slice(2, 6),
+  });
+
+  viewer.on('stream', (stream) => {
+    if (videoEl.value) {
+      videoEl.value.srcObject = stream;
+      videoEl.value.play().catch(() => {});
+    }
+  });
+
+  viewer.on('connected', () => {
+    connected.value = true;
+    status.value = 'connected';
+    statusText.value = 'Connected';
+    appendSystem('WebRTC 연결됨');
+  });
+
+  viewer.on('chat', ({ nickname, text }) => {
+    appendChat(nickname, text);
+  });
+
+  viewer.on('error', (err) => {
+    error.value = err.message || String(err);
+    status.value = 'error';
+    statusText.value = 'Error';
+    appendSystem(`❌ ${err.message || err}`);
+  });
+
+  viewer.on('close', () => {
+    connected.value = false;
+    status.value = 'disconnected';
+    statusText.value = 'Disconnected';
+    appendSystem('연결 끊김');
+  });
+
+  viewer.connect();
+}
+
+/* ── Chat ── */
+function sendChat() {
+  const text = chatText.value.trim();
+  if (!text || !viewer) return;
+  viewer.chat(text);
+  appendChat('나', text);
+  chatText.value = '';
+}
+
+function appendChat(nickname, text) {
+  chatMessages.value.push({ nickname, 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' });
+}
+</script>
+
+<style scoped>
+.live-watch-layout {
+  display: flex;
+  height: calc(100vh - 60px);
+  overflow: hidden;
+}
+
+.live-watch-video {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: #000;
+}
+
+.live-watch-topbar {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.5rem 1rem;
+  background: rgba(10, 10, 15, 0.9);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.live-watch-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+}
+
+.live-watch-channel {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: #e0e0e0;
+}
+
+.live-viewers {
+  font-size: 0.8rem;
+  color: var(--text-muted, #888);
+}
+
+.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; }
+
+.live-watch-player {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.live-watch-player video {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.live-watch-placeholder {
+  position: absolute;
+  color: var(--text-muted, #888);
+  font-size: 1rem;
+}
+
+/* Chat Sidebar */
+.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);
+}
+.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 */
+.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-broadcast {
+  background: rgba(239, 68, 68, 0.15);
+  color: #f87171;
+}
+
+@media (max-width: 768px) {
+  .live-watch-layout {
+    flex-direction: column;
+  }
+  .live-chat-sidebar {
+    width: 100%;
+    height: 40vh;
+  }
+}
+</style>

package/cli/templates/make/app-ssr/controllers/LiveController.js

@@ -0,0 +1,36 @@
+import { Controller } from '@fuzionx/framework';
+
+/**
+ * SSR LiveController — WebRTC 라이브 채널 페이지
+ *
+ * 인증 불필요 — 공개 페이지.
+ */
+export default class LiveController extends Controller {
+  /** @type {import('@fuzionx/framework').RouteHandler} 채널 목록 */
+  static index;
+  /** @type {import('@fuzionx/framework').RouteHandler} 방송 시청 */
+  static watch;
+  /** @type {import('@fuzionx/framework').RouteHandler} 화상채팅 입장 */
+  static room;
+
+  /**
+   * GET /live — 라이브 채널 목록
+   */
+  async index(ctx) {
+    ctx.render('live/index');
+  }
+
+  /**
+   * GET /live/watch/:channelId — 방송 시청
+   */
+  async watch(ctx) {
+    ctx.render('live/watch', { channelId: ctx.params.channelId });
+  }
+
+  /**
+   * GET /live/room/:channelId — 화상채팅 입장
+   */
+  async room(ctx) {
+    ctx.render('live/room', { channelId: ctx.params.channelId });
+  }
+}

package/cli/templates/make/app-ssr/routes/web.js

@@ -2,6 +2,7 @@ import { auth, loadUser } from '@fuzionx/framework';
 import HomeController from '../controllers/HomeController.js';
 import FeaturesController from '../controllers/FeaturesController.js';
 import ChatController from '../controllers/ChatController.js';
+import LiveController from '../controllers/LiveController.js';
 import AuthController from '../controllers/AuthController.js';
 import UserController from '../controllers/UserController.js';
 import PostController from '../controllers/PostController.js';
@@ -25,6 +26,11 @@ export default (r) => {
 
   // ── 인증 필요 (built-in auth 미들웨어) ──
   r.group('', { middleware: [auth({ redirectTo: '/login' })] }, (r) => {
+    // 라이브
+    r.get('/live', LiveController.index);
+    r.get('/live/watch/:channelId', LiveController.watch);
+    r.get('/live/room/:channelId', LiveController.room);
+
     // 채팅
     r.get('/chat', ChatController.index);
 

package/cli/templates/make/app-ssr/views/default/layouts/main.html

@@ -13,6 +13,7 @@
   {% block head %}{% endblock %}
   <script>
     window.__FX__ENC_ENABLED = {{ config.bridge.asp.enabled | default(value=false) }} || {{ config.app.asp.enabled | default(value=false) }}
+    {% if auth.user %}window.__FX_USER_NAME__ = "{{ auth.user.name }}";{% endif %}
   </script>
 </head>
 <body>
@@ -28,6 +29,7 @@
         <a href="/features" class="nav-link">{{ t(key="nav.features", default="Features") }}</a>
         <a href="/chat" class="nav-link">{{ t(key="nav.chat", default="Chat Demo") }}</a>
         <a href="/board" class="nav-link">{{ t(key="nav.board", default="게시판") }}</a>
+        <a href="/live" class="nav-link">{{ t(key="nav.live", default="Live") }}</a>
         {% if auth.user %}
         <a href="/profile" class="nav-link">{{ t(key="nav.profile", default="프로필") }}</a>
         <form action="/logout" method="POST" class="nav-logout">