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

Center play button

Browse source
This commit is contained in:
Raphael Wickihalder 2022-03-17 10:30:50 +01:00
parent ec2bf26817
commit 5632624cd9
No known key found for this signature in database
GPG key ID: 05179BB92383243D
3 changed files with 7 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -82,7 +82,6 @@ type Props = {
uri: string, uri: string,
claimValues: any, claimValues: any,
clearPosition: (string) => void, clearPosition: (string) => void,
centerPlayButton: () => void,
isLivestreamClaim: boolean, isLivestreamClaim: boolean,
userClaimId: ?string, userClaimId: ?string,
activeLivestreamForChannel: any, activeLivestreamForChannel: any,
@ -148,7 +147,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
claimRewards, claimRewards,
uri, uri,
clearPosition, clearPosition,
centerPlayButton,
userClaimId, userClaimId,
isLivestreamClaim, isLivestreamClaim,
activeLivestreamForChannel, activeLivestreamForChannel,
@ -298,9 +296,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
document.querySelector('.vjs-big-play-button').style.setProperty('display', 'block', 'important'); document.querySelector('.vjs-big-play-button').style.setProperty('display', 'block', 'important');
} }
// center play button
centerPlayButton();
// I think this is a callback function // I think this is a callback function
const videoNode = containerRef.current && containerRef.current.querySelector('video, audio'); const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');

18
ui/component/viewers/videoViewer/view.jsx
View file

@ -325,23 +325,6 @@ function VideoViewer(props: Props) {
setEnded(true); setEnded(true);
}; };
function centerPlayButton() {
// center play button
const playBT = document.getElementsByClassName('vjs-big-play-button')[0];
const videoDiv = window.player.children_[0].closest('video-js-parent');
if (!videoDiv) return;
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 + 3 + 'px';
playBT.style.top = topHeight;
playBT.style.left = leftWidth;
playBT.style.margin = '0';
}
const onPlayerReady = useCallback((player: Player, videoNode: any) => { const onPlayerReady = useCallback((player: Player, videoNode: any) => {
if (!embedded) { if (!embedded) {
setVideoNode(videoNode); setVideoNode(videoNode);
@ -519,7 +502,6 @@ function VideoViewer(props: Props) {
claimRewards={claimRewards} claimRewards={claimRewards}
uri={uri} uri={uri}
clearPosition={clearPosition} clearPosition={clearPosition}
centerPlayButton={centerPlayButton}
userClaimId={claim && claim.signing_channel && claim.signing_channel.claim_id} userClaimId={claim && claim.signing_channel && claim.signing_channel.claim_id}
isLivestreamClaim={isLivestreamClaim} isLivestreamClaim={isLivestreamClaim}
activeLivestreamForChannel={activeLivestreamForChannel} activeLivestreamForChannel={activeLivestreamForChannel}

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

@ -259,6 +259,13 @@ button.vjs-big-play-button {
display: none !important; display: none !important;
} }
.vjs-big-play-centered {
.vjs-big-play-button {
left: calc(50% - 2.5rem) !important;
margin-left: unset !important;
}
}
// Rearrange icons // Rearrange icons
.vjs-play-control { .vjs-play-control {
order: 1 !important; order: 1 !important;