working on desktop

This commit is contained in:
Anthony 2021-08-30 22:27:30 +02:00
parent fdfabe7ccf
commit 429ead3b3b
No known key found for this signature in database
GPG key ID: C386D3C93D50E356
2 changed files with 23 additions and 5 deletions

View file

@ -221,6 +221,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
eventTracking: true, eventTracking: true,
overlay: OVERLAY.OVERLAY_DATA, overlay: OVERLAY.OVERLAY_DATA,
}, },
// bigPlayButton: false,
}; };
const tapToUnmuteRef = useRef(); const tapToUnmuteRef = useRef();
@ -497,7 +498,13 @@ export default React.memo<Props>(function VideoJs(props: Props) {
const wrapper = document.createElement('div'); const wrapper = document.createElement('div');
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';
if(!IS_IOS){
el.classList.add('vjs-big-play-centered');
}
// el.className = 'vjs-big-play-centered ';
// show large play button when paused on ios // show large play button when paused on ios
// if (IS_IOS) { // if (IS_IOS) {

View file

@ -109,6 +109,11 @@ function VideoViewer(props: Props) {
breaks because some browsers (e.g. Firefox) block autoplay but leave the player.play Promise pending */ breaks because some browsers (e.g. Firefox) block autoplay but leave the player.play Promise pending */
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const IS_IOS =
(/iPad|iPhone|iPod/.test(navigator.platform) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
!window.MSStream;
// force everything to recent when URI changes, can cause weird corner cases otherwise (e.g. navigate while autoplay is true) // force everything to recent when URI changes, can cause weird corner cases otherwise (e.g. navigate while autoplay is true)
useEffect(() => { useEffect(() => {
if (uri && previousUri && uri !== previousUri) { if (uri && previousUri && uri !== previousUri) {
@ -247,16 +252,22 @@ function VideoViewer(props: Props) {
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'; if(IS_IOS){
player.muted(true); document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
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); if(IS_IOS){
document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
player.muted(true);
}
player.play(); player.play();
document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
} }
setIsLoading(false); setIsLoading(false);
setIsPlaying(false); setIsPlaying(false);