From 429ead3b3bf497a0b9c2fa9c161bd0cd8b72c2bc Mon Sep 17 00:00:00 2001
From: Anthony <contact@anthonymayfield.com>
Date: Mon, 30 Aug 2021 22:27:30 +0200
Subject: [PATCH] working on desktop

---
 .../viewers/videoViewer/internal/videojs.jsx  |  9 ++++++++-
 ui/component/viewers/videoViewer/view.jsx     | 19 +++++++++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx
index 84a9dadc5..1d2f82ba3 100644
--- a/ui/component/viewers/videoViewer/internal/videojs.jsx
+++ b/ui/component/viewers/videoViewer/internal/videojs.jsx
@@ -221,6 +221,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
       eventTracking: true,
       overlay: OVERLAY.OVERLAY_DATA,
     },
+    // bigPlayButton: false,
   };
 
   const tapToUnmuteRef = useRef();
@@ -497,7 +498,13 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     const wrapper = document.createElement('div');
     wrapper.setAttribute('data-vjs-player', 'true');
     const el = document.createElement(isAudio ? 'audio' : 'video');
-    el.className = 'video-js vjs-big-play-centered ';
+    el.className = 'video-js';
+
+    if(!IS_IOS){
+      el.classList.add('vjs-big-play-centered');
+    }
+
+    // el.className = 'vjs-big-play-centered ';
 
     // show large play button when paused on ios
     // if (IS_IOS) {
diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx
index 0f3757b54..51a818bd1 100644
--- a/ui/component/viewers/videoViewer/view.jsx
+++ b/ui/component/viewers/videoViewer/view.jsx
@@ -109,6 +109,11 @@ function VideoViewer(props: Props) {
   breaks because some browsers (e.g. Firefox) block autoplay but leave the player.play Promise pending */
   const [isLoading, setIsLoading] = useState(false);
 
+  const IS_IOS =
+    (/iPad|iPhone|iPod/.test(navigator.platform) ||
+      (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
+    !window.MSStream;
+
   // force everything to recent when URI changes, can cause weird corner cases otherwise (e.g. navigate while autoplay is true)
   useEffect(() => {
     if (uri && previousUri && uri !== previousUri) {
@@ -247,16 +252,22 @@ function VideoViewer(props: Props) {
         if (typeof error === 'object' && error.name && error.name === 'NotAllowedError') {
           console.log('running here!');
           if (player.autoplay() && !player.muted()) {
-            document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
-            player.muted(true);
+            if(IS_IOS){
+              document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
+              player.muted(true);
+            }
+
             // another version had player.play()
             player.play();
           }
         } else {
           console.log('other block conditional');
-          player.muted(true);
+          if(IS_IOS){
+            document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
+            player.muted(true);
+          }
+
           player.play();
-          document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
         }
         setIsLoading(false);
         setIsPlaying(false);