From c9d3da1ae756d79ecb28a5ea9171fc8bef17441a Mon Sep 17 00:00:00 2001 From: Anthony Date: Thu, 26 Aug 2021 16:39:35 +0200 Subject: [PATCH 1/4] add big button when paused ios --- ui/component/viewers/videoViewer/internal/videojs.jsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx index a3fcc48de..278fe80f6 100644 --- a/ui/component/viewers/videoViewer/internal/videojs.jsx +++ b/ui/component/viewers/videoViewer/internal/videojs.jsx @@ -19,6 +19,8 @@ import isUserTyping from 'util/detect-typing'; // @endif const isDev = process.env.NODE_ENV !== 'production'; +process.on('unhandledRejection', console.log) + export type Player = { on: (string, (any) => void) => void, one: (string, (any) => void) => void, @@ -84,11 +86,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; @@ -493,6 +496,10 @@ 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 '; + if (IS_IOS) { + el.classList.add('vjs-show-big-play-button-on-pause'); + } + wrapper.appendChild(el); container.appendChild(wrapper); -- 2.45.2 From 1ed8b4e2cb3969e8a0e494fde62573305a6a0ebb Mon Sep 17 00:00:00 2001 From: Anthony Date: Fri, 27 Aug 2021 15:28:09 +0200 Subject: [PATCH 2/4] display a play button when paused on ios --- .../viewers/videoViewer/internal/videojs.jsx | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx index 278fe80f6..cd6ae9f32 100644 --- a/ui/component/viewers/videoViewer/internal/videojs.jsx +++ b/ui/component/viewers/videoViewer/internal/videojs.jsx @@ -19,8 +19,6 @@ import isUserTyping from 'util/detect-typing'; // @endif const isDev = process.env.NODE_ENV !== 'production'; -process.on('unhandledRejection', console.log) - export type Player = { on: (string, (any) => void) => void, one: (string, (any) => void) => void, @@ -496,6 +494,8 @@ 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'); } @@ -560,6 +560,22 @@ export default React.memo(function VideoJs(props: Props) { player.on('error', onError); player.on('ended', onEnded); + // on ios, center the play button when paused + player.on('pause', function() { + if (IS_IOS) { + const playBT = document.getElementsByClassName('vjs-big-play-button')[0]; + 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; + } + }); + // Replace volume bar with custom LBRY volume bar LbryVolumeBarClass.replaceExisting(player); -- 2.45.2 From 889f05b43c2ef29987edcd9e82271704c332c864 Mon Sep 17 00:00:00 2001 From: Anthony Date: Fri, 27 Aug 2021 16:08:35 +0200 Subject: [PATCH 3/4] hide play button if autoplay next is on --- .../viewers/videoViewer/internal/videojs.jsx | 21 +++++++++++++------ ui/component/viewers/videoViewer/view.jsx | 1 + 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx index cd6ae9f32..004def234 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 = { @@ -198,6 +199,7 @@ export default React.memo(function VideoJs(props: Props) { userId, // allowPreRoll, shareTelemetry, + showAutoplayCountdown, } = props; const [reload, setReload] = useState('initial'); @@ -560,10 +562,11 @@ export default React.memo(function VideoJs(props: Props) { player.on('error', onError); player.on('ended', onEnded); - // on ios, center the play button when paused - player.on('pause', function() { - if (IS_IOS) { - const playBT = document.getElementsByClassName('vjs-big-play-button')[0]; + // 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'; @@ -573,8 +576,14 @@ export default React.memo(function VideoJs(props: Props) { 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} /> )} -- 2.45.2 From 90369e8d9b97a7d1c34666d7a1eb7ad77d32580d Mon Sep 17 00:00:00 2001 From: zeppi Date: Sun, 29 Aug 2021 12:38:57 -0400 Subject: [PATCH 4/4] fix flow for ios button pr --- .../viewers/videoViewer/internal/videojs.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx index 004def234..a9ba73cd3 100644 --- a/ui/component/viewers/videoViewer/internal/videojs.jsx +++ b/ui/component/viewers/videoViewer/internal/videojs.jsx @@ -59,7 +59,7 @@ type Props = { userId: ?number, // allowPreRoll: ?boolean, shareTelemetry: boolean, - showAutoplayCountdown: boolean + showAutoplayCountdown: boolean, }; // type VideoJSOptions = { @@ -566,19 +566,19 @@ export default React.memo(function VideoJs(props: Props) { if (IS_IOS) { const playBT = document.getElementsByClassName('vjs-big-play-button')[0]; - player.on('pause', function() { + 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 leftWidth = (videoDiv.offsetWidth - playBT.offsetWidth) / 2 + 'px'; const availableHeight = videoDiv.offsetHeight - controlBar.offsetHeight; - const topHeight = (((availableHeight - playBT.offsetHeight) / 2) + 3) + 'px'; + const topHeight = (availableHeight - playBT.offsetHeight) / 2 + 3 + 'px'; playBT.style.top = topHeight; playBT.style.left = leftWidth; - playBT.style.margin = 0; + playBT.style.margin = '0'; }); - player.on('ended', function() { + player.on('ended', function () { if (showAutoplayCountdown) { playBT.style.display = 'none'; } -- 2.45.2