☰

Udemy Transcript Copier (Floating Button)

Adds a floating button to copy the Udemy transcript when the panel is open.

// ==UserScript==
// @name         Udemy Transcript Copier (Floating Button)
// @namespace    http://tampermonkey.net/
// @version      3.3
// @description  Adds a floating button to copy the Udemy transcript when the panel is open.
// @author       Gemini
// @match        https://www.udemy.com/course/*
// @grant        GM_addStyle
// @grant        GM_setClipboard
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
    // STYLING FOR THE FLOATING BUTTON AND MODAL
    // The button is positioned fixed to the viewport. A high z-index ensures
    // it floats above other content on the page.
    // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
    GM_addStyle(`
        .floating-copy-button {
            position: fixed;
            bottom: 25px;
            right: 25px;
            z-index: 10000; /* High z-index to stay on top */
            background-color: #a435f0; /* Udemy's primary purple */
            color: #fff;
            border: none;
            padding: 12px 18px;
            font-weight: bold;
            font-family: "Udemy Sans", "SF Pro Text", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            font-size: 16px;
            border-radius: 50px; /* Pill shape */
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
            transition: all 0.2s ease-in-out;
        }

        .floating-copy-button:hover {
            background-color: #8710d8; /* Darker purple on hover */
            transform: translateY(-2px); /* Slight lift effect */
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
        }

        .floating-copy-button.copied {
            background-color: #2e8a5b; /* Green for success feedback */
            transform: translateY(0);
        }
    `);

    // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
    // BUTTON CREATION LOGIC
    // This function creates the button and defines its copy behavior.
    // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
    function createFloatingButton() {
        // Avoid creating a duplicate button.
        if (document.getElementById('floating-transcript-copier')) {
            return;
        }

        const copyButton = document.createElement('button');
        copyButton.id = 'floating-transcript-copier';
        copyButton.className = 'floating-copy-button';
        copyButton.innerText = 'Copy Transcript';

        copyButton.addEventListener('click', () => {
            // The main transcript panel, which is a stable selector.
            const transcriptPanel = document.querySelector('div[data-purpose="transcript-panel"]');
            if (!transcriptPanel) {
                console.error("Transcript panel not found. This should not happen if the button is visible.");
                alert("Error: Could not find the transcript panel. The script may need an update.");
                return;
            }

            // UPDATED SELECTOR: Based on the provided HTML, the transcript cues are now
            // `p` tags with a `data-purpose="transcript-cue"`. This is a more stable selector
            // than the dynamically generated class names.
            const cueElements = transcriptPanel.querySelectorAll('p[data-purpose="transcript-cue"]');
            if (cueElements.length === 0) {
                console.error("No transcript cues found within the panel. The selector for the text lines might need to be changed.");
                alert("Error: Could not find the transcript text lines. The script may need an update.");
                return;
            }

            // Extract text from each cue and join with double newlines for readability.
            const fullTranscript = Array.from(cueElements)
                .map(cue => cue.innerText.trim())
                .join('\n\n');

            // Copy the formatted text to the clipboard.
            try {
                navigator.clipboard.writeText(fullTranscript).then(() => {
                    // Provide visual feedback to the user.
                    copyButton.innerText = 'Copied!';
                    copyButton.classList.add('copied');
                    setTimeout(() => {
                        copyButton.innerText = 'Copy Transcript';
                        copyButton.classList.remove('copied');
                    }, 2000); // Reset after 2 seconds
                }).catch(err => {
                    console.error('Failed to copy using navigator.clipboard:', err);
                    GM_setClipboard(fullTranscript, 'text'); // Fallback
                });
            } catch (err) {
                console.error('Error with clipboard API, using fallback:', err);
                GM_setClipboard(fullTranscript, 'text'); // Fallback
            }
        });

        // Add the button to the main document body so it can float freely.
        document.body.appendChild(copyButton);
    }

    // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
    // OBSERVER TO MANAGE BUTTON VISIBILITY
    // We use a MutationObserver to watch for the transcript panel appearing
    // or disappearing from the DOM. This is the most efficient way to manage
    // the button's lifecycle.
    // --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
    const observer = new MutationObserver(() => {
        // The selector for the overall panel seems to be more stable.
        const transcriptPanel = document.querySelector('div[data-purpose="transcript-panel"]');
        const floatingButton = document.getElementById('floating-transcript-copier');

        // If the transcript panel exists AND our button doesn't, create the button.
        if (transcriptPanel && !floatingButton) {
            createFloatingButton();
        }
        // If the transcript panel is gone AND our button still exists, remove it.
        else if (!transcriptPanel && floatingButton) {
            floatingButton.remove();
        }
    });

    // Start observing the entire document for changes. This allows us to react
    // when the user opens or closes the transcript tab.
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

})();