@fuzionx/framework 0.1.48 → 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

@@ -1,15 +1,18 @@
-import { auth } from '@fuzionx/framework';
+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';
 
 export default (r) => {
-  // ── 공개 페이지 (인증 불필요) ──
-  r.get('/', HomeController.index);
-  r.get('/features', FeaturesController.index);
+  // ── 공개 페이지 (인증 불필요, 세션 유저 로드) ──
+  r.group('', { middleware: [loadUser()] }, (r) => {
+    r.get('/', HomeController.index);
+    r.get('/features', FeaturesController.index);
+  });
 
   // ── 인증 ──
   r.get('/login', AuthController.loginPage);
@@ -23,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">

package/cli/templates/make/app-ssr/views/default/pages/board/form.html

@@ -81,6 +81,7 @@
         </div>
         <div class="progress-info" style="display:flex;justify-content:space-between;margin-top:6px;font-size:0.85rem;color:#aaa">
           <span id="progressText">0%</span>
+          <span id="progressSize"></span>
           <span id="progressSpeed"></span>
         </div>
       </div>
@@ -128,7 +129,8 @@ function editorInsert(text) {
   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';
   }
 
   function renderFiles() {
@@ -168,7 +170,25 @@ function editorInsert(text) {
   });
 })();
 
-/** XHR 업로드 — 진행률 + 자동 리다이렉트 */
+/** i18n 텍스트 */
+var _uploadLabels = {
+  speed: '{{ t(key="board.upload_speed", default="속도") }}',
+  complete: '{{ t(key="board.upload_complete", default="업로드 완료!") }}',
+  error: '{{ t(key="board.upload_error", default="오류 발생") }}',
+  networkError: '{{ t(key="board.upload_network_error", default="네트워크 오류") }}',
+  uploading: '{{ t(key="board.uploading", default="업로드 중...") }}',
+  thumbnailExtracting: '{{ t(key="board.thumbnail_extracting", default="🔄 썸네일 추출중...") }}'
+};
+
+/** 파일 크기 포맷 (진행률용) */
+function _fmtSize(bytes) {
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
+  if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB';
+  return (bytes / 1073741824).toFixed(2) + ' GB';
+}
+
+/** XHR 업로드 — 진행률 + 파일 크기 + 속도 + 자동 리다이렉트 */
 function handleUpload(e) {
   var fileInput = document.getElementById('fileInput');
   if (!fileInput || !fileInput.files || fileInput.files.length === 0) {
@@ -181,10 +201,11 @@ function handleUpload(e) {
   var progress = document.getElementById('uploadProgress');
   var fill = document.getElementById('progressFill');
   var pText = document.getElementById('progressText');
+  var pSize = document.getElementById('progressSize');
   var pSpeed = document.getElementById('progressSpeed');
 
   btn.disabled = true;
-  btn.textContent = '업로드 중...';
+  btn.textContent = _uploadLabels.uploading;
   progress.style.display = 'block';
 
   var formData = new FormData(form);
@@ -197,30 +218,35 @@ function handleUpload(e) {
     fill.style.width = pct + '%';
     pText.textContent = pct + '%';
 
+    // 파일 크기 표시 (loaded / total)
+    pSize.textContent = _fmtSize(ev.loaded) + ' / ' + _fmtSize(ev.total);
+
     var elapsed = (Date.now() - startTime) / 1000;
     if (elapsed > 0.5) {
       var bps = ev.loaded / elapsed;
+      var speedVal;
       if (bps > 1048576) {
-        pSpeed.textContent = (bps / 1048576).toFixed(1) + ' MB/s';
+        speedVal = (bps / 1048576).toFixed(1) + ' MB/s';
       } else {
-        pSpeed.textContent = (bps / 1024).toFixed(0) + ' KB/s';
+        speedVal = (bps / 1024).toFixed(0) + ' KB/s';
       }
+      pSpeed.textContent = _uploadLabels.speed + ': ' + speedVal;
     }
   };
 
   xhr.onload = function() {
     if (xhr.status >= 200 && xhr.status < 400) {
       fill.style.width = '100%';
-      pText.textContent = '업로드 완료!';
+      pText.textContent = _uploadLabels.complete;
       pSpeed.textContent = '';
-      btn.textContent = '🔄 썸네일 추출중...';
+      btn.textContent = _uploadLabels.thumbnailExtracting;
       setTimeout(function() {
         window.location.href = xhr.responseURL || '/board';
       }, 1500);
     } else {
       btn.disabled = false;
       btn.textContent = '재시도';
-      pText.textContent = '오류 발생';
+      pText.textContent = _uploadLabels.error;
       fill.style.background = '#e74c3c';
     }
   };
@@ -228,7 +254,7 @@ function handleUpload(e) {
   xhr.onerror = function() {
     btn.disabled = false;
     btn.textContent = '재시도';
-    pText.textContent = '네트워크 오류';
+    pText.textContent = _uploadLabels.networkError;
     fill.style.background = '#e74c3c';
   };