fix: add big pause button for mobile browsers

Author: adimiz1

src/components/bigPauseButton/big-pause-button.js

@@ -0,0 +1,48 @@
+import videojs from 'video.js';
+import './big-pause-button.scss';
+
+const BigPlayButton = videojs.getComponent('BigPlayButton');
+
+class BigPauseButton extends BigPlayButton {
+  constructor(player, options) {
+    super(player, options);
+    this.boundUpdate = this.handleUpdate.bind(this);
+    const playerInstance = this.player();
+    playerInstance.on('play', this.boundUpdate);
+    playerInstance.on('pause', this.boundUpdate);
+    this.handleUpdate();
+  }
+
+  buildCSSClass() {
+    return `${super.buildCSSClass()} vjs-big-pause-button`;
+  }
+
+  handleClick() {
+    const player = this.player();
+    !player.paused() && player.pause();
+  }
+
+  handleUpdate() {
+    const player = this.player();
+    if (!player) {
+      return;
+    }
+    const paused = player.paused();
+    (!paused && player.hasStarted()) ? this.show() : this.hide();
+    this[paused ? 'removeClass' : 'addClass']('vjs-playing');
+    this.controlText('Pause');
+  }
+
+  dispose() {
+    if (this.boundUpdate) {
+      const player = this.player();
+      player.off('play', this.boundUpdate);
+      player.off('pause', this.boundUpdate);
+    }
+    super.dispose();
+  }
+}
+
+videojs.registerComponent('BigPauseButton', BigPauseButton);
+
+export default BigPauseButton;

src/components/bigPauseButton/big-pause-button.scss

@@ -0,0 +1,44 @@
+@use 'sass:map';
+@use '../../assets/styles/icons';
+
+.cld-video-player {
+  &.cld-fluid .vjs-big-pause-button {
+    max-width: 15%;
+  }
+
+  .vjs-big-pause-button .vjs-icon-placeholder {
+    @extend .vjs-icon-pause;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    container-type: inline-size;
+
+    &:before {
+      position: static;
+      border: none;
+      margin: 0;
+      width: auto;
+      height: auto;
+      font-size: clamp(0.35em, 50cqw, 0.8em);
+    }
+  }
+
+
+  &.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-big-pause-button {
+    transition: visibility 1s, opacity 1s;
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  &.vjs-has-started.vjs-user-active.vjs-playing .vjs-big-pause-button,
+  &.vjs-has-started.vjs-playing .vjs-big-pause-button {
+    transition: visibility 0.1s, opacity 0.1s;
+    visibility: visible;
+    opacity: 1;
+  }
+}

src/components/index.js

@@ -4,12 +4,14 @@ import LogoButton from './logoButton/logo-button';
 import ProgressControlEventsBlocker from './progress-control-events-blocker/progress-control-events-blocker';
 import TitleBar from './title-bar/title-bar';
 import SourceSwitcherButton from './source-switcher-button/source-switcher-button';
+import BigPauseButton from './bigPauseButton/big-pause-button';
 
 export {
   JumpForwardButton,
   JumpBackButton,
   LogoButton,
   ProgressControlEventsBlocker,
   TitleBar,
-  SourceSwitcherButton
+  SourceSwitcherButton,
+  BigPauseButton
 };

src/video-player.js

@@ -93,6 +93,7 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     this._initPlugins();
     this._initJumpButtons();
     this._initPictureInPicture();
+    this._initBigPauseButton();
     this._setVideoJsListeners(ready);
   }
 
@@ -406,6 +407,12 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     }
   }
 
+  _initBigPauseButton() {
+    if (videojs.browser.IS_IOS || videojs.browser.IS_ANDROID) {
+      this.videojs.addChild('BigPauseButton');
+    }
+  }
+
   _initCloudinary() {
     const cloudinaryConfig = this.playerOptions.cloudinary;
     cloudinaryConfig.chainTarget = this;