header update, prod auto header, mutation observer instead of interval

CoubDownload-Bridge-Userscript/.babelrc

@@ -0,0 +1,6 @@
+{
+    "plugins": [
+      "@babel/plugin-syntax-dynamic-import",
+      "@babel/plugin-proposal-optional-chaining"
+    ]
+  }

CoubDownload-Bridge-Userscript/.gitignore

@@ -0,0 +1,5 @@
+dist/
+node_modules/
+package-lock.json
+.vscode/
+

CoubDownload-Bridge-Userscript/package.json

@@ -1,8 +1,27 @@
 {
-  "name": "coubdownload-bridge-sserscript",
+  "name": "coubdownload-bridge-userscript",
   "version": "1.0.0",
   "main": "coub-bridge.user.js",
   "repository": "https://github.com/Venipa/coubdl-bridge",
   "author": "Venipa",
-  "license": "MIT"
+  "license": "MIT",
+  "scripts": {
+    "dev": "npm run development",
+    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "watch": "npm run development -- --watch",
+    "watch-poll": "npm run watch -- --watch-poll",
+    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "prod": "npm run production",
+    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+  },
+  "dependencies": {
+    "laravel-mix": "^5.0.0",
+    "webpack": "^4.41.2"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.7.4",
+    "cross-env": "^6.0.3",
+    "vue-template-compiler": "^2.6.10"
+  }
 }

CoubDownload-Bridge-Userscript/src/app.js

@@ -0,0 +1,141 @@
+(function() {
+  // 'use strict';
+  const downloadButton = function() {
+    const btn = document.createElement('a');
+    btn.innerText = 'Download';
+    btn.style.padding = '8px 12px';
+    btn.style.color = '#fff';
+    btn.style.background = '#000';
+    btn.style.lineHeight = 1;
+    btn.style.fontSize = '0.875rem';
+    btn.style.alignSelf = 'center';
+    btn.style.borderRadius = '4px';
+    btn.style.marginRight = '8px';
+    return btn;
+  };
+  const groupButtons = function(...innerButtons) {
+    const seperator = document.createElement('div');
+    seperator.style.width = '2px';
+    seperator.style.backgroundColor = 'rgba(255,255,255,.25)';
+    seperator.style.borderRadius = '18px';
+    seperator.style.height = '18px';
+    const btnGroup = document.createElement('div');
+    btnGroup.style.color = '#fff';
+    btnGroup.style.background = '#000';
+    btnGroup.style.lineHeight = 1;
+    btnGroup.style.fontSize = '0.875rem';
+    btnGroup.style.alignSelf = 'center';
+    btnGroup.style.borderRadius = '4px';
+    btnGroup.style.flexDirection = 'row';
+    btnGroup.style.overflow = 'hidden';
+    if (innerButtons.length > 0) {
+      innerButtons
+        .map(function(x) {
+          x.style.borderRadius = '0';
+          x.style.margin = '0';
+          x.style.flexDirection = 'row';
+          return x;
+        })
+        .forEach(function(x, i) {
+          if ((i + 1) % 2 === 0) {
+            btnGroup.appendChild(seperator);
+          }
+          btnGroup.appendChild(x);
+        });
+    }
+    return btnGroup;
+  };
+  var log = {
+    debug: function(msg, ...params) {
+      console.log('[coub-bridge|debug] ', msg, params);
+    },
+    tag: function(tag, msg, ...params) {
+      console.log('[coub-bridge|' + tag + '] ', msg, params);
+    }
+  };
+  log.debug('boot');
+  const buttonId = 'coubdl-download';
+  const buttonLoopedId = 'coubdl-download-looped';
+  const buttonAudioId = 'coubdl-audio-download';
+  const buttonGifId = 'coubdl-gif-download';
+  const coubsSelector =
+    '#coubchat .coub[coub-block]:not(.timeline-banner), .coubs-list .coub[coub-block]:not(.timeline-banner), .coub-page > .coub-block-col .coub[coub-block]';
+  const coubsRelatedSelector =
+    '.suggests-block-col .suggest__list > .suggest__item';
+    /**
+     * 
+     * @param {HTMLElement[]} parentNodes 
+     */
+  var checkCoubs = function(parentNodes) {
+    log.debug(parentNodes);
+    parentNodes.filter(x => x.querySelectorAll).forEach(x => {
+      var controls = x.querySelector('.description__controls');
+      if (controls && controls.querySelectorAll) {
+        if (controls.querySelectorAll('#' + buttonId).length === 0) {
+          let coubId = x.getAttribute('data-permalink');
+          let downloadBtn = downloadButton();
+          downloadBtn.href = 'coubdl-bridge://' + coubId;
+          downloadBtn.innerText = 'Download';
+          let downloadBtnFull = downloadButton();
+          downloadBtnFull.href = 'coubdl-bridge://' + coubId + '/full';
+          downloadBtnFull.innerText = 'Looped';
+          let grp = groupButtons(downloadBtn, downloadBtnFull);
+          grp.id = buttonId;
+          controls.prepend(grp);
+        }
+        if (controls.querySelectorAll('#' + buttonAudioId).length === 0) {
+          let coubId = x.getAttribute('data-permalink');
+          let downloadBtn = downloadButton();
+          downloadBtn.id = buttonAudioId;
+          downloadBtn.innerText = 'Audio';
+          downloadBtn.href = 'coubdl-bridge://' + coubId + '/audio';
+          controls.prepend(downloadBtn);
+        }
+        if (controls.querySelectorAll('#' + buttonGifId).length === 0) {
+          let coubId = x.getAttribute('data-permalink');
+          let downloadBtn = downloadButton();
+          downloadBtn.id = buttonGifId;
+          downloadBtn.innerText = 'GIF';
+          downloadBtn.href = 'coubdl-bridge://' + coubId + '/gif';
+          controls.prepend(downloadBtn);
+        }
+      }
+    });
+  };
+  const mut = new MutationObserver(mutations => {
+    /**
+     * @type {HTMLElement[]}
+     */
+    let addednodes;
+    if ((addednodes = mutations.filter(x => x.addedNodes && x.addedNodes.length > 0).map(x => x.addedNodes).reduce((l,r) => ([...l, ...r]), [])).length > 0 && addednodes) {
+      console.log(addednodes);
+      const validNodes = addednodes.filter(x => ['coub', 'coub-page', 'viewer__video', 'page', 'coub--normal-card'].filter(y => x.classList?.contains(y)));
+      if (validNodes.length > 0) {
+        checkCoubs(validNodes);
+      }
+    }
+  });
+  // document
+  //   .querySelectorAll('#coubchat, .coubs-list, .coub-page .coub-block-col')
+  //   .forEach(x => {
+  //   });
+
+    const bodyObserver = new MutationObserver((m) => {
+      mut.disconnect();
+      let coubBox = Array.from(document.querySelectorAll('.coub.coub--page-card,.coub.coub--timeline,.coubs-list__inner .page'));
+      log.debug(['start el', coubBox]);
+      checkCoubs(coubBox);
+      m.filter(x => x.addedNodes?.length).map(x => x.addedNodes).reduce((l,r) => [...l, r]).forEach(el => {
+        mut.observe(el);
+      });
+    });
+    bodyObserver.observe(document.documentElement, {
+      attributes: true,
+      characterData: true,
+      childList: true,
+      subtree: true
+    });
+    let coubBox = Array.from(document.querySelectorAll('.coub.coub--page-card,.coub.coub--timeline,.coubs-list__inner .page'));
+    log.debug(['start el', coubBox]);
+    checkCoubs(coubBox);
+})();

CoubDownload-Bridge-Userscript/src/banner.js

@@ -0,0 +1,14 @@
+// ==UserScript==
+// @name         Coub-Bridge
+// @namespace    https://venipa.net
+// @version      0.1.7
+// @description  try to take over the world!
+// @author       Venipa
+// @match        https://*.coub.com/*
+// @match        https://coub.com/*
+// @grant        none
+// @license GPL-3.0-or-later; http://www.gnu.org/licenses/gpl-3.0.txt
+// ==/UserScript==
+// ==OpenUserJS==
+// @author Venipa
+// ==/OpenUserJS==