Greasy Fork

Updated style and position of buttons if you like to push it.

// ==UserScript==
// @name ⚙️Coub Downloading
// @namespace Wizzergod
// @version 1.0.3
// @description Add 3 Buttons to download Video, audio, loop. When you click a button, you can open it in a new tab by clicking the mouse button or right-clicking and selecting "open in new tab" to preview.
// @icon https://www.google.com/s2/favicons?sz=64&domain=coub.com
// @author Wizzergod
// @license MIT
// @match https://*.coub.com/*
// @match https://coub.com/
// @grant GM_download
// @downloadURL https://update.greasyfork.org/scripts/491578/%E2%9A%99%EF%B8%8FCoub%20Downloading.user.js
// @updateURL https://update.greasyfork.org/scripts/491578/%E2%9A%99%EF%B8%8FCoub%20Downloading.meta.js
// ==/UserScript==

(function () {
  "use strict";

  function addButton(container, text, url) {
    const button = document.createElement("a");
    button.innerText = text;
    button.classList.add("coubdl-button");
    button.href = url;
    button.addEventListener("click", function (event) {
      event.preventDefault();
      downloadFile(url, getFileNameFromUrl(url));
    });
    container.appendChild(button);
  }

  function downloadFile(url, fileName) {
    GM_download({
      url: url,
      name: fileName,
    });
  }

  function getFileNameFromUrl(url) {
    const matches = url.match(/\/([^\/?#]+)[^\/]*$/);
    return matches && matches[1];
  }

  function addControls() {
    const coubContainers = document.querySelectorAll(".coub");

    coubContainers.forEach((container) => {
      const permalink = container.dataset.permalink;
      if (!permalink) {
        return;
      }

      const descriptionControls = container.querySelector(".coub__description");
      if (!descriptionControls) {
        return;
      }

      const existingControls = container.querySelector(".coubdl-button-group");
      if (existingControls) {
        return;
      }

      const controlsContainer = document.createElement("div");
      controlsContainer.classList.add("coubdl-button-group");

      const dataContainer = container.querySelector(
        '.data script[type="text/json"]'
      );
      if (dataContainer) {
        const data = JSON.parse(dataContainer.textContent);
        if (data && data.file_versions && data.file_versions.html5) {
          const html5Data = data.file_versions.html5;

          if (
            html5Data.video &&
            html5Data.video.high &&
            html5Data.video.high.url
          ) {
            const videoUrl = html5Data.video.high.url;
            addButton(controlsContainer, "Video", videoUrl);
          }

          if (
            html5Data.audio &&
            html5Data.audio.high &&
            html5Data.audio.high.url
          ) {
            const audioUrl = html5Data.audio.high.url;
            addButton(controlsContainer, "Audio", audioUrl);
          }
        }

        if (
          data &&
          data.file_versions &&
          data.file_versions.share &&
          data.file_versions.share.default
        ) {
          const loopedUrl = data.file_versions.share.default;
          addButton(controlsContainer, "Looped", loopedUrl);
        }
      }

      descriptionControls.prepend(controlsContainer);
    });
  }

  function observeChanges() {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        Array.from(mutation.addedNodes).forEach((node) => {
          if (node.nodeType === Node.ELEMENT_NODE) {
            addControls();
          }
        });
      });
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  }

  function init() {
    addControls();
    observeChanges();
  }

  const style = document.createElement("style");
  style.textContent = `
            .coubdl-button-group {
                display: flex;
                flex-direction: row; 
                justify-content: center;
                gap: 10px;
                margin-top: 10px;
                width: 100%; 
            }

            .coubdl-button {
                padding: 8px 16px;
                color: #fff;
                background-color: #007bff;
                border: none;
                border-radius: 4px;
                font-size: 14px;
                text-decoration: none;
                cursor: pointer;
                transition: background-color 0.3s ease;
                display: inline-block; 
            }

            .coubdl-button:hover {
                background-color: #0056b3;
            }
    `;
  document.head.appendChild(style);

  init();
})();