☰

YouTube Hotkeys

Navigate YouTube with leader key 'i' followed by other keys

// ==UserScript==
// @name         YouTube Hotkeys
// @namespace    Violentmonkey Scripts
// @version      2.0
// @description  Navigate YouTube with leader key 'i' followed by other keys
// @author       dpi0
// @author       You
// @match        https://www.youtube.com/*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_registerMenuCommand
// @grant        GM_setClipboard
// @grant        window.close
// @homepageURL https://github.com/dpi0/scripts/blob/main/greasyfork/youtube-hotkeys.js
// @supportURL  https://github.com/dpi0/scripts/issues
// @license     MIT
// ==/UserScript==

(function () {
  "use strict";

  // Configuration with default values
  const DEFAULT_LEADER_KEY = "i";
  const TIMEOUT = 2000; // Time window in ms to press the second key after leader key

  // Get leader key from GM storage, or use default if not set
  let LEADER_KEY = GM_getValue("leaderKey", DEFAULT_LEADER_KEY);

  // Setup Violentmonkey/Tampermonkey menu commands
  GM_registerMenuCommand("🔑 Change Leader Key", promptForLeaderKey);
  GM_registerMenuCommand("🗘 Reset Leader Key", resetLeaderKey);

  // Function to prompt user for new leader key
  function promptForLeaderKey() {
    const newKey = prompt("Enter a new leader key:", LEADER_KEY);
    if (newKey && newKey.length === 1) {
      LEADER_KEY = newKey.toLowerCase();
      GM_setValue("leaderKey", LEADER_KEY);
      showNotification(`Leader key changed to '${LEADER_KEY}'`);
    } else if (newKey) {
      alert("Leader key must be a single character.");
    }
  }

  // Function to reset leader key to default
  function resetLeaderKey() {
    LEADER_KEY = DEFAULT_LEADER_KEY;
    GM_setValue("leaderKey", LEADER_KEY);
    showNotification(`Leader key reset to '${LEADER_KEY}'`);
  }

  // Navigation and action functions
  function navigateToHome() {
    window.location.href = "https://www.youtube.com/";
  }

  function navigateToSubscriptions() {
    window.location.href = "https://www.youtube.com/feed/subscriptions";
  }

  function navigateToHistory() {
    window.location.href = "https://www.youtube.com/feed/history";
  }

  function navigateToWatchLater() {
    window.location.href = "https://www.youtube.com/playlist?list=WL";
  }

  function navigateToLikedVideos() {
    window.location.href = "https://www.youtube.com/playlist?list=LL";
  }

  function navigateToTrending() {
    window.location.href = "https://www.youtube.com/feed/trending";
  }

  function navigateToLibrary() {
    window.location.href = "https://www.youtube.com/feed/library";
  }

  function navigateToChannelVideos() {
    // Fixed function to work on both channel pages and video pages
    if (window.location.pathname.includes("/watch")) {
      // If on a video page, find the channel link
      const channelLink =
        document.querySelector("#top-row ytd-video-owner-renderer a") ||
        document.querySelector("ytd-channel-name a") ||
        document.querySelector("a.ytd-channel-name");

      if (channelLink) {
        // Get the channel URL and append /videos
        let channelUrl = channelLink.href;
        if (!channelUrl.endsWith("/videos")) {
          channelUrl = channelUrl.split("?")[0]; // Remove any query parameters
          channelUrl = channelUrl.endsWith("/")
            ? channelUrl + "videos"
            : channelUrl + "/videos";
        }
        window.location.href = channelUrl;
      } else {
        showNotification("Channel link not found on this video page!");
      }
    } else if (
      window.location.pathname.includes("/channel/") ||
      window.location.pathname.includes("/c/") ||
      window.location.pathname.includes("/user/") ||
      window.location.pathname.includes("/@")
    ) {
      // If already on a channel page, navigate to videos section
      // Extract the channel name/ID from the URL
      const channelPath = window.location.pathname.split("/")[1]; // Get the @CHANNEL_NAME part
      window.location.href = `https://www.youtube.com/${channelPath}/videos`;
    } else {
      showNotification("Not on a video or channel page!");
    }
  }

  function navigateToChannelPlaylists() {
    // Fixed function to work on both channel pages and video pages
    if (window.location.pathname.includes("/watch")) {
      // If on a video page, find the channel link
      const channelLink =
        document.querySelector("#top-row ytd-video-owner-renderer a") ||
        document.querySelector("ytd-channel-name a") ||
        document.querySelector("a.ytd-channel-name");

      if (channelLink) {
        // Get the channel URL and append /playlists
        let channelUrl = channelLink.href;
        if (!channelUrl.endsWith("/playlists")) {
          channelUrl = channelUrl.split("?")[0]; // Remove any query parameters
          channelUrl = channelUrl.endsWith("/")
            ? channelUrl + "playlists"
            : channelUrl + "/playlists";
        }
        window.location.href = channelUrl;
      } else {
        showNotification("Channel link not found on this video page!");
      }
    } else if (
      window.location.pathname.includes("/channel/") ||
      window.location.pathname.includes("/c/") ||
      window.location.pathname.includes("/user/") ||
      window.location.pathname.includes("/@")
    ) {
      // If already on a channel page, navigate to playlists section
      // Extract the channel name/ID from the URL
      const channelPath = window.location.pathname.split("/")[1]; // Get the @CHANNEL_NAME part
      window.location.href = `https://www.youtube.com/${channelPath}/playlists`;
    } else {
      showNotification("Not on a video or channel page!");
    }
  }

  function triggerSaveButton() {
    // Only works on watch pages
    if (!window.location.pathname.includes("/watch")) {
      showNotification("This only works on video pages!");
      return;
    }

    // Try to find the Save button using various selectors
    const saveButton =
      document.querySelector('button[aria-label="Save to playlist"]') ||
      document.querySelector('ytd-button-renderer[id="save-button"]') ||
      document.querySelector('ytd-menu-renderer button[aria-label="Save"]') ||
      document.querySelector('button.ytd-menu-renderer[aria-label="Save"]') ||
      document.querySelector('button[aria-label="Save"]');

    if (saveButton) {
      saveButton.click();
      showNotification("Save to playlist popup triggered");
    } else {
      showNotification("Save button not found!");
    }
  }

  function navigateToNextVideo() {
    // Only works on watch pages
    if (!window.location.pathname.includes("/watch")) {
      showNotification("This only works on video pages!");
      return;
    }

    // Try to find the "Next" button and click it
    const nextButton = findNextButton();
    if (nextButton) {
      nextButton.click();
      // No need for notification as the page will navigate
    } else {
      showNotification("Next video button not found!");
    }
  }

  function navigateToPreviousVideo() {
    // Only works on watch pages
    if (!window.location.pathname.includes("/watch")) {
      showNotification("This only works on video pages!");
      return;
    }

    // YouTube doesn't have a standard "Previous video" button
    // This is just a placeholder, as YouTube doesn't have a native "previous video" button
    showNotification("Previous video navigation not supported by YouTube");
  }

  function toggleSidebar() {
    // Find and click the guide button (hamburger menu)
    const guideButton =
      document.querySelector("#guide-button") ||
      document.querySelector('button[aria-label="Guide"]') ||
      document.querySelector('button[aria-label="Menu"]');

    if (guideButton) {
      guideButton.click();
      showNotification("Toggled sidebar");
    } else {
      showNotification("Sidebar toggle button not found!");
    }
  }

  function copyVideoUrlWithTimestamp() {
    // Only works on watch pages
    if (!window.location.pathname.includes("/watch")) {
      showNotification("This only works on video pages!");
      return;
    }

    // Get current video time
    const video = document.querySelector("video");
    if (!video) {
      showNotification("Video element not found!");
      return;
    }

    const currentTime = Math.floor(video.currentTime);
    const currentUrl = window.location.href.split("&t=")[0]; // Remove any existing timestamp
    const urlWithTimestamp = `${currentUrl}&t=${currentTime}s`;

    // Copy to clipboard
    try {
      navigator.clipboard
        .writeText(urlWithTimestamp)
        .then(() => {
          showNotification("Video URL with timestamp copied to clipboard!");
        })
        .catch((err) => {
          console.error("Failed to copy: ", err);
          showNotification("Failed to copy URL");
        });
    } catch (e) {
      // Fallback for browsers that don't support clipboard API
      const textarea = document.createElement("textarea");
      textarea.value = urlWithTimestamp;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand("copy");
      document.body.removeChild(textarea);
      showNotification("Video URL with timestamp copied to clipboard!");
    }
  }

  // Helper function to find the Next button
  function findNextButton() {
    // YouTube's UI changes frequently, so we need multiple selectors
    const selectors = [
      ".ytp-next-button", // Old UI next button
      "a.ytp-next-button", // Another variation
      ".ytd-watch-next-secondary-results-renderer button", // Newer UI
      'button[aria-label="Next"]', // Generic aria-label approach
      'ytd-button-renderer button[aria-label="Next"]', // More specific
      // Add more selectors as YouTube's UI changes
    ];

    for (const selector of selectors) {
      const button = document.querySelector(selector);
      if (button) return button;
    }

    return null;
  }

  function copyShortenedUrl() {
    if (!window.location.pathname.includes("/watch")) {
      showNotification("This only works on video pages!");
      return;
    }

    const urlParams = new URLSearchParams(window.location.search);
    const videoId = urlParams.get("v");
    if (!videoId) {
      showNotification("Video ID not found!");
      return;
    }

    const shortUrl = `https://youtu.be/${videoId}`;
    try {
      navigator.clipboard
        .writeText(shortUrl)
        .then(() => {
          showNotification("Shortened URL copied to clipboard!");
        })
        .catch((err) => {
          console.error("Clipboard write failed:", err);
          fallbackCopyToClipboard(shortUrl);
        });
    } catch (e) {
      fallbackCopyToClipboard(shortUrl);
    }

    function fallbackCopyToClipboard(text) {
      const textarea = document.createElement("textarea");
      textarea.value = text;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand("copy");
      document.body.removeChild(textarea);
      showNotification("Shortened URL copied to clipboard!");
    }
  }

  function navigateToCommunityTab() {
    const base = window.location.origin;
    let channelPath = null;

    if (window.location.pathname.includes("/watch")) {
      const channelLink =
        document.querySelector("#top-row ytd-video-owner-renderer a") ||
        document.querySelector("ytd-channel-name a") ||
        document.querySelector("a.ytd-channel-name");

      if (channelLink) {
        const url = new URL(channelLink.href);
        channelPath = url.pathname;
      }
    } else {
      const match = window.location.pathname.match(
        /^\/(channel|c|user|@[^\/]+)(\/.*)?$/,
      );
      if (match) {
        channelPath = `/${match[1]}`;
      }
    }

    if (channelPath) {
      window.location.href = `${base}${channelPath}/community`;
    } else {
      showNotification("Unable to resolve channel path for community tab.");
    }
  }

  function showHelpModal() {
    // Remove existing modal if present
    const existing = document.getElementById("yt-hotkey-help-modal");
    if (existing) existing.remove();

    // Create overlay
    const overlay = document.createElement("div");
    overlay.id = "yt-hotkey-help-modal";
    overlay.style.position = "fixed";
    overlay.style.top = "0";
    overlay.style.left = "0";
    overlay.style.width = "100vw";
    overlay.style.height = "100vh";
    overlay.style.backgroundColor = "rgba(0, 0, 0, 0.6)";
    overlay.style.zIndex = "10000";
    overlay.style.display = "flex";
    overlay.style.justifyContent = "center";
    overlay.style.alignItems = "center";

    // Modal content
    const modal = document.createElement("div");
    modal.style.backgroundColor = "#fff";
    modal.style.borderRadius = "8px";
    modal.style.padding = "20px 30px";
    modal.style.maxWidth = "600px";
    modal.style.maxHeight = "80vh";
    modal.style.overflowY = "auto";
    modal.style.boxShadow = "0 0 10px rgba(0,0,0,0.5)";
    modal.style.fontFamily = "Arial, sans-serif";

    const title = document.createElement("h2");
    title.textContent = "YouTube Leader Key Hotkeys";
    title.style.marginTop = "0";

    const table = document.createElement("table");
    table.style.width = "100%";
    table.style.borderCollapse = "collapse";

    const rows = Object.entries(HOTKEYS).map(([key, fn]) => {
      const row = document.createElement("tr");

      const keyCell = document.createElement("td");
      keyCell.textContent = `i + ${key}`;
      keyCell.style.fontWeight = "bold";
      keyCell.style.padding = "4px 8px";
      keyCell.style.borderBottom = "1px solid #ddd";
      keyCell.style.whiteSpace = "nowrap";

      const descCell = document.createElement("td");
      descCell.textContent = fn.name
        .replace(/navigateTo|copy|toggle|trigger|show/i, "")
        .replace(/([A-Z])/g, " $1")
        .trim();
      descCell.style.padding = "4px 8px";
      descCell.style.borderBottom = "1px solid #ddd";
      descCell.style.textTransform = "capitalize";

      row.appendChild(keyCell);
      row.appendChild(descCell);
      return row;
    });

    rows.forEach((row) => table.appendChild(row));

    const closeBtn = document.createElement("button");
    closeBtn.textContent = "Close";
    closeBtn.style.marginTop = "16px";
    closeBtn.style.padding = "8px 16px";
    closeBtn.style.border = "none";
    closeBtn.style.background = "#cc0000";
    closeBtn.style.color = "white";
    closeBtn.style.borderRadius = "4px";
    closeBtn.style.cursor = "pointer";
    closeBtn.onclick = () => overlay.remove();

    modal.appendChild(title);
    modal.appendChild(table);
    modal.appendChild(closeBtn);
    overlay.appendChild(modal);
    document.body.appendChild(overlay);
  }

  // Shows a brief notification to the user
  function showNotification(message, duration = 2000) {
    const notification = document.createElement("div");
    notification.textContent = message;
    notification.style.position = "fixed";
    notification.style.top = "20px";
    notification.style.left = "50%";
    notification.style.transform = "translateX(-50%)";
    notification.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
    notification.style.color = "white";
    notification.style.padding = "10px 20px";
    notification.style.borderRadius = "4px";
    notification.style.zIndex = "9999";
    notification.style.fontFamily = "Arial, sans-serif";
    notification.style.textAlign = "center";
    notification.style.maxWidth = "80%";

    document.body.appendChild(notification);

    setTimeout(() => {
      notification.style.opacity = "0";
      notification.style.transition = "opacity 0.5s ease";
      setTimeout(() => document.body.removeChild(notification), 500);
    }, duration);
  }

  // Hotkey mappings with functions - Updated per user preference
  const HOTKEYS = {
    h: navigateToHome, // i -> h for home
    s: navigateToSubscriptions, // i -> s for subscriptions
    e: navigateToHistory, // i -> e for history
    w: navigateToWatchLater, // i -> w for watch later
    l: navigateToLikedVideos, // i -> l for liked videos
    t: navigateToTrending, // i -> t for trending
    L: navigateToLibrary, // i -> L (capital) for library
    y: copyVideoUrlWithTimestamp, // i -> y for copy URL with timestamp
    v: navigateToChannelVideos, // i -> a for channel videos
    q: navigateToChannelPlaylists, // i -> q for channel playlists
    n: navigateToNextVideo, // i -> n for next video
    p: navigateToPreviousVideo, // i -> p for previous video
    Tab: toggleSidebar, // i -> Tab for toggle sidebar
    S: triggerSaveButton, // i -> s (capital) for Save to playlist popup
    Y: copyShortenedUrl, // i -> Y (capital) for shortened URL
    C: navigateToCommunityTab, // i -> C (capital) for community tab
    "?": showHelpModal,
  };

  // State variables
  let leaderPressed = false;
  let leaderTimer = null;

  // Function to handle keydown events
  function handleKeyDown(event) {
    // Check if user is typing in an input field
    if (isInputField(event.target)) {
      return;
    }

    // Get the key that was pressed (preserve case)
    const key = event.key;

    // If leader key is pressed
    if (key.toLowerCase() === LEADER_KEY) {
      // Prevent default action (like mini player)
      event.preventDefault();
      event.stopPropagation();

      // Set the leader state
      leaderPressed = true;

      // Clear any existing timer
      if (leaderTimer) {
        clearTimeout(leaderTimer);
      }

      // Set a timeout to reset the leader state
      leaderTimer = setTimeout(() => {
        leaderPressed = false;
      }, TIMEOUT);

      return;
    }

    // If a key is pressed after the leader key
    if (leaderPressed && HOTKEYS[key]) {
      // Prevent default action
      event.preventDefault();
      event.stopPropagation();

      // Execute the function associated with the key
      HOTKEYS[key]();

      // Reset leader state
      leaderPressed = false;
      clearTimeout(leaderTimer);
    }
  }

  // Helper function to check if the active element is an input field
  function isInputField(element) {
    const tagName = element.tagName.toLowerCase();
    const type = element.type ? element.type.toLowerCase() : "";

    return (
      (tagName === "input" &&
        (type === "text" ||
          type === "password" ||
          type === "email" ||
          type === "number" ||
          type === "search" ||
          type === "tel" ||
          type === "url")) ||
      tagName === "textarea" ||
      element.isContentEditable
    );
  }

  // Add event listener for keydown
  document.addEventListener("keydown", handleKeyDown, true);

  // Show initial notification about the leader key on first load
  const firstRun = GM_getValue("firstRun", true);
  if (firstRun) {
    setTimeout(() => {
      showNotification(
        `YouTube Leader Key Navigation activated! Leader key is '${LEADER_KEY}'`,
        5000,
      );
      GM_setValue("firstRun", false);
    }, 2000);
  }

  // Logging for debugging
  console.log(
    `YouTube Leader Key Navigation loaded with leader key '${LEADER_KEY}'`,
  );
})();