popup.js

// 视频信息缓存助手 - 弹出窗口脚本

document.addEventListener("DOMContentLoaded", function () {
  // 加载视频缓存
  loadVideoCache();

  // 绑定标签页切换事件
  document.querySelectorAll(".tab").forEach((tab) => {
    tab.addEventListener("click", () => {
      // 切换活动标签
      document
        .querySelectorAll(".tab")
        .forEach((t) => t.classList.remove("active"));
      tab.classList.add("active");

      // 显示对应的内容
      const tabName = tab.dataset.tab;
      document.querySelectorAll(".tab-content").forEach((content) => {
        content.style.display = content.id === tabName ? "block" : "none";
      });

      // 如果切换到了设置标签，加载设置
      if (tabName === "settings") {
        loadSettings();
      }
    });
  });

  // 绑定搜索事件
  const searchInput = document.getElementById("search-input");
  if (searchInput) {
    searchInput.addEventListener("input", () => {
      filterVideos();
    });
  }

  // 绑定筛选按钮事件
  document.querySelectorAll(".filter-btn").forEach((btn) => {
    btn.addEventListener("click", () => {
      document
        .querySelectorAll(".filter-btn")
        .forEach((b) => b.classList.remove("active"));
      btn.classList.add("active");
      filterVideos();
    });
  });

  // 绑定设置自动保存事件（当设置改变时自动保存）
  const settingsInputs = [
    "max-cache-bilibili",
    "max-cache-youtube",
    "auto-clear",
    "clear-interval",
    "fast-save-mode",
    "debug-mode",
  ];

  settingsInputs.forEach((inputId) => {
    const input = document.getElementById(inputId);
    if (input) {
      const eventType = input.type === "checkbox" ? "change" : "input";
      input.addEventListener(eventType, () => {
        // 使用防抖，避免频繁保存
        clearTimeout(input.saveTimeout);
        input.saveTimeout = setTimeout(() => {
          saveSettings();
        }, 500);
      });
    }
  });

  // 绑定重置设置按钮事件
  const resetBtn = document.getElementById("reset-settings");
  if (resetBtn) {
    resetBtn.addEventListener("click", () => {
      resetSettings();
    });
  }

  // 绑定清空缓存按钮事件
  const clearCacheBtn = document.getElementById("clear-cache");
  if (clearCacheBtn) {
    clearCacheBtn.addEventListener("click", () => {
      clearCache("all");
    });
  }

  // 绑定清空BiliBili缓存按钮事件
  const clearBilibiliBtn = document.getElementById("clear-bilibili");
  if (clearBilibiliBtn) {
    clearBilibiliBtn.addEventListener("click", () => {
      clearCache("bilibili");
    });
  }

  // 绑定清空YouTube缓存按钮事件
  const clearYoutubeBtn = document.getElementById("clear-youtube");
  if (clearYoutubeBtn) {
    clearYoutubeBtn.addEventListener("click", () => {
      clearCache("youtube");
    });
  }
});

// 加载视频缓存
function loadVideoCache() {
  chrome.storage.local.get("videoCache", (data) => {
    const videoCache = data.videoCache || [];

    // 计算BiliBili和YouTube的缓存数量
    const bilibiliVideos = videoCache.filter((v) => v.source === "bilibili");
    const youtubeVideos = videoCache.filter((v) => v.source === "youtube");

    // 更新缓存计数显示
    document.getElementById("cache-count").textContent = videoCache.length;
    document.getElementById("bilibili-count").textContent =
      bilibiliVideos.length;
    document.getElementById("youtube-count").textContent = youtubeVideos.length;

    renderVideoList(videoCache);
  });
}

// 渲染视频列表
function renderVideoList(videos) {
  const videoList = document.getElementById("video-list");
  if (!videoList) return;

  // 如果没有视频，显示空消息
  if (videos.length === 0) {
    videoList.innerHTML = '<div class="empty-message">暂无缓存视频</div>';
    return;
  }

  // YouTube视频按原始位置排序（如果有），否则按时间排序
  // B站视频按时间排序
  videos.sort((a, b) => {
    // 如果两个视频都是YouTube视频且有原始位置
    if (a.source === "youtube" && b.source === "youtube") {
      if (a.originalPosition !== undefined && b.originalPosition !== undefined) {
        return a.originalPosition - b.originalPosition;
      }
    }
    // 其他情况按时间降序排序
    return b.timestamp - a.timestamp;
  });

  // 构建视频列表HTML
  let html = "";
  videos.forEach((video) => {
    // 格式化日期
    const date = new Date(video.timestamp);
    const dateStr = `${
      date.getMonth() + 1
    }/${date.getDate()} ${date.getHours()}:${String(date.getMinutes()).padStart(
      2,
      "0"
    )}`;

    // 源站图标和样式
    let sourceClass = "";
    let sourceName = "";
    let sourceIcon = "";

    if (video.source === "bilibili") {
      sourceClass = "bilibili";
      sourceName = "BiliBili";
      sourceIcon = `<svg class="source-icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z"/>
      </svg>`;
    } else if (video.source === "youtube") {
      if (video.isShorts) {
        sourceClass = "youtube-shorts";
        sourceName = "Shorts";
      } else {
        sourceClass = "youtube";
        sourceName = "YouTube";
      }
      sourceIcon = `<svg class="source-icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
      </svg>`;
    }

    html += `
      <div class="video-item" data-id="${video.id}" data-source="${video.source}">
        <div class="video-thumbnail">
          ${
            video.thumbnail
              ? `<img src="${video.thumbnail}" onerror="this.classList.add('error')">`
              : ""
          }
          ${video.isShorts ? '<span class="shorts-badge">Shorts</span>' : ""}
        </div>
        <div class="video-info">
          <div class="video-title">${video.title}</div>
          <div class="video-meta">
            <span class="video-time">${dateStr}</span>
            <span class="video-source ${sourceClass}">${sourceIcon}${sourceName}</span>
          </div>
        </div>
        <div class="video-actions">
          <button class="action-btn view-btn" data-url="${
            video.url
          }">查看</button>
          <button class="action-btn delete-btn" data-id="${
            video.id
          }">删除</button>
        </div>
      </div>
    `;
  });

  videoList.innerHTML = html;

  // 绑定视频项的事件
  document.querySelectorAll(".view-btn").forEach((btn) => {
    btn.addEventListener("click", (e) => {
      const url = e.target.dataset.url;
      if (url) {
        chrome.tabs.create({ url });
      }
    });
  });

  document.querySelectorAll(".delete-btn").forEach((btn) => {
    btn.addEventListener("click", (e) => {
      const id = e.target.dataset.id;
      if (id) {
        deleteVideo(id);
      }
    });
  });
}

// 过滤视频列表
function filterVideos() {
  chrome.storage.local.get("videoCache", (data) => {
    const videoCache = data.videoCache || [];
    const searchText = document
      .getElementById("search-input")
      ?.value.toLowerCase();
    const activeFilter =
      document.querySelector(".filter-btn.active")?.dataset.filter || "all";

    // 过滤视频
    const filteredVideos = videoCache.filter((video) => {
      // 根据搜索文本过滤
      const matchesSearch =
        !searchText || video.title.toLowerCase().includes(searchText);

      // 根据来源过滤
      const matchesSource =
        activeFilter === "all" ||
        (activeFilter === "bilibili" && video.source === "bilibili") ||
        (activeFilter === "youtube" && video.source === "youtube");

      return matchesSearch && matchesSource;
    });

    renderVideoList(filteredVideos);
  });
}

// 删除指定视频
function deleteVideo(id) {
  chrome.storage.local.get("videoCache", (data) => {
    const videoCache = data.videoCache || [];
    const newCache = videoCache.filter((video) => video.id !== id);

    chrome.storage.local.set({ videoCache: newCache }, () => {
      // 更新视频列表
      renderVideoList(newCache);

      // 更新缓存计数显示
      document.getElementById("cache-count").textContent = newCache.length;

      // 显示消息
      showMessage("视频已删除");
    });
  });
}

// 清空缓存 - 更新为支持不同平台的清空操作
function clearCache(platform) {
  let confirmMessage = "";

  switch (platform) {
    case "bilibili":
      confirmMessage = "确定要清空所有BiliBili缓存视频吗？";
      break;
    case "youtube":
      confirmMessage = "确定要清空所有YouTube缓存视频吗？";
      break;
    default:
      confirmMessage = "确定要清空所有缓存视频吗？";
  }

  if (confirm(confirmMessage)) {
    chrome.storage.local.get("videoCache", (data) => {
      let videoCache = data.videoCache || [];
      let newCache = [];

      // 根据不同平台进行清空
      if (platform === "all") {
        newCache = []; // 清空所有
      } else {
        newCache = videoCache.filter((video) => video.source !== platform);
      }

      chrome.storage.local.set({ videoCache: newCache }, () => {
        // 重新加载视频列表
        loadVideoCache();

        // 显示消息
        let message = "";
        switch (platform) {
          case "bilibili":
            message = "BiliBili缓存已清空";
            break;
          case "youtube":
            message = "YouTube缓存已清空";
            break;
          default:
            message = "所有缓存已清空";
        }

        showMessage(message);
      });
    });
  }
}

// 加载设置
function loadSettings() {
  chrome.storage.local.get("settings", (data) => {
    const settings = data.settings || {
      maxCacheBilibili: 1000,
      maxCacheYouTube: 1000,
      autoClear: true,
      clearInterval: 7,
      fastSaveMode: true,
      debugMode: false,
    };

    // 设置表单值
    document.getElementById("max-cache-bilibili").value =
      settings.maxCacheBilibili;
    document.getElementById("max-cache-youtube").value =
      settings.maxCacheYouTube;
    document.getElementById("auto-clear").checked = settings.autoClear;
    document.getElementById("clear-interval").value = settings.clearInterval;

    // 设置快速保存模式的值
    if (document.getElementById("fast-save-mode")) {
      document.getElementById("fast-save-mode").checked =
        settings.fastSaveMode !== false;
    }

    // 设置调试模式的值
    if (document.getElementById("debug-mode")) {
      document.getElementById("debug-mode").checked =
        settings.debugMode === true;
    }

    // 根据自动清除是否启用，设置清除间隔的禁用状态
    document.getElementById("clear-interval").disabled = !settings.autoClear;
  });
}

// 保存设置
function saveSettings() {
  const maxCacheBilibili =
    parseInt(document.getElementById("max-cache-bilibili").value) || 1000;
  const maxCacheYouTube =
    parseInt(document.getElementById("max-cache-youtube").value) || 1000;
  const autoClear = document.getElementById("auto-clear").checked;
  const clearInterval =
    parseInt(document.getElementById("clear-interval").value) || 7;

  // 获取快速保存模式设置
  const fastSaveMode = document.getElementById("fast-save-mode")
    ? document.getElementById("fast-save-mode").checked
    : true;

  // 获取调试模式设置
  const debugMode = document.getElementById("debug-mode")
    ? document.getElementById("debug-mode").checked
    : false;

  const settings = {
    maxCacheBilibili: Math.max(maxCacheBilibili, 10),
    maxCacheYouTube: Math.max(maxCacheYouTube, 10),
    autoClear,
    clearInterval,
    fastSaveMode,
    debugMode,
  };

  chrome.storage.local.set({ settings }, () => {
    showMessage("设置已保存");
  });
}

// 重置设置
function resetSettings() {
  const defaultSettings = {
    maxCacheBilibili: 1000,
    maxCacheYouTube: 1000,
    autoClear: true,
    clearInterval: 7,
    fastSaveMode: true,
    debugMode: false,
  };

  chrome.storage.local.set({ settings: defaultSettings }, () => {
    // 重新加载设置
    loadSettings();
    // 显示消息
    showMessage("设置已重置");
  });
}

// 显示消息
function showMessage(message, duration = 2000) {
  // 检查是否已存在消息元素
  let messageEl = document.querySelector(".message");

  // 如果不存在，创建一个
  if (!messageEl) {
    messageEl = document.createElement("div");
    messageEl.className = "message";
    document.body.appendChild(messageEl);
  }

  // 设置消息内容
  messageEl.textContent = message;
  messageEl.classList.remove("fade-out");

  // 设置定时器，在指定时间后淡出
  setTimeout(() => {
    messageEl.classList.add("fade-out");

    // 淡出动画完成后移除元素
    setTimeout(() => {
      if (messageEl.parentNode) {
        messageEl.parentNode.removeChild(messageEl);
      }
    }, 300);
  }, duration);
}

// 切换自动清除设置时，同步启用/禁用清除间隔输入框
if (document.getElementById("auto-clear")) {
  document.getElementById("auto-clear").addEventListener("change", (e) => {
    document.getElementById("clear-interval").disabled = !e.target.checked;
  });
}