Add small "Copy" button next to the new "Invite friends" button

Ideas
1

It might be a nitpick, but considering how often I have to copy the room link, it would be nice to have the old small button right next to the new one for quick access. If you think that would screw up the UI layout, you could set the href attribute of the share button to the room link and catch the click event so that it doesn’t actually open it. Then the user can simply right click the button to copy the target URL.

2

In the meantime, here’s a Userscript to add a simple copy button next to the new one:

image

// ==UserScript==
// @name        Watch2Gether - Old-style Share Button (unofficial)
// @match       https://w2g.tv/*
// @grant       none
// @version     1.0
// @author      aequabit
// @description Adds a button to directly copy the room link next to the new "Invite friends" button
// ==/UserScript==

(async () => {
    async function wait_for(conditional, interval = 20) {
        return new Promise(resolve => {
            const _wait_for_interval = setInterval(() => {
                if (conditional() === true) {
                    clearInterval(_wait_for_interval);
                    resolve();
                }
            }, interval);
        });
    }

    // Wait for invite URL input to exist
    await wait_for(() => document.getElementById("main-invite-url") !== null);

    const topbarInvite = document.getElementById("w2g-topbar-invite");
    const inviteButton = document.getElementById("w2g-top-invitebutton");

    // Create button and callback
    const copyButton = document.createElement("div");
    copyButton.className = "!ml-0 primary py-0.5 text-base w2g-button";
    copyButton.style = "display: inline-flex;height: 26.5px;width: 44px;";
    copyButton.onclick = function(e) {
        const inviteUrlInput = document.getElementById("main-invite-url");
        navigator.clipboard.writeText(inviteUrlInput.value);
    };

    // Create copy button SVG
    const copyIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    copyIcon.classList.add("svg-inline--fa");
    copyIcon.setAttribute("viewBox", "0 0 640 512")
    const copyIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
    copyIconPath.setAttribute("d", "M288 448H64V224h64V160H64c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H288c35.3 0 64-28.7 64-64V384H288v64zm-64-96H448c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H224c-35.3 0-64 28.7-64 64V288c0 35.3 28.7 64 64 64z");
    copyIconPath.setAttribute("fill", "currentColor");
    copyIconPath.style = "color: #fff !important;";
    copyIcon.appendChild(document.createComment("! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc."))
    copyIcon.appendChild(copyIconPath);

    copyButton.append(copyIcon);
    topbarInvite.insertBefore(copyButton, inviteButton.nextSibling)
})();
3

Thanks for your feedback. The new button was just a test that actually failed. The old copy button will be back soon. I will therefore close this topic.