Fix controls for mini player on mobile

This commit is contained in:
Raphael Wickihalder 2022-04-04 13:02:27 +02:00
parent 234bd2526a
commit bb868777f8
No known key found for this signature in database
GPG key ID: 05179BB92383243D
2 changed files with 12 additions and 8 deletions

View file

@ -318,14 +318,14 @@ export default function FileRenderFloating(props: Props) {
return ( return (
<Draggable <Draggable
onDrag={handleDragMove} onDrag={!isMobile ? handleDragMove : null}
onStart={handleDragStart} onStart={!isMobile ? handleDragStart : null}
onStop={handleDragStop} onStop={!isMobile ? handleDragStop : null}
defaultPosition={position} defaultPosition={position}
position={isFloating ? position : { x: 0, y: 0 }} position={isFloating ? position : { x: 0, y: 0 }}
bounds="parent" bounds="parent"
disabled={noFloatingPlayer} disabled={noFloatingPlayer}
handle=".draggable" handle={!isMobile ? '.draggable' : ''}
cancel=".button" cancel=".button"
> >
<div <div
@ -365,7 +365,7 @@ export default function FileRenderFloating(props: Props) {
)} )}
{isReadyToPlay ? ( {isReadyToPlay ? (
<FileRender className="draggable" uri={uri} /> <FileRender className={classnames({ draggable: !isMobile })} uri={uri} />
) : collectionId && !canViewFile ? ( ) : collectionId && !canViewFile ? (
<div className="content__loading"> <div className="content__loading">
<AutoplayCountdown <AutoplayCountdown
@ -385,7 +385,7 @@ export default function FileRenderFloating(props: Props) {
)} )}
{isFloating && ( {isFloating && (
<div className="draggable content__info"> <div className={classnames('content__info', { draggable: !isMobile })}>
<div className="claim-preview__title" title={title || uri}> <div className="claim-preview__title" title={title || uri}>
<Button label={title || uri} navigate={navigateUrl} button="link" className="content__floating-link" /> <Button label={title || uri} navigate={navigateUrl} button="link" className="content__floating-link" />
</div> </div>

View file

@ -112,7 +112,7 @@
.vjs-play-control { .vjs-play-control {
transform: unset !important; transform: unset !important;
display: none !important; display: inline-block !important;
position: fixed !important; position: fixed !important;
top: 12px !important; top: 12px !important;
left: calc(50% - 80px) !important; left: calc(50% - 80px) !important;
@ -125,7 +125,11 @@
padding: 15px !important; padding: 15px !important;
.vjs-icon-placeholder { .vjs-icon-placeholder {
font-size: 1.2rem !important; &::before {
font-size: 1.8em !important;
line-height: 32px !important;
background-size: 60%;
}
} }
span { span {