Merge pull request #4 from Leonetienne/develop

Readme chrome extension

goodies/chrome-extension/.gitignore

@@ -0,0 +1,3 @@
+*.zip
+*.rar
+*.6zip

goodies/chrome-extension/background.js

@@ -0,0 +1,58 @@
+function QueueDownloadByInfo(info, mode, quality) {
+
+    // Select either the current page location, or the target of a href (if the user clicked on one)
+    QueueDownload(
+        urlToDownload = typeof(info.linkUrl) != 'undefined' ? info.linkUrl : info.pageUrl,
+        mode,
+        quality
+    ); // <- Defined in queueDwonload.js
+
+    return;
+}
+
+// Create main context menu entry
+chrome.contextMenus.create({
+    title: "Tubio",
+    contexts:["all"],
+    id: "tubio-parent-contextmenu-entry",
+});
+
+// Automate creating a lot of entries
+function CreateContextMenuOption(optionName, callback) {
+    chrome.contextMenus.create({
+        title: optionName,
+        contexts: ["all"],
+        type: "normal",
+        parentId: "tubio-parent-contextmenu-entry",
+        onclick: callback
+    });
+}
+
+// Create all download methods
+CreateContextMenuOption("Download Video - Best", function(info) {
+    QueueDownloadByInfo(info, "video", "best");
+});
+CreateContextMenuOption("Download Video - 1440p", function(info) {
+    QueueDownloadByInfo(info, "video", "1440p");
+});
+CreateContextMenuOption("Download Video - 1080p", function(info) {
+    QueueDownloadByInfo(info, "video", "1080p");
+});
+CreateContextMenuOption("Download Video - 720p", function(info) {
+    QueueDownloadByInfo(info, "video", "720p");
+});
+CreateContextMenuOption("Download Video - 480p", function(info) {
+    QueueDownloadByInfo(info, "video", "480p");
+});
+CreateContextMenuOption("Download Video - 360p", function(info) {
+    QueueDownloadByInfo(info, "video", "360p");
+});
+CreateContextMenuOption("Download Video - 240p", function(info) {
+    QueueDownloadByInfo(info, "video", "240p");
+});
+CreateContextMenuOption("Download Video - 144p", function(info) {
+    QueueDownloadByInfo(info, "video", "144p");
+});
+CreateContextMenuOption("Download Audio", function(info) {
+    QueueDownloadByInfo(info, "audio", "best"); // <- Quality is ignored when downloading audio only 
+});

goodies/chrome-extension/manifest.json

@@ -0,0 +1,33 @@
+{
+  "manifest_version": 2,
+  "name": "Tubio - Companion Extension",
+  "version": "1.0",
+
+  "icons": {
+      "16": "icon/16.png",
+      "48": "icon/48.png",
+    "128": "icon/128.png"
+  },
+
+  "browser_action": {
+    "default_popup": "popup/index.html"
+  },
+
+  "permissions": [
+    "background",
+    "contextMenus",
+    "webRequest",
+    "windows",
+    "tabs",
+    "storage",
+    "*://*/*"
+  ],
+
+  "background": {
+    "scripts": [
+      "lib/axios.js",
+      "queueDownload.js",
+      "background.js"
+    ]
+  }
+}

goodies/chrome-extension/popup/css/background.css

@@ -0,0 +1,37 @@
+body {
+    width: 300px;
+    height: 310px;
+    margin: 0 !important;
+}
+body .bgmask {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    z-index: -8;
+    background-image: linear-gradient(#0000 50%, #04254e);
+}
+
+body .bggatter {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: -9;
+    -webkit-mask-image: url("../image/grid.png");
+    background-color: #5954a4;
+}
+
+body .bggatter__wrapper {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    overflow: hidden;
+    z-index: -9;
+}
+
+body .bgdrop {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    z-index: -10;
+    background-color: #04254e;
+}

goodies/chrome-extension/popup/css/button.css

@@ -0,0 +1,42 @@
+button {
+    padding: 0.5em 2em;
+    color: #04254e;
+    font-size: 14pt;
+    border-radius: 5px;
+    cursor: pointer;
+    transition:
+        color 0.15s ease,
+        transform 0.15s ease;
+}
+
+button.small {
+    padding: 0.15em 1em;
+}
+
+button:hover {
+    transform: scale(1.075);
+    color: #fff;
+    background-color: #5954a4;
+}
+
+button.special:hover {
+    /*background-color: #5954a4;*/
+    color: #fff;
+    animation: color-cycle;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+}
+
+button.lock {
+    visibility: hidden;
+}
+
+@keyframes color-cycle {
+    0%      {background-color: #ff6666; transform: scale(1.075);}
+    16.67%  {background-color: #c966ff;}
+    33.33%  {background-color: #6678ff;}
+    50%     {background-color: #66edff; transform: scale(1.15);}
+    66.66%  {background-color: #66ff70;}
+    83.33%  {background-color: #fcff66;}
+    100%    {background-color: #ff6666; transform: scale(1.075);}
+}

goodies/chrome-extension/popup/css/font/include.css

@@ -0,0 +1 @@
+@import "zilla-slab.css"

goodies/chrome-extension/popup/css/font/zilla-slab.css

@@ -0,0 +1,49 @@
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-Regular.ttf") format('truetype');
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-Italic.ttf") format('truetype');
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-Bold.ttf") format('truetype');
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-BoldItalic.ttf") format('truetype');
+    font-weight: bold;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-Light.ttf") format('truetype');
+    font-weight: lighter;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-Light.ttf") format('truetype');
+    font-weight: lighter;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-Medium.ttf") format('truetype');
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("../../font/zilla-slab/ZillaSlab-Medium.ttf") format('truetype');
+    font-weight: 500;
+    font-style: italic;
+}

goodies/chrome-extension/popup/css/form.css

@@ -0,0 +1,14 @@
+label {
+    margin-bottom: 0.5em;
+}
+
+input {
+    border-radius: 5px;
+    height: 25pt;
+}
+
+input,
+textarea {
+    color: #04254e;
+    font-size: 14pt;
+}

goodies/chrome-extension/popup/css/modular.css

@@ -0,0 +1,23 @@
+.text-center {
+    text-align: center;
+}
+
+.pt-1 {
+    padding-top: 1em;
+}
+
+.flex {
+    display: flex;
+}
+
+.flex-col {
+    flex-direction: column;
+}
+
+.justify-content-center {
+    justify-content: center;
+}
+
+.align-items-center {
+    align-items: center;
+}

goodies/chrome-extension/popup/css/typography.css

@@ -0,0 +1,15 @@
+* {
+    font-family: 'ZillaSlab' !important;
+    color: #dadada;
+}
+
+p,
+a,
+label {
+    font-size: 14pt;
+}
+
+h1,
+h2 {
+    line-height: 1em;
+}

goodies/chrome-extension/popup/index.html

@@ -0,0 +1,44 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="css/background.css">
+        <link rel="stylesheet" href="css/typography.css">
+        <link rel="stylesheet" href="css/modular.css">
+        <link rel="stylesheet" href="css/form.css">
+        <link rel="stylesheet" href="css/button.css">
+        <link rel="stylesheet" href="css/font/include.css">
+        <title>Tubio - Companion Extension</title>
+    </head>
+
+    <body>
+        <div class="bgdrop"></div>
+        <div class="bggatter__wrapper">
+            <div class="bggatter"></div>
+        </div>
+        <div class="bgmask"></div>
+
+
+        <h1 class="text-center pt-1" style="margin-bottom: 0;">Tubio</h1>
+        <h2 class="text-center" style="margin-top: 0; padding-top: 0;">Companion Extension</h2>
+
+        <div class="flex justify-content-center">
+            <div class="flex flex-col align-items-center">
+                
+                <!-- Download this - button -->
+                <button class="special" id="button-download" title="Will download this pages URL as a video of highest quality.">
+                        Download!
+                </button>
+                
+                <!-- Tubio config form -->
+                <label for="tubio-address" style="margin-top: 3em;">Where can i reach tubio?</label>
+                <input type="text" id="tubio-address" class="text-center" />
+                <button class="small" id="button-save-settings" style="margin-top: 0.5em;">Save settings</button>
+                
+            </div>
+        </div>
+        
+        <script src="../lib/jquery-3.5.1.min.js"></script>
+        <script src="../lib/axios.js"></script>
+        <script src="../queueDownload.js"></script>
+        <script src="js/script.js"></script>
+    </body>
+</html>

goodies/chrome-extension/popup/js/script.js

@@ -0,0 +1,32 @@
+$("#button-download").click(function() {
+
+    $("#button-download").addClass("lock");
+
+    // Query active tab in active window...
+    chrome.windows.getCurrent(function(w) {
+        chrome.tabs.query({
+            active: true,
+            windowId: w.id
+        }, function(foundTabs) {
+            if (foundTabs.length > 0) {
+                QueueDownload(foundTabs[0].url, "video", "best", function(){
+                    window.close();
+                });
+            } else {
+                console.log("Wtf, this should not happen. You don't have ANY open tab?...");
+            }
+        });
+    });
+
+    return;
+});
+
+chrome.storage.local.get(['tubio_address'], function(result) {
+    $("#tubio-address").val(result.tubio_address);
+});
+
+$("#button-save-settings").click(function() {
+    chrome.storage.local.set({
+        tubio_address: $("#tubio-address").val()
+    });
+});

goodies/chrome-extension/queueDownload.js

@@ -0,0 +1,38 @@
+function QueueDownload(url, mode, quality, callback) {
+
+    console.log("Queueing '" + url + "'...");
+    
+    // Fetch tubio address
+    chrome.storage.local.get(['tubio_address'], function(result) {
+        
+        if ((typeof(result.tubio_address) == 'undefined') ||
+            (result.tubio_address.length == 0)) {
+                alert("Please first set an address to reach Tubio at in the extensions settings! (Click on the extensions icon in the toolbar).");
+                return;
+        } else {
+
+            tubioUrl = result.tubio_address;
+            if (tubioUrl[tubioUrl.length-1] != '/') { // Has the user not appended a /?
+                tubioUrl += '/';
+            }
+
+            axios.post(tubioUrl + "api", {
+                request: "queue_download",
+                video_url: url,
+                mode: mode,
+                quality: quality
+            }).then(function(response){
+                    console.log("Queued successfully...");
+                    if (typeof(callback) != 'undefined') callback(true, response);
+                    
+                }).catch(function(response){
+                    console.log("Something went wrong...");
+                    console.log(response);
+                    if (typeof(callback) != 'undefined') callback(false, response);
+            });
+        }
+    });
+
+
+      return;
+}

goodies/chrome-extension/readme.md

@@ -0,0 +1,5 @@
+# Chrome Extension for Tubio
+Adds a context-menu and a popup to download videos instantly.  
+It does not open tubio for you. It just downloads the videos.  
+
+For now this is not on the chrome store, but you can easily install unlisted extensions from source as shown [here](https://developer.chrome.com/docs/extensions/mv2/faq/#:~:text=Click%20the%20Chrome%20menu%20icon,a%20packaged%20extension%2C%20and%20more.).