From 87c94e3c1c2cd33568e9d02af8606cf3a7f0abb4 Mon Sep 17 00:00:00 2001
From: mayeaux <instacoins@gmail.com>
Date: Fri, 10 Jun 2022 18:18:58 +0200
Subject: [PATCH] Reuse videojs instance between video reload, return mobile UI
 plugin for iOS (#1512)

* add mobile plugin back on ios

* further touchups and fix ios

* finish mobile functionality

* dont show big play button on mobile

* remove logs

* proof of concept

* dont go full screen on rotate

* add back functionality

* replace dispose event with navigate away

* bugfix

* turn off show if you liked button and nag only on homepage

* add back old functionality

* ending event not working

* test here

* working but needs cleanup

* more player touchups

* bugfix

* add settings button on mobile

* more touchups

* more cleanups

* touchup loading functionality

* fix hover thumbnails

* touchup and eslint fix

* fix repopulation bug

* change recsys event name

* bugfix events

* change the way buttons are removed and added

* finish chapters button

* refactor to use videojs methods

* refactor to fix autoplay next

* ux touchups

* seems to be behaving properly

* control bar behaving how it should

* fix control bar on ios

* working on flow and eslint errors

* bugfix and flow fixes

* bring back nudge

* fix playlist button bug

* remove chapter markers properly

* show big play button

* bugfix recsys closed event

* fix analytics bug

* fix embeds

* bugfix

* possible bugfix for kp

* bugfix playlist buttons

* fix issue with mobile ui plugin

* fix firefox autoplay issue

* fix bug for play on floating player closed

* bugfix volume control for ios

* instantiate new player if switching between claim types

* fix flow and lint errors

* fix control bar not showing up when switching sources

* dispose old player if recreating

* bugfix save position

* reset recsys data between videos

* fix audio upload posters

* clear claimSrcVhs on reload

* bugfix errant image previews showing up

* reset player value of having already switched quality

* fix watch position not being used

* bugfix switching between sources not perserving position

* fix save position bug

* fix playlist buttons

* bugfix

* code cleanup and add back 5 second feature
---
 ui/component/fileReactions/view.jsx           |    4 +-
 ui/component/nagLocaleSwitch/view.jsx         |    1 +
 .../viewers/videoViewer/internal/chapters.jsx |   18 +
 .../internal/effects/use-autoplay-next.js     |    6 +-
 .../internal/effects/use-theater-mode.js      |    8 +-
 .../viewers/videoViewer/internal/play-next.js |    6 +-
 .../videoViewer/internal/play-previous.js     |    6 +-
 .../internal/plugins/canAutoplay.js           | 2086 -----------------
 .../videojs-hls-quality-selector/plugin.js    |   17 +-
 .../plugins/videojs-mobile-ui/plugin.js       |   15 +-
 .../internal/plugins/videojs-recsys/plugin.js |    2 +-
 .../videoViewer/internal/videojs-events.jsx   |   37 +-
 .../internal/videojs-functions.jsx            |    2 +-
 .../viewers/videoViewer/internal/videojs.jsx  |  255 +-
 ui/component/viewers/videoViewer/view.jsx     |  172 +-
 ui/scss/component/_videojs.scss               |   15 +-
 yarn.lock                                     |    1 +
 17 files changed, 388 insertions(+), 2263 deletions(-)
 delete mode 100644 ui/component/viewers/videoViewer/internal/plugins/canAutoplay.js

diff --git a/ui/component/fileReactions/view.jsx b/ui/component/fileReactions/view.jsx
index dac668856..736b2e4f8 100644
--- a/ui/component/fileReactions/view.jsx
+++ b/ui/component/fileReactions/view.jsx
@@ -97,12 +97,12 @@ export default function FileReactions(props: Props) {
 
   return (
     <>
-      {channelTitle && !isCollection && (
+       {channelTitle && !isCollection && (
         <NudgeFloating
           name="nudge:support-acknowledge"
           text={__('Let %channel% know you enjoyed this!', { channel: channelTitle })}
         />
-      )}
+       )}
 
       <div className={'ratio-wrapper'}>
         <Button
diff --git a/ui/component/nagLocaleSwitch/view.jsx b/ui/component/nagLocaleSwitch/view.jsx
index 699315619..63bbfcb20 100644
--- a/ui/component/nagLocaleSwitch/view.jsx
+++ b/ui/component/nagLocaleSwitch/view.jsx
@@ -57,6 +57,7 @@ export default function NagLocaleSwitch(props: Props) {
   const [switchOption, setSwitchOption] = React.useState(optionToSwitch);
 
   if (localeSwitchDismissed || !optionToSwitch) return null;
+  if (!onFrontPage) return null;
 
   let message = __(
     // If no homepage, only suggest language switch
diff --git a/ui/component/viewers/videoViewer/internal/chapters.jsx b/ui/component/viewers/videoViewer/internal/chapters.jsx
index d371288a7..5975c6368 100644
--- a/ui/component/viewers/videoViewer/internal/chapters.jsx
+++ b/ui/component/viewers/videoViewer/internal/chapters.jsx
@@ -98,6 +98,9 @@ function overrideHoverTooltip(player: any, tsData: TimestampData, duration: numb
       .getChild('mouseTimeDisplay')
       .getChild('timeTooltip');
 
+    // sometimes old 'right' rule is persisted and messes up styling
+    timeTooltip.el().style.removeProperty('right');
+
     timeTooltip.update = function (seekBarRect, seekBarPoint, time) {
       const values = Object.values(tsData);
       // $FlowIssue: mixed
@@ -153,6 +156,19 @@ function load(player: any, timestampData: TimestampData, duration: number) {
   });
 }
 
+function deleteHoverInformation(player) {
+  try {
+    const timeTooltip = player
+      .getChild('controlBar')
+      .getChild('progressControl')
+      .getChild('seekBar')
+      .getChild('mouseTimeDisplay')
+      .getChild('timeTooltip');
+
+    delete timeTooltip.update;
+  } catch {}
+}
+
 export function parseAndLoad(player: any, claim: StreamClaim) {
   console.assert(claim, 'null claim');
 
@@ -166,6 +182,8 @@ export function parseAndLoad(player: any, claim: StreamClaim) {
   if (tsData && duration) {
     load(player, tsData, duration);
     overrideHoverTooltip(player, tsData, duration);
+  } else {
+    deleteHoverInformation(player);
   }
 }
 
diff --git a/ui/component/viewers/videoViewer/internal/effects/use-autoplay-next.js b/ui/component/viewers/videoViewer/internal/effects/use-autoplay-next.js
index 4f11bda45..2c57d8a73 100644
--- a/ui/component/viewers/videoViewer/internal/effects/use-autoplay-next.js
+++ b/ui/component/viewers/videoViewer/internal/effects/use-autoplay-next.js
@@ -41,7 +41,7 @@ class AutoplayNextButton extends videojs.getComponent('Button') {
 }
 
 function addAutoplayNextButton(player: Player, toggleAutoplayNext: () => void, autoplayNext: boolean) {
-  const controlBar = player.getChild('controlBar');
+  const controlBar = player.controlBar;
 
   const autoplayButton = new AutoplayNextButton(
     player,
@@ -55,7 +55,9 @@ function addAutoplayNextButton(player: Player, toggleAutoplayNext: () => void, a
     autoplayNext
   );
 
-  controlBar.addChild(autoplayButton);
+  if (controlBar) {
+    controlBar.addChild(autoplayButton);
+  }
 }
 
 // ****************************************************************************
diff --git a/ui/component/viewers/videoViewer/internal/effects/use-theater-mode.js b/ui/component/viewers/videoViewer/internal/effects/use-theater-mode.js
index d9fafcfbe..aef545ea4 100644
--- a/ui/component/viewers/videoViewer/internal/effects/use-theater-mode.js
+++ b/ui/component/viewers/videoViewer/internal/effects/use-theater-mode.js
@@ -47,7 +47,11 @@ function addTheaterModeButton(player: Player, toggleVideoTheaterMode: () => void
     },
   });
 
-  controlBar.addChild(theaterMode);
+  if (controlBar) {
+    const existingTheatreModeButton = controlBar.getChild('TheaterModeButton');
+    if (existingTheatreModeButton) controlBar.removeChild('TheaterModeButton');
+    controlBar.addChild(theaterMode);
+  }
 }
 
 // ****************************************************************************
@@ -58,7 +62,7 @@ export default function useTheaterMode(playerRef: any, videoTheaterMode: boolean
   React.useEffect(() => {
     const player = playerRef.current;
     if (player) {
-      const controlBar = player.getChild('controlBar');
+      const controlBar = player.controlBar;
       const theaterButton = controlBar.getChild('TheaterModeButton');
       if (theaterButton) {
         theaterButton.controlText(videoTheaterMode ? __('Default Mode (t)') : __('Theater Mode (t)'));
diff --git a/ui/component/viewers/videoViewer/internal/play-next.js b/ui/component/viewers/videoViewer/internal/play-next.js
index ccb6901a7..12f176a58 100644
--- a/ui/component/viewers/videoViewer/internal/play-next.js
+++ b/ui/component/viewers/videoViewer/internal/play-next.js
@@ -11,7 +11,7 @@ class PlayNextButton extends videojs.getComponent('Button') {
 }
 
 export function addPlayNextButton(player: Player, playNextURI: () => void) {
-  const controlBar = player.getChild('controlBar');
+  const controlBar = player.controlBar;
 
   const playNext = new PlayNextButton(player, {
     name: 'PlayNextButton',
@@ -21,5 +21,7 @@ export function addPlayNextButton(player: Player, playNextURI: () => void) {
     },
   });
 
-  controlBar.addChild(playNext, {}, 1);
+  if (controlBar) {
+    controlBar.addChild(playNext, {}, 1);
+  }
 }
diff --git a/ui/component/viewers/videoViewer/internal/play-previous.js b/ui/component/viewers/videoViewer/internal/play-previous.js
index 11502e7da..20c3f3215 100644
--- a/ui/component/viewers/videoViewer/internal/play-previous.js
+++ b/ui/component/viewers/videoViewer/internal/play-previous.js
@@ -11,7 +11,7 @@ class PlayPreviousButton extends videojs.getComponent('Button') {
 }
 
 export function addPlayPreviousButton(player: Player, playPreviousURI: () => void) {
-  const controlBar = player.getChild('controlBar');
+  const controlBar = player.controlBar;
 
   const playPrevious = new PlayPreviousButton(player, {
     name: 'PlayPreviousButton',
@@ -21,5 +21,7 @@ export function addPlayPreviousButton(player: Player, playPreviousURI: () => voi
     },
   });
 
-  controlBar.addChild(playPrevious, {}, 0);
+  if (controlBar) {
+    controlBar.addChild(playPrevious, {}, 0);
+  }
 }
diff --git a/ui/component/viewers/videoViewer/internal/plugins/canAutoplay.js b/ui/component/viewers/videoViewer/internal/plugins/canAutoplay.js
deleted file mode 100644
index 14fc19c09..000000000
--- a/ui/component/viewers/videoViewer/internal/plugins/canAutoplay.js
+++ /dev/null
@@ -1,2086 +0,0 @@
-var $jscomp = $jscomp || {};
-$jscomp.scope = {};
-$jscomp.owns = function (a, c) {
-  return Object.prototype.hasOwnProperty.call(a, c);
-};
-$jscomp.ASSUME_ES5 = !1;
-$jscomp.ASSUME_NO_NATIVE_MAP = !1;
-$jscomp.ASSUME_NO_NATIVE_SET = !1;
-$jscomp.defineProperty =
-  $jscomp.ASSUME_ES5 || 'function' == typeof Object.defineProperties
-    ? Object.defineProperty
-    : function (a, c, e) {
-        a != Array.prototype && a != Object.prototype && (a[c] = e.value);
-      };
-$jscomp.getGlobal = function (a) {
-  return 'undefined' != typeof window && window === a ? a : 'undefined' != typeof global && null != global ? global : a;
-};
-$jscomp.global = $jscomp.getGlobal(this);
-$jscomp.polyfill = function (a, c, e, f) {
-  if (c) {
-    e = $jscomp.global;
-    a = a.split('.');
-    for (f = 0; f < a.length - 1; f++) {
-      var b = a[f];
-      b in e || (e[b] = {});
-      e = e[b];
-    }
-    a = a[a.length - 1];
-    f = e[a];
-    c = c(f);
-    c != f && null != c && $jscomp.defineProperty(e, a, { configurable: !0, writable: !0, value: c });
-  }
-};
-$jscomp.polyfill(
-  'Object.assign',
-  function (a) {
-    return a
-      ? a
-      : function (a, e) {
-          for (var c = 1; c < arguments.length; c++) {
-            var b = arguments[c];
-            if (b) for (var g in b) $jscomp.owns(b, g) && (a[g] = b[g]);
-          }
-          return a;
-        };
-  },
-  'es6',
-  'es3'
-);
-$jscomp.SYMBOL_PREFIX = 'jscomp_symbol_';
-$jscomp.initSymbol = function () {
-  $jscomp.initSymbol = function () {};
-  $jscomp.global.Symbol || ($jscomp.global.Symbol = $jscomp.Symbol);
-};
-$jscomp.Symbol = (function () {
-  var a = 0;
-  return function (c) {
-    return $jscomp.SYMBOL_PREFIX + (c || '') + a++;
-  };
-})();
-$jscomp.initSymbolIterator = function () {
-  $jscomp.initSymbol();
-  var a = $jscomp.global.Symbol.iterator;
-  a || (a = $jscomp.global.Symbol.iterator = $jscomp.global.Symbol('iterator'));
-  'function' != typeof Array.prototype[a] &&
-    $jscomp.defineProperty(Array.prototype, a, {
-      configurable: !0,
-      writable: !0,
-      value: function () {
-        return $jscomp.arrayIterator(this);
-      },
-    });
-  $jscomp.initSymbolIterator = function () {};
-};
-$jscomp.arrayIterator = function (a) {
-  var c = 0;
-  return $jscomp.iteratorPrototype(function () {
-    return c < a.length ? { done: !1, value: a[c++] } : { done: !0 };
-  });
-};
-$jscomp.iteratorPrototype = function (a) {
-  $jscomp.initSymbolIterator();
-  a = { next: a };
-  a[$jscomp.global.Symbol.iterator] = function () {
-    return this;
-  };
-  return a;
-};
-$jscomp.makeIterator = function (a) {
-  $jscomp.initSymbolIterator();
-  var c = a[Symbol.iterator];
-  return c ? c.call(a) : $jscomp.arrayIterator(a);
-};
-$jscomp.FORCE_POLYFILL_PROMISE = !1;
-$jscomp.polyfill(
-  'Promise',
-  function (a) {
-    function c() {
-      this.batch_ = null;
-    }
-    function e(d) {
-      return d instanceof b
-        ? d
-        : new b(function (a, b) {
-            a(d);
-          });
-    }
-    if (a && !$jscomp.FORCE_POLYFILL_PROMISE) return a;
-    c.prototype.asyncExecute = function (d) {
-      null == this.batch_ && ((this.batch_ = []), this.asyncExecuteBatch_());
-      this.batch_.push(d);
-      return this;
-    };
-    c.prototype.asyncExecuteBatch_ = function () {
-      var d = this;
-      this.asyncExecuteFunction(function () {
-        d.executeBatch_();
-      });
-    };
-    var f = $jscomp.global.setTimeout;
-    c.prototype.asyncExecuteFunction = function (d) {
-      f(d, 0);
-    };
-    c.prototype.executeBatch_ = function () {
-      for (; this.batch_ && this.batch_.length; ) {
-        var d = this.batch_;
-        this.batch_ = [];
-        for (var a = 0; a < d.length; ++a) {
-          var b = d[a];
-          delete d[a];
-          try {
-            b();
-          } catch (h) {
-            this.asyncThrow_(h);
-          }
-        }
-      }
-      this.batch_ = null;
-    };
-    c.prototype.asyncThrow_ = function (d) {
-      this.asyncExecuteFunction(function () {
-        throw d;
-      });
-    };
-    var b = function (d) {
-      this.state_ = 0;
-      this.result_ = void 0;
-      this.onSettledCallbacks_ = [];
-      var a = this.createResolveAndReject_();
-      try {
-        d(a.resolve, a.reject);
-      } catch (l) {
-        a.reject(l);
-      }
-    };
-    b.prototype.createResolveAndReject_ = function () {
-      function a(a) {
-        return function (d) {
-          c || ((c = !0), a.call(b, d));
-        };
-      }
-      var b = this,
-        c = !1;
-      return { resolve: a(this.resolveTo_), reject: a(this.reject_) };
-    };
-    b.prototype.resolveTo_ = function (a) {
-      if (a === this) this.reject_(new TypeError('A Promise cannot resolve to itself'));
-      else if (a instanceof b) this.settleSameAsPromise_(a);
-      else {
-        a: switch (typeof a) {
-          case 'object':
-            var d = null != a;
-            break a;
-          case 'function':
-            d = !0;
-            break a;
-          default:
-            d = !1;
-        }
-        d ? this.resolveToNonPromiseObj_(a) : this.fulfill_(a);
-      }
-    };
-    b.prototype.resolveToNonPromiseObj_ = function (a) {
-      var b = void 0;
-      try {
-        b = a.then;
-      } catch (l) {
-        this.reject_(l);
-        return;
-      }
-      'function' == typeof b ? this.settleSameAsThenable_(b, a) : this.fulfill_(a);
-    };
-    b.prototype.reject_ = function (a) {
-      this.settle_(2, a);
-    };
-    b.prototype.fulfill_ = function (a) {
-      this.settle_(1, a);
-    };
-    b.prototype.settle_ = function (a, b) {
-      if (0 != this.state_)
-        throw Error(('Cannot settle(' + a + ', ' + b) | ('): Promise already settled in state' + this.state_));
-      this.state_ = a;
-      this.result_ = b;
-      this.executeOnSettledCallbacks_();
-    };
-    b.prototype.executeOnSettledCallbacks_ = function () {
-      if (null != this.onSettledCallbacks_) {
-        for (var a = this.onSettledCallbacks_, b = 0; b < a.length; ++b) a[b].call(), (a[b] = null);
-        this.onSettledCallbacks_ = null;
-      }
-    };
-    var g = new c();
-    b.prototype.settleSameAsPromise_ = function (a) {
-      var b = this.createResolveAndReject_();
-      a.callWhenSettled_(b.resolve, b.reject);
-    };
-    b.prototype.settleSameAsThenable_ = function (a, b) {
-      var c = this.createResolveAndReject_();
-      try {
-        a.call(b, c.resolve, c.reject);
-      } catch (h) {
-        c.reject(h);
-      }
-    };
-    b.prototype.then = function (a, c) {
-      function d(a, b) {
-        return 'function' == typeof a
-          ? function (b) {
-              try {
-                h(a(b));
-              } catch (m) {
-                e(m);
-              }
-            }
-          : b;
-      }
-      var h,
-        e,
-        g = new b(function (a, b) {
-          h = a;
-          e = b;
-        });
-      this.callWhenSettled_(d(a, h), d(c, e));
-      return g;
-    };
-    b.prototype.catch = function (a) {
-      return this.then(void 0, a);
-    };
-    b.prototype.callWhenSettled_ = function (a, b) {
-      function c() {
-        switch (d.state_) {
-          case 1:
-            a(d.result_);
-            break;
-          case 2:
-            b(d.result_);
-            break;
-          default:
-            throw Error('Unexpected state: ' + d.state_);
-        }
-      }
-      var d = this;
-      null == this.onSettledCallbacks_
-        ? g.asyncExecute(c)
-        : this.onSettledCallbacks_.push(function () {
-            g.asyncExecute(c);
-          });
-    };
-    b.resolve = e;
-    b.reject = function (a) {
-      return new b(function (b, c) {
-        c(a);
-      });
-    };
-    b.race = function (a) {
-      return new b(function (b, c) {
-        for (var d = $jscomp.makeIterator(a), g = d.next(); !g.done; g = d.next()) e(g.value).callWhenSettled_(b, c);
-      });
-    };
-    b.all = function (a) {
-      var c = $jscomp.makeIterator(a),
-        d = c.next();
-      return d.done
-        ? e([])
-        : new b(function (a, b) {
-            function g(b) {
-              return function (c) {
-                f[b] = c;
-                h--;
-                0 == h && a(f);
-              };
-            }
-            var f = [],
-              h = 0;
-            do f.push(void 0), h++, e(d.value).callWhenSettled_(g(f.length - 1), b), (d = c.next());
-            while (!d.done);
-          });
-    };
-    return b;
-  },
-  'es6',
-  'es3'
-);
-(function (a, c) {
-  'object' === typeof exports && 'undefined' !== typeof module
-    ? (module.exports = c())
-    : 'function' === typeof define && define.amd
-    ? define(c)
-    : (a.canAutoplay = c());
-})(this, function () {
-  function a(a) {
-    return Object.assign({ muted: !1, timeout: 250, inline: !1 }, a);
-  }
-  function c(a, c) {
-    var b = a.muted,
-      e = a.timeout;
-    a = a.inline;
-    c = c();
-    var f = c.element;
-    c = c.source;
-    var h = void 0,
-      g = void 0,
-      k = void 0;
-    f.muted = b;
-    !0 === b && f.setAttribute('muted', 'muted');
-    !0 === a && f.setAttribute('playsinline', 'playsinline');
-    f.src = c;
-    return new Promise(function (a) {
-      h = f.play();
-      g = setTimeout(function () {
-        k(!1, Error('Timeout ' + e + ' ms has been reached'));
-      }, e);
-      k = function (b) {
-        var c = 1 < arguments.length && void 0 !== arguments[1] ? arguments[1] : null;
-        clearTimeout(g);
-        a({ result: b, error: c });
-      };
-      void 0 !== h
-        ? h
-            .then(function () {
-              return k(!0);
-            })
-            .catch(function (a) {
-              return k(!1, a);
-            })
-        : k(!0);
-    });
-  }
-  var e = new Blob(
-      [
-        new Uint8Array([
-          255,
-          227,
-          24,
-          196,
-          0,
-          0,
-          0,
-          3,
-          72,
-          1,
-          64,
-          0,
-          0,
-          4,
-          132,
-          16,
-          31,
-          227,
-          192,
-          225,
-          76,
-          255,
-          67,
-          12,
-          255,
-          221,
-          27,
-          255,
-          228,
-          97,
-          73,
-          63,
-          255,
-          195,
-          131,
-          69,
-          192,
-          232,
-          223,
-          255,
-          255,
-          207,
-          102,
-          239,
-          255,
-          255,
-          255,
-          101,
-          158,
-          206,
-          70,
-          20,
-          59,
-          255,
-          254,
-          95,
-          70,
-          149,
-          66,
-          4,
-          16,
-          128,
-          0,
-          2,
-          2,
-          32,
-          240,
-          138,
-          255,
-          36,
-          106,
-          183,
-          255,
-          227,
-          24,
-          196,
-          59,
-          11,
-          34,
-          62,
-          80,
-          49,
-          135,
-          40,
-          0,
-          253,
-          29,
-          191,
-          209,
-          200,
-          141,
-          71,
-          7,
-          255,
-          252,
-          152,
-          74,
-          15,
-          130,
-          33,
-          185,
-          6,
-          63,
-          255,
-          252,
-          195,
-          70,
-          203,
-          86,
-          53,
-          15,
-          255,
-          255,
-          247,
-          103,
-          76,
-          121,
-          64,
-          32,
-          47,
-          255,
-          34,
-          227,
-          194,
-          209,
-          138,
-          76,
-          65,
-          77,
-          69,
-          51,
-          46,
-          57,
-          55,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          255,
-          227,
-          24,
-          196,
-          73,
-          13,
-          153,
-          210,
-          100,
-          81,
-          135,
-          56,
-          0,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-          170,
-        ]),
-      ],
-      { type: 'audio/mpeg' }
-    ),
-    f = new Blob(
-      [
-        new Uint8Array([
-          0,
-          0,
-          0,
-          28,
-          102,
-          116,
-          121,
-          112,
-          105,
-          115,
-          111,
-          109,
-          0,
-          0,
-          2,
-          0,
-          105,
-          115,
-          111,
-          109,
-          105,
-          115,
-          111,
-          50,
-          109,
-          112,
-          52,
-          49,
-          0,
-          0,
-          0,
-          8,
-          102,
-          114,
-          101,
-          101,
-          0,
-          0,
-          2,
-          239,
-          109,
-          100,
-          97,
-          116,
-          33,
-          16,
-          5,
-          32,
-          164,
-          27,
-          255,
-          192,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          55,
-          167,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          112,
-          33,
-          16,
-          5,
-          32,
-          164,
-          27,
-          255,
-          192,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          55,
-          167,
-          128,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          112,
-          0,
-          0,
-          2,
-          194,
-          109,
-          111,
-          111,
-          118,
-          0,
-          0,
-          0,
-          108,
-          109,
-          118,
-          104,
-          100,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          3,
-          232,
-          0,
-          0,
-          0,
-          47,
-          0,
-          1,
-          0,
-          0,
-          1,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          1,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          1,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          64,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          3,
-          0,
-          0,
-          1,
-          236,
-          116,
-          114,
-          97,
-          107,
-          0,
-          0,
-          0,
-          92,
-          116,
-          107,
-          104,
-          100,
-          0,
-          0,
-          0,
-          3,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          2,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          47,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          1,
-          1,
-          0,
-          0,
-          0,
-          0,
-          1,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          1,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          64,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          36,
-          101,
-          100,
-          116,
-          115,
-          0,
-          0,
-          0,
-          28,
-          101,
-          108,
-          115,
-          116,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          1,
-          0,
-          0,
-          0,
-          47,
-          0,
-          0,
-          0,
-          0,
-          0,
-          1,
-          0,
-          0,
-          0,
-          0,
-          1,
-          100,
-          109,
-          100,
-          105,
-          97,
-          0,
-          0,
-          0,
-          32,
-          109,
-          100,
-          104,
-          100,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          172,
-          68,
-          0,
-          0,
-          8,
-          0,
-          85,
-          196,
-          0,
-          0,
-          0,
-          0,
-          0,
-          45,
-          104,
-          100,
-          108,
-          114,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          115,
-          111,
-          117,
-          110,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          83,
-          111,
-          117,
-          110,
-          100,
-          72,
-          97,
-          110,
-          100,
-          108,
-          101,
-          114,
-          0,
-          0,
-          0,
-          1,
-          15,
-          109,
-          105,
-          110,
-          102,
-          0,
-          0,
-          0,
-          16,
-          115,
-          109,
-          104,
-          100,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          36,
-          100,
-          105,
-          110,
-          102,
-          0,
-          0,
-          0,
-          28,
-          100,
-          114,
-          101,
-          102,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          1,
-          0,
-          0,
-          0,
-          12,
-          117,
-          114,
-          108,
-          32,
-          0,
-          0,
-          0,
-          1,
-          0,
-          0,
-          0,
-          211,
-          115,
-          116,
-          98,
-          108,
-          0,
-          0,
-          0,
-          103,
-          115,
-          116,
-          115,
-          100,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          1,
-          0,
-          0,
-          0,
-          87,
-          109,
-          112,
-          52,
-          97,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          1,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          2,
-          0,
-          16,
-          0,
-          0,
-          0,
-          0,
-          172,
-          68,
-          0,
-          0,
-          0,
-          0,
-          0,
-          51,
-          101,
-          115,
-          100,
-          115,
-          0,
-          0,
-          0,
-          0,
-          3,
-          128,
-          128,
-          128,
-          34,
-          0,
-          2,
-          0,
-          4,
-          128,
-          128,
-          128,
-          20,
-          64,
-          21,
-          0,
-          0,
-          0,
-          0,
-          1,
-          244,
-          0,
-          0,
-          1,
-          243,
-          249,
-          5,
-          128,
-          128,
-          128,
-          2,
-          18,
-          16,
-          6,
-          128,
-          128,
-          128,
-          1,
-          2,
-          0,
-          0,
-          0,
-          24,
-          115,
-          116,
-          116,
-          115,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          1,
-          0,
-          0,
-          0,
-          2,
-          0,
-          0,
-          4,
-          0,
-          0,
-          0,
-          0,
-          28,
-          115,
-          116,
-          115,
-          99,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          1,
-          0,
-          0,
-          0,
-          1,
-          0,
-          0,
-          0,
-          2,
-          0,
-          0,
-          0,
-          1,
-          0,
-          0,
-          0,
-          28,
-          115,
-          116,
-          115,
-          122,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          2,
-          0,
-          0,
-          1,
-          115,
-          0,
-          0,
-          1,
-          116,
-          0,
-          0,
-          0,
-          20,
-          115,
-          116,
-          99,
-          111,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          1,
-          0,
-          0,
-          0,
-          44,
-          0,
-          0,
-          0,
-          98,
-          117,
-          100,
-          116,
-          97,
-          0,
-          0,
-          0,
-          90,
-          109,
-          101,
-          116,
-          97,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          33,
-          104,
-          100,
-          108,
-          114,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          109,
-          100,
-          105,
-          114,
-          97,
-          112,
-          112,
-          108,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          45,
-          105,
-          108,
-          115,
-          116,
-          0,
-          0,
-          0,
-          37,
-          169,
-          116,
-          111,
-          111,
-          0,
-          0,
-          0,
-          29,
-          100,
-          97,
-          116,
-          97,
-          0,
-          0,
-          0,
-          1,
-          0,
-          0,
-          0,
-          0,
-          76,
-          97,
-          118,
-          102,
-          53,
-          54,
-          46,
-          52,
-          48,
-          46,
-          49,
-          48,
-          49,
-        ]),
-      ],
-      { type: 'video/mp4' }
-    );
-  return {
-    audio: function (b) {
-      b = a(b);
-      return c(b, function () {
-        return { element: document.createElement('audio'), source: URL.createObjectURL(e) };
-      });
-    },
-    video: function (b) {
-      b = a(b);
-      return c(b, function () {
-        return { element: document.createElement('video'), source: URL.createObjectURL(f) };
-      });
-    },
-  };
-});
diff --git a/ui/component/viewers/videoViewer/internal/plugins/videojs-hls-quality-selector/plugin.js b/ui/component/viewers/videoViewer/internal/plugins/videojs-hls-quality-selector/plugin.js
index ce9b4fdca..2eca32632 100644
--- a/ui/component/viewers/videoViewer/internal/plugins/videojs-hls-quality-selector/plugin.js
+++ b/ui/component/viewers/videoViewer/internal/plugins/videojs-hls-quality-selector/plugin.js
@@ -277,9 +277,24 @@ class HlsQualitySelectorPlugin {
 
   swapSrcTo(mode = QUALITY_OPTIONS.ORIGINAL) {
     const currentTime = this.player.currentTime();
+    const isAlreadyPlaying = !this.player.paused();
     this.player.src(mode === 'vhs' ? this.player.claimSrcVhs : this.player.claimSrcOriginal);
+
+    // run this when new source is loaded
+    this.player.one('loadstart', () => {
+      // fixes a bug where when reusing vjs instance the player doesn't play
+      // when it should and the control bar is hidden when changing quality
+      this.player.currentTime(currentTime);
+      if (isAlreadyPlaying) {
+        this.player.play();
+      } else {
+        // show control bar
+        this.player.addClass('vjs-has-started');
+        this.player.addClass('vjs-playing');
+        this.player.addClass('vjs-paused');
+      }
+    });
     this.player.load();
-    this.player.currentTime(currentTime);
 
     console.assert(mode === 'vhs' || mode === QUALITY_OPTIONS.ORIGINAL, 'Unexpected input');
   }
diff --git a/ui/component/viewers/videoViewer/internal/plugins/videojs-mobile-ui/plugin.js b/ui/component/viewers/videoViewer/internal/plugins/videojs-mobile-ui/plugin.js
index 879b5a6e9..f6f4fdfca 100644
--- a/ui/component/viewers/videoViewer/internal/plugins/videojs-mobile-ui/plugin.js
+++ b/ui/component/viewers/videoViewer/internal/plugins/videojs-mobile-ui/plugin.js
@@ -106,11 +106,13 @@ const onPlayerReady = (player, options) => {
     }
   };
 
-  if (videojs.browser.IS_IOS) {
-    window.addEventListener('orientationchange', rotationHandler);
-  } else {
-    // addEventListener('orientationchange') is not a user interaction on Android
-    screen.orientation.onchange = rotationHandler;
+  if (player.options.enterOnRotate) {
+    if (videojs.browser.IS_IOS) {
+      window.addEventListener('orientationchange', rotationHandler);
+    } else {
+      // addEventListener('orientationchange') is not a user interaction on Android
+      screen.orientation.onchange = rotationHandler;
+    }
   }
 
   player.on('ended', (_) => {
@@ -149,8 +151,7 @@ const onPlayerReady = (player, options) => {
  *           Never shows if the endscreen plugin is present
  */
 function mobileUi(options) {
-  // if (videojs.browser.IS_ANDROID || videojs.browser.IS_IOS) {
-  if (videojs.browser.IS_ANDROID) {
+  if (videojs.browser.IS_ANDROID || videojs.browser.IS_IOS) {
     this.ready(() => onPlayerReady(this, videojs.mergeOptions(defaults, options)));
   }
 }
diff --git a/ui/component/viewers/videoViewer/internal/plugins/videojs-recsys/plugin.js b/ui/component/viewers/videoViewer/internal/plugins/videojs-recsys/plugin.js
index 31dcf73b6..29a052387 100644
--- a/ui/component/viewers/videoViewer/internal/plugins/videojs-recsys/plugin.js
+++ b/ui/component/viewers/videoViewer/internal/plugins/videojs-recsys/plugin.js
@@ -66,7 +66,7 @@ class RecsysPlugin extends Component {
     player.on('seeked', (event) => this.onSeeked(event));
 
     // Event trigger to send recsys event
-    player.on('dispose', (event) => this.onDispose(event));
+    player.on('playerClosed', (event) => this.onDispose(event));
   }
 
   onPlay(event) {
diff --git a/ui/component/viewers/videoViewer/internal/videojs-events.jsx b/ui/component/viewers/videoViewer/internal/videojs-events.jsx
index ac019ae5f..002df3393 100644
--- a/ui/component/viewers/videoViewer/internal/videojs-events.jsx
+++ b/ui/component/viewers/videoViewer/internal/videojs-events.jsx
@@ -113,8 +113,8 @@ const VideoJsEvents = ({
     const player = playerRef.current;
     updateMediaSession();
 
-    const bigPlayButton = document.querySelector('.vjs-big-play-button');
-    if (bigPlayButton) bigPlayButton.style.setProperty('display', 'none');
+    // $FlowIssue
+    player.bigPlayButton?.hide();
 
     if (player && (player.muted() || player.volume() === 0)) {
       // The css starts as "hidden". We make it visible here without
@@ -222,6 +222,13 @@ const VideoJsEvents = ({
     }
   }
 
+  function removeControlBar() {
+    setTimeout(function () {
+      window.player.controlBar.el().classList.remove('vjs-transitioning-video');
+      window.player.controlBar.show();
+    }, 1000 * 2); // wait 2 seconds to hide control bar
+  }
+
   useEffect(() => {
     const player = playerRef.current;
     if (replay && player) {
@@ -240,17 +247,23 @@ const VideoJsEvents = ({
     // used for tracking buffering for watchman
     player.on('tracking:buffered', doTrackingBuffered);
 
-    // hide forcing control bar show
-    player.on('canplaythrough', function () {
-      setTimeout(function () {
-        // $FlowFixMe
-        const vjsControlBar = document.querySelector('.vjs-control-bar');
-        if (vjsControlBar) vjsControlBar.style.removeProperty('opacity');
-      }, 1000 * 3); // wait 3 seconds to hit control bar
+    player.on('loadstart', function () {
+      if (embedded) {
+        // $FlowIssue
+        player.bigPlayButton?.show();
+      }
     });
-    player.on('playing', function () {
-      // $FlowFixMe
-      document.querySelector('.vjs-big-play-button').style.setProperty('display', 'none', 'important');
+
+    player.on('playing', removeControlBar);
+    player.on('playerClosed', () => {
+      player.off('play', onInitialPlay);
+      player.off('volumechange', onVolumeChange);
+      player.off('error', onError);
+      // custom tracking plugin, event used for watchman data, and marking view/getting rewards
+      player.off('tracking:firstplay', doTrackingFirstPlay);
+      // used for tracking buffering for watchman
+      player.off('tracking:buffered', doTrackingBuffered);
+      player.off('playing', removeControlBar);
     });
     // player.on('ended', onEnded);
 
diff --git a/ui/component/viewers/videoViewer/internal/videojs-functions.jsx b/ui/component/viewers/videoViewer/internal/videojs-functions.jsx
index 1e38edf00..e7d5ac8a1 100644
--- a/ui/component/viewers/videoViewer/internal/videojs-functions.jsx
+++ b/ui/component/viewers/videoViewer/internal/videojs-functions.jsx
@@ -8,7 +8,7 @@ const VideoJsFunctions = ({ isAudio }: { isAudio: boolean }) => {
     // This seems like a poor way to generate the DOM for video.js
     const wrapper = document.createElement('div');
     wrapper.setAttribute('data-vjs-player', 'true');
-    const el = document.createElement(isAudio ? 'audio' : 'video');
+    const el = document.createElement('video');
     el.className = 'video-js vjs-big-play-centered ';
     wrapper.appendChild(el);
 
diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx
index a3df0f560..3787be691 100644
--- a/ui/component/viewers/videoViewer/internal/videojs.jsx
+++ b/ui/component/viewers/videoViewer/internal/videojs.jsx
@@ -29,8 +29,6 @@ import { useIsMobile } from 'effects/use-screensize';
 import { platform } from 'util/platform';
 import usePersistedState from 'effects/use-persisted-state';
 
-const canAutoplay = require('./plugins/canAutoplay');
-
 require('@silvermine/videojs-chromecast')(videojs);
 require('@silvermine/videojs-airplay')(videojs);
 
@@ -46,7 +44,11 @@ export type Player = {
   hlsQualitySelector: ?any,
   i18n: (any) => void,
   // -- base videojs --
-  controlBar: { addChild: (string, any) => void },
+  controlBar: {
+    addChild: (string | any, ?any, ?number) => void,
+    getChild: (string) => void,
+    removeChild: (string) => void,
+  },
   loadingSpinner: any,
   autoplay: (any) => boolean,
   tech: (?boolean) => { vhs: ?any },
@@ -60,6 +62,7 @@ export type Player = {
   isFullscreen: () => boolean,
   muted: (?boolean) => boolean,
   on: (string, (any) => void) => void,
+  off: (string, (any) => void) => void,
   one: (string, (any) => void) => void,
   play: () => Promise<any>,
   playbackRate: (?number) => number,
@@ -103,7 +106,6 @@ type Props = {
   activeLivestreamForChannel: any,
   doToast: ({ message: string, linkText: string, linkTarget: string }) => void,
 };
-const VIDEOJS_CONTROL_BAR_CLASS = 'ControlBar';
 const VIDEOJS_VOLUME_PANEL_CLASS = 'VolumePanel';
 
 const IS_IOS = platform.isIOS();
@@ -242,7 +244,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
       liveTolerance: 10,
     },
     inactivityTimeout: 2000,
-    autoplay: autoplay,
     muted: startMuted,
     poster: poster, // thumb looks bad in app, and if autoplay, flashing poster is annoying
     plugins: { eventTracking: true, overlay: OVERLAY.OVERLAY_DATA },
@@ -263,11 +264,12 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     suppressNotSupportedError: true,
   };
 
+  // TODO: would be nice to pull this out into functions file
   // Initialize video.js
-  function initializeVideoPlayer(el, canAutoplayVideo) {
-    if (!el) return;
+  function initializeVideoPlayer(domElement) {
+    if (!domElement) return;
 
-    const vjs = videojs(el, videoJsOptions, async () => {
+    const vjs = videojs(domElement, videoJsOptions, async () => {
       const player = playerRef.current;
       const adapter = new playerjs.VideoJSAdapter(player);
 
@@ -276,8 +278,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
 
       // runAds(internalFeatureEnabled, allowPreRoll, player, embedded);
 
-      initializeEvents();
-
       // Replace volume bar with custom LBRY volume bar
       LbryVolumeBarClass.replaceExisting(player);
 
@@ -285,17 +285,17 @@ export default React.memo<Props>(function VideoJs(props: Props) {
       player.reloadSourceOnError({ errorInterval: 10 });
 
       // Initialize mobile UI.
-      player.mobileUi();
+      player.mobileUi({
+        fullscreen: {
+          enterOnRotate: false,
+        },
+        touchControls: {
+          seekSeconds: 10,
+        },
+      });
 
       player.i18n();
 
-      if (!embedded) {
-        window.player.bigPlayButton && window.player.bigPlayButton.hide();
-      } else {
-        const bigPlayButton = document.querySelector('.vjs-big-play-button');
-        if (bigPlayButton) bigPlayButton.style.setProperty('display', 'block', 'important');
-      }
-
       // Add quality selector to player
       if (showQualitySelector) {
         player.hlsQualitySelector({
@@ -320,30 +320,11 @@ export default React.memo<Props>(function VideoJs(props: Props) {
       // set playsinline for mobile
       player.children_[0].setAttribute('playsinline', '');
 
-      if (canAutoplayVideo === true) {
-        // show waiting spinner as video is loading
-        player.addClass('vjs-waiting');
-        // document.querySelector('.vjs-big-play-button').style.setProperty('display', 'none', 'important');
-      } else {
-        // $FlowFixMe
-        document.querySelector('.vjs-big-play-button').style.setProperty('display', 'block', 'important');
-      }
+      // immediately show control bar while video is loading
+      player.userActive(true);
 
-      // I think this is a callback function
-      const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
-
-      onPlayerReady(player, videoNode);
       adapter.ready();
 
-      // sometimes video doesnt start properly, this addresses the edge case
-      if (autoplay) {
-        const videoDiv = window.player.children_[0];
-        if (videoDiv) {
-          videoDiv.click();
-        }
-        window.player.userActive(true);
-      }
-
       Chromecast.initialize(player);
       player.airPlay();
     });
@@ -366,26 +347,72 @@ export default React.memo<Props>(function VideoJs(props: Props) {
   // This lifecycle hook is only called once (on mount), or when `isAudio` or `source` changes.
   useEffect(() => {
     (async function () {
-      let canAutoplayVideo = await canAutoplay.video({ timeout: 2000, inline: true });
-      canAutoplayVideo = canAutoplayVideo.result === true;
+      let vjsPlayer;
+      const vjsParent = document.querySelector('.video-js-parent');
 
-      const vjsElement = createVideoPlayerDOM(containerRef.current);
-      const vjsPlayer = initializeVideoPlayer(vjsElement, canAutoplayVideo);
-      if (!vjsPlayer) {
-        return;
+      let canUseOldPlayer = window.oldSavedDiv && vjsParent;
+      const isLivestream = isLivestreamClaim && userClaimId;
+      // make an additional check and reinstantiate if switching between player types
+      // switching between types on iOS causes issues and this is a faster solution
+      if (vjsParent && window.player) {
+        const oldVideoType = window.player.isLivestream ? 'livestream' : 'video';
+        const switchFromLivestreamToVideo = oldVideoType === 'livestream' && !isLivestream;
+        const switchFromVideoToLivestream = oldVideoType === 'video' && isLivestream;
+        if (switchFromLivestreamToVideo || switchFromVideoToLivestream) {
+          canUseOldPlayer = false;
+          window.player.dispose();
+        }
       }
 
-      // Add reference to player to global scope
-      window.player = vjsPlayer;
+      // initialize videojs if it hasn't been done yet
+      if (!canUseOldPlayer) {
+        const vjsElement = createVideoPlayerDOM(containerRef.current);
+        vjsPlayer = initializeVideoPlayer(vjsElement);
+        if (!vjsPlayer) {
+          return;
+        }
+
+        // Add reference to player to global scope
+        window.player = vjsPlayer;
+      } else {
+        vjsPlayer = window.player;
+      }
+
+      // Add recsys plugin
+      if (shareTelemetry) {
+        vjsPlayer.recsys.options_ = {
+          videoId: claimId,
+          userId: userId,
+          embedded: embedded,
+        };
+
+        vjsPlayer.recsys.lastTimeUpdate = null;
+        vjsPlayer.recsys.currentTimeUpdate = null;
+        vjsPlayer.recsys.inPause = false;
+        vjsPlayer.recsys.watchedDuration = { total: 0, lastTimestamp: -1 };
+      }
+
+      if (!embedded) {
+        vjsPlayer.bigPlayButton && window.player.bigPlayButton.hide();
+      } else {
+        // $FlowIssue
+        vjsPlayer.bigPlayButton?.show();
+      }
+
+      // I think this is a callback function
+      const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
+
+      // add theatre and autoplay next button and initiate player events
+      onPlayerReady(vjsPlayer, videoNode);
 
       // Set reference in component state
       playerRef.current = vjsPlayer;
 
+      initializeEvents();
+
       // volume control div, used for changing volume when scrolled over
-      volumePanelRef.current = playerRef.current
-        .getChild(VIDEOJS_CONTROL_BAR_CLASS)
-        .getChild(VIDEOJS_VOLUME_PANEL_CLASS)
-        .el();
+      // $FlowIssue
+      volumePanelRef.current = playerRef.current?.controlBar?.getChild(VIDEOJS_VOLUME_PANEL_CLASS)?.el();
 
       const keyDownHandler = createKeyDownShortcutsHandler(playerRef, containerRef);
       const videoScrollHandler = createVideoScrollShortcutsHandler(playerRef, containerRef);
@@ -399,12 +426,15 @@ export default React.memo<Props>(function VideoJs(props: Props) {
       videoScrollHandlerRef.current = videoScrollHandler;
       volumePanelScrollHandlerRef.current = volumePanelHandler;
 
-      const controlBar = document.querySelector('.vjs-control-bar');
-      if (controlBar) {
-        controlBar.style.setProperty('opacity', '1', 'important');
-      }
+      // $FlowIssue
+      vjsPlayer.controlBar?.show();
 
-      if (isLivestreamClaim && userClaimId) {
+      vjsPlayer.poster(poster);
+
+      let contentUrl;
+      // TODO: pull this function into videojs-functions
+      // determine which source to use and load it
+      if (isLivestream) {
         vjsPlayer.isLivestream = true;
         vjsPlayer.addClass('livestreamPlayer');
         vjsPlayer.src({ type: 'application/x-mpegURL', src: livestreamVideoUrl });
@@ -421,23 +451,81 @@ export default React.memo<Props>(function VideoJs(props: Props) {
           vjsPlayer.claimSrcVhs = { type: 'application/x-mpegURL', src: response.url };
           vjsPlayer.src(vjsPlayer.claimSrcVhs);
 
-          const trimmedPath = response.url.substring(0, response.url.lastIndexOf('/'));
-          const thumbnailPath = trimmedPath + '/stream_sprite.vtt';
-
-          // disable thumbnails on mobile for now
-          if (!IS_MOBILE) {
-            vjsPlayer.vttThumbnails({
-              src: thumbnailPath,
-              showTimestamp: true,
-            });
-          }
+          contentUrl = response.url;
         } else {
           vjsPlayer.src(vjsPlayer.claimSrcOriginal);
         }
       }
 
+      // bugfix thumbnails showing up if new video doesn't have them
+      if (typeof vjsPlayer.vttThumbnails.detach === 'function') {
+        vjsPlayer.vttThumbnails.detach();
+      }
+
+      // initialize hover thumbnails
+      if (contentUrl) {
+        const trimmedPath = contentUrl.substring(0, contentUrl.lastIndexOf('/'));
+        const thumbnailPath = trimmedPath + '/stream_sprite.vtt';
+
+        // progress bar hover thumbnails
+        if (!IS_MOBILE) {
+          // if src is a function, it's already been initialized
+          if (typeof vjsPlayer.vttThumbnails.src === 'function') {
+            vjsPlayer.vttThumbnails.src(thumbnailPath);
+          } else {
+            // otherwise, initialize plugin
+            vjsPlayer.vttThumbnails({
+              src: thumbnailPath,
+              showTimestamp: true,
+            });
+          }
+        }
+      }
+
       vjsPlayer.load();
 
+      if (canUseOldPlayer) {
+        // $FlowIssue
+        document.querySelector('.video-js-parent')?.append(window.oldSavedDiv);
+      }
+
+      // allow tap to unmute if no perms on iOS
+      if (autoplay && !embedded) {
+        const promise = vjsPlayer.play();
+
+        window.player.userActive(true);
+
+        if (promise !== undefined) {
+          promise
+            .then((_) => {
+              // $FlowIssue
+              vjsPlayer?.controlBar.el().classList.add('vjs-transitioning-video');
+            })
+            .catch((error) => {
+              const noPermissionError = typeof error === 'object' && error.name && error.name === 'NotAllowedError';
+
+              if (noPermissionError) {
+                if (IS_IOS) {
+                  // autoplay not allowed, mute video, play and show 'tap to unmute' button
+                  // $FlowIssue
+                  vjsPlayer?.muted(true);
+                  // $FlowIssue
+                  vjsPlayer?.play();
+                  // $FlowIssue
+                  document.querySelector('.video-js--tap-to-unmute')?.style.setProperty('visibility', 'visible');
+                  // $FlowIssue
+                  document
+                    .querySelector('.video-js--tap-to-unmute')
+                    ?.style.setProperty('display', 'inline', 'important');
+                } else {
+                  // $FlowIssue
+                  vjsPlayer?.bigPlayButton?.show();
+                }
+              }
+            });
+        }
+      }
+
       // fix invisible vidcrunch overlay on IOS  << TODO: does not belong here. Move to ads.jsx (#739)
       if (IS_IOS) {
         // ads video player
@@ -477,14 +565,45 @@ export default React.memo<Props>(function VideoJs(props: Props) {
         volumePanelRef.current.removeEventListener('wheel', volumePanelScrollHandlerRef.current);
       }
 
+      const chapterMarkers = document.getElementsByClassName('vjs-chapter-marker');
+      while (chapterMarkers.length > 0) {
+        // $FlowIssue
+        chapterMarkers[0].parentNode?.removeChild(chapterMarkers[0]);
+      }
+
       const player = playerRef.current;
       if (player) {
         try {
           window.cast.framework.CastContext.getInstance().getCurrentSession().endSession(false);
         } catch {}
 
-        player.dispose();
-        window.player = undefined;
+        window.player.switchedFromDefaultQuality = false;
+
+        window.player.userActive(false);
+        window.player.pause();
+
+        if (IS_IOS) {
+          // $FlowIssue
+          window.player.controlBar?.playToggle?.hide();
+        }
+
+        // $FlowIssue
+        window.player?.controlBar?.getChild('ChaptersButton')?.hide();
+
+        // this solves an issue with portrait videos
+        // $FlowIssue
+        const videoDiv = window.player?.tech_?.el(); // video element
+        if (videoDiv) videoDiv.style.top = '0px';
+
+        window.player.controlBar.el().classList.add('vjs-transitioning-video');
+
+        window.oldSavedDiv = window.player.el();
+
+        window.player.trigger('playerClosed');
+
+        window.player.currentTime(0);
+
+        window.player.claimSrcVhs = null;
       }
     };
   }, [isAudio, source, reload, userClaimId, isLivestreamClaim]);
diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx
index f3b824f5f..b0bdc85bd 100644
--- a/ui/component/viewers/videoViewer/view.jsx
+++ b/ui/component/viewers/videoViewer/view.jsx
@@ -29,12 +29,15 @@ import debounce from 'util/debounce';
 import { formatLbryUrlForWeb, generateListSearchUrlParams } from 'util/url';
 import useInterval from 'effects/use-interval';
 import { lastBandwidthSelector } from './internal/plugins/videojs-http-streaming--override/playlist-selectors';
+import { platform } from 'util/platform';
 import RecSys from 'recsys';
 
 // const PLAY_TIMEOUT_ERROR = 'play_timeout_error';
 // const PLAY_TIMEOUT_LIMIT = 2000;
 const PLAY_POSITION_SAVE_INTERVAL_MS = 15000;
 
+const IS_IOS = platform.isIOS();
+
 type Props = {
   position: number,
   changeVolume: (number) => void,
@@ -161,6 +164,7 @@ function VideoViewer(props: Props) {
 
   React.useEffect(() => {
     if (isPlaying) {
+      // save the updated watch time
       doSetContentHistoryItem(claim.permanent_url);
     }
   }, [isPlaying]);
@@ -209,6 +213,7 @@ function VideoViewer(props: Props) {
 
   const doPlay = useCallback(
     (playUri) => {
+      if (!playUri) return;
       setDoNavigate(false);
       if (!isFloating) {
         const navigateUrl = formatLbryUrlForWeb(playUri);
@@ -227,27 +232,23 @@ function VideoViewer(props: Props) {
   useEffect(() => {
     if (!doNavigate) return;
 
-    if (playNextUrl) {
-      if (permanentUrl !== nextRecommendedUri) {
-        if (nextRecommendedUri) {
-          doPlay(nextRecommendedUri);
-        }
-      } else {
-        setReplay(true);
-      }
-    } else {
-      if (videoNode) {
-        const currentTime = videoNode.currentTime;
+    const shouldPlayNextUrl = playNextUrl && nextRecommendedUri && permanentUrl !== nextRecommendedUri;
+    const shouldPlayPreviousUrl = !playNextUrl && previousListUri && permanentUrl !== previousListUri;
 
-        if (currentTime <= 5) {
-          if (previousListUri && permanentUrl !== previousListUri) doPlay(previousListUri);
-        } else {
-          videoNode.currentTime = 0;
-        }
-        setDoNavigate(false);
-      }
+    // play next video if someone hits Next button
+    if (shouldPlayNextUrl) {
+      doPlay(nextRecommendedUri);
+      // rewind if video is over 5 seconds and they hit the back button
+    } else if (videoNode && videoNode.currentTime > 5) {
+      videoNode.currentTime = 0;
+      // move to previous video when they hit back button if behind 5 seconds
+    } else if (shouldPlayPreviousUrl) {
+      doPlay(previousListUri);
+    } else {
+      setReplay(true);
     }
-    if (!ended) setDoNavigate(false);
+
+    setDoNavigate(false);
     setEnded(false);
     setPlayNextUrl(true);
   }, [
@@ -262,6 +263,7 @@ function VideoViewer(props: Props) {
     videoNode,
   ]);
 
+  // functionality to run on video end
   React.useEffect(() => {
     if (!ended) return;
 
@@ -274,13 +276,21 @@ function VideoViewer(props: Props) {
 
     if (embedded) {
       setIsEndedEmbed(true);
+      // show autoplay countdown div if not playlist
     } else if (!collectionId && autoplayNext) {
       setShowAutoplayCountdown(true);
+      // if a playlist, navigate to next item
     } else if (collectionId) {
       setDoNavigate(true);
     }
 
     clearPosition(uri);
+
+    if (IS_IOS && !autoplayNext) {
+      // show play button on ios if video is paused with no autoplay on
+      // $FlowFixMe
+      document.querySelector('.vjs-touch-overlay')?.classList.add('show-play-toggle'); // eslint-disable-line no-unused-expressions
+    }
   }, [adUrl, autoplayNext, clearPosition, collectionId, embedded, ended, setAdUrl, uri]);
 
   // MORE ON PLAY STUFF
@@ -300,7 +310,7 @@ function VideoViewer(props: Props) {
     analytics.videoIsPlaying(false, player);
   }
 
-  function onDispose(event, player) {
+  function onPlayerClosed(event, player) {
     handlePosition(player);
     analytics.videoIsPlaying(false, player);
   }
@@ -328,6 +338,7 @@ function VideoViewer(props: Props) {
   };
 
   const onPlayerReady = useCallback((player: Player, videoNode: any) => {
+    // add buttons and initialize some settings for the player
     if (!embedded) {
       setVideoNode(videoNode);
       player.muted(muted);
@@ -335,6 +346,21 @@ function VideoViewer(props: Props) {
       player.playbackRate(videoPlaybackRate);
       if (!isMarkdownOrComment) {
         addTheaterModeButton(player, toggleVideoTheaterMode);
+        // if part of a playlist
+
+        // remove old play next/previous buttons if they exist
+        const controlBar = player.controlBar;
+        if (controlBar) {
+          const existingPlayNextButton = controlBar.getChild('PlayNextButton');
+          if (existingPlayNextButton) controlBar.removeChild('PlayNextButton');
+
+          const existingPlayPreviousButton = controlBar.getChild('PlayPreviousButton');
+          if (existingPlayPreviousButton) controlBar.removeChild('PlayPreviousButton');
+
+          const existingAutoplayButton = controlBar.getChild('AutoplayNextButton');
+          if (existingAutoplayButton) controlBar.removeChild('AutoplayNextButton');
+        }
+
         if (collectionId) {
           addPlayNextButton(player, doPlayNext);
           addPlayPreviousButton(player, doPlayPrevious);
@@ -349,74 +375,36 @@ function VideoViewer(props: Props) {
         }
       }
     }
-
-    // currently not being used, but leaving for time being
-    // const shouldPlay = !embedded || autoplayIfEmbedded;
-    // // https://blog.videojs.com/autoplay-best-practices-with-video-js/#Programmatic-Autoplay-and-Success-Failure-Detection
-    // if (shouldPlay) {
-    //   const playPromise = player.play();
-    //
-    //   const timeoutPromise = new Promise((resolve, reject) =>
-    //     setTimeout(() => reject(PLAY_TIMEOUT_ERROR), PLAY_TIMEOUT_LIMIT)
-    //   );
-    //
-    //   // if user hasn't interacted with document, mute video and play it
-    //   Promise.race([playPromise, timeoutPromise]).catch((error) => {
-    //     console.log(error);
-    //     console.log(playPromise);
-    //
-    //     const noPermissionError = typeof error === 'object' && error.name && error.name === 'NotAllowedError';
-    //     const isATimeoutError = error === PLAY_TIMEOUT_ERROR;
-    //
-    //     if (noPermissionError) {
-    //       // if (player.paused()) {
-    //       //   document.querySelector('.vjs-big-play-button').style.setProperty('display', 'block', 'important');
-    //       // }
-    //
-    //       centerPlayButton();
-    //
-    //       // to turn muted autoplay on
-    //       // if (player.autoplay() && !player.muted()) {
-    //         // player.muted(true);
-    //         // player.play();
-    //       // }
-    //     }
-    //     setIsPlaying(false);
-    //   });
-    // }
-
     // PR: #5535
     // Move the restoration to a later `loadedmetadata` phase to counter the
     // delay from the header-fetch. This is a temp change until the next
     // re-factoring.
-    player.on('loadedmetadata', () => restorePlaybackRate(player));
+    const restorePlaybackRateEvent = () => restorePlaybackRate(player);
 
     // Override the "auto" algorithm to post-process the result
-    player.on('loadedmetadata', () => {
+    const overrideAutoAlgorithm = () => {
       const vhs = player.tech(true).vhs;
       if (vhs) {
         // https://github.com/videojs/http-streaming/issues/749#issuecomment-606972884
         vhs.selectPlaylist = lastBandwidthSelector;
       }
-    });
+    };
 
-    player.on('ended', () => setEnded(true));
-    player.on('play', onPlay);
-    player.on('pause', (event) => onPause(event, player));
-    player.on('dispose', (event) => onDispose(event, player));
-
-    player.on('error', () => {
+    const onPauseEvent = (event) => onPause(event, player);
+    const onPlayerClosedEvent = (event) => onPlayerClosed(event, player);
+    const onVolumeChange = () => {
+      if (player) {
+        updateVolumeState(player.volume(), player.muted());
+      }
+    };
+    const onPlayerEnded = () => setEnded(true);
+    const onError = () => {
       const error = player.error();
       if (error) {
         analytics.sentryError('Video.js error', error);
       }
-    });
-    player.on('volumechange', () => {
-      if (player) {
-        updateVolumeState(player.volume(), player.muted());
-      }
-    });
-    player.on('ratechange', () => {
+    };
+    const onRateChange = () => {
       const HAVE_NOTHING = 0; // https://docs.videojs.com/player#readyState
       if (player && player.readyState() !== HAVE_NOTHING) {
         // The playbackRate occasionally resets to 1, typically when loading a fresh video or when 'src' changes.
@@ -425,11 +413,43 @@ function VideoViewer(props: Props) {
         // [ ] Ideally, the controlBar should be hidden to prevent users from changing the rate while loading.
         setVideoPlaybackRate(player.playbackRate());
       }
-    });
+    };
 
-    if (position && !isLivestreamClaim) {
-      player.currentTime(position);
-    }
+    const moveToPosition = () => {
+      // update current time based on previous position
+      if (position && !isLivestreamClaim) {
+        player.currentTime(position);
+      }
+    };
+
+    // load events onto player
+    player.on('play', onPlay);
+    player.on('pause', onPauseEvent);
+    player.on('playerClosed', onPlayerClosedEvent);
+    player.on('ended', onPlayerEnded);
+    player.on('error', onError);
+    player.on('volumechange', onVolumeChange);
+    player.on('ratechange', onRateChange);
+    player.on('loadedmetadata', overrideAutoAlgorithm);
+    player.on('loadedmetadata', restorePlaybackRateEvent);
+    player.one('loadedmetadata', moveToPosition);
+
+    const cancelOldEvents = () => {
+      player.off('play', onPlay);
+      player.off('pause', onPauseEvent);
+      player.off('playerClosed', onPlayerClosedEvent);
+      player.off('ended', onPlayerEnded);
+      player.off('error', onError);
+      player.off('volumechange', onVolumeChange);
+      player.off('ratechange', onRateChange);
+      player.off('loadedmetadata', overrideAutoAlgorithm);
+      player.off('loadedmetadata', restorePlaybackRateEvent);
+      player.off('playerClosed', cancelOldEvents);
+      player.off('loadedmetadata', moveToPosition);
+    };
+
+    // turn off old events to prevent duplicate runs
+    player.on('playerClosed', cancelOldEvents);
 
     Chapters.parseAndLoad(player, claim);
 
diff --git a/ui/scss/component/_videojs.scss b/ui/scss/component/_videojs.scss
index 0ce21955a..692b18bb3 100644
--- a/ui/scss/component/_videojs.scss
+++ b/ui/scss/component/_videojs.scss
@@ -331,7 +331,7 @@ $control-bar-popup-font-size: 0.8rem;
 
 // TODO: make sure there's no bad side effects of this
 button.vjs-big-play-button {
-  display: none !important;
+  display: none;
 }
 
 .vjs-big-play-centered {
@@ -465,3 +465,16 @@ button.vjs-big-play-button {
   background-color: var(--color-error);
   width: 2px;
 }
+
+// don't show Tap To Unmute button on mobile miniplayer
+.content__viewer--floating.content__viewer--mobile {
+  .video-js--tap-to-unmute {
+    visibility: hidden !important;
+  }
+}
+
+.vjs-transitioning-video {
+  opacity: 1 !important;
+  display: flex !important;
+  visibility: visible !important;
+}
diff --git a/yarn.lock b/yarn.lock
index 77a4fbf38..fe2c41db3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7374,6 +7374,7 @@ flatten@^1.0.2:
 flow-bin@^0.97.0:
   version "0.97.0"
   resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.97.0.tgz#036ffcfc27503367a9d906ec9d843a0aa6f6bb83"
+  integrity sha512-jXjD05gkatLuC4+e28frH1hZoRwr1iASP6oJr61Q64+kR4kmzaS+AdFBhYgoYS5kpoe4UzwDebWK8ETQFNh00w==
 
 flow-typed@^2.3.0:
   version "2.6.2"