Merge branch 'electron-builder' into development

package.json

@@ -5,26 +5,26 @@
     "description": "An Open Source YouTube app for privacy.",
     "main": "src/js/init.js",
     "scripts": {
-        "start": "electron-forge start",
+        "pack": "build --dir",
-        "package": "electron-forge package",
+        "start": "electron .",
-        "make": "electron-forge make",
+        "make:all": "npm run make:linux:x64 && npm run make:linux:arm && npm run make:mac:zip && npm run make:win",
-        "publish": "electron-forge publish",
+        "make:win": "build --win",
-        "make:all": "npm run make:mac && npm run make:linux:x86 && npm run make:linux:arm && npm run make:win",
+        "make:win:exe": "build --win nsis",
-        "make:mac": "electron-forge make --platform=darwin",
+        "make:win:zip": "build --win zip",
-        "make:win": "electron-forge make --platform=win32",
+        "make:mac:zip": "build --mac zip",
-        "make:win:zip": "electron-forge make --platform=win32 --targets=zip",
+        "make:mac:dmg": "build --mac dmg",
-        "make:linux:x86": "electron-forge make --platform=linux --arch x64",
+        "make:linux:x64": "build --linux --x64",
-        "make:linux:x86:zip": "electron-forge make --platform=linux --targets=zip --arch x64",
+        "make:linux:x64:deb": "build --linux deb --x64",
-        "make:linux:x86:deb": "electron-forge make --platform=linux --targets=deb --arch x64",
+        "make:linux:x64:rpm": "build --linux rpm --x64",
-        "make:linux:x86:rpm": "electron-forge make --platform=linux --targets=rpm --arch x64",
+        "make:linux:x64:appimage": "build --linux appimage --x64",
-        "make:linux:x86:snap": "electron-forge package && electron-installer-snap --src=out/FreeTube-linux-x64 --arch x64",
+        "make:linux:x64:zip": "build --linux zip --x64",
-        "make:linux:x86:flatpak": "electron-installer-flatpak --src out/FreeTube-linux-x64/ --dest out/make --arch x64 --id org.freetube.FreeTube --productName FreeTube  --runtime org.freedesktop.Platform//1.6 --runtimeVersion 1.6 --sdk org.freedesktop.Sdk//1.6 --base io.atom.electron.BaseApp --baseVersion stable",
+        "make:linux:x64:tar": "build --linux tar.xz --x64",
-        "make:linux:x86:appimage": "electron-forge make --platform=linux --targets=electron-forge-maker-appimage --arch x64",
+        "make:linux:arm": "build --linux --arm64",
-        "make:linux:arm": "electron-forge make --platform=linux --arch arm64",
+        "make:linux:arm:deb": "build --linux deb --arm64",
-        "make:linux:arm:zip": "electron-forge make --platform=linux --targets=zip --arch arm64",
+        "make:linux:arm:rpm": "build --linux rpm --arm64",
-        "make:linux:arm:deb": "electron-forge make --platform=linux --targets=deb --arch arm64",
+        "make:linux:arm:zip": "build --linux zip --arm64",
-        "make:linux:arm:rpm": "electron-forge make --platform=linux --targets=rpm --arch arm64",
+        "make:linux:arm:tar.xz": "build --linux tar.xz --arm64",
-        "make:linux:arm:appimage": "electron-forge make --platform=linux --targets=electron-forge-maker-appimage --arch arm64"
+        "dist": "build"
     },
     "keywords": [],
     "author": {
@@ -33,67 +33,64 @@
         "url": "https://github.com/FreeTubeApp/FreeTube"
     },
     "license": "GPL-3.0-or-later",
-    "config": {
+    "build": {
-        "forge": {
+        "appId": "io.freetubeapp.freetube",
-            "make_targets": {
+        "asar": true,
-                "win32": [
+        "protocols": [
-                    "squirrel"
+            {
-                ],
+                "name": "FreeTube",
-                "darwin": [
+                "schemes": [
-                    "zip"
+                    "freetube"
-                ],
+                ]
-                "linux": [
+            }
-                    "deb",
+        ],
-                    "rpm",
+        "mac": {
-                    "electron-forge-maker-appimage",
+            "category": "public.app-category.video",
-                    "zip"
+            "icon": "src/icons/iconColor.icns",
+            "target": [
+              "zip"
+            ]
+        },
+        "win": {
+            "target": [
+              "nsis",
+              "zip"
+            ],
+            "icon": "src/icons/iconColor.ico"
+        },
+        "linux": {
+            "protocols": {
+                "name": "FreeTube",
+                "schemes": [
+                    "freetube"
                 ]
             },
-            "protocols": [
+            "target": [
-                {
+                "AppImage",
-                    "name": "freetube",
+                "deb",
-                    "role": "Viewer",
+                "rpm",
-                    "schemes": [
+                "zip",
-                        "freetube"
+                "tar.xz"
-                    ]
-                }
             ],
-            "electronPackagerConfig": {
+            "desktop": {
-                "packageManager": "yarn",
+              "Icon": "freetube"
-                "icon": "./src/icons/iconColor.icns"
             },
-            "electronWinstallerConfig": {
+            "category": "Video"
-                "name": "freetube",
+      }
-                "iconUrl": "https://raw.githubusercontent.com/FreeTubeApp/FreeTubeApp.github.io/master/images/iconColor.ico",
-                "setupIcon": "./src/icons/iconColor.ico"
-            },
-            "electronInstallerDebian": {
-                "icon": "src/icons/iconColor.png"
-            },
-            "electronForgeMakerAppimage": {
-                "icon": "src/icons/iconColor.png"
-            },
-            "repository": {
-                "type": "git",
-                "url": "https://github.com/FreeTubeApp/FreeTube"
-            }
-        }
     },
     "devDependencies": {
-        "electron-forge": "^5.2.4",
+        "electron": "^5.0.3",
-        "electron-forge-maker-appimage": "^20.39.0",
+        "electron-builder": "^20.43.0",
-        "electron-installer-flatpak": "^0.8.0",
+        "electron-compile": "^6.4.4",
-        "electron-installer-snap": "^3.1.1",
+        "electron-installer-appimage": "^1.0.1",
-        "electron-prebuilt-compile": "4.0.0",
+        "electron-packager": "^13.1.1",
         "electron-winstaller": "^3.0.4"
     },
     "dependencies": {
         "autolinker": "^3.0.5",
         "commonjs": "0.0.1",
         "dateformat": "^3.0.3",
-        "electron-compile": "6.4.4",
         "electron-context-menu": "^0.12.0",
-        "electron-squirrel-startup": "^1.0.0",
         "jquery": "^3.4.0",
         "jsdom": "^15.0.0",
         "mustache": "^3.0.1",

src/index.html

@@ -159,6 +159,7 @@
   </div>
   <div id='progressView'></div>
 </body>
+<script src="js/vue.js"></script>
 <script src="js/general.js"></script>
 <script src="js/youtubeApi.js"></script>
 <script src="js/updates.js"></script>

src/js/events.js

@@ -66,7 +66,9 @@ let showComments = function (event, continuation = '') {
  */
 let playPauseVideo = function (event) {
     let el = event.currentTarget;
-    el.paused ? el.play() : el.pause();
+    if (el.paused && $('.videoPlayer').is(':hover')) {
+      $('.videoPlayer')[0].style.cursor = 'none';
+    }
 };
 
 /**
@@ -97,7 +99,15 @@ let videoShortcutHandler = function (event) {
         case 32:
             // Space Bar
             event.preventDefault();
-            videoPlayer.paused ? videoPlayer.play() : videoPlayer.pause();
+            if (videoPlayer.paused) {
+              videoPlayer.play();
+              if($('.videoPlayer').is(':hover')) {
+                $('.videoPlayer')[0].style.cursor = 'none';
+              }
+            }
+            else {
+              videoPlayer.pause();
+            }
             break;
         case 74:
             // J Key
@@ -107,7 +117,15 @@ let videoShortcutHandler = function (event) {
         case 75:
             // K Key
             event.preventDefault();
-            videoPlayer.paused ? videoPlayer.play() : videoPlayer.pause();
+            if (videoPlayer.paused) {
+              videoPlayer.play();
+              if($('.videoPlayer').is(':hover')) {
+                $('.videoPlayer')[0].style.cursor = 'none';
+              }
+            }
+            else {
+              videoPlayer.pause();
+            }
             break;
         case 76:
             // L Key

src/js/init.js

@@ -44,8 +44,6 @@ require('electron-context-menu')({
 
 let win;
 
-protocol.registerStandardSchemes(['freetube']);
-
 app.setAsDefaultProtocolClient('freetube');
 
 app.commandLine.appendSwitch('autoplay-policy', 'no-user-gesture-required');
@@ -56,8 +54,6 @@ app.commandLine.appendSwitch('enable-modern-media-controls', 'disabled');
 
 const gotTheLock = app.requestSingleInstanceLock()
 
-if (require('electron-squirrel-startup') || !gotTheLock) app.quit();
-
 /**
  * Initialize the Electron application
  * 1. create the browser window
@@ -73,7 +69,10 @@ let init = function () {
     win = new BrowserWindow({
         width: 1200,
         height: 800,
-        autoHideMenuBar: true
+        autoHideMenuBar: true,
+        webPreferences: {
+          nodeIntegration: true,
+        }
     });
 
     settingsDb.findOne({

src/js/layout.js

@@ -250,7 +250,7 @@ function hideMouseTimeout() {
     clearTimeout(mouseTimeout);
     mouseTimeout = window.setTimeout(function() {
         $('.videoPlayer')[0].style.cursor = 'none';
-    }, 2800);
+    }, 2650);
 }
 
 /**

src/js/mediaelement-and-player.js

@@ -8,7 +8,7 @@
  * Copyright 2010-2017, John Dyer (http://j.hn/)
  * License: MIT
  *
- */(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
+ */(function(){function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}return e})()({1:[function(_dereq_,module,exports){
 
 },{}],2:[function(_dereq_,module,exports){
 (function (global){
@@ -1017,7 +1017,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var mejs = {};
 
-mejs.version = '4.2.9';
+mejs.version = '4.2.10';
 
 mejs.html5media = {
 	properties: ['volume', 'src', 'currentTime', 'muted', 'duration', 'paused', 'ended', 'buffered', 'error', 'networkState', 'readyState', 'seeking', 'seekable', 'currentSrc', 'preload', 'bufferedBytes', 'bufferedTime', 'initialTime', 'startOffsetTime', 'defaultPlaybackRate', 'playbackRate', 'played', 'autoplay', 'loop', 'controls'],
@@ -1494,6 +1494,7 @@ Object.assign(_player2.default.prototype, {
 		play.addEventListener('click', function () {
 			if (t.paused) {
 				t.play();
+        $('.videoPlayer')[0].style.cursor = 'none';
 			} else {
 				t.pause();
 			}
@@ -1699,7 +1700,7 @@ Object.assign(_player2.default.prototype, {
 
 				pos = x - offsetStyles.left;
 				percentage = pos / width;
-				t.newTime = percentage <= 0.02 ? 0 : percentage * t.getDuration();
+				t.newTime = percentage * t.getDuration();
 
 				if (mouseIsDown && t.getCurrentTime() !== null && t.newTime.toFixed(4) !== t.getCurrentTime().toFixed(4)) {
 					t.setCurrentRailHandle(t.newTime);
@@ -1971,7 +1972,7 @@ Object.assign(_player2.default.prototype, {
 					player.setCurrentRail(e);
 				}
 				updateSlider();
-			} else if (!broadcast || t.options.forceLive) {
+			} else if (!broadcast && t.options.forceLive) {
 				var label = _document2.default.createElement('span');
 				label.className = t.options.classPrefix + 'broadcast';
 				label.innerText = _i18n2.default.t('mejs.live-broadcast');
@@ -3092,6 +3093,7 @@ Object.assign(_player2.default.prototype, {
 			anchor.setAttribute('aria-label', _i18n2.default.t('mejs.volume-slider'));
 			anchor.setAttribute('aria-valuemin', 0);
 			anchor.setAttribute('aria-valuemax', 100);
+			anchor.setAttribute('aria-valuenow', 100);
 			anchor.setAttribute('role', 'slider');
 			anchor.innerHTML += '<span class="' + t.options.classPrefix + 'offscreen">' + volumeControlText + '</span>' + ('<div class="' + t.options.classPrefix + 'horizontal-volume-total">') + ('<div class="' + t.options.classPrefix + 'horizontal-volume-current"></div>') + ('<div class="' + t.options.classPrefix + 'horizontal-volume-handle"></div>') + '</div>';
 			mute.parentNode.insertBefore(anchor, mute.nextSibling);
@@ -3576,7 +3578,7 @@ var config = exports.config = {
 	customError: null,
 
 	keyActions: [{
-		keys: [32, 179],
+		keys: [179],
 		action: function action(player) {
 
 			if (!_constants.IS_FIREFOX) {
@@ -4073,6 +4075,7 @@ var MediaElementPlayer = function () {
 								t.pause();
 							} else if (t.paused) {
 								t.play();
+                $('.videoPlayer')[0].style.cursor = 'none';
 							} else {
 								t.pause();
 							}
@@ -4693,6 +4696,7 @@ var MediaElementPlayer = function () {
 					if (t.options.clickToPlayPause) {
 						if (t.paused) {
 							t.play();
+              $('.videoPlayer')[0].style.cursor = 'none';
 						} else {
 							t.pause();
 						}
@@ -4917,6 +4921,7 @@ var MediaElementPlayer = function () {
 
 					if (t.paused) {
 						t.play();
+            $('.videoPlayer')[0].style.cursor = 'none';
 					} else {
 						t.pause();
 					}

src/js/miniPlayer.js

@@ -19,8 +19,6 @@
  * A file for handling mini-player functionality
  */
 
-import Vue from '../js/vue.js';
-
 const electron = require('electron');
 
 let mouseTimeout; // Timeout for hiding the mouse cursor on video playback

src/js/player.js

@@ -19,7 +19,7 @@
  * File for functions related to videos.
  */
 
-let checkedSettings = false;
+let checkedVideoSettings = false;
 
 /**
  * Display the video player and play a video
@@ -33,7 +33,7 @@ function playVideo(videoId, playlistId = '') {
 
     let youtubedlFinished = false;
     let invidiousFinished = false;
-    checkedSettings = false;
+    checkedVideoSettings = false;
     playerView.firstLoad = true;
     playerView.videoId = videoId;
     playerView.videoAudio = undefined;
@@ -449,7 +449,10 @@ function openMiniPlayer() {
         height: 710,
         show: false,
         title: 'FreeTube Mini-Player: ' + playerView.videoTitle,
-        autoHideMenuBar: true
+        autoHideMenuBar: true,
+        webPreferences: {
+          nodeIntegration: true,
+        }
     });
 
     const template = [{
@@ -644,10 +647,13 @@ function clickMiniPlayer(videoId) {
 
         let miniPlayer = new BrowserWindow({
             width: 1200,
-            height: 710,
+            height: 680,
             show: false,
             title: 'FreeTube Mini-Player: ' + videoData.videoTitle,
-            autoHideMenuBar: true
+            autoHideMenuBar: true,
+            webPreferences: {
+              nodeIntegration: true,
+            }
         });
 
         const template = [{
@@ -983,11 +989,11 @@ function clickMiniPlayer(videoId) {
 function checkDashSettings() {
     // Mediaelement.js for some reason calls onLoadStart() multiple times
     // This check is here to force checkVideoSettings to only run once.
-    if (checkedSettings) {
+    if (checkedVideoSettings) {
         return;
     }
 
-    checkedSettings = true;
+    checkedVideoSettings = true;
     let checked720p = false;
     let checked360p = false;
     let checkedAudio = false;
@@ -1082,7 +1088,7 @@ function checkDashSettings() {
                 ft.log(originalNode);
                 ft.log(instance);
                 showToast('There was an error with playing DASH formats.  Reverting to the legacy formats.');
-                checkedSettings = false;
+                checkedVideoSettings = false;
                 playerView.currentTime = instance.currentTime;
                 playerView.legacyFormats();
             }
@@ -1125,6 +1131,8 @@ function checkLegacySettings() {
             player.play();
         }
 
+        player.volume = currentVolume;
+
         window.setTimeout(() => {
             historyDb.findOne({
                 videoId: playerView.videoId

src/js/settings.js

@@ -26,6 +26,7 @@ let autoplay = true;
 let enableSubtitles = false;
 let checkForUpdates = true;
 let currentVolume = 1;
+let defaultVolume = 1;
 let defaultPlayer = 'dash';
 let defaultQuality = 720;
 let defaultPlaybackRate = '1';
@@ -106,6 +107,7 @@ function updateSettingsView() {
         document.getElementById('pageSelect').value = defaultPage;
         document.getElementById('playerSelect').value = defaultPlayer;
         document.getElementById('qualitySelect').value = defaultQuality;
+        document.getElementById('volumeSelect').value = defaultVolume;
         document.getElementById('rateSelect').value = defaultPlaybackRate;
         document.getElementById('regionSelect').value = defaultRegion;
 
@@ -136,6 +138,7 @@ function checkDefaultSettings() {
         'localScrape': true,
         'player': 'dash',
         'quality': '720',
+        'volume': 1,
         'rate': '1',
         'invidious': 'https://invidio.us',
         'proxy': "SOCKS5://127.0.0.1:9050", // This is default value for tor client
@@ -192,6 +195,10 @@ function checkDefaultSettings() {
                     case 'quality':
                         defaultQuality = docs[0]['value'];
                         break;
+                    case 'volume':
+                        defaultVolume = docs[0]['value'];
+                        currentVolume = docs[0]['value'];
+                        break;
                     case 'rate':
                         defaultPlaybackRate = docs[0]['value'];
                         break;
@@ -248,6 +255,7 @@ function updateSettings() {
     let pageSelect = document.getElementById('pageSelect').value;
     let playerSelect = document.getElementById('playerSelect').value;
     let qualitySelect = document.getElementById('qualitySelect').value;
+    let volumeSelect = document.getElementById('volumeSelect').value;
     let rateSelect = document.getElementById('rateSelect').value;
     let regionSelect = document.getElementById('regionSelect').value;
     let proxyAddress = document.getElementById('proxyAddress').value;
@@ -269,6 +277,10 @@ function updateSettings() {
     defaultPlaybackRate = rateSelect;
     settingsView.setDistractionFreeMode(distractionFreeMode);
 
+    //  Remove last list of videos for trending to load new region setting.
+    checkTrending = true;
+    trendingView.videoList = [];
+
     if (themeSwitch === true) {
         theme = 'dark';
     }
@@ -339,7 +351,7 @@ function updateSettings() {
         autoplay = autoplaySwitch;
     });
 
-    // Update autoplay.
+    // Update getting videos locally
     settingsDb.update({
         _id: 'localScrape'
     }, {
@@ -394,6 +406,18 @@ function updateSettings() {
         defaultQuality = qualitySelect;
     });
 
+    // Update default volume.
+    settingsDb.update({
+        _id: 'volume'
+    }, {
+        value: volumeSelect
+    }, {}, function(err, numReplaced) {
+        ft.log(err);
+        ft.log(numReplaced);
+        defaultVolume = volumeSelect;
+        currentVolume = volumeSelect;
+    });
+
     // Update default playback rate.
     settingsDb.update({
         _id: 'rate'
@@ -850,4 +874,4 @@ function clearFile(type, showMessage = true) {
     })
 }
 
-checkDefaultSettings();
+checkDefaultSettings();

src/js/subscriptions.js

@@ -76,6 +76,7 @@ function loadSubscriptions() {
         showToast('Refreshing Subscription List.  Please wait...');
         checkSubscriptions = false;
         progressView.seen = true;
+        $('#reloadButton')[0].classList.add('fa-spin');
     }
 
     let videoList = [];
@@ -117,6 +118,7 @@ function loadSubscriptions() {
             loadingView.seen = false;
             headerView.seen = false;
             noSubscriptions.seen = true;
+            $('#reloadButton')[0].classList.remove('fa-spin');
         }
     });
 }
@@ -145,6 +147,7 @@ function addSubsToView(videoList) {
     loadingView.seen = false;
     progressView.seen = false;
     progressView.progressWidth = 0;
+    $('#reloadButton')[0].classList.remove('fa-spin');
 
     subscriptionTimer = window.setTimeout(() => {
         checkSubscriptions = true;

src/js/templates.js

@@ -15,8 +15,6 @@ You should have received a copy of the GNU General Public License
 along with FreeTube.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import Vue from './js/vue.js';
-
 const mainHeaderTemplate = require('./templates/mainHeader.html');
 const aboutTemplate = require('./templates/about.html');
 const settingsTemplate = require('./templates/settings.html');
@@ -806,7 +804,7 @@ let backButtonView = new Vue({
 });
 
 function hideViews() {
-  if (playerView.seen !== false) {
+  if (playerView.seen !== false && (playerView.playerSeen || playerView.legacySeen)) {
     let lengthSeconds = 0;
     let duration = 0;
 

src/js/updates.js

@@ -66,5 +66,5 @@ function checkForNewUpdate() {
 }
 
 const openReleasePage = function () {
-    shell.openExternal('https://github.com/FreeTubeApp/FreeTube/releases');
+    shell.openExternal('https://freetubeapp.io/#download');
 }

src/style/mediaelementplayer.css

@@ -710,7 +710,7 @@ Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-h
 .mejs__captions-layer {
     bottom: 0;
     color: #fff;
-    font-size: 16px;
+    font-size: 25px;
     left: 0;
     line-height: 20px;
     position: absolute;

src/templates/miniPlayer.html

@@ -61,6 +61,7 @@ body {
 <script src="../js/plugins/context-menu/context-menu-i18n.js"></script>
 <script src="../js/plugins/timerailthumbnails/vtt.min.js"></script>
 <script src="../js/plugins/timerailthumbnails/mep-feature-time-rail-thumbnails.js"></script>
+<script src="../js/vue.js"></script>
 <script src="../js/general.js"></script>
 <script src="../js/miniPlayer.js"></script>
 <script src="../js/events.js"></script>

src/templates/settings.html

@@ -59,6 +59,34 @@
             <label class="select-label">Default Video Quality</label>
         </div>
         <br /><br />
+        <div class="select center">
+            <select id='volumeSelect' class="select-text" required>
+                <option value="1" selected>100%</option>
+                <option value="0.95">95%</option>
+                <option value="0.90">90%</option>
+                <option value="0.85">85%</option>
+                <option value="0.80">80%</option>
+                <option value="0.75">75%</option>
+                <option value="0.70">70%</option>
+                <option value="0.65">65%</option>
+                <option value="0.60">60%</option>
+                <option value="0.55">55%</option>
+                <option value="0.50">50%</option>
+                <option value="0.45">45%</option>
+                <option value="0.40">40%</option>
+                <option value="0.35">35%</option>
+                <option value="0.30">30%</option>
+                <option value="0.25">25%</option>
+                <option value="0.20">20%</option>
+                <option value="0.15">15%</option>
+                <option value="0.10">10%</option>
+                <option value="0.05">5%</option>
+            </select>
+            <span class="select-highlight"></span>
+            <span class="select-bar"></span>
+            <label class="select-label">Default Volume</label>
+        </div>
+        <br /><br />
         <div class="select center">
             <select id='rateSelect' class="select-text" required>
                 <option value="0.25">0.25x</option>
@@ -325,7 +353,10 @@
     <div class='center'>
         <div class="input-text-settings">
             <label for="invidiousInstance">Current Invidious Instance (Defaults to https://invidio.us)</label>
-            <input type="text" id="invidiousInstance" name="set-name" v-model="invidiousInstance">
+            <input type="text" id="invidiousInstance" name="set-name" v-model="invidiousInstance" />
+            <a href='https://github.com/omarroth/invidious/wiki/Invidious-Instances'>
+              <p>See Public Instances</p>
+            </a>
         </div>
     </div>
     <div class="center">