Fixing up dash player implementation

src/js/events.js

@@ -83,13 +83,13 @@ let videoShortcutHandler = function (event) {
       forceSubscriptions();
     }
 
-    let videoPlayer = $('.videoPlayer').get(0);
+    let videoPlayer = $('#player').get(0);
     if (typeof (videoPlayer) !== 'undefined' && !$('#jumpToInput').is(':focus') && !$('#search').is(':focus')) {
         switch (event.which) {
         case 32:
             // Space Bar
             event.preventDefault();
-            videoPlayer.paused ? videoPlayer.play() : videoPlayer.pause();
+            player.paused ? player.play() : player.pause();
             break;
         case 74:
             // J Key
@@ -99,7 +99,7 @@ let videoShortcutHandler = function (event) {
         case 75:
             // K Key
             event.preventDefault();
-            videoPlayer.paused ? videoPlayer.play() : videoPlayer.pause();
+            player.paused ? player.play() : player.pause();
             break;
         case 76:
             // L Key
@@ -109,18 +109,18 @@ let videoShortcutHandler = function (event) {
         case 79:
             // O Key
             event.preventDefault();
-            if (videoPlayer.playbackRate > 0.25){
-              let rate = videoPlayer.playbackRate - 0.25;
-              videoPlayer.playbackRate = rate;
+            if (player.playbackRate > 0.25){
+              let rate = player.playbackRate - 0.25;
+              player.playbackRate = rate;
               $('#currentSpeed').html(rate);
             }
             break;
         case 80:
             // P Key
             event.preventDefault();
-            if (videoPlayer.playbackRate < 2){
-              let rate = videoPlayer.playbackRate + 0.25;
-              videoPlayer.playbackRate = rate;
+            if (player.playbackRate < 2){
+              let rate = player.playbackRate + 0.25;
+              player.playbackRate = rate;
               $('#currentSpeed').html(rate);
             }
             break;
@@ -128,17 +128,17 @@ let videoShortcutHandler = function (event) {
             // F Key
             event.preventDefault();
 
-            if (videoPlayer.webkitDisplayingFullscreen) {
-              videoPlayer.webkitExitFullscreen
+            if (player.webkitDisplayingFullscreen) {
+              player.webkitExitFullscreen
             }
             else{
-              videoPlayer.webkitRequestFullscreen();
+              player.webkitRequestFullscreen();
             }
             break;
         case 77:
             // M Key
             event.preventDefault();
-            let volume = videoPlayer.volume;
+            let volume = player.volume;
 
             if (volume > 0) {
                 changeVolume(-1);

src/js/layout.js

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

src/js/player.js

@@ -474,37 +474,41 @@ function clickMiniPlayer(videoId) {
 function checkVideoSettings() {
     //let player = document.getElementById('videoPlayer');
 
+    console.log('checking Settings');
+
+    // Mediaelement.js for some reason calls onLoadStart() multiple times
+    // This check is here to force checkVideoSettings to only run once.
     if (checkedSettings) {
       return;
     }
 
     checkedSettings = true;
-    console.log('checking Settings');
 
     let player = new MediaElementPlayer('player', {
-      features: ['playpause', 'current', 'progress', 'duration', 'volume', 'loop', 'stop', 'speed', 'quality', 'fullscreen'],
+      features: ['playpause', 'current', 'loop', 'tracks', 'progress', 'duration', 'volume', 'stop', 'speed', 'quality', 'fullscreen'],
 
       speeds: ['2', '1.75', '1.5', '1.25', '1', '0.75', '0.5', '0.25'],
-      defaultSpeed: '1',
+      defaultSpeed: defaultPlaybackRate,
       qualityText: 'Quality',
-      defaultQuality: 'auto',
-      stretching: 'fill',
+      defaultQuality: 'Auto',
+      stretching: 'responsive',
+      startVolume: currentVolume,
 
       success: function(mediaElement, originalNode, instance) {
         console.log(mediaElement,originalNode,instance);
+
+        if (autoplay) {
+            instance.play();
+        }
+
+        if (enableSubtitles) {
+            instance.options.startLanguage = 'en';
+        }
       }
     });
 
     return;
 
-    if (autoplay) {
-        player.play();
-    }
-
-    if (enableSubtitles) {
-        player.textTracks[0].mode = 'showing';
-    }
-
     if (playerView.firstLoad) {
         playerView.firstLoad = false;
 
@@ -528,9 +532,6 @@ function checkVideoSettings() {
             }
             break;
         }
-
-        player.playbackRate = parseFloat(defaultPlaybackRate);
-        $('#currentSpeed').html(defaultPlaybackRate);
     }
 
     player.volume = currentVolume;
@@ -573,7 +574,7 @@ function playNextVideo() {
  */
 function changeVideoSpeed(speed) {
     $('#currentSpeed').html(speed);
-    $('.videoPlayer').get(0).playbackRate = speed;
+    player.playbackRate = speed;
 }
 
 /**
@@ -584,15 +585,15 @@ function changeVideoSpeed(speed) {
  * @return {Void}
  */
 function changeVolume(amount) {
-    const videoPlayer = $('.videoPlayer').get(0);
-    let volume = videoPlayer.volume;
+    // const videoPlayer = $('#player').get();
+    let volume = player.volume;
     volume = volume + amount;
     if (volume > 1) {
-        videoPlayer.volume = 1;
+        player.volume = 1;
     } else if (volume < 0) {
-        videoPlayer.volume = 0;
+        player.volume = 0;
     } else {
-        videoPlayer.volume = volume;
+        player.volume = volume;
     }
 }
 
@@ -604,8 +605,8 @@ function changeVolume(amount) {
  * @return {Void}
  */
 function changeDurationBySeconds(seconds) {
-    const videoPlayer = $('.videoPlayer').get(0);
-    videoPlayer.currentTime = videoPlayer.currentTime + seconds;
+    // const videoPlayer = $('.videoPlayer').get(0);
+    player.currentTime = player.currentTime + seconds;
 }
 
 /**
@@ -616,17 +617,16 @@ function changeDurationBySeconds(seconds) {
  * @return {Void}
  */
 function changeDurationByPercentage(percentage) {
-    const videoPlayer = $('.videoPlayer').get(0);
-    videoPlayer.currentTime = videoPlayer.duration * percentage;
+    //const videoPlayer = $('.videoPlayer').get(0);
+    player.currentTime = player.duration * percentage;
 }
 
 function changeDuration(seconds) {
-    const videoPlayer = $('.videoPlayer').get(0);
-    videoPlayer.currentTime = seconds;
+    // const videoPlayer = $('.videoPlayer').get(0);
+    player.currentTime = seconds;
 }
 
 function updateVolume() {
-    let player = document.getElementById('videoPlayer');
     currentVolume = player.volume
 }
 

src/js/videos.js

@@ -232,7 +232,7 @@ function displayChannel(channel) {
     let channelData = {};
 
     channelData.channelId = channel.authorId;
-    channelData.thumbnail = "https:" + channel.authorThumbnails[4].url;
+    channelData.thumbnail = channel.authorThumbnails[4].url;
     channelData.channelName = channel.author;
     channelData.description = channel.description;
     channelData.subscriberCount = channel.subCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

src/style/main.css

@@ -64,7 +64,7 @@ a {
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 1;
+    z-index: 4;
 }
 
 .topNav span {

src/templates/player.html

@@ -1,7 +1,11 @@
 <div v-if='seen'>
   <div v-if='playerSeen' class='videoPlayer'>
-    <video id='player' onloadstart='checkVideoSettings(); return;'>
+    <video id='player' onloadstart='checkVideoSettings()' onmousemove="hideMouseTimeout()" onmouseleave="removeMouseTimeout()" :poster="videoThumbnail" onvolumechange='updateVolume()'>
+      <source data-quality='360p' type="video/mp4" :src="video480p" />
+      <source data-quality='720p' type="video/mp4" :src="video720p" />
+      <source data-quality='Audio' type="audio/mp4" :src="videoAudio" />
       <source data-quality='Auto' type="application/dash+xml" :src="videoDash" />
+      <span v-html="subtitleHtml"></span>
     </video>
     <!--<video class="videoPlayer" id='videoPlayer' type="application/x-mpegURL" object-fit='cover' onmousemove="hideMouseTimeout()" onmouseleave="removeMouseTimeout()" onloadstart='checkVideoSettings()' onvolumechange='updateVolume()' controls="" onended='playNextVideo()' :src='videoUrl' :poster="videoThumbnail" v-html="subtitleHtml">
     </video>-->