kingkont 0.8.8 → 0.9.0

package/renderer/styles.css

@@ -288,6 +288,18 @@
     color: #444; font-size: 32px;
   }
   .welcome-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  /* ☁-бейдж в углу обложки облачного проекта. Делает cloud/folder-проекты
+     визуально различимыми в общем grid'е (без необходимости второго рядa). */
+  .welcome-card-thumb { position: relative; }
+  .welcome-card-cloud-badge {
+    position: absolute; right: 6px; bottom: 6px;
+    background: rgba(20, 30, 50, 0.85); color: #9cf;
+    border: 1px solid rgba(160, 200, 255, 0.35);
+    border-radius: 50%; width: 22px; height: 22px;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 13px; line-height: 1;
+    backdrop-filter: blur(2px);
+  }
   .welcome-card-meta { padding: 8px 12px; }
   .welcome-card-name { font-size: 13px; color: #ddd; word-break: break-all; }
   .welcome-card-ts { font-size: 11px; color: #666; margin-top: 2px; }
@@ -735,8 +747,16 @@
   .fs-modal #fsClose {
     position: absolute; top: 16px; right: 16px;
     background: rgba(0,0,0,0.6); border: 1px solid #444; color: #fff;
-    font-size: 22px; line-height: 1; padding: 4px 12px; border-radius: 4px;
+    font-size: 22px; line-height: 1;
+    /* Увеличен hit-area: квадрат 40×40, центрированный «×». Раньше padding
+       был 4px 12px → размер ~30×30, и нижне-правые пиксели оказывались под
+       <img>/<video> в .fs-stage (одна стека, нет z-index). z-index:1100
+       гарантирует что × ВСЕГДА сверху всего внутри fs-modal. */
+    width: 40px; height: 40px;
+    display: flex; align-items: center; justify-content: center;
+    padding: 0; border-radius: 4px;
     cursor: pointer;
+    z-index: 1100;
   }
   .fs-modal #fsClose:hover { background: rgba(255,68,68,0.7); }
 
@@ -783,6 +803,7 @@
     font-size: 36px; line-height: 1; padding: 4px 14px; border-radius: 6px;
     cursor: pointer; user-select: none;
     transition: background 0.12s;
+    z-index: 1050;
   }
   .fs-modal .fs-nav:hover { background: rgba(0,0,0,0.85); }
   .fs-modal .fs-nav:disabled { opacity: 0.3; cursor: default; }
@@ -949,6 +970,44 @@
   .preview-panel .timeline-preview-img.hidden,
   .preview-panel .timeline-preview.hidden { display: none; }
 
+  /* Overlay-контролы поверх preview-стейджа. Видимы пока есть клипы.
+     Полу-прозрачный фон + лёгкий blur — читаемо поверх любой картинки.
+     Контейнер не переносит на новую строку (white-space:nowrap) даже на
+     узком preview — лучше горизонтальный скролл, чем разорванный таймер. */
+  .preview-controls {
+    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 14px; border-radius: 999px;
+    background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.1);
+    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
+    z-index: 10; opacity: 0.45; transition: opacity 0.15s;
+    white-space: nowrap; flex-wrap: nowrap;
+    max-width: calc(100% - 16px);
+  }
+  .preview-stage:hover .preview-controls,
+  .preview-controls.is-playing { opacity: 1; }
+  .preview-controls.hidden { display: none; }
+  .preview-controls button {
+    background: transparent; border: none; color: #fff;
+    font-size: 24px; line-height: 1;
+    width: 32px; height: 32px;
+    display: flex; align-items: center; justify-content: center;
+    padding: 0; cursor: pointer; border-radius: 50%;
+    flex-shrink: 0;
+  }
+  .preview-controls button:hover { background: rgba(255,255,255,0.15); }
+  .preview-controls .preview-time {
+    font-family: ui-monospace, 'SF Mono', monospace;
+    font-size: 15px; color: #fff;
+    min-width: 90px; text-align: center;
+    white-space: nowrap; flex-shrink: 0;
+  }
+  /* «×» закрытия — чуть тоньше play-кнопки чтобы не доминировал визуально. */
+  .preview-controls #previewCloseBtn {
+    font-size: 20px; opacity: 0.75;
+  }
+  .preview-controls #previewCloseBtn:hover { opacity: 1; background: rgba(255,68,68,0.55); }
+
   /* === Таймлайн (нижняя панель, full-width) === */
   .timeline-panel {
     border-top: 1px solid #333; background: #1c1c1c;
@@ -1264,15 +1323,20 @@
   }
   .gen-error button { margin-top: 8px; }
 
-  .empty {
+  /* Эта empty-overlay только для #emptyState (заглушка на пустом холсте).
+     Раньше селектор был `.empty` (глобально) — он ловил, например,
+     `.balance-info.empty` (модификатор «баланс=0») и делал её
+     position:absolute; inset:0 — pill растекалась во весь viewport.
+     Теперь специфично через id, конфликта нет. */
+  #emptyState {
     position: absolute; inset: 0;
     display: flex; align-items: center; justify-content: center;
     color: #666; font-size: 15px; flex-direction: column; gap: 14px;
     text-align: center; padding: 24px; pointer-events: none;
   }
-  .empty h3 { color: #aaa; font-size: 18px; }
-  .empty p { max-width: 420px; line-height: 1.6; }
-  .empty.hidden { display: none; }
+  #emptyState h3 { color: #aaa; font-size: 18px; }
+  #emptyState p { max-width: 420px; line-height: 1.6; }
+  #emptyState.hidden { display: none; }
 
   .unsupported { margin: auto; max-width: 540px; padding: 32px; background: #2a2a2a; border-radius: 12px; border: 1px solid #444; }
   .unsupported h1 { margin-bottom: 12px; }

package/renderer/templates.js

@@ -117,12 +117,14 @@ async function refreshTemplatesList() {
     }
     const data = await r.json();
     let items = Array.isArray(data) ? data : (data.items || data.templates || []);
-    // Когда проект открыт — модалка работает в режиме «добавить сцену»;
-    // project-шаблоны не имеют смысла (они создают новый проект, не
-    // добавляют board в текущий). Скрываем их из списка.
-    if (state.filmHandle) {
-      items = items.filter(t => t.kind !== 'project');
-    }
+    // Скрываем scene/character/location-шаблоны — оставляем ТОЛЬКО проекты.
+    // (Раньше при открытом проекте можно было добавить scene-шаблон как
+    //  новую сцену. Сейчас концепция упрощается до cloud-projects, но код
+    //  scene-templates оставлен — может пригодиться позже.)
+    items = items.filter(t => t.kind === 'project');
+    // Когда проект открыт — open-project-template создаст НОВЫЙ проект,
+    // что в этот момент бессмысленно. Скрываем всё.
+    if (state.filmHandle) items = [];
     renderTemplatesList(items);
   } catch (e) {
     list.innerHTML = '';

package/renderer/timeline.js

@@ -1129,6 +1129,10 @@ async function renderTimeline() {
     tracksEl.appendChild(trackEl);
   }
   $('timelineDuration').textContent = videoTotal > 0 ? `${videoTotal.toFixed(1)} сек` : '';
+  // Запоминаем total для preview-overlay (его updatePreviewControls читает).
+  _lastTimelineTotal = videoTotal;
+  updatePreviewControls();
+  updateTimelineAspectLabel();
 
   // Playhead
   const ph = document.createElement('div');
@@ -1324,7 +1328,11 @@ function applyPreviewState() {
 
 $('timelineBtn').addEventListener('click', () => {
   const willShow = $('timelinePanel').classList.contains('hidden');
-  setPanelsVisible(willShow, willShow);
+  // Открываем ТОЛЬКО таймлайн (preview не разворачиваем — появится автоматически
+  // при ▶ Play). Закрываем — закрываем таймлайн, preview оставляем как есть
+  // (юзер мог свернуть/развернуть его сам).
+  $('timelinePanel').classList.toggle('hidden', !willShow);
+  localStorage.setItem('timelineOpen', willShow ? '1' : '0');
   if (willShow && state.currentBoard) {
     renderTimeline();
     scheduleUpdatePreview();
@@ -1333,15 +1341,40 @@ $('timelineBtn').addEventListener('click', () => {
 
 // Кнопка ×  на самом таймлайне — закрывает панель (то же что повторный
 // клик на #timelineBtn). Дублирует чтобы не приходилось целиться в
-// маленькую кнопку в верхнем тулбаре.
+// маленькую кнопку в верхнем тулбаре. Также останавливает playback и
+// сворачивает preview (юзер ожидает что закрытие таймлайна = закрытие
+// всего связанного UI).
 $('timelineClose')?.addEventListener('click', () => {
   if (!$('timelinePanel').classList.contains('hidden')) {
     $('timelineBtn').click();
   }
+  // Stop playback и свернуть preview-панель тоже.
+  stopTimelinePlayback();
+  setPreviewCollapsed(true);
+  updatePreviewControls();
 });
 
 
+// «⋯» — меню скрытых/опасных действий таймлайна. Открывается на click,
+// закрывается на click outside.
+$('timelineMore')?.addEventListener('click', e => {
+  e.stopPropagation();
+  const menu = $('timelineMoreMenu');
+  const willShow = menu.classList.contains('hidden');
+  menu.classList.toggle('hidden', !willShow);
+  if (willShow) {
+    setTimeout(() => {
+      document.addEventListener('mousedown', function onOutside(ev) {
+        if (menu.contains(ev.target) || ev.target.id === 'timelineMore') return;
+        document.removeEventListener('mousedown', onOutside);
+        menu.classList.add('hidden');
+      });
+    }, 0);
+  }
+});
+
 $('timelineClear').addEventListener('click', () => {
+  $('timelineMoreMenu')?.classList.add('hidden');
   if (!state.currentBoard) return;
   if (!confirm('Очистить все дорожки таймлайна?')) return;
   state.currentBoard.metadata.timeline = defaultTimeline();
@@ -1384,6 +1417,54 @@ function setPlayheadTime(t) {
     }
   }
   if (!_playStop) scheduleUpdatePreview();
+  updatePreviewControls();
+}
+
+// Aspect-ratio сцены → разрешение для ffmpeg-экспорта. Стараемся попасть
+// в стандартные «720p-эквиваленты» по короткой стороне ~720 (× round-up
+// до чётных пикселей — h264 требует even).
+function aspectToExportDimensions(aspectStr) {
+  const map = {
+    '16:9': { W: 1280, H: 720 },
+    '9:16': { W: 720,  H: 1280 },
+    '1:1':  { W: 1080, H: 1080 },
+    '4:3':  { W: 1280, H: 960 },
+    '3:4':  { W: 960,  H: 1280 },
+    '21:9': { W: 1680, H: 720 },
+    '3:2':  { W: 1200, H: 800 },
+    '2:3':  { W: 800,  H: 1200 },
+  };
+  return map[aspectStr] || map['16:9'];   // дефолт если поле пустое/незнакомое
+}
+
+// Aspect-label сцены в заголовке таймлайна — обновляется при render'е.
+function updateTimelineAspectLabel() {
+  const el = document.getElementById('timelineAspect');
+  if (!el) return;
+  const ratio = state.currentBoard?.metadata?.settings?.aspectRatio;
+  el.textContent = ratio ? `▭ ${ratio}` : '';
+}
+
+// Обновляет overlay-контролы превью: кнопка play/pause + время "X / Y с".
+// Y берём из `_lastTimelineTotal` (вычислено в renderTimeline).
+let _lastTimelineTotal = 0;
+function updatePreviewControls() {
+  const ctl = document.getElementById('previewControls');
+  if (!ctl) return;
+  const tl = getTimeline();
+  const hasClips = !!(tl?.tracks?.some(t => t.clips?.length));
+  ctl.classList.toggle('hidden', !hasClips);
+  if (!hasClips) return;
+  const playing = !!_playStop;
+  ctl.classList.toggle('is-playing', playing);
+  const btn = document.getElementById('previewPlayBtn');
+  if (btn) btn.textContent = playing ? '⏸' : '▶';
+  const info = document.getElementById('previewTimeInfo');
+  if (info) {
+    const cur = (state.playheadTime || 0).toFixed(1);
+    const tot = (_lastTimelineTotal || 0).toFixed(1);
+    info.textContent = `${cur} / ${tot} с`;
+  }
 }
 
 let _previewUpdateRaf = null;
@@ -1455,6 +1536,42 @@ function stopTimelinePlayback() {
   }
 }
 
+// Сброс UI таймлайна и превью при переключении board'а / закрытии проекта.
+// Без этого `<video>` и `<img>` превью держат src от прошлой сцены — юзер
+// видит фрейм старой сцены пока не нажмёт ▶/scrub. Также сбрасывает плейхед,
+// чистит контент дорожек и свёртывает preview-overlay.
+function resetTimelineUI() {
+  // 1) Stop playback (если шёл).
+  stopTimelinePlayback();
+  // 2) Сбрасываем preview-source.
+  const v = document.getElementById('timelinePreview');
+  if (v) {
+    try { v.pause(); } catch {}
+    v.removeAttribute('src');
+    try { v.load(); } catch {}        // освободить decoder, очистить frame
+    v.classList.add('hidden');
+  }
+  const img = document.getElementById('timelinePreviewImg');
+  if (img) {
+    img.removeAttribute('src');
+    img.classList.add('hidden');
+  }
+  // 3) Чистим overlay-контролы (no clips → hidden).
+  const ctl = document.getElementById('previewControls');
+  if (ctl) ctl.classList.add('hidden');
+  // 4) Чистим контент tracks внутри панели (на случай если новый
+  //    renderTimeline не запустится — например доска без таймлайна).
+  const tracksEl = document.getElementById('timelineTracks');
+  if (tracksEl) tracksEl.innerHTML = '';
+  const dur = document.getElementById('timelineDuration');
+  if (dur) dur.textContent = '';
+  const phInfo = document.getElementById('timelinePlayheadInfo');
+  if (phInfo) phInfo.textContent = '0.0 с';
+  // 5) Сбрасываем плейхед (новый board подставит свой из scene.json).
+  state.playheadTime = 0;
+}
+window.resetTimelineUI = resetTimelineUI;
+
 function attachPlayheadDrag(handle, phEl) {
   handle.addEventListener('mousedown', e => {
     e.preventDefault();
@@ -2346,6 +2463,24 @@ function showTrackContextMenu(track, clientX, clientY, opts = {}) {
   setTimeout(() => document.addEventListener('mousedown', closeNodeMenu, { once: true }), 0);
 }
 
+// Кнопка play/pause в overlay-е превью — дублирует клик по #timelinePlay,
+// логика playback живёт там.
+$('previewPlayBtn')?.addEventListener('click', e => {
+  e.stopPropagation();
+  $('timelinePlay').click();
+  // Тут же обновляем UI чтобы overlay переключился в playing-state.
+  setTimeout(updatePreviewControls, 0);
+});
+
+// «×» в overlay — сворачивает preview-панель в полоску. Если идёт
+// playback — сначала останавливаем (иначе остаётся непонятное состояние).
+$('previewCloseBtn')?.addEventListener('click', e => {
+  e.stopPropagation();
+  if (_playStop) { _playStop(); _playStop = null; $('timelinePlay').textContent = '▶'; }
+  setPreviewCollapsed(true);
+  updatePreviewControls();
+});
+
 $('addVideoTrack').addEventListener('click', () => {
   const tl = getTimeline();
   const n = tl.tracks.filter(t => t.kind === 'video').length;
@@ -2362,7 +2497,7 @@ $('addAudioTrack').addEventListener('click', () => {
 // Видео-элемент пока используется для рендера видео-клипов; sync с аудио-clock.
 let _playStop = null;
 $('timelinePlay').addEventListener('click', async () => {
-  if (_playStop) { _playStop(); _playStop = null; $('timelinePlay').textContent = '▶'; return; }
+  if (_playStop) { _playStop(); _playStop = null; $('timelinePlay').textContent = '▶'; updatePreviewControls(); return; }
   const tl = getTimeline();
   const videoTrack = tl.tracks.find(t => t.kind === 'video' && t.clips.length);
   const audioTracks = tl.tracks.filter(t => t.kind === 'audio' && t.clips.length);
@@ -2455,6 +2590,7 @@ $('timelinePlay').addEventListener('click', async () => {
     const newT = startTime + Math.max(0, ctx.currentTime - playStartCtxTime);
     state.playheadTime = newT;
     positionPlayhead();
+    updatePreviewControls();   // обновить «X / Y с» в overlay-е превью
     if (maxDur > 0 && newT >= maxDur) {
       if (_playStop) _playStop();
       return;
@@ -2542,6 +2678,7 @@ $('timelinePlay').addEventListener('click', async () => {
   for (const t of timers) clearTimeout(t);
   $('timelinePlay').textContent = '▶';
   _playStop = null;
+  updatePreviewControls();
 });
 
 function waitMs(ms, cancelFn) {
@@ -2563,9 +2700,11 @@ $('timelineExport').addEventListener('click', async () => {
   status.classList.remove('error');
   const setStatus = (m) => { status.textContent = m; };
   const cleanupNames = [];
-  const W = 1280, H = 720;
+  // Берём разрешение из scene aspectRatio. Дефолт 16:9 если не задан.
+  const aspectStr = state.currentBoard?.metadata?.settings?.aspectRatio || '16:9';
+  const { W, H } = aspectToExportDimensions(aspectStr);
   try {
-    setStatus('Загружаю ffmpeg...');
+    setStatus(`Загружаю ffmpeg... (${W}×${H} для ${aspectStr})`);
     const ff = await ensureFFmpeg(setStatus);
 
     // 1) Видео-дорожка: каждый клип → silent mp4 segment
@@ -2674,8 +2813,11 @@ $('timelineExport').addEventListener('click', async () => {
 
     const data = await ff.readFile(finalName);
     const blob = new Blob([data.buffer], { type: 'video/mp4' });
-    triggerDownload(blob, `${state.currentBoard.name}_timeline.mp4`);
-    setStatus('Готово ✓');
+    // Включаем aspect в имя файла — удобно когда юзер экспортит сцену
+    // в нескольких форматах подряд (16:9 для YouTube, 9:16 для shorts).
+    const aspectInName = aspectStr.replace(':', 'x');
+    triggerDownload(blob, `${state.currentBoard.name}_timeline_${aspectInName}.mp4`);
+    setStatus(`Готово ✓ (${W}×${H})`);
   } catch (e) {
     console.error('timeline export failed:', e);
     status.classList.add('error');

package/server.js

@@ -133,7 +133,15 @@ async function handleProxy(res, url) {
 
   const r = await fetch(target);
   if (!r.ok) return send(res, r.status, { error: `upstream ${r.status}` });
-  const headers = { 'Content-Type': r.headers.get('content-type') || 'application/octet-stream' };
+  const headers = {
+    'Content-Type': r.headers.get('content-type') || 'application/octet-stream',
+    // CDN-обложки и медиа адресуемы по hash в URL — содержимое
+    // immutable. Разрешаем браузеру кэшировать, чтобы welcome не
+    // перезагружал обложки облачных проектов на каждый рендер.
+    // (Глобальный default 'no-store' выставляется в send(); тут
+    //  переопределяем.)
+    'Cache-Control': 'public, max-age=86400, immutable',
+  };
   const len = r.headers.get('content-length');
   if (len) headers['Content-Length'] = len;
   res.writeHead(200, headers);
@@ -252,6 +260,41 @@ async function handleTemplateUpdate(req, res, id) {
   } catch (e) { sendError(res, e, 502); }
 }
 
+// =============================================================================
+// Cloud projects: тонкие proxy-роуты на Chatium-сервер.
+// (Зеркальный код templates — но для редактируемых проектов.)
+// =============================================================================
+async function handleProjectsList(res) {
+  try { send(res, 200, await providers.listProjects(getSettings())); }
+  catch (e) { sendError(res, e, 502); }
+}
+
+async function handleProjectGet(res, id) {
+  try { send(res, 200, await providers.getProject(id, getSettings())); }
+  catch (e) { sendError(res, e, 502); }
+}
+
+async function handleProjectCreate(req, res) {
+  try {
+    const body = await readJson(req);
+    send(res, 200, await providers.createProject(body, getSettings()));
+  } catch (e) { sendError(res, e, 502); }
+}
+
+async function handleProjectUpdate(req, res, id) {
+  try {
+    const body = await readJson(req);
+    send(res, 200, await providers.updateProject(id, body, getSettings()));
+  } catch (e) { sendError(res, e, 502); }
+}
+
+async function handleProjectDelete(res, id) {
+  try {
+    await providers.deleteProject(id, getSettings());
+    send(res, 200, { ok: true });
+  } catch (e) { sendError(res, e, 502); }
+}
+
 // =============================================================================
 // Static files (renderer assets).
 // =============================================================================
@@ -301,6 +344,17 @@ const server = createServer(async (req, res) => {
         if (req.method === 'DELETE') return handleTemplateDelete(res, decodeURIComponent(m[1]));
       }
     }
+    // Cloud-projects routes — зеркало templates, но для редактируемых проектов.
+    if (req.method === 'GET'  && url.pathname === '/api/projects')     return handleProjectsList(res);
+    if (req.method === 'POST' && url.pathname === '/api/projects')     return handleProjectCreate(req, res);
+    {
+      const m = url.pathname.match(/^\/api\/projects\/([^/]+)$/);
+      if (m) {
+        if (req.method === 'GET')    return handleProjectGet(res, decodeURIComponent(m[1]));
+        if (req.method === 'POST')   return handleProjectUpdate(req, res, decodeURIComponent(m[1]));
+        if (req.method === 'DELETE') return handleProjectDelete(res, decodeURIComponent(m[1]));
+      }
+    }
     if (req.method === 'GET') return serveStatic(res, url);
     send(res, 404, 'not found');
   } catch (e) {