From 38740d7e434f87781a7087eadf195fc6d60e2a48 Mon Sep 17 00:00:00 2001
From: Anthony <contact@anthonymayfield.com>
Date: Mon, 30 Aug 2021 21:48:47 +0200
Subject: [PATCH] seeing if this fixes offcenter play button

---
 .../viewers/videoViewer/internal/videojs.jsx  | 34 ++++++++++---------
 ui/component/viewers/videoViewer/view.jsx     |  8 ++---
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx
index e4c095e1c..f80c20f3a 100644
--- a/ui/component/viewers/videoViewer/internal/videojs.jsx
+++ b/ui/component/viewers/videoViewer/internal/videojs.jsx
@@ -341,7 +341,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     }
   }
 
-
   function onInitialPlay() {
     const player = playerRef.current;
     // show the unmute button if the video is muted
@@ -551,6 +550,9 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     const vjs = videojs(el, videoJsOptions, () => {
       const player = playerRef.current;
 
+      const playBT = document.getElementsByClassName('vjs-big-play-button')[0];
+      playBT.style.display = 'none';
+
       // this seems like a weird thing to have to check for here
       if (!player) return;
 
@@ -564,27 +566,27 @@ export default React.memo<Props>(function VideoJs(props: Props) {
       player.on('volumechange', onVolumeChange);
       player.on('error', onError);
       player.on('ended', onEnded);
-      player.on('loadstart', function(){
-        console.log('LOADED HERE');
-
-        const playBT = document.getElementsByClassName('vjs-big-play-button')[0];
-        const videoDiv = player.children_[0];
-        const controlBar = document.getElementsByClassName('vjs-control-bar')[0];
-        const leftWidth = ((videoDiv.offsetWidth - playBT.offsetWidth) / 2) + 'px';
-        const availableHeight = videoDiv.offsetHeight - controlBar.offsetHeight;
-        const topHeight = (((availableHeight - playBT.offsetHeight) / 2) + 11) + 'px';
-
-        playBT.style.top = topHeight;
-        playBT.style.left = leftWidth;
-        playBT.style.margin = 0;
-
-      })
+      // player.on('loadstart', function(){
+      //   console.log('LOADED HERE');
+      //
+      //   const playBT = document.getElementsByClassName('vjs-big-play-button')[0];
+      //   const videoDiv = player.children_[0];
+      //   const controlBar = document.getElementsByClassName('vjs-control-bar')[0];
+      //   const leftWidth = ((videoDiv.offsetWidth - playBT.offsetWidth) / 2) + 'px';
+      //   const availableHeight = videoDiv.offsetHeight - controlBar.offsetHeight;
+      //   const topHeight = (((availableHeight - playBT.offsetHeight) / 2) + 11) + 'px';
+      //
+      //   playBT.style.top = topHeight;
+      //   playBT.style.left = leftWidth;
+      //   playBT.style.margin = 0;
+      // })
 
       // on ios, show a play button when paused
       if (IS_IOS) {
         const playBT = document.getElementsByClassName('vjs-big-play-button')[0];
 
         player.on('pause', function() {
+          playBT.style.removeProperty('display');
 
           const videoDiv = player.children_[0];
           const controlBar = document.getElementsByClassName('vjs-control-bar')[0];
diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx
index 6968fddc0..0f3757b54 100644
--- a/ui/component/viewers/videoViewer/view.jsx
+++ b/ui/component/viewers/videoViewer/view.jsx
@@ -245,17 +245,17 @@ function VideoViewer(props: Props) {
         console.log(error);
         console.log('promise error');
         if (typeof error === 'object' && error.name && error.name === 'NotAllowedError') {
-          console.log('running here!')
+          console.log('running here!');
           if (player.autoplay() && !player.muted()) {
             document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
             player.muted(true);
             // another version had player.play()
-            player.play()
+            player.play();
           }
         } else {
           console.log('other block conditional');
           player.muted(true);
-          player.play()
+          player.play();
           document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
         }
         setIsLoading(false);
@@ -321,7 +321,7 @@ function VideoViewer(props: Props) {
       {isEndededEmbed && <FileViewerEmbeddedEnded uri={uri} />}
       {embedded && !isEndededEmbed && <FileViewerEmbeddedTitle uri={uri} />}
       {/* disable this loading behavior because it breaks when player.play() promise hangs */}
-      {/*{isLoading && <LoadingScreen status={__('Loading')} />}*/}
+      {/* {isLoading && <LoadingScreen status={__('Loading')} />} */}
 
       {!isFetchingAd && adUrl && (
         <>