brwong
/
playlist-extension


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653
							document.addEventListener("alpine:init", () => {
  //TODO
  // - preserve playlist order (sort)
  // - "play/resume playlist" button (pick up where you left off)
  //   X track timestamp to truly resume where you left off
  // X periodically remove watched videos
  //   X or move to an "old" category, and add a screen to see the list
  // - consider separating context menu items (rather than having a sub-menu)
  // X view playback history (?)
  // X include currently open tabs in export
  // - support playlist management (add, remove, rename playlists)
  //   - support dynamic (on-demand) playlists
  // - support input text box for adding to playlist (how to handle title?)
  //   - or raw json editing
  // X option (probably a button) to add current page (url, title) to playlist
  //   X align with addLinkToPlaylist in background.js (no repeated videos)
  // X button to add channel to youtube page (copy gql mutation to clipboard) (like the automa version)
  // - long-term: replace youtube page? rss feeds? need server?
  // X add personal rating feature ("enjoyed", "this was important", etc)
  // - option to move video (including status) to another playlist
  // X button to copy current video to clipboard in wikitext format (for personal wiki list)
  Alpine.data("playlistManager", () => ({
    playlists: {},
    currentIndices: {},
    history: {},
    sortedHistory: [],
    openMenus: new Set(), // Track which menus are open
    moveSubmenuOpenFor: null, // Track which video has the move-to submenu open (menuId or null)
    currentView: "playlists", // Track current view: 'playlists', 'history', 'playlist', 'saveChannel', or 'wikiInsp'
    currentPlaylistName: "", // Track which playlist is being viewed
    playlistsForDisplay: [], // Computed array for display
    playlistsScrollTop: 0, // Tracks document.body.scrollTop for jump-button reactivity
    currentPlaylistVideos: [], // Videos for current playlist view
    otherPlaylists: [], // Playlist names (with display labels) other than currentPlaylistName
    currentTab: null, // Current active tab info
    isCurrentTabYoutube: false, // Whether current tab is YouTube
    isCurrentTabChannelPage: false, // Whether current tab is YouTube videos page
    addCurrentPageButtonText: "Add Cur. Page", // Button text
    scatterCount: 4,

    // Save channel properties
    selectedCategory: "FOR BOTH", // Currently selected category
    availableCategories: [
      "FOR BOTH",
      "CHANNELS",
      "SCIFI",
      "POLI/REL",
      "REAL ESTATE",
      "HELICOPTER",
      "SAILING",
      "VAN LIFE",
      "BLOCKCHAIN",
      "MAKING",
      "DESIGN",
      "TECH CONF",
      "CREATIVE",
    ], // Available categories
    curlCommand: "", // Generated curl command
    checkInterval: 14, // Check interval in days

    // Wiki/insp properties
    wikitextCommand: "", // Generated wikitext
    isCurrentVideoYoutube: false, // Whether current video is YouTube
    hasVideoEnded: false, // Whether video has ended
    currentVideoTimestamp: "", // Current video timestamp
    includeTimestamp: true, // Whether to include timestamp line

    // Import properties
    importText: "", // Text area content for import

    init() {
      this.loadPlaylists();
      this.loadHistory();
      this.getCurrentTab();
      // Add document click handler to close menus
      document.addEventListener("click", (e) => {
        // If click is not on a more button or menu, close all menus
        if (!e.target.closest(".more-menu-container")) {
          this.closeAllMenus();
        }
      });
      // Track scroll position of the root scrolling element so the playlist
      // jump-scroll buttons' disabled state stays reactive. Whether the
      // scrollable box ends up being <body> or <html> is a browser-decided
      // CSS quirk (depends on which element's overflow gets propagated to
      // the viewport), so use window/scrollingElement rather than assuming body.
      window.addEventListener("scroll", () => {
        this.playlistsScrollTop = document.scrollingElement.scrollTop;
      });
    },

    async loadPlaylists() {
      try {
        const result = await browser.storage.local.get("playlists");
        console.log("LOAD RESULT", result.playlists);
        this.playlists = result.playlists || {};
        if (result.playlists) {
          this.currentIndices = Object.keys(result.playlists).reduce(
            (acc, pln) => {
              const ind = result.playlists[pln].findIndex(
                (v) => v.status !== "done",
              );
              if (ind === -1) {
                acc[pln] = result.playlists[pln].length;
              } else {
                acc[pln] = ind;
              }
              return acc;
            },
            {},
          );
        } else {
          this.currentIndices = {};
        }
      } catch (error) {
        console.error("Error loading playlists:", error);
      }
      this.updatePlaylistsForDisplay();
    },

    updatePlaylistsForDisplay() {
      this.playlistsForDisplay = Object.entries(this.playlists).map(
        ([playlistName, videos]) => {
          const currentIndex = this.currentIndices[playlistName] || 0;
          const shouldShowTruncation = currentIndex > 0;
          const truncationText = shouldShowTruncation
            ? `(${currentIndex} previous video${currentIndex === 1 ? "" : "s"})`
            : "";

          // Get visible videos from current index onwards with original indices
          const visibleVideos = videos
            .slice(currentIndex)
            .map((video, index) => ({
              ...video,
              originalIndex: currentIndex + index,
              doneButtonText:
                video.status === "done" ? "Remove Done Status" : "Mark as Done",
              isNonContiguousDone: this.isNonContiguousDone(
                playlistName,
                currentIndex + index,
              ),
            }));

          return {
            name: playlistName,
            videos: videos,
            visibleVideos: visibleVideos,
            shouldShowTruncation: shouldShowTruncation,
            truncationText: truncationText,
            otherPlaylists: Object.keys(this.playlists)
              .filter((n) => n !== playlistName)
              .map((n) => ({ name: n, display: this.formatPlaylistName(n) })),
          };
        },
      );
    },

    getPlaylistBoundaryOffsets() {
      const scroller = document.scrollingElement;
      // For the root scrolling element, getBoundingClientRect().top is
      // already -scrollTop, so adding scrollTop converts a viewport-relative
      // rect into a scroll-position-independent document offset.
      return Array.from(
        document.querySelectorAll(".playlist-name-clickable"),
      ).map((el) => el.getBoundingClientRect().top + scroller.scrollTop);
    },

    hasScrollableOverflow() {
      const scroller = document.scrollingElement;
      return scroller.scrollHeight - scroller.clientHeight > 1;
    },

    scrollToNextPlaylistBoundary() {
      const offsets = this.getPlaylistBoundaryOffsets();
      const currentScroll = document.scrollingElement.scrollTop;
      const next = offsets.find((offset) => offset > currentScroll + 1);
      if (next !== undefined) {
        window.scrollTo({ top: next, behavior: "smooth" });
      }
    },

    scrollToPreviousPlaylistBoundary() {
      const offsets = this.getPlaylistBoundaryOffsets();
      const currentScroll = document.scrollingElement.scrollTop;
      const previous = [...offsets]
        .reverse()
        .find((offset) => offset < currentScroll - 1);
      window.scrollTo({
        top: previous !== undefined ? previous : 0,
        behavior: "smooth",
      });
    },

    updateCurrentPlaylistVideos() {
      if (
        !this.currentPlaylistName ||
        !this.playlists[this.currentPlaylistName]
      ) {
        this.currentPlaylistVideos = [];
        this.otherPlaylists = [];
      } else {
        this.currentPlaylistVideos = this.playlists[
          this.currentPlaylistName
        ].map((video, index) => ({
          ...video,
          doneButtonText:
            video.status === "done" ? "Remove Done Status" : "Mark as Done",
          isNonContiguousDone: this.isNonContiguousDone(
            this.currentPlaylistName,
            index,
          ),
        }));
        this.otherPlaylists = Object.keys(this.playlists)
          .filter((name) => name !== this.currentPlaylistName)
          .map((name) => ({ name, display: this.formatPlaylistName(name) }));
      }
    },

    async loadHistory() {
      try {
        const result = await browser.storage.local.get("history");
        console.log("LOAD HISTORY RESULT", result.history);
        this.history = result.history || {};
        this.sortHistoryByRecentInteraction();
      } catch (error) {
        console.error("Error loading history:", error);
      }
    },

    async getCurrentTab() {
      try {
        const tabs = await browser.tabs.query({
          active: true,
          currentWindow: true,
        });
        if (tabs.length > 0) {
          this.currentTab = tabs[0];
          const url = new URL(this.currentTab.url);
          this.isCurrentTabYoutube = url.hostname === "www.youtube.com";
          this.isCurrentTabChannelPage =
            this.isCurrentTabYoutube && url.pathname.includes("/videos");
          this.isCurrentVideoYoutube =
            this.isCurrentTabYoutube && url.pathname.includes("/watch");

          // Get video timestamp if on YouTube video page
          if (this.isCurrentVideoYoutube) {
            await this.getVideoTimestamp();
          }

          this.updateAddCurrentPageButtonText();
          this.updateCurlCommand();
          this.updateWikitextCommand();
        }
      } catch (error) {
        console.error("Error getting current tab:", error);
        this.currentTab = null;
        this.isCurrentTabYoutube = false;
        this.isCurrentTabChannelPage = false;
        this.isCurrentVideoYoutube = false;
        this.updateAddCurrentPageButtonText();
        this.updateCurlCommand();
        this.updateWikitextCommand();
      }
    },

    async getVideoTimestamp() {
      try {
        // Execute script in the current tab to get video timestamp
        const results = await browser.tabs.executeScript(this.currentTab.id, {
          code: `
            (function() {
              const video = document.querySelector('video');
              if (video) {
                const currentTime = video.currentTime;
                const duration = video.duration;
                const ended = video.ended;

                const formatTime = (seconds) => {
                  const hours = Math.floor(seconds / 3600);
                  const minutes = Math.floor((seconds % 3600) / 60);
                  const remainingSeconds = Math.floor(seconds % 60);

                  if (hours > 0) {
                    return hours + ':' + minutes.toString().padStart(2, '0') + ':' + remainingSeconds.toString().padStart(2, '0');
                  } else {
                    return minutes + ':' + remainingSeconds.toString().padStart(2, '0');
                  }
                };

                return {
                  currentTime: currentTime,
                  formattedTime: formatTime(currentTime),
                  duration: duration,
                  ended: ended,
                  isLongVideo: duration > 3600
                };
              }
              return null;
            })();
          `
        });

        if (results && results[0]) {
          const videoData = results[0];
          this.currentVideoTimestamp = videoData.formattedTime;
          this.hasVideoEnded = videoData.ended;
        } else {
          this.currentVideoTimestamp = "0:00";
          this.hasVideoEnded = false;
        }
      } catch (error) {
        console.error("Error getting video timestamp:", error);
        this.currentVideoTimestamp = "0:00";
        this.hasVideoEnded = false;
      }
    },

    updateAddCurrentPageButtonText() {
      if (!this.currentTab) {
        this.addCurrentPageButtonText = "Unable to get page";
      } else if (!this.isCurrentTabYoutube) {
        this.addCurrentPageButtonText = "Add Cur. Page (YT only)";
      } else {
        this.addCurrentPageButtonText = "Add Cur. Page";
      }
    },

    updateCurlCommand() {
      if (!this.currentTab || !this.isCurrentTabChannelPage) {
        this.curlCommand =
          "This feature is only available on YouTube channel pages (/videos).";
        return;
      }

      const title = this.currentTab.title.replace(" - YouTube", "");
      const url = this.currentTab.url;
      const category = this.selectedCategory;
      const interval = this.checkInterval;

      this.curlCommand = `curl -X POST -H 'content-type: application/json' -d '{"query": "mutation add{ addChannel(details: {category: \\"${category}\\", checkInterval: ${interval}, name: \\"${title}\\", url: \\"${url}\\"}){name} } "}' localhost:8543/data | jq '.'`;
    },

    async copyCurlCommand() {
      try {
        await navigator.clipboard.writeText(this.curlCommand);
        console.log("Curl command copied to clipboard");
        // Could add visual feedback here
      } catch (error) {
        console.error("Failed to copy to clipboard:", error);
        // Fallback for older browsers
        try {
          const textArea = document.createElement("textarea");
          textArea.value = this.curlCommand;
          document.body.appendChild(textArea);
          textArea.focus();
          textArea.select();
          document.execCommand("copy");
          document.body.removeChild(textArea);
          console.log("Curl command copied to clipboard (fallback)");
        } catch (fallbackError) {
          console.error("Fallback copy failed:", fallbackError);
        }
      }
    },

    selectCategory(category) {
      this.selectedCategory = category;
      this.updateCurlCommand();
    },

    updateCheckInterval(interval) {
      // Ensure it's a positive integer, default to 14 if invalid
      const parsedInterval = parseInt(interval);
      this.checkInterval = parsedInterval > 0 ? parsedInterval : 14;
      this.updateCurlCommand();
    },

    showSaveChannel() {
      this.currentView = "saveChannel";
      this.updateCurlCommand();
    },

    showWikiInsp() {
      this.currentView = "wikiInsp";
      // Refresh timestamp when opening the view
      if (this.isCurrentVideoYoutube) {
        this.getVideoTimestamp().then(() => {
          this.updateWikitextCommand();
        });
      } else {
        this.updateWikitextCommand();
      }
    },

    showImport() {
      this.currentView = "import";
    },

    async refreshVideoTimestamp() {
      if (this.isCurrentVideoYoutube) {
        await this.getVideoTimestamp();
        this.updateWikitextCommand();
      }
    },

    updateWikitextCommand() {
      if (!this.currentTab || !this.isCurrentVideoYoutube) {
        this.wikitextCommand = "This feature is only available on YouTube videos.";
        return;
      }

      const today = new Date();
      const dateString = today.toISOString().split('T')[0]; // YYYY-MM-DD format

      const title = this.currentTab.title.replace(" - YouTube", "").replace(/\|/g, "-");
      const url = this.currentTab.url;

      let wikitext = `!!! ${dateString}\n* [[${title}|${url}]] (yt)`;

      // Add timestamp if user has enabled it and video hasn't ended
      if (this.includeTimestamp && !this.hasVideoEnded) {
        wikitext += `\n** ${this.currentVideoTimestamp || "0:00"} - `;
      }

      this.wikitextCommand = wikitext;
    },

    async copyWikitextCommand() {
      try {
        await navigator.clipboard.writeText(this.wikitextCommand);
        console.log("Wikitext copied to clipboard");
        // Could add visual feedback here
      } catch (error) {
        console.error("Failed to copy to clipboard:", error);
        // Fallback for older browsers
        try {
          const textArea = document.createElement("textarea");
          textArea.value = this.wikitextCommand;
          document.body.appendChild(textArea);
          textArea.focus();
          textArea.select();
          document.execCommand("copy");
          document.body.removeChild(textArea);
          console.log("Wikitext copied to clipboard (fallback)");
        } catch (fallbackError) {
          console.error("Fallback copy failed:", fallbackError);
        }
      }
    },

    toggleTimestamp() {
      this.includeTimestamp = !this.includeTimestamp;
      this.updateWikitextCommand();
    },

    sortHistoryByRecentInteraction() {
      // Convert history object to array with video ID and sort by most recent interaction
      this.sortedHistory = Object.entries(this.history)
        .map(([videoId, videoData]) => {
          const lastInteraction =
            videoData.history.length > 0
              ? Math.max(...videoData.history.map((event) => event.timestamp))
              : 0;

          // Pre-process events with formatted data for CSP compliance
          const processedEvents = videoData.history
            .slice()
            .reverse()
            .map((event, index) => ({
              ...event,
              formattedAction: this.formatActionName(event.action),
              formattedPosition: `at ${this.formatVideoPosition(event.position)}`,
              formattedTimestamp: this.formatTimestamp(event.timestamp),
              uniqueKey: `${videoId}-${event.timestamp}-${index}`,
            }));

          return {
            videoId,
            formattedVideoId: `(${videoId})`,
            ...videoData,
            lastInteraction,
            processedEvents,
            tags: videoData.tags || [], // Ensure tags array exists
          };
        })
        .sort((a, b) => b.lastInteraction - a.lastInteraction);
    },

    formatTimestamp(timestamp) {
      const date = new Date(timestamp);
      const now = new Date();
      const diffMs = now - date;
      const diffMins = Math.floor(diffMs / (1000 * 60));
      const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
      const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));

      if (diffMins < 1) return "Just now";
      if (diffMins < 60)
        return `${diffMins} minute${diffMins > 1 ? "s" : ""} ago`;
      if (diffHours < 24)
        return `${diffHours} hour${diffHours > 1 ? "s" : ""} ago`;
      if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? "s" : ""} ago`;

      return (
        date.toLocaleDateString() +
        " " +
        date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
      );
    },

    formatVideoPosition(seconds) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = Math.floor(seconds % 60);
      return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
    },

    async toggleTag(videoId, tag) {
      // Create a deep copy of history to avoid proxy issues
      const history = JSON.parse(JSON.stringify(this.history));

      if (!history[videoId]) {
        console.error(`Video ${videoId} not found in history`);
        return;
      }

      const videoData = history[videoId];
      if (!videoData.tags) {
        videoData.tags = [];
      }

      const tagIndex = videoData.tags.indexOf(tag);
      if (tagIndex === -1) {
        // Add tag
        videoData.tags.push(tag);
      } else {
        // Remove tag
        videoData.tags.splice(tagIndex, 1);
      }

      // Save to storage and update local state
      try {
        await browser.storage.local.set({ history: history });
        this.history = history;
        this.sortHistoryByRecentInteraction(); // Refresh display
      } catch (error) {
        console.error("Error saving tag changes:", error);
      }
    },

    isTagActive(videoId, tag) {
      const videoData = this.history[videoId];
      return videoData && videoData.tags && videoData.tags.includes(tag);
    },

    formatActionName(action) {
      const actionMap = {
        play: "Started",
        playing: "Playing",
        pause: "Paused",
        ended: "Finished",
      };
      return actionMap[action] || action;
    },

    formatPlaylistName(name) {
      // Convert "listening-1" to "Listening - 1"
      return name
        .split("-")
        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
        .join(" - ");
    },

    openVideo(url) {
      browser.tabs.create({ url });
    },

    async removeVideo(playlistName, index) {
      const playlists = JSON.parse(JSON.stringify(this.playlists));

      // Make a copy of the current playlist
      const playlist = [...playlists[playlistName]];

      // Remove the video at the specified index
      playlist.splice(index, 1);

      // Create an updated playlists object with the remaining playlists unchanged
      const updatedPlaylists = {
        ...playlists,
        [playlistName]: playlist,
      };

      // Update the playlists in storage
      try {
        await browser.storage.local.set({ playlists: updatedPlaylists });
        this.playlists = updatedPlaylists;
        this.updatePlaylistsForDisplay();
        this.updateCurrentPlaylistVideos();
      } catch (error) {
        console.error("Error removing video:", error);
      }
    },

    async moveVideoUp(playlistName, index) {
      // Can't move the first item up
      if (index <= 0) return;

      const playlists = JSON.parse(JSON.stringify(this.playlists));

      // Make a copy of the current playlist
      const playlist = [...playlists[playlistName]];

      // Swap the video with the one above it
      [playlist[index], playlist[index - 1]] = [
        playlist[index - 1],
        playlist[index],
      ];

      // Create an updated playlists object
      const updatedPlaylists = {
        ...playlists,
        [playlistName]: playlist,
      };

      // Update the playlists in storage
      try {
        await browser.storage.local.set({ playlists: updatedPlaylists });
        this.playlists = updatedPlaylists;
        this.updatePlaylistsForDisplay();
        this.updateCurrentPlaylistVideos();
      } catch (error) {
        console.error("Error moving video up:", error);
      }
    },

    async moveVideoDown(playlistName, index) {
      const playlists = JSON.parse(JSON.stringify(this.playlists));
      const playlist = [...playlists[playlistName]];

      // Can't move the last item down
      if (index >= playlist.length - 1) return;

      // Swap the video with the one below it
      [playlist[index], playlist[index + 1]] = [
        playlist[index + 1],
        playlist[index],
      ];

      // Create an updated playlists object
      const updatedPlaylists = {
        ...playlists,
        [playlistName]: playlist,
      };

      // Update the playlists in storage
      try {
        await browser.storage.local.set({ playlists: updatedPlaylists });
        this.playlists = updatedPlaylists;
        this.updatePlaylistsForDisplay();
        this.updateCurrentPlaylistVideos();
      } catch (error) {
        console.error("Error moving video down:", error);
      }
    },

    async moveVideoToTop(playlistName, index) {
      const playlists = JSON.parse(JSON.stringify(this.playlists));
      const playlist = [...playlists[playlistName]];

      const topPosition = this.findTopPosition(playlistName);

      if (index === topPosition + 1) return;

      const video = playlist.splice(index, 1)[0];
      playlist.splice(topPosition + 1, 0, video);

      const updatedPlaylists = {
        ...playlists,
        [playlistName]: playlist,
      };

      try {
        await browser.storage.local.set({ playlists: updatedPlaylists });
        this.playlists = updatedPlaylists;
        this.updatePlaylistsForDisplay();
        this.updateCurrentPlaylistVideos();
      } catch (error) {
        console.error("Error moving video to top:", error);
      }
    },

    async moveVideoToBottom(playlistName, index) {
      const playlists = JSON.parse(JSON.stringify(this.playlists));
      const playlist = [...playlists[playlistName]];

      if (index === playlist.length - 1) return;

      const video = playlist.splice(index, 1)[0];
      playlist.push(video);

      const updatedPlaylists = {
        ...playlists,
        [playlistName]: playlist,
      };

      try {
        await browser.storage.local.set({ playlists: updatedPlaylists });
        this.playlists = updatedPlaylists;
        this.updatePlaylistsForDisplay();
        this.updateCurrentPlaylistVideos();
      } catch (error) {
        console.error("Error moving video to bottom:", error);
      }
    },

    async moveVideoToPlaylist(fromPlaylistName, videoIndex, toPlaylistName) {
      const playlists = JSON.parse(JSON.stringify(this.playlists));
      const video = playlists[fromPlaylistName].splice(videoIndex, 1)[0];
      playlists[toPlaylistName].push(video);
      try {
        await browser.storage.local.set({ playlists });
        this.playlists = playlists;
        this.updatePlaylistsForDisplay();
        this.updateCurrentPlaylistVideos();
      } catch (error) {
        console.error("Error moving video to playlist:", error);
      }
    },

    findTopPosition(playlistName) {
      const playlist = this.playlists[playlistName];
      if (!playlist) return 0;

      for (let i = 0; i < playlist.length; i++) {
        if (playlist[i].status !== "done") {
          return i;
        }
      }

      return playlist.length;
    },

    async scatterLastN(playlistName, count) {
      const playlists = JSON.parse(JSON.stringify(this.playlists));
      const playlist = playlists[playlistName];
      const n = playlist.length;
      if (!playlist || count < 2 || count >= n) return;

      const prefix = playlist.slice(0, n - count);
      const tail = playlist.slice(n - count);
      const insertions = [];
      let cursor = prefix.length;

      for (let i = count - 2; i >= 0; i--) {
        const gap = Math.floor(Math.random() * 3) + 1;
        cursor = Math.max(1, cursor - gap);
        insertions.push([cursor, tail[i]]);
      }
      for (const [idx, video] of insertions) {
        prefix.splice(idx, 0, video);
      }
      prefix.push(tail[count - 1]);

      playlists[playlistName] = prefix;
      try {
        await browser.storage.local.set({ playlists });
        this.playlists = playlists;
        this.updatePlaylistsForDisplay();
        this.updateCurrentPlaylistVideos();
      } catch (error) {
        console.error("Error scattering videos:", error);
      }
    },

    async toggleVideoDoneStatus(playlistName, index) {
      const playlists = JSON.parse(JSON.stringify(this.playlists));
      const playlist = [...playlists[playlistName]];
      const video = { ...playlist[index] };

      // Toggle the done status
      if (video.status === "done") {
        // Remove status property (undefined status means not done)
        delete video.status;
      } else {
        // Set status to done
        video.status = "done";
      }

      // Update the video in the playlist
      playlist[index] = video;

      // Create an updated playlists object
      const updatedPlaylists = {
        ...playlists,
        [playlistName]: playlist,
      };

      // Update the playlists in storage
      try {
        await browser.storage.local.set({ playlists: updatedPlaylists });
        this.playlists = updatedPlaylists;
        this.updatePlaylistsForDisplay();
        this.updateCurrentPlaylistVideos();
      } catch (error) {
        console.error("Error toggling video done status:", error);
      }
    },

    async addCurrentPageToPlaylist() {
      if (
        !this.currentTab ||
        !this.isCurrentTabYoutube ||
        !this.currentPlaylistName
      ) {
        return;
      }

      // Create video object using current tab info
      const video = {
        url: this.currentTab.url,
        title: this.currentTab.title,
      };

      // Use shared utility function to add video (handles duplicate checking)
      const wasAdded = await PlaylistUtils.addVideoToPlaylist(
        this.currentPlaylistName,
        video,
      );

      if (wasAdded) {
        // Refresh displays only if video was actually added
        this.loadPlaylists(); // This will update both display arrays
      } else {
        // Could show user feedback that video already exists
        console.log("Video already exists in a playlist");
      }
    },

    async exportPlaylists() {
      try {
        // Get current playlists
        const playlistResult = await browser.storage.local.get("playlists");
        const playlists = playlistResult.playlists || {};

        // Get playback history
        const historyResult = await browser.storage.local.get("history");
        const playbackHistory = historyResult.history || {};

        // Get open tabs
        let openTabs = [];
        try {
          const tabsResult = await browser.tabs.query({});
          openTabs = tabsResult
            .filter(
              (tab) =>
                tab.url &&
                !tab.url.startsWith("moz-extension://") &&
                !tab.url.startsWith("about:") &&
                !tab.url.startsWith("chrome://"),
            )
            .map((tab) => ({
              url: tab.url,
              title: tab.title || "Untitled",
            }));
        } catch (error) {
          console.warn("Could not retrieve open tabs:", error);
          openTabs = [];
        }

        // Create export data object
        const exportData = {
          playlists,
          playbackHistory,
          openTabs,
          exportDate: new Date().toISOString(),
        };

        // Convert to JSON
        const jsonString = JSON.stringify(exportData, null, 2);

        // Create download
        const blob = new Blob([jsonString], { type: "application/json" });
        const url = URL.createObjectURL(blob);

        // Trigger download
        const a = document.createElement("a");
        a.href = url;
        a.download = `playlists-export-${new Date().toISOString().split("T")[0]}.json`;
        document.body.appendChild(a);
        a.click();

        // Clean up
        setTimeout(() => {
          document.body.removeChild(a);
          URL.revokeObjectURL(url);
        }, 100);
      } catch (error) {
        console.error("Error exporting playlists:", error);
      }
    },

    videotitle: {
      ["@click"]() {
        console.log("TITLE CLICK", this.$el);
      },
    },

    videoPlayLink: {
      ["@click.prevent"]() {
        browser.tabs.update({ url: this.$el.href });
      },
    },

    isNonContiguousDone(playlistName, videoIndex) {
      const playlist = this.playlists[playlistName];
      if (
        !playlist ||
        !playlist[videoIndex] ||
        playlist[videoIndex].status !== "done"
      ) {
        return false;
      }

      // Check if there's any non-done video before this done video
      for (let i = 0; i < videoIndex; i++) {
        if (playlist[i].status !== "done") {
          return true;
        }
      }

      return false;
    },

    isCurrentVideo(playlistName, index) {
      const currentIndex = this.currentIndices[playlistName];
      return currentIndex === index;
    },

    isDoneVideo(playlistName, index) {
      const currentIndex = this.currentIndices[playlistName];
      return index < currentIndex;
    },

    isVideoDone(playlistName, index) {
      const video =
        this.playlists[playlistName] && this.playlists[playlistName][index];
      return video && video.status === "done";
    },

    videoItemClass: {
      [":class"]() {
        const playlistName = this.$el.dataset.playlistName;
        const index = parseInt(this.$el.dataset.playlistIndex);
        const video = this.playlists[playlistName][index];

        return {
          "current-video": this.isCurrentVideo(playlistName, index),
          "done-video":
            this.isDoneVideo(playlistName, index) && video.status === "done",
          "non-contiguous-done-video": this.isNonContiguousDone(
            playlistName,
            index,
          ),
        };
      },
    },

    removeVideoButton: {
      ["@click"]() {
        this.removeVideo(
          this.$el.dataset.playlistName,
          this.$el.dataset.playlistIndex,
        );
        this.closeAllMenus();
      },
    },

    toggleVideoDoneButton: {
      ["@click"]() {
        this.toggleVideoDoneStatus(
          this.$el.dataset.playlistName,
          parseInt(this.$el.dataset.playlistIndex),
        );
        this.closeAllMenus();
      },
    },

    moveUpButton: {
      ["@click"]() {
        this.moveVideoUp(
          this.$el.dataset.playlistName,
          parseInt(this.$el.dataset.playlistIndex),
        );
      },
      [":disabled"]() {
        return parseInt(this.$el.dataset.playlistIndex) === 0;
      },
    },

    moveDownButton: {
      ["@click"]() {
        this.moveVideoDown(
          this.$el.dataset.playlistName,
          parseInt(this.$el.dataset.playlistIndex),
        );
      },
      [":disabled"]() {
        return (
          parseInt(this.$el.dataset.playlistIndex) ===
          this.playlists[this.$el.dataset.playlistName].length - 1
        );
      },
    },

    moveToTopButton: {
      ["@click"]() {
        this.moveVideoToTop(
          this.$el.dataset.playlistName,
          parseInt(this.$el.dataset.playlistIndex),
        );
        this.closeAllMenus();
      },
      [":disabled"]() {
        const index = parseInt(this.$el.dataset.playlistIndex);
        const playlistName = this.$el.dataset.playlistName;
        const topPosition = this.findTopPosition(playlistName);
        return index === topPosition + 1;
      },
    },

    moveToBottomButton: {
      ["@click"]() {
        this.moveVideoToBottom(
          this.$el.dataset.playlistName,
          parseInt(this.$el.dataset.playlistIndex),
        );
        this.closeAllMenus();
      },
      [":disabled"]() {
        return (
          parseInt(this.$el.dataset.playlistIndex) ===
          this.playlists[this.$el.dataset.playlistName].length - 1
        );
      },
    },

    moveToSubmenuButton: {
      ["@click.stop"]() {
        const playlistName = this.$el.dataset.playlistName;
        const index = parseInt(this.$el.dataset.playlistIndex);
        const menuId = this.getMenuId(playlistName, index);
        this.moveSubmenuOpenFor = this.moveSubmenuOpenFor === menuId ? null : menuId;
      },
    },

    moveToSubmenu: {
      ["x-show"]() {
        const playlistName = this.$el.dataset.playlistName;
        const index = parseInt(this.$el.dataset.playlistIndex);
        return this.moveSubmenuOpenFor === this.getMenuId(playlistName, index);
      },
    },

    moveToPlaylistButton: {
      ["@click"]() {
        const fromPlaylistName = this.$el.dataset.fromPlaylistName;
        const videoIndex = parseInt(this.$el.dataset.playlistIndex);
        const toPlaylistName = this.$el.dataset.toPlaylistName;
        this.moveVideoToPlaylist(fromPlaylistName, videoIndex, toPlaylistName);
        this.closeAllMenus();
      },
    },

    exportButton: {
      ["@click"]() {
        this.exportPlaylists();
      },
    },

    importButton: {
      ["@click"]() {
        this.showImport();
      },
    },

    async handleImport() {
      if (!this.importText.trim()) {
        alert("Please paste your JSON export data");
        return;
      }

      try {
        const importedData = JSON.parse(this.importText);
        this.validateAndImportPlaylists(importedData);
        this.importText = "";
      } catch (error) {
        console.error("Error parsing JSON:", error);
        alert(
          "Invalid JSON format. Please paste valid playlist export data.",
        );
      }
    },

    validateAndImportPlaylists(data) {
      // Validate the playlists structure
      if (!data.playlists || typeof data.playlists !== "object") {
        alert("Invalid file format: Missing or invalid 'playlists' property");
        return;
      }

      // Validate each playlist
      const validPlaylists = {};
      let hasErrors = false;

      for (const [playlistName, videos] of Object.entries(data.playlists)) {
        // Check if videos is an array
        if (!Array.isArray(videos)) {
          console.error(
            `Playlist '${playlistName}' does not contain a valid array of videos`,
          );
          hasErrors = true;
          continue;
        }

        // Validate each video in the playlist and filter out done videos
        const validVideos = videos.filter((video) => {
          if (!video || typeof video !== "object") {
            console.error(`Invalid video object in '${playlistName}'`);
            return false;
          }

          if (
            !video.url ||
            typeof video.url !== "string" ||
            !video.title ||
            typeof video.title !== "string"
          ) {
            console.error(
              `Video in '${playlistName}' missing required properties (url, title)`,
            );
            return false;
          }

          if (video.status === "done") {
            return false;
          }

          return true;
        });

        // Add the validated playlist if it has valid videos
        if (validVideos.length > 0) {
          validPlaylists[playlistName] = validVideos;
        }
      }

      if (Object.keys(validPlaylists).length === 0) {
        alert("No valid playlists found in the import file");
        return;
      }

      if (hasErrors) {
        const confirmImport = confirm(
          "Some playlists or videos were invalid and will be skipped. Do you want to continue with the import?",
        );
        if (!confirmImport) return;
      }

      // Update storage and state
      this.appendToPlaylists(validPlaylists);
    },

    async appendToPlaylists(importedPlaylists) {
      try {
        const currentPlaylists = JSON.parse(JSON.stringify(this.playlists));
        let addedCount = 0;
        let skippedCount = 0;

        for (const [playlistName, importedVideos] of Object.entries(importedPlaylists)) {
          if (!currentPlaylists[playlistName]) {
            currentPlaylists[playlistName] = [];
          }

          for (const video of importedVideos) {
            const alreadyExists = PlaylistUtils.findPlaylist(currentPlaylists, video.url);

            if (!alreadyExists) {
              currentPlaylists[playlistName].push(video);
              addedCount++;
            } else {
              skippedCount++;
            }
          }
        }

        await browser.storage.local.set({ playlists: currentPlaylists });
        this.playlists = currentPlaylists;
        this.updatePlaylistsForDisplay();
        this.updateCurrentPlaylistVideos();

        alert(`Import complete! Added ${addedCount} video(s), skipped ${skippedCount} duplicate(s).`);
      } catch (error) {
        console.error("Error appending playlists:", error);
        alert("Error importing playlists: " + error.message);
      }
    },

    getMenuId(playlistName, index) {
      return `${playlistName}-${index}`;
    },

    isMenuOpen(playlistName, index) {
      return this.openMenus.has(this.getMenuId(playlistName, index));
    },

    toggleMenu(playlistName, index) {
      const menuId = this.getMenuId(playlistName, index);
      if (this.openMenus.has(menuId)) {
        this.openMenus.delete(menuId);
      } else {
        this.openMenus.clear();
        this.openMenus.add(menuId);
      }
      this.moveSubmenuOpenFor = null;
    },

    closeAllMenus() {
      this.openMenus.clear();
      this.moveSubmenuOpenFor = null;
    },

    moreMenuButton: {
      ["@click.stop"]() {
        this.toggleMenu(
          this.$el.dataset.playlistName,
          parseInt(this.$el.dataset.playlistIndex),
        );
      },
    },

    moreMenu: {
      ["x-show"]() {
        return this.isMenuOpen(
          this.$el.dataset.playlistName,
          parseInt(this.$el.dataset.playlistIndex),
        );
      },
    },

    // View navigation methods
    showHistory() {
      this.currentView = "history";
      this.loadHistory(); // Refresh history data when switching to history view
    },

    showPlaylists() {
      this.currentView = "playlists";
    },

    showPlaylist(playlistName) {
      this.currentView = "playlist";
      this.currentPlaylistName = playlistName;
      this.updateCurrentPlaylistVideos();
    },

    // Methods for truncated display
    shouldShowTruncation(playlistName) {
      const currentIndex = this.currentIndices[playlistName] || 0;
      return currentIndex > 0;
    },

    getTruncationText(playlistName) {
      const currentIndex = this.currentIndices[playlistName] || 0;
      const count = currentIndex;
      return `(${count} previous video${count === 1 ? "" : "s"})`;
    },

    getVisibleVideos(playlistName, videos) {
      const currentIndex = this.currentIndices[playlistName] || 0;
      // Show from current video onwards, but keep original indices
      return videos.slice(currentIndex).map((video, index) => ({
        ...video,
        originalIndex: currentIndex + index,
      }));
    },

    getCurrentPlaylistVideos() {
      if (
        !this.currentPlaylistName ||
        !this.playlists[this.currentPlaylistName]
      ) {
        return [];
      }
      return this.playlists[this.currentPlaylistName];
    },

    // Button bindings for navigation
    historyButton: {
      ["@click"]() {
        this.showHistory();
      },
    },

    saveChannelButton: {
      ["@click"]() {
        this.showSaveChannel();
      },
    },

    wikiInspButton: {
      ["@click"]() {
        this.showWikiInsp();
      },
    },

    backButton: {
      ["@click"]() {
        this.showPlaylists();
      },
    },

    // Event handlers for playlist navigation
    playlistNameClick: {
      ["@click"]() {
        const playlistName = this.$el.dataset.playlistName;
        this.showPlaylist(playlistName);
      },
    },

    truncatedVideosClick: {
      ["@click"]() {
        const playlistName = this.$el.dataset.playlistName;
        this.showPlaylist(playlistName);
      },
    },

    truncatedVideosClick: {
      ["@click"]() {
        const playlistName = this.$el.dataset.playlistName;
        this.showPlaylist(playlistName);
      },
    },

    truncatedVideosDisplay: {
      ["x-show"]() {
        const playlistName = this.$el.dataset.playlistName;
        const playlistData = this.playlistsForDisplay.find(
          (p) => p.name === playlistName,
        );
        return playlistData ? playlistData.shouldShowTruncation : false;
      },
      ["@click"]() {
        const playlistName = this.$el.dataset.playlistName;
        this.showPlaylist(playlistName);
      },
    },

    // CSP-compliant view bindings
    playlistsHeader: {
      ["x-show"]() {
        return this.currentView === "playlists";
      },
    },

    historyHeader: {
      ["x-show"]() {
        return this.currentView === "history";
      },
    },

    playlistViewHeader: {
      ["x-show"]() {
        return this.currentView === "playlist";
      },
    },

    saveChannelHeader: {
      ["x-show"]() {
        return this.currentView === "saveChannel";
      },
    },

    wikiInspHeader: {
      ["x-show"]() {
        return this.currentView === "wikiInsp";
      },
    },

    importHeader: {
      ["x-show"]() {
        return this.currentView === "import";
      },
    },

    playlistsContainer: {
      ["x-show"]() {
        return this.currentView === "playlists";
      },
    },

    historyContainer: {
      ["x-show"]() {
        return this.currentView === "history";
      },
    },

    addCurrentPageContainer: {
      ["x-show"]() {
        return this.currentView === "playlist";
      },
    },

    playlistViewContainer: {
      ["x-show"]() {
        return this.currentView === "playlist";
      },
    },

    saveChannelContainer: {
      ["x-show"]() {
        return this.currentView === "saveChannel";
      },
    },

    wikiInspContainer: {
      ["x-show"]() {
        return this.currentView === "wikiInsp";
      },
    },

    importContainer: {
      ["x-show"]() {
        return this.currentView === "import";
      },
    },

    exportContainer: {
      ["x-show"]() {
        return this.currentView === "playlists";
      },
    },

    playlistJumpButtons: {
      ["x-show"]() {
        return this.currentView === "playlists";
      },
    },

    scrollUpButton: {
      ["@click"]() {
        this.scrollToPreviousPlaylistBoundary();
      },
      [":disabled"]() {
        // Read reactive properties unconditionally (before any early return)
        // so Alpine always tracks them as dependencies for this binding,
        // regardless of which branch below ends up short-circuiting.
        const scrollTop = this.playlistsScrollTop;
        const playlistCount = this.playlistsForDisplay.length;
        if (playlistCount < 2 || !this.hasScrollableOverflow()) return true;
        return scrollTop <= 0;
      },
    },

    scrollDownButton: {
      ["@click"]() {
        this.scrollToNextPlaylistBoundary();
      },
      [":disabled"]() {
        const scrollTop = this.playlistsScrollTop;
        const playlistCount = this.playlistsForDisplay.length;
        if (playlistCount < 2 || !this.hasScrollableOverflow()) return true;
        const offsets = this.getPlaylistBoundaryOffsets();
        if (offsets.length === 0) return true;
        // The last playlist's heading may sit past the maximum scrollable
        // position (there isn't enough content below it to scroll that far),
        // so cap the target at whichever is reachable.
        const scroller = document.scrollingElement;
        const maxScrollTop = scroller.scrollHeight - scroller.clientHeight;
        const lastReachableOffset = Math.min(
          offsets[offsets.length - 1],
          maxScrollTop,
        );
        return scrollTop >= lastReachableOffset - 1;
      },
    },

    // History-specific bindings for CSP compliance
    historyEmptyState: {
      ["x-show"]() {
        return this.sortedHistory.length === 0;
      },
    },

    // Playlist view-specific bindings for CSP compliance
    playlistViewEmptyState: {
      ["x-show"]() {
        return this.currentPlaylistVideos.length === 0;
      },
    },

    // Tag chip bindings for CSP compliance
    tagChip: {
      ["@click"]() {
        const videoId = this.$el.dataset.videoId;
        const tag = this.$el.dataset.tag;
        this.toggleTag(videoId, tag);
      },
      [":class"]() {
        const videoId = this.$el.dataset.videoId;
        const tag = this.$el.dataset.tag;
        return {
          active: this.isTagActive(videoId, tag),
        };
      },
    },

    // Save Channel specific bindings
    copyCurlButton: {
      ["@click"]() {
        this.copyCurlCommand();
      },
      [":disabled"]() {
        return !this.isCurrentTabChannelPage;
      },
    },

    // Wiki/insp specific bindings
    copyWikitextButton: {
      ["@click"]() {
        this.copyWikitextCommand();
      },
      [":disabled"]() {
        return !this.isCurrentVideoYoutube;
      },
    },

    timestampCheckbox: {
      ["@change"]() {
        this.toggleTimestamp();
      },
      [":checked"]() {
        return this.includeTimestamp;
      },
    },

    refreshTimestampButton: {
      ["@click"]() {
        this.refreshVideoTimestamp();
      },
      [":disabled"]() {
        return !this.isCurrentVideoYoutube;
      },
    },

    categoryButton: {
      ["@click"]() {
        const category = this.$el.dataset.category;
        this.selectCategory(category);
      },
      [":class"]() {
        const category = this.$el.dataset.category;
        return {
          active: this.selectedCategory === category,
        };
      },
    },

    saveChannelNotice: {
      ["x-show"]() {
        return !this.isCurrentTabChannelPage;
      },
    },

    wikiInspNotice: {
      ["x-show"]() {
        return !this.isCurrentVideoYoutube;
      },
    },

    intervalInput: {
      [":value"]() {
        return this.checkInterval;
      },
      ["@input"]() {
        this.updateCheckInterval(this.$el.value);
      },
    },

    scatterCountInput: {
      [":value"]() {
        return this.scatterCount;
      },
      [":max"]() {
        const pl = this.playlists[this.currentPlaylistName];
        return pl ? pl.length - 1 : 2;
      },
      ["@input"]() {
        const pl = this.playlists[this.currentPlaylistName];
        const max = pl ? pl.length - 1 : 2;
        const v = Math.min(max, Math.max(2, parseInt(this.$el.value) || 2));
        this.scatterCount = v;
      },
    },

    scatterButton: {
      ["@click"]() {
        this.scatterLastN(this.currentPlaylistName, this.scatterCount);
      },
      [":disabled"]() {
        const pl = this.playlists[this.currentPlaylistName];
        return !pl || this.scatterCount >= pl.length;
      },
    },

    // Add current page button binding
    addCurrentPageButton: {
      ["@click"]() {
        this.addCurrentPageToPlaylist();
      },
      [":disabled"]() {
        return (
          !this.currentTab ||
          !this.isCurrentTabYoutube ||
          !this.currentPlaylistName
        );
      },
      [":class"]() {
        return {
          disabled:
            !this.currentTab ||
            !this.isCurrentTabYoutube ||
            !this.currentPlaylistName,
        };
      },
    },

    // Import view bindings
    importTextarea: {
      [":value"]() {
        return this.importText;
      },
      ["@input"]() {
        this.importText = this.$el.value;
      },
    },

    importSubmitButton: {
      ["@click"]() {
        this.handleImport();
      },
    },
  }));
});