mobile-ui: Fix missing chromecast button in Android-Chrome
## Issue: 5119 "Video: Mobile UI + overlay for keyboard shortcut feedback" was disabled because the feature broke the chromecast button in Android Chrome
This commit is contained in:
parent
4a4247180f
commit
49abbecbd7
2 changed files with 57 additions and 0 deletions
|
@ -104,6 +104,27 @@ class TouchOverlay extends Component {
|
|||
handleSingleTap(event) {
|
||||
this.removeClass('skip');
|
||||
this.toggleClass('show-play-toggle');
|
||||
|
||||
// At the moment, we only have one <video> tag at a time, but just loops it
|
||||
// all to somewhat future-proof it.
|
||||
const videos = document.getElementsByTagName('video');
|
||||
for (let video of videos) {
|
||||
// The Android-Chrome cast button appears when you tap directly on the
|
||||
// video. If anything exists above it, such as our mobile-ui overlay, the
|
||||
// action will be absorbed, causing the button to not appear. So, I've
|
||||
// tried to pass on the tap event by manually dispatching one, but it
|
||||
// didn't work.
|
||||
// Peeking at the Android-Chrome code, the cast button is refreshed when
|
||||
// the 'controllist' is updated. Since we don't use this attribute as we
|
||||
// are using the videojs controls, I'm "toggling" this attribute to force
|
||||
// the cast button to be refreshed.
|
||||
const attr = video.getAttribute('controlslist');
|
||||
if (!attr || attr.indexOf('dummy') === -1) {
|
||||
video.setAttribute('controlslist', 'dummy');
|
||||
} else {
|
||||
video.removeAttribute('controlslist');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -459,6 +459,42 @@
|
|||
&.skip {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
// Override the original's 'display: block' to avoid the big play button
|
||||
// from being squished to the side:
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
video::-internal-media-controls-overlay-cast-button {
|
||||
// Push the cast button above vjs-touch-overlay:
|
||||
z-index: 3;
|
||||
|
||||
// Move it to the upper-right since it will clash with "tap to unmute":
|
||||
left: unset;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.video-js.video-js.vjs-user-inactive {
|
||||
video::-internal-media-controls-overlay-cast-button {
|
||||
// (1) Android-Chrome's original Cast button behavior:
|
||||
// - If video is playing, fade out the button.
|
||||
// - If video is paused and video is tapped, display the button and stay on.
|
||||
// (2) We then injected another behavior:
|
||||
// - Display the button when '.vjs-touch-overlay' is displayed. However,
|
||||
// the 'controlslist' attribute hack that was used to do this results in the
|
||||
// button staying displayed without a fade-out timer.
|
||||
// (3) Ideally, we should sync the '.vjs-touch-overlay' visibility with the
|
||||
// cast button, similar to how to controlBar's visibility is synced above.
|
||||
// But I have no idea how to grab the sibling '.show-play-toggle' into the
|
||||
// css logic.
|
||||
// (4) So, this is the best that I can come up with: Whenever user is idle,
|
||||
// the button goes away. The only downside I know is the scenario of
|
||||
// "overlay is up and video is paused, but button goes away due to idle".
|
||||
// The user just needs to re-tap any empty space on the overlay to get the
|
||||
// Cast button again.
|
||||
opacity: 0;
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue