From 9a721614d7870446feb1982862397a152f7af38b Mon Sep 17 00:00:00 2001
From: root <root@git.maharshi.ninja>
Date: Mon, 8 Nov 2021 00:12:51 +0530
Subject: [PATCH] Front-port a bunch of performance improvements from
 TeamPiped/piped

---
 src/components/Player.vue | 48 +++++++++++++++++++++++----------------
 src/styles/main.scss      |  2 +-
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index 5af10cb..98a6d99 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -52,7 +52,8 @@ export default {
   },
   data () {
     return {
-      player: null
+      $player: null,
+      $ui: null
     }
   },
   computed: {
@@ -83,7 +84,7 @@ export default {
 
       if (this.skipToTime != null) videoEl.currentTime = this.skipToTime
 
-      const noPrevPlayer = !this.player
+      const noPrevPlayer = !this.$player
 
       const streams = []
 
@@ -116,6 +117,9 @@ export default {
 
         mime = contentType
         uri = lbry.uri
+      } else if (this.video.hls) {
+        uri = this.video.hls
+        mime = 'application/x-mpegURL'
       } else {
         uri = this.video.videoStreams.filter(stream => stream.codec == null).slice(-1)[0].url
       }
@@ -154,7 +158,7 @@ export default {
         )
 
         this.setPlayerAttrs(localPlayer, videoEl, uri, mime, shaka)
-      } else this.setPlayerAttrs(this.player, videoEl, uri, mime, shaka)
+      } else this.setPlayerAttrs(this.$player, videoEl, uri, mime, shaka)
 
       if (noPrevPlayer) {
         videoEl.addEventListener('timeupdate', () => {
@@ -195,8 +199,8 @@ export default {
       // TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
     },
     setPlayerAttrs (localPlayer, videoEl, uri, mime, shaka) {
-      if (!this.ui) {
-        this.ui = new shaka.ui.Overlay(localPlayer, this.$refs.container, videoEl)
+      if (!this.$ui) {
+        this.$ui = new shaka.ui.Overlay(localPlayer, this.$refs.container, videoEl)
 
         const config = {
           overflowMenuButtons: ['quality', 'captions', 'picture_in_picture', 'playback_rate'],
@@ -207,26 +211,32 @@ export default {
           }
         }
 
-        this.ui.configure(config)
+        this.$ui.configure(config)
       }
 
-      const player = this.ui.getControls().getPlayer()
+      const player = this.$ui.getControls().getPlayer()
 
-      this.player = player
+      this.$player = player
 
       const disableVideo = this.$store.getters['prefs/getPreferenceBoolean']('listen', false) && !this.video.livestream
 
-      this.player.configure({
+      this.$player.configure({
         preferredVideoCodecs: this.preferredVideoCodecs,
         preferredAudioCodecs: ['opus', 'mp4a'],
         manifest: {
-          disableVideo: disableVideo
+          disableVideo: disableVideo,
+          hls: {
+            useFullSegmentsForStartTime: true
+          }
+        },
+        streaming: {
+          useNativeHlsOnSafari: false
         }
       })
 
       const quality = this.$store.getters['prefs/getPreferenceNumber']('quality', 0)
       const qualityConds = quality > 0 && (this.video.audioStreams.length > 0 || this.video.livestream) && !disableVideo
-      if (qualityConds) this.player.configure('abr.enabled', false)
+      if (qualityConds) this.$player.configure('abr.enabled', false)
 
       player.load(uri, 0, mime).then(() => {
         if (qualityConds) {
@@ -256,7 +266,7 @@ export default {
           )
         })
         videoEl.volume = this.$store.getters['prefs/getPreferenceNumber']('volume', 1)
-        videoEl.playbackRate = videoEl.defaultPlaybackRate = this.$store.getters['prefs/getPreferenceNumber']('rate', 1)
+        player.trickPlay(this.$store.getters['prefs/getPreferenceNumber']('rate', 1))
       })
     }
   },
@@ -317,14 +327,14 @@ export default {
   },
 
   beforeDestroy () {
-    if (this.ui) {
-      this.ui.destroy()
-      this.ui = undefined
-      this.player = undefined
+    if (this.$ui) {
+      this.$ui.destroy()
+      this.$ui = undefined
+      this.$player = undefined
     }
-    if (this.player) {
-      this.player.destroy()
-      this.player = undefined
+    if (this.$player) {
+      this.$player.destroy()
+      this.$player = undefined
     }
     this.unsubToKeybindings()
     this.$refs.container.querySelectorAll('div').forEach(node => node.remove())
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 545011e..58861cc 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -37,7 +37,7 @@
 }
 
 .cyrillic {
-  @include addFonts('Nunito Sans')
+  @include addFonts('Nunito Sans');
 }
 
 .v-application {