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

Mini-Player controls patch (#1688)

Browse source 
* Remove draggable component from mini player on mobile

* Replace draggable disabling method

* Clean code
This commit is contained in:
Rave | 図書館猫 2022-06-14 08:16:23 +02:00 committed by GitHub
parent 363fe82050
commit 4ffec69f25
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 57 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ui/component/fileRenderFloating/view.jsx
View file

@ -375,15 +375,15 @@ export default function FileRenderFloating(props: Props) {
return ( return (
<Draggable <Draggable
onDrag={!isMobile ? handleDragMove : undefined} onDrag={handleDragMove}
onStart={!isMobile ? handleDragStart : undefined} onStart={handleDragStart}
onStop={!isMobile ? handleDragStop : undefined} onStop={handleDragStop}
defaultPosition={position} defaultPosition={position}
position={isFloating ? position : { x: 0, y: 0 }} position={isFloating ? position : { x: 0, y: 0 }}
bounds="parent" bounds="parent"
disabled={noFloatingPlayer} handle=".draggable"
handle={!isMobile ? '.draggable' : ''}
cancel=".button" cancel=".button"
disabled={noFloatingPlayer}
> >
<div <div
className={classnames([CONTENT_VIEWER_CLASS], { className={classnames([CONTENT_VIEWER_CLASS], {

105
ui/scss/component/_content.scss
View file

@ -93,7 +93,6 @@
.icon { .icon {
flex-shrink: 0; flex-shrink: 0;
// width:20px;
} }
} }
} }
@ -101,12 +100,64 @@
.autoplay-countdown { .autoplay-countdown {
display: none; display: none;
} }
.vjs-play-control {
transform: unset !important;
display: inline-block !important;
position: fixed !important;
top: 12px !important;
left: calc(50% - 80px) !important;
height: 32px !important;
width: 32px !important;
background-color: rgba(var(--color-primary-static), 0.6) !important;
border-radius: 50% !important;
opacity: 1 !important;
pointer-events: unset !important;
padding: 15px !important;
.vjs-icon-placeholder {
&::before {
font-size: 2.2em !important;
line-height: 32px !important;
background-size: 60%;
pointer-events: none;
}
}
span {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
&::before {
line-height: 32px !important;
}
}
.vjs-control-text {
display: none !important;
}
}
} }
.vjs-control-bar { .vjs-control-bar {
display: inline-block !important; display: inline-block !important;
opacity: 1 !important; opacity: 1 !important;
.vjs-progress-control.vjs-control {
top: 40px;
margin: unset !important;
width: 100%;
max-width: 100%;
.vjs-slider {
margin: 0 !important;
div,
span {
height: 3px !important;
}
}
}
&::before { &::before {
background: unset !important; background: unset !important;
} }
@ -116,43 +167,6 @@
display: none; display: none;
} }
.vjs-play-control {
transform: unset !important;
display: inline-block !important;
position: fixed !important;
top: 12px !important;
left: calc(50% - 80px) !important;
height: 32px !important;
width: 32px !important;
background-color: rgba(var(--color-primary-static), 0.6) !important;
border-radius: 50% !important;
opacity: 1 !important;
pointer-events: unset !important;
padding: 15px !important;
.vjs-icon-placeholder {
&::before {
font-size: 2.2em !important;
line-height: 32px !important;
background-size: 60%;
}
}
span {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
&::before {
line-height: 32px !important;
}
}
.vjs-control-text {
display: none !important;
}
}
.vjs-play-control.vjs-playing { .vjs-play-control.vjs-playing {
.vjs-icon-placeholder::before { .vjs-icon-placeholder::before {
content: '' !important; content: '' !important;
@ -171,21 +185,6 @@
} }
} }
.video-js {
.vjs-progress-control.vjs-control {
top: 38px;
margin: unset !important;
max-width: 100%;
.vjs-slider {
margin: 0 !important;
div,
span {
height: 2px !important;
}
}
}
}
.content__info { .content__info {
margin-top: -50px; margin-top: -50px;
opacity: 0; opacity: 0;