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

hide big play button

Browse source
This commit is contained in:
Anthony 2021-08-31 19:07:45 +02:00
parent abbd524ead
commit 9b88463886
No known key found for this signature in database
GPG key ID: C386D3C93D50E356
2 changed files with 17 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -275,6 +275,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
player.volume(1.0); player.volume(1.0);
} }
} }
// hide "Tap to unmute" button
showTapButton(TAP.NONE); showTapButton(TAP.NONE);
} }
@ -552,18 +553,22 @@ export default React.memo<Props>(function VideoJs(props: Props) {
const vjs = videojs(el, videoJsOptions, () => { const vjs = videojs(el, videoJsOptions, () => {
const isNotAndroidOrIos = !videojs.browser.IS_ANDROID && !videojs.browser.is_IOS; const player = playerRef.current;
if(isNotAndroidOrIos){ const isNotAndroidOrIos = !videojs.browser.IS_ANDROID && !videojs.browser.IS_IOS;
if (isNotAndroidOrIos) {
el.classList.add('vjs-big-play-centered'); el.classList.add('vjs-big-play-centered');
const playBT = document.getElementsByClassName('vjs-big-play-button')[0]; const playBT = document.getElementsByClassName('vjs-big-play-button')[0];
playBT.style.display = 'none'; playBT.style.display = 'none';
} else {
// console.log('hiding button');
// player.bigPlayButton.hide()
// const playBT = document.getElementsByClassName('vjs-big-play-button')[0];
// playBT.remove()
} }
const player = playerRef.current;
// this seems like a weird thing to have to check for here // this seems like a weird thing to have to check for here
if (!player) return; if (!player) return;
@ -578,46 +583,6 @@ 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);
// player.on('loadstart', function(){
// console.log('LOADED HERE');
//
// 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) + 11) + 'px';
//
// playBT.style.top = topHeight;
// playBT.style.left = leftWidth;
// playBT.style.margin = 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() {
// playBT.style.removeProperty('display');
//
// 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) + 11) + '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 // Replace volume bar with custom LBRY volume bar
LbryVolumeBarClass.replaceExisting(player); LbryVolumeBarClass.replaceExisting(player);

7
ui/scss/component/_videojs.scss
View file

@ -150,3 +150,10 @@
.bottom-gradient { .bottom-gradient {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 72px); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 72px);
} }
.vjs-big-play-button {
// if the user is using a mouse
@media (pointer: none), (pointer:coarse) {
display: none !important;
}
}