@fuzionx/framework 0.1.48 → 0.1.50

package/cli/templates/make/app-ssr/views/default/pages/live/index.html

@@ -0,0 +1,351 @@
+{% extends "layouts/main.html" %}
+{% block title %}Live Channels — FuzionX WebRTC{% endblock %}
+{% block description %}FuzionX WebRTC live streaming and video chat demo. Broadcast and video conferencing powered by @fuzionx/player SDK.{% endblock %}
+{% block content %}
+
+<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(key="live.hero_sub", default="WebRTC 라이브 방송 · 화상채팅") }}</p>
+  </section>
+
+  <!-- ── Hub URL 설정 ── -->
+  <div class="glass-card" style="margin-bottom:1.5rem;padding:0.75rem 1.25rem;display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;">
+    <label style="font-size:0.8rem;color:var(--text-muted);white-space:nowrap;">Hub URL</label>
+    <input id="hub-url" type="text" class="form-input" value="http://127.0.0.1:9100"
+      style="flex:1;min-width:200px;padding:0.4rem 0.75rem;font-size:0.85rem;" />
+    <button class="btn btn-primary" style="padding:0.4rem 1rem;font-size:0.85rem;" onclick="fetchChannels()">
+      {{ t(key="live.refresh", default="새로고침") }}
+    </button>
+    <button class="btn btn-hero-primary" style="padding:0.4rem 1rem;font-size:0.85rem;" onclick="openCreateModal()">
+      + {{ t(key="live.create", default="새 채널") }}
+    </button>
+  </div>
+
+  <!-- ── Error ── -->
+  <div id="live-error" class="alert alert-error" style="display:none;margin-bottom:1rem;"></div>
+
+  <!-- ── Channel List ── -->
+  <div id="live-empty" class="glass-card" style="text-align:center;padding:3rem;display:none;">
+    <p style="color:var(--text-muted);font-size:1rem;">{{ t(key="live.no_channels", default="활성 채널이 없습니다.") }}</p>
+    <p style="color:var(--text-muted);font-size:0.85rem;margin-top:0.5rem;">{{ t(key="live.start_hint", default="새 채널을 만들어 시작하세요.") }}</p>
+  </div>
+
+  <div id="live-grid" class="live-grid"></div>
+</div>
+
+<!-- ── Create Modal ── -->
+<div id="create-modal" class="live-modal-overlay" style="display:none;" onclick="if(event.target===this)closeCreateModal()">
+  <div class="glass-card live-modal">
+    <h2 style="margin-bottom:1.5rem;">📡 {{ t(key="live.create_title", default="새 채널 만들기") }}</h2>
+
+    <div class="form-group">
+      <label class="form-label">{{ t(key="live.channel_id", default="채널 ID") }}</label>
+      <input id="create-channel-id" type="text" class="form-input" placeholder="my-channel" />
+    </div>
+
+    <div class="form-group">
+      <label class="form-label">{{ t(key="live.type", default="타입") }}</label>
+      <div class="live-type-selector">
+        <button class="live-type-btn active" id="type-broadcast" onclick="selectType('broadcast')">
+          🔴 {{ t(key="live.broadcast", default="방송") }}
+        </button>
+        <button class="live-type-btn" id="type-videochat" onclick="selectType('videochat')">
+          👥 {{ t(key="live.videochat", default="화상채팅") }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Broadcast 옵션 -->
+    <div id="broadcast-options">
+      <div class="form-group">
+        <label class="form-label">{{ t(key="live.source", default="소스") }}</label>
+        <div class="live-type-selector">
+          <button class="live-type-btn active" id="src-url" onclick="selectSource('url')">
+            🌐 {{ t(key="live.url_stream", default="외부 URL") }}
+          </button>
+          <button class="live-type-btn" id="src-file" onclick="selectSource('file')">
+            📁 {{ t(key="live.file_stream", default="파일 스트리밍") }}
+          </button>
+        </div>
+      </div>
+      <div class="form-group">
+        <label class="form-label" id="source-label">{{ t(key="live.source_url", default="스트리밍 URL") }}</label>
+        <input id="create-source-url" type="text" class="form-input" placeholder="rtmp://..." />
+      </div>
+    </div>
+
+    <!-- 인코딩 옵션 (Broadcast 전용) -->
+    <div id="encoding-options" style="margin-top:0.5rem;">
+      <div class="form-group">
+        <label class="form-label">⚙️ {{ t(key="live.options", default="인코딩 옵션") }}</label>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;">
+          <div>
+            <label class="form-label" style="font-size:0.75rem;">{{ t(key="live.resolution", default="해상도") }}</label>
+            <select id="opt-resolution" class="form-input" style="padding:0.4rem 0.5rem;font-size:0.85rem;">
+              <option value="">{{ t(key="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(key="live.video_bitrate", default="영상 비트레이트") }}</label>
+            <select id="opt-video-bitrate" class="form-input" style="padding:0.4rem 0.5rem;font-size:0.85rem;">
+              <option value="">{{ t(key="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(key="live.audio_bitrate", default="오디오 비트레이트") }}</label>
+            <select id="opt-audio-bitrate" class="form-input" style="padding:0.4rem 0.5rem;font-size:0.85rem;">
+              <option value="">{{ t(key="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(key="live.video_codec", default="비디오 코덱") }}</label>
+            <select id="opt-video-codec" class="form-input" style="padding:0.4rem 0.5rem;font-size:0.85rem;">
+              <option value="">{{ t(key="live.default", default="기본값") }}</option>
+              <option value="h264">H.264</option>
+              <option value="vp8">VP8</option>
+              <option value="vp9">VP9</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="create-error" class="alert alert-error" style="display:none;margin-top:1rem;"></div>
+
+    <div style="display:flex;gap:0.75rem;margin-top:1.5rem;">
+      <button class="btn btn-outline" style="flex:1;" onclick="closeCreateModal()">
+        {{ t(key="live.cancel", default="취소") }}
+      </button>
+      <button id="create-btn" class="btn btn-hero-primary" style="flex:1;" onclick="createChannel()">
+        {{ t(key="live.create_btn", default="생성") }}
+      </button>
+    </div>
+  </div>
+</div>
+
+<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>
+
+{% endblock %}
+
+{% block scripts %}
+<style>
+.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 .2s,box-shadow .2s;}
+.live-card:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(99,102,241,.15);}
+.live-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;}
+.live-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:600;}
+.badge-broadcast{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.3);}
+.badge-videochat{background:rgba(99,102,241,.15);color:#818cf8;border:1px solid rgba(99,102,241,.3);}
+.live-card-title{font-size:1.1rem;font-weight:600;margin-bottom:.5rem;color:var(--text-primary,#e0e0e0);}
+.live-card-meta{font-size:.8rem;color:var(--text-muted);margin-bottom:.25rem;}
+.live-card-actions{display:flex;gap:.5rem;margin-top:auto;padding-top:1rem;}
+.live-modal-overlay{position:fixed;inset:0;background:rgba(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:.5rem;}
+.live-type-btn{flex:1;padding:.6rem;border:1px solid var(--border-color,rgba(255,255,255,.08));border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;font-size:.85rem;transition:all .2s;}
+.live-type-btn.active{background:rgba(99,102,241,.15);color:#818cf8;border-color:rgba(99,102,241,.4);}
+.live-type-btn:hover{border-color:rgba(99,102,241,.3);}
+</style>
+
+<script>
+const __i18n = {
+  join: '{{ t(key="live.join", default="입장") }}',
+  stop: '{{ t(key="live.stop", default="종료") }}',
+  connection_failed: '{{ t(key="live.connection_failed", default="연결 실패") }}',
+  stop_failed: '{{ t(key="live.stop_failed", default="종료 실패") }}',
+  source_url: '{{ t(key="live.source_url", default="스트리밍 URL") }}',
+  file_path: '{{ t(key="live.file_path", default="파일 경로") }}',
+  enter_channel_id: '{{ t(key="live.enter_channel_id", default="채널 ID를 입력하세요.") }}',
+  channel_exists: '{{ t(key="live.channel_exists", default="이미 존재하는 채널입니다.") }}',
+  create_failed: '{{ t(key="live.create_failed", default="생성 실패") }}',
+};
+
+let _createType = 'broadcast';
+let _createSource = 'url';
+
+function getHubUrl() { return document.getElementById('hub-url').value.trim(); }
+
+function showError(msg) {
+  const el = document.getElementById('live-error');
+  el.textContent = msg; el.style.display = msg ? 'block' : 'none';
+}
+
+let _lastChannelsJson = '';
+
+async function fetchChannels() {
+  showError('');
+  try {
+    const res = await fetch(getHubUrl() + '/api/channels');
+    if (!res.ok) throw new Error('HTTP ' + res.status);
+    const channels = await res.json();
+    const json = JSON.stringify(channels);
+    if (json !== _lastChannelsJson) {
+      _lastChannelsJson = json;
+      renderChannels(channels);
+    }
+  } catch(e) {
+    showError(__i18n.connection_failed + ': ' + e.message);
+    if (_lastChannelsJson !== '[]') {
+      _lastChannelsJson = '[]';
+      renderChannels([]);
+    }
+  }
+}
+
+function renderChannels(channels) {
+  const grid = document.getElementById('live-grid');
+  const empty = document.getElementById('live-empty');
+  if (channels.length === 0) {
+    grid.innerHTML = ''; empty.style.display = 'block';
+    return;
+  }
+  empty.style.display = 'none';
+  grid.innerHTML = channels.map(ch => `
+    <div 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' ? '👥 VideoChat' : '🔴 Broadcast'}
+        </span>
+        <span style="font-size:.8rem;color:var(--text-muted);">👁 ${ch.viewer_count || 0}</span>
+      </div>
+      <div>
+        <h3 class="live-card-title">${escHtml(ch.channel_id)}</h3>
+        <p class="live-card-meta">${ch.source_url ? escHtml(ch.source_url) : ch.source_type}</p>
+        <p class="live-card-meta" style="font-size:.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;" onclick="joinChannel('${escAttr(ch.channel_id)}','${ch.source_type}')">${__i18n.join}</button>
+        <button class="btn btn-outline" style="color:#ef4444;border-color:#ef4444;" onclick="stopChannel('${escAttr(ch.channel_id)}')">${__i18n.stop}</button>
+      </div>
+    </div>
+  `).join('');
+}
+
+function escHtml(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+function escAttr(s) { return String(s).replace(/'/g,"\\'").replace(/"/g,'&quot;'); }
+
+function joinChannel(channelId, sourceType) {
+  const hub = encodeURIComponent(getHubUrl());
+  if (sourceType === 'webrtc') {
+    location.href = `/live/room/${channelId}?hub=${hub}`;
+  } else {
+    location.href = `/live/watch/${channelId}?hub=${hub}`;
+  }
+}
+
+async function stopChannel(channelId) {
+  try {
+    await fetch(getHubUrl() + '/api/channels/' + channelId, { method: 'DELETE' });
+    fetchChannels();
+  } catch(e) {
+    showError(__i18n.stop_failed + ': ' + e.message);
+  }
+}
+
+// Modal
+function openCreateModal() { document.getElementById('create-modal').style.display = 'flex'; }
+function closeCreateModal() { document.getElementById('create-modal').style.display = 'none'; }
+
+function selectType(type) {
+  _createType = type;
+  document.getElementById('type-broadcast').className = 'live-type-btn' + (type === 'broadcast' ? ' active' : '');
+  document.getElementById('type-videochat').className = 'live-type-btn' + (type === 'videochat' ? ' active' : '');
+  document.getElementById('broadcast-options').style.display = type === 'broadcast' ? 'block' : 'none';
+  document.getElementById('encoding-options').style.display = type === 'broadcast' ? 'block' : 'none';
+}
+
+function selectSource(src) {
+  _createSource = src;
+  document.getElementById('src-url').className = 'live-type-btn' + (src === 'url' ? ' active' : '');
+  document.getElementById('src-file').className = 'live-type-btn' + (src === 'file' ? ' active' : '');
+  const label = document.getElementById('source-label');
+  const input = document.getElementById('create-source-url');
+  if (src === 'url') {
+    label.textContent = __i18n.source_url; input.placeholder = 'rtmp://...';
+  } else {
+    label.textContent = __i18n.file_path; input.placeholder = '/path/to/video.mp4';
+  }
+}
+
+async function createChannel() {
+  const channelId = document.getElementById('create-channel-id').value.trim();
+  const errEl = document.getElementById('create-error');
+  if (!channelId) { errEl.textContent = __i18n.enter_channel_id; errEl.style.display = 'block'; return; }
+  errEl.style.display = 'none';
+
+  if (_createType === 'videochat') {
+    closeCreateModal();
+    const hub = encodeURIComponent(getHubUrl());
+    const nick = encodeURIComponent(window.__FX_USER_NAME__ || 'host-' + Math.random().toString(36).slice(2, 6));
+    location.href = '/live/room/' + channelId + '?hub=' + hub + '&role=publisher&nickname=' + nick;
+    return;
+  }
+
+  const body = {
+    channel_id: channelId,
+    source_type: 'url',
+  };
+  const url = document.getElementById('create-source-url').value.trim();
+  if (url) body.source_url = url;
+
+  const opts = { always_on: true };
+  const resolution = document.getElementById('opt-resolution').value;
+  const vBitrate = document.getElementById('opt-video-bitrate').value;
+  const aBitrate = document.getElementById('opt-audio-bitrate').value;
+  const vCodec = document.getElementById('opt-video-codec').value;
+  if (resolution) opts.resolution = resolution;
+  if (vBitrate) {
+    opts.video = { bitrate_kbps: parseInt(vBitrate) };
+    if (vCodec) opts.video.codec = vCodec;
+  } else if (vCodec) {
+    opts.video = { codec: vCodec };
+  }
+  if (aBitrate) opts.audio = { bitrate_kbps: parseInt(aBitrate) };
+  body.options = opts;
+
+  try {
+    document.getElementById('create-btn').disabled = true;
+    const res = await fetch(getHubUrl() + '/api/channels', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+    if (res.status === 409) { errEl.textContent = __i18n.channel_exists; errEl.style.display = 'block'; return; }
+    if (!res.ok) { const d = await res.json().catch(()=>({})); errEl.textContent = d.error || __i18n.create_failed; errEl.style.display = 'block'; return; }
+    closeCreateModal();
+    fetchChannels();
+  } catch(e) {
+    errEl.textContent = __i18n.connection_failed + ': ' + e.message; errEl.style.display = 'block';
+  } finally {
+    document.getElementById('create-btn').disabled = false;
+  }
+}
+
+fetchChannels();
+setInterval(fetchChannels, 5000);
+</script>
+{% endblock %}