Center play button

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');
 

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}

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;