Fix Tor leaks and Mini Player Progress

src/js/init.js

@@ -30,6 +30,14 @@ const {
 const path = require('path');
 const url = require('url');
 
+const Datastore = require('nedb'); // database logic
+const localDataStorage = app.getPath('userData'); // Grabs the userdata directory based on the user's OS
+
+const settingsDb = new Datastore({
+  filename: localDataStorage + '/settings.db',
+  autoload: true
+});
+
 require('electron-context-menu')({
     prepend: (params, browserWindow) => []
 });
@@ -71,14 +79,29 @@ let init = function () {
         autoHideMenuBar: true
     });
 
-    win.loadURL(url.format({
-        pathname: path.join(__dirname, '../index.html'),
-        protocol: 'file:',
-        slashes: true,
-    }));
+    settingsDb.find({_id: 'useTor'}, (err, docs) => {
+      if (docs[0]['value'] !== false) {
+        settingsDb.find({_id: 'proxy'}, (err, docs) => {
+          win.webContents.session.setProxy({ proxyRules: docs[0]['value'] }, function () {
+            win.loadURL(url.format({
+                pathname: path.join(__dirname, '../index.html'),
+                protocol: 'file:',
+                slashes: true,
+            }));
+          });
+        });
+      }
+      else {
+        win.loadURL(url.format({
+            pathname: path.join(__dirname, '../index.html'),
+            protocol: 'file:',
+            slashes: true,
+        }));
+      }
+    });
 
     if (process.env = 'development') {
-        //win.webContents.openDevTools();ff
+        //win.webContents.openDevTools();
     }
 
     win.on('closed', () => {
@@ -130,7 +153,8 @@ let init = function () {
                     role: 'reload'
                 },
                 {
-                    role: 'forcereload'
+                    role: 'forcereload',
+                    accelerator: "CmdOrCtrl+Shift+R",
                 },
                 {
                     role: 'toggledevtools'

src/js/miniPlayer.js

@@ -30,6 +30,7 @@ let miniPlayerView = new Vue({
   el: '#miniPlayer',
   data: {
     videoId: '',
+    videoUrl: '',
     video360p: '',
     valid360p: true,
     video720p: '',
@@ -50,6 +51,7 @@ let miniPlayerView = new Vue({
     legacySeen: false,
     autoplay: true,
     enableSubtitles: false,
+    thumbnailInterval: 5,
   }
 });
 
@@ -91,20 +93,6 @@ function checkDashSettings() {
     let checkedDash = false;
     let parseDash = true;
     let quality = 'Auto';
-    let thumbnailInterval = 5;
-
-    if (miniPlayerView.lengthSeconds < 120) {
-      thumbnailInterval = 1;
-    }
-    else if (miniPlayerView.lengthSeconds < 300) {
-      thumbnailInterval = 2;
-    }
-    else if (miniPlayerView.lengthSeconds < 900) {
-      thumbnailInterval = 5;
-    }
-    else {
-      thumbnailInterval = 10;
-    }
 
     let declarePlayer = function() {
       if (!checkedDash) {
@@ -127,7 +115,7 @@ function checkDashSettings() {
           defaultQuality: 'Auto',
           stretching: 'responsive',
           startVolume: miniPlayerView.volume,
-          timeRailThumbnailsSeconds: thumbnailInterval,
+          timeRailThumbnailsSeconds: miniPlayerView.thumbnailInterval,
 
           success: function(mediaElement, originalNode, instance) {
             ft.log(mediaElement,originalNode,instance);
@@ -224,11 +212,11 @@ function checkLegacySettings() {
       miniPlayerView.currentTime = undefined;
     }
 
-    if (autoplay) {
+    if (miniPlayerView.autoplay) {
         legacyPlayer.play();
     }
 
-    changeVideoSpeed(defaultPlaybackRate);
+    changeVideoSpeed(miniPlayerView.defaultPlaybackRate);
   };
 
   if (miniPlayerView.valid360p !== false) {
@@ -297,6 +285,29 @@ function validateUrl(videoUrl, callback) {
     }
 }
 
+/**
+ * Change the playpack speed of the video.
+ *
+ * @param {double} speed - The playback speed of the video.
+ *
+ * @return {Void}
+ */
+function changeVideoSpeed(speed) {
+  if (miniPlayerView.legacySeen) {
+    $('#currentSpeed').html(speed);
+    $('.videoPlayer').get(0).playbackRate = speed;
+  }
+  else {
+    let speedOptions = $('.mejs__speed-selector-input').get();
+    speedOptions.forEach((option, index) => {
+      if (option.value == speed) {
+        option.click();
+        player.playbackRate = speed;
+      }
+    });
+  }
+}
+
 function hideConfirmFunction() {
   return;
 }
@@ -305,6 +316,7 @@ electron.ipcRenderer.on('ping', function(event, message) {
    console.log(message);
 
    miniPlayerView.videoId = message.videoId;
+   miniPlayerView.videoUrl = message.videoUrl;
    miniPlayerView.video360p = message.video360p;
    miniPlayerView.valid360p = message.valid360p;
    miniPlayerView.video720p = message.video720p;
@@ -325,6 +337,71 @@ electron.ipcRenderer.on('ping', function(event, message) {
    miniPlayerView.legacySeen = message.legacySeen;
    miniPlayerView.autoplay = message.autoplay;
    miniPlayerView.enableSubtitles = message.enableSubtitles;
+   miniPlayerView.thumbnailInterval = message.thumbnailInterval;
 
    window.setTimeout(checkDashSettings, 100);
 });
+
+electron.ipcRenderer.on('play360p', function(event, message) {
+  if (!miniPlayerView.valid360p) {
+    return;
+  }
+
+  let videoPlayer = $('.videoPlayer').get(0);
+
+  videoPlayer.pause();
+
+  let time = videoPlayer.currentTime;
+
+  console.log(time);
+
+  miniPlayerView.videoUrl = miniPlayerView.video360p;
+
+  setTimeout(() => {videoPlayer.currentTime = time; videoPlayer.play();}, 100);
+});
+
+electron.ipcRenderer.on('play720p', function(event, message) {
+  if (!miniPlayerView.valid720p) {
+    return;
+  }
+
+  let videoPlayer = $('.videoPlayer').get(0);
+
+  videoPlayer.pause();
+
+  let time = videoPlayer.currentTime;
+
+  console.log(time);
+
+  miniPlayerView.videoUrl = miniPlayerView.video720p;
+
+  setTimeout(() => {videoPlayer.currentTime = time; videoPlayer.play();}, 100);
+});
+
+electron.ipcRenderer.on('playAudio', function(event, message) {
+  if (!miniPlayerView.validAudio) {
+    return;
+  }
+
+  let videoPlayer = $('.videoPlayer').get(0);
+
+  videoPlayer.pause();
+
+  let time = videoPlayer.currentTime;
+
+  console.log(time);
+
+  miniPlayerView.videoUrl = miniPlayerView.videoAudio;
+
+  setTimeout(() => {videoPlayer.currentTime = time; videoPlayer.play();}, 100);
+});
+
+electron.ipcRenderer.on('videoSpeed', function(event, message) {
+  changeVideoSpeed(message);
+});
+
+electron.ipcRenderer.on('videoLoop', function(event, message) {
+  let videoPlayer = $('.videoPlayer').get(0);
+
+  videoPlayer.loop = !videoPlayer.loop;
+});

src/js/templates.js

@@ -400,7 +400,7 @@ let settingsView = new Vue({
 
       proxyRequest(() => {
         $.ajax({
-          url: "https://ifconfig.co/json",
+          url: "https://ipinfo.io",
           dataType: 'json',
         }).done(response => {
           console.log(response);
@@ -412,7 +412,9 @@ let settingsView = new Vue({
           showToast('Proxy test failed');
         }).always(() =>{
           this.proxyTestLoading = false;
-          electron.ipcRenderer.send("setProxy", {});
+          if (!useTor) {
+            electron.ipcRenderer.send("setProxy", {});
+          }
         });
       })
     }
@@ -690,6 +692,19 @@ let playerView = new Vue({
       }
     },
   },
+  computed: {
+    thumbnailInterval: function() {
+      if (this.lengthSeconds < 120) {
+          return 1;
+      } else if (this.lengthSeconds < 300) {
+          return 2;
+      } else if (this.lengthSeconds < 900) {
+          return 5;
+      } else {
+          return 10;
+      }
+    }
+  },
   template: playerTemplate
 });
 

src/js/youtubeApi.js

@@ -25,8 +25,8 @@
  * @return {Void}
  */
 
-function invidiousAPI(resource, id, params, success, fail = function(){
-  showToast('There was an error calling the Invidious API.');
+function invidiousAPI(resource, id, params, success, fail = function(xhr){
+  showToast('Invidious API Error: ' + xhr.responseJSON.error);
   loadingView.seen = false;
 }) {
   let requestUrl = invidiousInstance + '/api/v1/' + resource + '/' + id + '?' + $.param(params);

src/style/main.css

@@ -301,7 +301,7 @@ a {
     font-size: 17px;
     line-height: 50px;
     opacity: 0;
-    z-index: 1;
+    z-index: 4;
     visibility: hidden;
     -webkit-transition: opacity 0.5s ease-in-out;
     -moz-transition: opacity 0.5s ease-in-out;

src/style/mediaelementplayer.css

@@ -213,8 +213,8 @@ Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-h
 
 .mejs__controls:not([style*='display: none']) {
     background: rgba(255, 0, 0, 0.7);
-    background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.35));
-    background: linear-gradient(transparent, rgba(0, 0, 0, 0.35));
+    background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.75));
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
 }
 
 .mejs__button,
@@ -413,7 +413,7 @@ Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-h
         -ms-transform: translateX(0);
             transform: translateX(0);
     z-index: 11;
-    top: -2px;
+    top: -3px;
 }
 
 .mejs__time-handle-content {

src/templates/miniPlayer.html

@@ -18,10 +18,11 @@
 <style>
 body {
     background-color: #424242;
+    font-family: 'Roboto', sans-serif;
 }
 
-#player {
-  min-height: 480px;
+#legacyPlayer {
+  width: 100%;
 }
 
 </style>
@@ -32,7 +33,7 @@ body {
 <link rel="stylesheet" href="../js/plugins/context-menu/context-menu.css" />
   <div id='miniPlayer'>
     <div v-if='playerSeen && !legacySeen' class='videoPlayer'>
-        <video id='player' onmousemove="hideMouseTimeout()" onmouseleave="removeMouseTimeout()" :poster="videoThumbnail" onended='playNextVideo()' onvolumechange='updateVolume()'>
+        <video id='player' onmousemove="hideMouseTimeout()" onmouseleave="removeMouseTimeout()" :poster="videoThumbnail">
             <source v-if='validDash' data-quality='Auto' type="application/dash+xml" :src="videoDash" />
             <source v-if='validLive' data-quality='Live' type="application/x-mpegURL" :src="videoLive" />
             <span v-html="subtitleHtml"></span>
@@ -40,7 +41,7 @@ body {
         </video>
     </div>
     <div v-else-if='!playerSeen && legacySeen'>
-        <video id='legacyPlayer' class='videoPlayer' onloadstart='checkLegacySettings()' onmousemove="hideMouseTimeout()" onmouseleave="removeMouseTimeout()" :poster="videoThumbnail" onended='playNextVideo()' onvolumechange='updateVolume()' :src='videoUrl' controls="controls" v-html="subtitleHtml">
+        <video id='legacyPlayer' class='videoPlayer' onloadstart='checkLegacySettings()' onmousemove="hideMouseTimeout()" onmouseleave="removeMouseTimeout()" :poster="videoThumbnail" :src='videoUrl' controls="controls" v-html="subtitleHtml">
         </video>
     </div>
     <div v-else>