Mini-Player controls patch (#1688)
* Remove draggable component from mini player on mobile * Replace draggable disabling method * Clean code
This commit is contained in:
parent
363fe82050
commit
4ffec69f25
2 changed files with 57 additions and 58 deletions
|
@ -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], {
|
||||||
|
|
|
@ -93,7 +93,6 @@
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
// width:20px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -101,20 +100,6 @@
|
||||||
.autoplay-countdown {
|
.autoplay-countdown {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.vjs-control-bar {
|
|
||||||
display: inline-block !important;
|
|
||||||
opacity: 1 !important;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
background: unset !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.vjs-control {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vjs-play-control {
|
.vjs-play-control {
|
||||||
transform: unset !important;
|
transform: unset !important;
|
||||||
|
@ -135,6 +120,7 @@
|
||||||
font-size: 2.2em !important;
|
font-size: 2.2em !important;
|
||||||
line-height: 32px !important;
|
line-height: 32px !important;
|
||||||
background-size: 60%;
|
background-size: 60%;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -152,6 +138,34 @@
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vjs-control-bar {
|
||||||
|
display: inline-block !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 {
|
||||||
|
background: unset !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vjs-control {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.vjs-play-control.vjs-playing {
|
.vjs-play-control.vjs-playing {
|
||||||
.vjs-icon-placeholder::before {
|
.vjs-icon-placeholder::before {
|
||||||
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue