seeing if this fixes offcenter play button
This commit is contained in:
parent
391e2e25a2
commit
38740d7e43
2 changed files with 22 additions and 20 deletions
|
@ -341,7 +341,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function onInitialPlay() {
|
function onInitialPlay() {
|
||||||
const player = playerRef.current;
|
const player = playerRef.current;
|
||||||
// show the unmute button if the video is muted
|
// show the unmute button if the video is muted
|
||||||
|
@ -551,6 +550,9 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
const vjs = videojs(el, videoJsOptions, () => {
|
const vjs = videojs(el, videoJsOptions, () => {
|
||||||
const player = playerRef.current;
|
const player = playerRef.current;
|
||||||
|
|
||||||
|
const playBT = document.getElementsByClassName('vjs-big-play-button')[0];
|
||||||
|
playBT.style.display = 'none';
|
||||||
|
|
||||||
// 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;
|
||||||
|
|
||||||
|
@ -564,27 +566,27 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
player.on('volumechange', onVolumeChange);
|
player.on('volumechange', onVolumeChange);
|
||||||
player.on('error', onError);
|
player.on('error', onError);
|
||||||
player.on('ended', onEnded);
|
player.on('ended', onEnded);
|
||||||
player.on('loadstart', function(){
|
// player.on('loadstart', function(){
|
||||||
console.log('LOADED HERE');
|
// console.log('LOADED HERE');
|
||||||
|
//
|
||||||
const playBT = document.getElementsByClassName('vjs-big-play-button')[0];
|
// const playBT = document.getElementsByClassName('vjs-big-play-button')[0];
|
||||||
const videoDiv = player.children_[0];
|
// const videoDiv = player.children_[0];
|
||||||
const controlBar = document.getElementsByClassName('vjs-control-bar')[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 availableHeight = videoDiv.offsetHeight - controlBar.offsetHeight;
|
||||||
const topHeight = (((availableHeight - playBT.offsetHeight) / 2) + 11) + 'px';
|
// const topHeight = (((availableHeight - playBT.offsetHeight) / 2) + 11) + 'px';
|
||||||
|
//
|
||||||
playBT.style.top = topHeight;
|
// playBT.style.top = topHeight;
|
||||||
playBT.style.left = leftWidth;
|
// playBT.style.left = leftWidth;
|
||||||
playBT.style.margin = 0;
|
// playBT.style.margin = 0;
|
||||||
|
// })
|
||||||
})
|
|
||||||
|
|
||||||
// on ios, show a play button when paused
|
// on ios, show a play button when paused
|
||||||
if (IS_IOS) {
|
if (IS_IOS) {
|
||||||
const playBT = document.getElementsByClassName('vjs-big-play-button')[0];
|
const playBT = document.getElementsByClassName('vjs-big-play-button')[0];
|
||||||
|
|
||||||
player.on('pause', function() {
|
player.on('pause', function() {
|
||||||
|
playBT.style.removeProperty('display');
|
||||||
|
|
||||||
const videoDiv = player.children_[0];
|
const videoDiv = player.children_[0];
|
||||||
const controlBar = document.getElementsByClassName('vjs-control-bar')[0];
|
const controlBar = document.getElementsByClassName('vjs-control-bar')[0];
|
||||||
|
|
|
@ -245,17 +245,17 @@ function VideoViewer(props: Props) {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
console.log('promise error');
|
console.log('promise error');
|
||||||
if (typeof error === 'object' && error.name && error.name === 'NotAllowedError') {
|
if (typeof error === 'object' && error.name && error.name === 'NotAllowedError') {
|
||||||
console.log('running here!')
|
console.log('running here!');
|
||||||
if (player.autoplay() && !player.muted()) {
|
if (player.autoplay() && !player.muted()) {
|
||||||
document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
|
document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
|
||||||
player.muted(true);
|
player.muted(true);
|
||||||
// another version had player.play()
|
// another version had player.play()
|
||||||
player.play()
|
player.play();
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
console.log('other block conditional');
|
console.log('other block conditional');
|
||||||
player.muted(true);
|
player.muted(true);
|
||||||
player.play()
|
player.play();
|
||||||
document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
|
document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
|
||||||
}
|
}
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
|
|
Loading…
Reference in a new issue