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

Remove old mobile chromecast css hack

Browse source 
lbry-desktop--6844

This negates 49abbecb.

Now that we have a dedicated chromecast button, we don't need to hack Chrome's default cast button to appear on top of vjs-mobile-ui.  The hack no longer works anyway, since the CSS exposure has been deprecated around mid 2020 -- it is still available, but its abilities has become less and less.
This commit is contained in:
infinite-persistence 2021-12-15 09:44:09 +08:00
parent 8500846654
commit 1766b418c6
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 1 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
ui/component/viewers/videoViewer/internal/plugins/videojs-mobile-ui/touchOverlay.js
View file

@ -34,7 +34,7 @@ class TouchOverlay extends Component {
this.addChild('playToggle', {});
// Clear overlay when playback starts or with control fade
player.on(['playing', 'userinactive'], e => {
player.on(['playing', 'userinactive'], (e) => {
if (!this.player_.paused()) {
this.removeClass('show-play-toggle');
}
@ -104,27 +104,6 @@ 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');
}
}
}
/**

36
ui/scss/component/_file-render.scss
View file

@ -574,42 +574,6 @@ $control-bar-icon-size: 0.8rem;
&.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;
}
}