Update to account for new placement of transcript button

Author: brentjo

README.md

@@ -1,13 +1,9 @@
 # yt-sub-search-keybind
 
-A Chrome extension for YouTube to have cmd/ctrl + F automatically open the subtitle pane. This way, your browser page search hops right into searching for a term within the subtitles of the video.
+A Chrome extension for YouTube to have cmd/ctrl + F automatically open the transcript pane. This way, your browser page search hops right into searching for a term within the subtitles of the video.
 
 If you often find yourself manually opening up the subtitle pane so that you can cmd+F to jump to a spot in the video discussing a specific term, you might find this useful.
 
-### Example
-
-<img height=400 src="https://user-images.githubusercontent.com/6415223/188805937-f7550a8a-4d4d-4b8c-ada0-6fb34847864c.gif">
-
 ### Installation
 
 1. Clone this repository: `git clone https://github.com/brentjo/yt-sub-search-keybind.git`

youtube-cmd-f.js

@@ -16,49 +16,16 @@ document.body.addEventListener("keydown", function (event) {
         if (transcriptPaneNodes.length != 1) return;
         if (transcriptPaneNodes[0].getAttribute("visibility") != "ENGAGEMENT_PANEL_VISIBILITY_HIDDEN") return;
 
-        // Find the the elements to click that will open the transcript ("..." button -> "Show transcript")
-        const primaryVideoInfoNode = document.querySelectorAll("ytd-menu-renderer.ytd-video-primary-info-renderer")
-        if (primaryVideoInfoNode.length != 1) {
-            console.error(UNEXPECTED_PAGE_STRUCTURE_ERR_MSG)
+        // Find the 'Show transcript' button within the ytd-button-renderer element
+        const outerYtdButtonRenderer = document.querySelector('ytd-button-renderer.ytd-video-description-transcript-section-renderer')
+        if (!outerYtdButtonRenderer) {
+            console.error(UNEXPECTED_PAGE_STRUCTURE_ERR_MSG);
             return;
         }
 
-        const moreActionsNode = primaryVideoInfoNode[0].querySelectorAll("yt-icon-button.dropdown-trigger.ytd-menu-renderer")[0]
-        if (!moreActionsNode || moreActionsNode.children.length != 2 || (moreActionsNode.children > 0 && moreActionsNode.children[0].getAttribute("aria-label") != "More actions")) {
-            console.error(UNEXPECTED_PAGE_STRUCTURE_ERR_MSG)
-            return;
+        const showTranscriptButton = outerYtdButtonRenderer.querySelector('button:only-child')
+        if(showTranscriptButton && showTranscriptButton.innerText == "Show transcript"){
+            showTranscriptButton.click();
         }
-
-        moreActionsNode.click();
-
-        // Wait until the "Show transcript" button is ready to click
-        const msPollDuration = 20;
-        let msSpentWaiting = 0;
-        const checkButtonExistsInterval = setInterval(function () {
-            msSpentWaiting += msPollDuration;
-
-            if (msSpentWaiting > 1000) {
-                clearInterval(checkButtonExistsInterval);
-                return;
-            }
-
-            if (document.querySelectorAll("ytd-menu-service-item-renderer").length > 0) {
-                clearInterval(checkButtonExistsInterval);
-                const moreActionNodes = document.querySelectorAll("ytd-menu-service-item-renderer");
-
-                if (moreActionNodes.length == 0) {
-                    console.error(UNEXPECTED_PAGE_STRUCTURE_ERR_MSG);
-                    return;
-                }
-
-                for (const actionNode of moreActionNodes) {
-                    if (actionNode.innerText == "Show transcript") {
-                        actionNode.click();
-                        break;
-                    }
-                }
-
-            }
-        }, msPollDuration);
     }
 });