diff --git a/src/components/bigPauseButton/big-pause-button.js b/src/components/bigPauseButton/big-pause-button.js new file mode 100644 index 00000000..6fd30a28 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/components/bigPauseButton/big-pause-button.scss b/src/components/bigPauseButton/big-pause-button.scss new file mode 100644 index 00000000..0e1e28d5 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/components/index.js b/src/components/index.js index 3cc5d934..9e4e2318 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -4,6 +4,7 @@ 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, @@ -11,5 +12,6 @@ export { LogoButton, ProgressControlEventsBlocker, TitleBar, - SourceSwitcherButton + SourceSwitcherButton, + BigPauseButton }; diff --git a/src/video-player.js b/src/video-player.js index 7c45c59c..cce8797b 100644 --- a/src/video-player.js +++ b/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;