Update version v0.3.2HEADmaster

5 files changed, 110 insertions, 4 deletions

diff --git a/youtube/static/js/av-merge.js b/youtube/static/js/av-merge.js
index e00f440..cfe9574 100644
--- a/youtube/static/js/av-merge.js
+++ b/youtube/static/js/av-merge.js
@@ -20,6 +20,29 @@
 // TODO: Call abort to cancel in-progress appends?
 
 
+// Buffer sizes for different systems
+const BUFFER_CONFIG = {
+    default: 50 * 10**6,  // 50 megabytes
+    webOS: 20 * 10**6,    // 20 megabytes WebOS (LG)
+    samsungTizen: 20 * 10**6, // 20 megabytes Samsung Tizen OS
+    androidTV: 30 * 10**6, // 30 megabytes Android TV
+    desktop: 50 * 10**6,  // 50 megabytes PC/Mac
+};
+
+function detectSystem() {
+    const userAgent = navigator.userAgent.toLowerCase();
+    if (/webos|lg browser/i.test(userAgent)) {
+        return "webOS";
+    } else if (/tizen/i.test(userAgent)) {
+        return "samsungTizen";
+    } else if (/android tv|smart-tv/i.test(userAgent)) {
+        return "androidTV";
+    } else if (/firefox|chrome|safari|edge/i.test(userAgent)) {
+        return "desktop";
+    } else {
+        return "default";
+    }
+}
 
 function AVMerge(video, srcInfo, startTime){
     this.audioSource = null;
@@ -164,6 +187,8 @@ AVMerge.prototype.printDebuggingInfo = function() {
 }
 
 function Stream(avMerge, source, startTime, avRatio) {
+    const selectedSystem = detectSystem();
+    let baseBufferTarget = BUFFER_CONFIG[selectedSystem] || BUFFER_CONFIG.default;
     this.avMerge = avMerge;
     this.video = avMerge.video;
     this.url = source['url'];
@@ -173,10 +198,11 @@ function Stream(avMerge, source, startTime, avRatio) {
     this.mimeCodec = source['mime_codec']
     this.streamType = source['acodec'] ? 'audio' : 'video';
     if (this.streamType == 'audio') {
-        this.bufferTarget = avRatio*50*10**6;
+        this.bufferTarget = avRatio * baseBufferTarget;
     } else {
-        this.bufferTarget = 50*10**6; // 50 megabytes
+        this.bufferTarget = baseBufferTarget;
     }
+    console.info(`Detected system: ${selectedSystem}. Applying bufferTarget of ${this.bufferTarget} bytes to ${this.streamType}.`);
 
     this.initRange = source['init_range'];
     this.indexRange = source['index_range'];
diff --git a/youtube/static/js/plyr-start.js b/youtube/static/js/plyr-start.js
index 56068f0..3838acc 100644
--- a/youtube/static/js/plyr-start.js
+++ b/youtube/static/js/plyr-start.js
@@ -58,7 +58,7 @@
     },
   });
 
-  const player = new Plyr(document.getElementById('js-video-player'), {
+  const playerOptions = {
     // Learning about autoplay permission https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy/autoplay#syntax
     autoplay: autoplayActive,
     disableContextMenu: false,
@@ -117,5 +117,20 @@
     tooltips: {
       controls: true,
     },
+  }
+
+  const player = new Plyr(document.getElementById('js-video-player'), playerOptions);
+
+  // disable double click to fullscreen
+  // https://github.com/sampotts/plyr/issues/1370#issuecomment-528966795
+  player.eventListeners.forEach(function(eventListener) {
+    if(eventListener.type === 'dblclick') {
+        eventListener.element.removeEventListener(eventListener.type, eventListener.callback, eventListener.options);
+    }
   });
+
+  // Add .started property, true after the playback has been started
+  // Needed so controls won't be hidden before playback has started
+  player.started = false;
+  player.once('playing', function(){this.started = true});
 })();
diff --git a/youtube/static/js/watch.js b/youtube/static/js/watch.js
index 95d9fa7..00803cf 100644
--- a/youtube/static/js/watch.js
+++ b/youtube/static/js/watch.js
@@ -5,8 +5,9 @@ function changeQuality(selection) {
     let videoPaused = video.paused;
     let videoSpeed = video.playbackRate;
     let srcInfo;
-    if (avMerge)
+    if (avMerge && typeof avMerge.close === 'function') {
         avMerge.close();
+    }
     if (selection.type == 'uni'){
         srcInfo = data['uni_sources'][selection.index];
         video.src = srcInfo.url;
diff --git a/youtube/static/modules/plyr/custom_plyr.css b/youtube/static/modules/plyr/custom_plyr.css
index 0fd3c52..7a9f0f3 100644
--- a/youtube/static/modules/plyr/custom_plyr.css
+++ b/youtube/static/modules/plyr/custom_plyr.css
@@ -37,3 +37,41 @@ e.g. Firefox playback speed options */
     max-height: 320px;
     overflow-y: auto;
 }
+
+/*
+* Custom styles similar to youtube
+*/
+.plyr__controls {
+    display: flex;
+    justify-content: center;
+}
+
+.plyr__progress__container {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    margin-bottom: -10px;
+}
+
+.plyr__controls .plyr__controls__item:first-child {
+    margin-left: 0;
+    margin-right: 0;
+    z-index: 5;
+}
+
+.plyr__controls .plyr__controls__item.plyr__volume {
+    margin-left: auto;
+}
+
+.plyr__controls .plyr__controls__item.plyr__progress__container {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.plyr__progress input[type="range"] {
+    margin-bottom: 50px;
+}
+
+/*
+* End custom styles
+*/
diff --git a/youtube/static/watch.css b/youtube/static/watch.css
index 460bba3..c0bdec6 100644
--- a/youtube/static/watch.css
+++ b/youtube/static/watch.css
@@ -128,6 +128,29 @@ header {
     background-color: var(--buttom-hover);
 }
 
+.live-url-choices {
+    background-color: var(--thumb-background);
+    margin: 1rem 0;
+    padding: 1rem;
+}
+
+.playability-error {
+    position: relative;
+    box-sizing: border-box;
+    height: 30vh;
+    margin: 1rem 0;
+}
+
+.playability-error > span {
+    display: flex;
+    background-color: var(--thumb-background);
+    height: 100%;
+    object-fit: cover;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
 .playlist {
     display: grid;
     grid-gap: 4px;
@@ -622,6 +645,9 @@ figure.sc-video {
         max-height: 80vh;
         overflow-y: scroll;
     }
+    .playability-error {
+        height: 60vh;
+    }
     .playlist {
         display: grid;
         grid-gap: 1px;