LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Add play button on pause ios #6975

Closed
mayeaux wants to merge 4 commits from add-play-button-on-pause-ios into master
pull from: add-play-button-on-pause-ios
merge into: LBRYCommunity:master
Conversation 2 Commits 4 Files changed 2 +18 -2
1 changed files with 18 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 1ed8b4e2cb - Show all commits

20
ui/component/viewers/videoViewer/internal/videojs.jsx
View file

@ -19,8 +19,6 @@ import isUserTyping from 'util/detect-typing';
// @endif // @endif
const isDev = process.env.NODE_ENV !== 'production'; const isDev = process.env.NODE_ENV !== 'production';
process.on('unhandledRejection', console.log)
export type Player = { export type Player = {
on: (string, (any) => void) => void, on: (string, (any) => void) => void,
one: (string, (any) => void) => void, one: (string, (any) => void) => void,
@ -496,6 +494,8 @@ export default React.memo<Props>(function VideoJs(props: Props) {
wrapper.setAttribute('data-vjs-player', 'true'); wrapper.setAttribute('data-vjs-player', 'true');
const el = document.createElement(isAudio ? 'audio' : 'video'); const el = document.createElement(isAudio ? 'audio' : 'video');
el.className = 'video-js vjs-big-play-centered '; el.className = 'video-js vjs-big-play-centered ';
// show large play button when paused on ios
if (IS_IOS) { if (IS_IOS) {
el.classList.add('vjs-show-big-play-button-on-pause'); el.classList.add('vjs-show-big-play-button-on-pause');
} }
@ -560,6 +560,22 @@ export default React.memo<Props>(function VideoJs(props: Props) {
player.on('error', onError); player.on('error', onError);
player.on('ended', onEnded); 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 // Replace volume bar with custom LBRY volume bar
LbryVolumeBarClass.replaceExisting(player); LbryVolumeBarClass.replaceExisting(player);