Feature: Edit playback speed and hide menu.

src/js/init.js

@@ -34,7 +34,7 @@ if(require('electron-squirrel-startup')) app.quit();
  */
 let init = function() {
   const Menu = require('electron').Menu;
-  win = new BrowserWindow({width: 1200, height: 800});
+  win = new BrowserWindow({width: 1200, height: 800, autoHideMenuBar: true});
 
   win.loadURL(url.format({
     pathname: path.join(__dirname, '../index.html'),

src/js/videos.js

@@ -583,6 +583,17 @@ function changeQuality(videoHtml, qualityType, isEmbed = false) {
   }
 }
 
+/**
+* Change the playpack speed of the video.
+*
+* @param {double} speed - The playback speed of the video.
+*
+* @return {Void}
+*/
+function changeVideoSpeed(speed){
+  $('.videoPlayer').get(0).playbackRate = speed;
+}
+
 /**
 * Check to see if the video URLs are valid. Change the video quality if one is not.
 * The API will grab video URLs, but they will sometimes return a 404.  This

src/style/darkTheme.css

@@ -41,6 +41,7 @@ input[type=text] {color: #EEEEEE;}
 .recommendDate{color: #E0E0E0;}
 .settingsButton {color: #BDBDBD; background-color: #424242;}
 .qualityTypes{color: #E0E0E0; background-color: #757575;}
+.speedTypes{color: #E0E0E0; background-color: #757575;}
 .unsaved{color: #E0E0E0;}
 
 #main{color: #EEEEEE;}

src/style/lightTheme.css

@@ -37,6 +37,7 @@ body{background-color: #e0e0e0;}
 .recommendDate{color: #616161;}
 .settingsButton {color: #424242; background-color: #BDBDBD;}
 .qualityTypes{background-color: #eeeeee;}
+.speedTypes{background-color: #eeeeee;}
 .unsaved{color: #616161;}
 
 #subscriptions img{border: 0px solid #000000;}

src/style/player.css

@@ -178,6 +178,40 @@ iframe{
   right: 24px;
 }
 
+.qualityTypes ul li{
+  width: 72px;
+  position: relative;
+  right: 15px;
+}
+
+.videoSpeed{
+  width: 42px;
+}
+
+.videoSpeed:hover .speedTypes{
+  visibility: visible;
+}
+
+.speedTypes{
+  visibility: hidden;
+  width: 72px;
+  position: relative;
+  bottom: 10px;
+  right: 15px;
+}
+
+.speedTypes ul{
+  list-style-type: none;
+  position: relative;
+  right: 24px;
+}
+
+.speedTypes ul li{
+  width: 72px;
+  position: relative;
+  right: 15px;
+}
+
 #showComments{
   text-align: center;
   height: 40px;

src/templates/about.html

@@ -5,3 +5,7 @@
 <p class='center'>
   Found a bug? Want to suggest a feature? Want to help out? Check out our <a href='https://github.com/FreeTubeApp/FreeTube'>GitHub</a> page.  Pull requests are welcome.
 </p>
+<br />
+<p class='center'>
+  Special thanks to <a href="https://twitter.com/swack" >@swack</a> over at <a href="https://hooktube.com/">HookTube</a> for making this application possible.
+</p>

src/templates/player.html

@@ -13,6 +13,21 @@
       </ul>
     </div>
   </div>
+  <div class='smallButton videoSpeed'>
+    <span id='currentSpeed'>1x</span> <i class="fas fa-angle-down"></i>
+    <div class='speedTypes'>
+      <ul>
+        <li onclick='changeVideoSpeed(0.25)'>0.25x</li>
+        <li onclick='changeVideoSpeed(0.5)'>0.5x</li>
+        <li onclick='changeVideoSpeed(0.75)'>0.75x</li>
+        <li onclick='changeVideoSpeed(1)'>1x</li>
+        <li onclick='changeVideoSpeed(1.25)'>1.25x</li>
+        <li onclick='changeVideoSpeed(1.5)'>1.5x</li>
+        <li onclick='changeVideoSpeed(1.75)'>1.75x</li>
+        <li onclick='changeVideoSpeed(2)'>2x</li>
+      </ul>
+    </div>
+  </div>
   <div onclick='toggleSavedVideo("{{videoId}}")' class='smallButton'>
     <i id='saveIcon' style='color: {{savedIconColor}};' class="{{savedIconClass}} fa-star"></i> <span id='savedText'>{{savedText}}</span>
   </div>