ui/component/viewers/videoViewer/internal/videojs.jsx

@@ -59,6 +59,7 @@ type Props = {
   userId: ?number,
   // allowPreRoll: ?boolean,
   shareTelemetry: boolean,
+  showAutoplayCountdown: boolean,
 };
 
 // type VideoJSOptions = {
@@ -84,11 +85,12 @@ const VIDEO_JS_OPTIONS = {
   controls: true,
   html5: {
     vhs: {
-      overrideNative: !videojs.browser.IS_ANY_SAFARI,
+      overrideNative: !videojs.browser.IS_ANY_SAFARI, // don't override on safari
     },
   },
 };
 
+// keys to bind to for keyboard shortcuts
 const SPACE_BAR_KEYCODE = 32;
 const SMALL_F_KEYCODE = 70;
 const SMALL_M_KEYCODE = 77;
@@ -197,6 +199,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     userId,
     // allowPreRoll,
     shareTelemetry,
+    showAutoplayCountdown,
   } = props;
 
   const [reload, setReload] = useState('initial');
@@ -493,6 +496,12 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     wrapper.setAttribute('data-vjs-player', 'true');
     const el = document.createElement(isAudio ? 'audio' : 'video');
     el.className = 'video-js vjs-big-play-centered ';
+
+    // show large play button when paused on ios
+    if (IS_IOS) {
+      el.classList.add('vjs-show-big-play-button-on-pause');
+    }
+
     wrapper.appendChild(el);
 
     container.appendChild(wrapper);
@@ -553,6 +562,29 @@ export default React.memo<Props>(function VideoJs(props: Props) {
       player.on('error', onError);
       player.on('ended', onEnded);
 
+      // on ios, show a play button when paused
+      if (IS_IOS) {
+        const playBT = document.getElementsByClassName('vjs-big-play-button')[0];
+
+        player.on('pause', function () {
+          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 + 3 + 'px';
+
+          playBT.style.top = topHeight;
+          playBT.style.left = leftWidth;
+          playBT.style.margin = '0';
+        });
+
+        player.on('ended', function () {
+          if (showAutoplayCountdown) {
+            playBT.style.display = 'none';
+          }
+        });
+      }
+
       // Replace volume bar with custom LBRY volume bar
       LbryVolumeBarClass.replaceExisting(player);
 

ui/component/viewers/videoViewer/view.jsx

@@ -336,6 +336,7 @@ function VideoViewer(props: Props) {
           userId={userId}
           allowPreRoll={!embedded && !authenticated}
           shareTelemetry={shareTelemetry}
+          showAutoplayCountdown={autoplaySetting}
         />
       )}
     </div>