From 5632624cd9b26d1b04ced76ab4583d0c73f30bb3 Mon Sep 17 00:00:00 2001
From: Raphael Wickihalder <raphael.wickihalder@odysee.com>
Date: Thu, 17 Mar 2022 10:30:50 +0100
Subject: [PATCH] Center play button

---
 .../viewers/videoViewer/internal/videojs.jsx   |  5 -----
 ui/component/viewers/videoViewer/view.jsx      | 18 ------------------
 ui/scss/component/_videojs.scss                |  7 +++++++
 3 files changed, 7 insertions(+), 23 deletions(-)

diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx
index 666c1cc01..92ece3dbd 100644
--- a/ui/component/viewers/videoViewer/internal/videojs.jsx
+++ b/ui/component/viewers/videoViewer/internal/videojs.jsx
@@ -82,7 +82,6 @@ type Props = {
   uri: string,
   claimValues: any,
   clearPosition: (string) => void,
-  centerPlayButton: () => void,
   isLivestreamClaim: boolean,
   userClaimId: ?string,
   activeLivestreamForChannel: any,
@@ -148,7 +147,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     claimRewards,
     uri,
     clearPosition,
-    centerPlayButton,
     userClaimId,
     isLivestreamClaim,
     activeLivestreamForChannel,
@@ -298,9 +296,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
         document.querySelector('.vjs-big-play-button').style.setProperty('display', 'block', 'important');
       }
 
-      // center play button
-      centerPlayButton();
-
       // I think this is a callback function
       const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
 
diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx
index 889a28514..cbd9d1400 100644
--- a/ui/component/viewers/videoViewer/view.jsx
+++ b/ui/component/viewers/videoViewer/view.jsx
@@ -325,23 +325,6 @@ function VideoViewer(props: Props) {
     setEnded(true);
   };
 
-  function centerPlayButton() {
-    // center play button
-    const playBT = document.getElementsByClassName('vjs-big-play-button')[0];
-    const videoDiv = window.player.children_[0].closest('video-js-parent');
-
-    if (!videoDiv) return;
-
-    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 + 3 + 'px';
-
-    playBT.style.top = topHeight;
-    playBT.style.left = leftWidth;
-    playBT.style.margin = '0';
-  }
-
   const onPlayerReady = useCallback((player: Player, videoNode: any) => {
     if (!embedded) {
       setVideoNode(videoNode);
@@ -519,7 +502,6 @@ function VideoViewer(props: Props) {
         claimRewards={claimRewards}
         uri={uri}
         clearPosition={clearPosition}
-        centerPlayButton={centerPlayButton}
         userClaimId={claim && claim.signing_channel && claim.signing_channel.claim_id}
         isLivestreamClaim={isLivestreamClaim}
         activeLivestreamForChannel={activeLivestreamForChannel}
diff --git a/ui/scss/component/_videojs.scss b/ui/scss/component/_videojs.scss
index cfd55d53e..4a8ce66cb 100644
--- a/ui/scss/component/_videojs.scss
+++ b/ui/scss/component/_videojs.scss
@@ -259,6 +259,13 @@ button.vjs-big-play-button {
   display: none !important;
 }
 
+.vjs-big-play-centered {
+  .vjs-big-play-button {
+    left: calc(50% - 2.5rem) !important;
+    margin-left: unset !important;
+  }
+}
+
 // Rearrange icons
 .vjs-play-control {
   order: 1 !important;