release: bump version to 0.28.0

2026-04-20 14:10:27 +08:00
parent 51ae5e6ec9
commit 4c21973197
12 changed files with 512 additions and 230 deletions
--- a/frontend/public/earth/js/tv.js
+++ b/frontend/public/earth/js/tv.js
@@ -23,11 +23,20 @@ let hlsPlayer = null;
 let hlsRecoveryAttempts = 0;
 let metaAutoCollapseTimer = null;
 let tvPanel = null;
+let activeTab = "live";
 const failedSourceIds = new Set();
 let probeTimer = null;
+let reformCleanupTimer = null;

 const META_AUTO_COLLAPSE_DELAY = 2500;
 const PROBE_INTERVAL_MS = 2 * 60 * 1000;
+const DEFAULT_HUD_OFFSET_PX = 20;
+const MIN_NEWS_TAB_HEIGHT_PX = 280;
+const PANEL_RESIZE_MARGIN_PX = 12;
+const TV_PANEL_MIN_WIDTH_PX = 360;
+const TV_PANEL_MIN_HEIGHT_PX = 340;
+const REFORM_CLEANUP_MS = 280;
+const REFORM_RESTORE_ANCHOR_DATA_KEY = "reformRestoreAnchor";

 const HLS_MAX_RECOVERY_ATTEMPTS = 3;
 const HLS_RETRY_CONFIG = {
@@ -41,7 +50,6 @@ function getElements() {
  return {
    panel: document.getElementById("tv-panel"),
    toggleBtn: document.getElementById("toggle-tv"),
-    resizeHandle: null,
    select: document.getElementById("tv-source-select"),
    title: document.getElementById("tv-source-title"),
    meta: document.getElementById("tv-source-meta"),
@@ -53,9 +61,14 @@ function getElements() {
    empty: document.getElementById("tv-empty-state"),
    refreshBtn: document.getElementById("tv-refresh"),
    openBtn: document.getElementById("tv-open-external"),
-    metaPanel: document.getElementById("tv-panel-meta"),
    metaWrap: document.getElementById("tv-meta-wrap"),
    metaToggle: document.getElementById("tv-meta-toggle"),
+    liveHeaderControls: document.getElementById("tv-header-controls-live"),
+    newsHeaderControls: document.getElementById("tv-header-controls-news"),
+    liveTabBtn: document.getElementById("tv-tab-live"),
+    newsTabBtn: document.getElementById("tv-tab-news"),
+    livePane: document.getElementById("tv-tab-live-pane"),
+    newsPane: document.getElementById("tv-tab-news-pane"),
  };
 }

@@ -63,6 +76,37 @@ function setMetaCollapsed(collapsed) {
  tvPanel?.setCollapsed(collapsed);
 }

+function syncPanelActiveTab(tab = activeTab) {
+  const { panel } = getElements();
+  if (panel instanceof HTMLElement) {
+    panel.dataset.activeTab = tab;
+  }
+}
+
+function syncNewsDefaultMaxHeight() {
+  const { panel } = getElements();
+  if (!(panel instanceof HTMLElement)) return;
+
+  const earthStats = document.getElementById("earth-stats");
+  const hudOffset = Number.parseFloat(
+    getComputedStyle(document.documentElement).getPropertyValue("--hud-offset"),
+  );
+  const resolvedOffset = Number.isFinite(hudOffset) ? hudOffset : DEFAULT_HUD_OFFSET_PX;
+
+  if (!(earthStats instanceof HTMLElement)) {
+    panel.style.removeProperty("--tv-news-default-max-height");
+    return;
+  }
+
+  const statsRect = earthStats.getBoundingClientRect();
+  const availableHeight = Math.max(
+    Math.round(MIN_NEWS_TAB_HEIGHT_PX * getHudScale()),
+    Math.floor(window.innerHeight - resolvedOffset - statsRect.bottom),
+  );
+
+  panel.style.setProperty("--tv-news-default-max-height", `${availableHeight}px`);
+}
+
 function autoExpandMeta() {
  clearTimeout(metaAutoCollapseTimer);
  setMetaCollapsed(false);
@@ -92,12 +136,14 @@ function setupResizeHandle() {

  let resizing = false;
  let activeEdge = "";
-  let startX = 0;
-  let startY = 0;
-  let startWidth = 0;
-  let startHeight = 0;
-  let startLeft = 0;
-  let startTop = 0;
+  const resizeStart = {
+    pointerX: 0,
+    pointerY: 0,
+    width: 0,
+    height: 0,
+    left: 0,
+    top: 0,
+  };

  const stopResize = () => {
    resizing = false;
@@ -110,23 +156,23 @@ function setupResizeHandle() {
    if (!resizing) return;
    const containerRect = container.getBoundingClientRect();
    const hudScale = getHudScale();
-    const minWidth = Math.max(320, Math.round(360 * hudScale));
-    const minHeight = Math.max(260, Math.round(340 * hudScale));
-    const dx = event.clientX - startX;
-    const dy = event.clientY - startY;
+    const minWidth = Math.max(320, Math.round(TV_PANEL_MIN_WIDTH_PX * hudScale));
+    const minHeight = Math.max(260, Math.round(TV_PANEL_MIN_HEIGHT_PX * hudScale));
+    const dx = event.clientX - resizeStart.pointerX;
+    const dy = event.clientY - resizeStart.pointerY;

    if (activeEdge.includes("r")) {
-      const maxW = containerRect.width - startLeft - 12;
-      panel.style.width = `${Math.min(maxW, Math.max(minWidth, startWidth + dx))}px`;
+      const maxW = containerRect.width - resizeStart.left - PANEL_RESIZE_MARGIN_PX;
+      panel.style.width = `${Math.min(maxW, Math.max(minWidth, resizeStart.width + dx))}px`;
    }
    if (activeEdge.includes("l")) {
-      const newW = Math.max(minWidth, startWidth - dx);
+      const newW = Math.max(minWidth, resizeStart.width - dx);
      panel.style.width = `${newW}px`;
-      panel.style.left = `${Math.max(0, startLeft + startWidth - newW)}px`;
+      panel.style.left = `${Math.max(0, resizeStart.left + resizeStart.width - newW)}px`;
    }
    if (activeEdge.includes("b")) {
-      const maxH = containerRect.height - startTop - 12;
-      panel.style.minHeight = `${Math.min(maxH, Math.max(minHeight, startHeight + dy))}px`;
+      const maxH = containerRect.height - resizeStart.top - PANEL_RESIZE_MARGIN_PX;
+      panel.style.height = `${Math.min(maxH, Math.max(minHeight, resizeStart.height + dy))}px`;
    }
  };

@@ -138,17 +184,21 @@ function setupResizeHandle() {

      activeEdge = edgeEl.dataset.edge ?? "";
      resizing = true;
-      startX = event.clientX;
-      startY = event.clientY;
+      resizeStart.pointerX = event.clientX;
+      resizeStart.pointerY = event.clientY;

      clearPanelPositioningForResize(panel);
+      panel.dataset.resized = "true";

      const rect = panel.getBoundingClientRect();
      const cRect = container.getBoundingClientRect();
-      startWidth = rect.width;
-      startHeight = rect.height;
-      startLeft = rect.left - cRect.left;
-      startTop = rect.top - cRect.top;
+      resizeStart.width = rect.width;
+      resizeStart.height = rect.height;
+      resizeStart.left = rect.left - cRect.left;
+      resizeStart.top = rect.top - cRect.top;
+      panel.style.width = `${resizeStart.width}px`;
+      panel.style.height = `${resizeStart.height}px`;
+      panel.style.minHeight = "";

      panel.classList.add("is-resizing");
      document.body.style.userSelect = "none";
@@ -165,10 +215,11 @@ function setupResizeHandle() {
 function updateToggleButton(visible) {
  const { toggleBtn } = getElements();
  if (!toggleBtn) return;
-  toggleBtn.classList.toggle("active", visible);
+  const active = visible && activeTab === "live";
+  toggleBtn.classList.toggle("active", active);
  const tooltip = toggleBtn.querySelector(".earth-toolbar-tooltip");
  if (tooltip) {
-    tooltip.textContent = visible ? "关闭新闻直播" : "打开新闻直播";
+    tooltip.textContent = active ? "关闭新闻直播" : "打开新闻直播";
  }
 }

@@ -185,6 +236,151 @@ function setPanelVisible(visible) {
  tvPanel?.setVisible(visible);
  updateToggleButton(visible);
  syncSettingsToggle(visible);
+  window.dispatchEvent(new CustomEvent("earth:tv-visibility-change", {
+    detail: { visible },
+  }));
+}
+
+export function setTVPanelVisible(visible) {
+  setPanelVisible(visible);
+}
+
+function clearReformState() {
+  const { panel } = getElements();
+  if (!(panel instanceof HTMLElement)) return;
+  panel.classList.remove("is-reforming");
+  panel.style.height = "";
+  if (panel.dataset[REFORM_RESTORE_ANCHOR_DATA_KEY] === "true") {
+    panel.style.top = "";
+    panel.style.bottom = "";
+    delete panel.dataset[REFORM_RESTORE_ANCHOR_DATA_KEY];
+  }
+  if (reformCleanupTimer) {
+    clearTimeout(reformCleanupTimer);
+    reformCleanupTimer = null;
+  }
+}
+
+function animateTabReform(applyChange) {
+  const { panel } = getElements();
+  const container = document.getElementById("container");
+  if (!(panel instanceof HTMLElement)) {
+    applyChange();
+    return;
+  }
+  if (!(container instanceof HTMLElement)) {
+    applyChange();
+    return;
+  }
+
+  if (panel.classList.contains("is-dragging") || panel.classList.contains("is-resizing")) {
+    applyChange();
+    return;
+  }
+
+  clearReformState();
+
+  const reformStartRect = panel.getBoundingClientRect();
+  const containerRect = container.getBoundingClientRect();
+  const reformSnapshot = {
+    height: reformStartRect.height,
+    anchoredBottom: reformStartRect.bottom - containerRect.top,
+    shouldRestoreDefaultAnchoring: panel.dataset.dragged !== "true",
+  };
+
+  if (reformSnapshot.shouldRestoreDefaultAnchoring) {
+    panel.dataset[REFORM_RESTORE_ANCHOR_DATA_KEY] = "true";
+    panel.style.bottom = "auto";
+  }
+
+  panel.style.top = `${reformSnapshot.anchoredBottom - reformSnapshot.height}px`;
+  panel.style.height = `${reformSnapshot.height}px`;
+  panel.classList.add("is-reforming");
+  void panel.offsetHeight;
+
+  applyChange();
+
+  panel.style.height = "auto";
+  const targetHeight = panel.getBoundingClientRect().height;
+  panel.style.height = `${reformSnapshot.height}px`;
+  void panel.offsetHeight;
+  const targetTop = reformSnapshot.anchoredBottom - targetHeight;
+
+  const finalizeReform = () => {
+    panel.removeEventListener("transitionend", handleReformTransitionEnd);
+    clearReformState();
+  };
+
+  const handleReformTransitionEnd = (event) => {
+    if (event.target === panel && event.propertyName === "height") {
+      finalizeReform();
+    }
+  };
+
+  panel.addEventListener("transitionend", handleReformTransitionEnd);
+  reformCleanupTimer = window.setTimeout(finalizeReform, REFORM_CLEANUP_MS);
+
+  requestAnimationFrame(() => {
+    panel.style.top = `${targetTop}px`;
+    panel.style.height = `${targetHeight}px`;
+  });
+}
+
+function updateTabState(target, isActive, activeClassName = "") {
+  if (!(target instanceof HTMLElement)) return;
+  target.hidden = !isActive;
+  if (activeClassName) {
+    target.classList.toggle(activeClassName, isActive);
+  }
+}
+
+function updateTabButtonState(button, isActive) {
+  if (!(button instanceof HTMLButtonElement)) return;
+  button.classList.toggle("tv-panel-tab--active", isActive);
+  button.setAttribute("aria-selected", isActive ? "true" : "false");
+}
+
+function setActiveTab(tab) {
+  const nextTab = tab === "news" ? "news" : "live";
+  if (activeTab === nextTab) return;
+
+  animateTabReform(() => {
+    activeTab = nextTab;
+    syncPanelActiveTab(nextTab);
+    syncNewsDefaultMaxHeight();
+    const {
+      liveTabBtn,
+      newsTabBtn,
+      liveHeaderControls,
+      newsHeaderControls,
+      livePane,
+      newsPane,
+    } = getElements();
+
+    updateTabButtonState(liveTabBtn, nextTab === "live");
+    updateTabButtonState(newsTabBtn, nextTab === "news");
+    updateTabState(liveHeaderControls, nextTab === "live");
+    updateTabState(newsHeaderControls, nextTab === "news");
+    updateTabState(livePane, nextTab === "live", "tv-tab-pane--active");
+    updateTabState(newsPane, nextTab === "news", "tv-tab-pane--active");
+    window.dispatchEvent(new CustomEvent("earth:tv-tab-change", {
+      detail: { tab: nextTab },
+    }));
+  });
+}
+
+export function openTVPanelTab(tab = "live") {
+  setPanelVisible(true);
+  if (activeTab === tab) return;
+  setActiveTab(tab);
+}
+
+export function isTVPanelVisible() {
+  return tvPanel?.isVisible() ?? !getElements().panel?.classList.contains("hud-panel-hidden");
+}
+
+export function getActiveTVTab() {
+  return activeTab;
 }

 function getEmbeddedUrl(source) {
@@ -652,7 +848,17 @@ export function initTVPanel() {
  if (initialized) return;
  initialized = true;

-  const { select, refreshBtn, iframe, video, toggleBtn, panel, metaToggle } = getElements();
+  const {
+    select,
+    refreshBtn,
+    iframe,
+    video,
+    toggleBtn,
+    panel,
+    metaToggle,
+    liveTabBtn,
+    newsTabBtn,
+  } = getElements();

  if (panel && metaToggle) {
    tvPanel = createHUDPanel({
@@ -673,14 +879,23 @@ export function initTVPanel() {
  toggleBtn?.addEventListener("click", async (event) => {
    event.preventDefault();
    event.stopPropagation();
-    const nextVisible = !(tvPanel?.isVisible() ?? false);
-    setPanelVisible(nextVisible);
-    if (nextVisible) {
+    const currentlyVisible = tvPanel?.isVisible() ?? false;
+    if (!currentlyVisible) {
+      setPanelVisible(true);
+      setActiveTab("live");
      await ensureTVPanelReady();
      showStatusMessage("新闻直播窗口已打开", "info");
-    } else {
-      showStatusMessage("新闻直播窗口已关闭", "info");
+      return;
    }
+
+    if (activeTab !== "live") {
+      setActiveTab("live");
+      showStatusMessage("已切换到新闻直播", "info");
+      return;
+    }
+
+    setPanelVisible(false);
+    showStatusMessage("新闻直播窗口已关闭", "info");
  });

  select?.addEventListener("change", (event) => {
@@ -700,6 +915,13 @@ export function initTVPanel() {
    refreshTVPanel();
  });

+  liveTabBtn?.addEventListener("click", () => {
+    setActiveTab("live");
+  });
+  newsTabBtn?.addEventListener("click", () => {
+    setActiveTab("news");
+  });
+
  iframe?.addEventListener("load", () => {
    if (iframe.hidden) return;
    clearSourceFailed(currentSourceId);
@@ -720,4 +942,9 @@ export function initTVPanel() {
  });

  setupResizeHandle();
+  syncPanelActiveTab("live");
+  syncNewsDefaultMaxHeight();
+  setActiveTab("live");
+
+  window.addEventListener("resize", syncNewsDefaultMaxHeight);
 }