diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx index a3fcc48de..a9ba73cd3 100644 --- a/ui/component/viewers/videoViewer/internal/videojs.jsx +++ b/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(function VideoJs(props: Props) { userId, // allowPreRoll, shareTelemetry, + showAutoplayCountdown, } = props; const [reload, setReload] = useState('initial'); @@ -493,6 +496,12 @@ export default React.memo(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(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); diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx index e8617d57d..fbac7cb0c 100644 --- a/ui/component/viewers/videoViewer/view.jsx +++ b/ui/component/viewers/videoViewer/view.jsx @@ -336,6 +336,7 @@ function VideoViewer(props: Props) { userId={userId} allowPreRoll={!embedded && !authenticated} shareTelemetry={shareTelemetry} + showAutoplayCountdown={autoplaySetting} /> )}