progress bar working on mobile

This commit is contained in:
gabriellpr 2022-04-08 15:39:05 -03:00
parent c923bbd4b4
commit c3f17ca8d3
3 changed files with 18 additions and 22 deletions

View File

@ -579,6 +579,7 @@ class VideoPlayer extends Component {
width,
pointerEvents: isResizing ? 'none' : 'inherit',
display: isMinimized && 'none',
background: 'black',
}}
>
<div
@ -621,20 +622,6 @@ class VideoPlayer extends Component {
{
!isPresenter
? [
(
<div className={styles.progressBar}>
<div
className={styles.loaded}
style={{ width: loaded * 100 + '%' }}
>
<div
className={styles.played}
style={{ width: played * 100 / loaded + '%'}}
>
</div>
</div>
</div>
),
(
<div className={hoverToolbarStyle} key="hover-toolbar-external-video">
<VolumeSlider
@ -650,6 +637,19 @@ class VideoPlayer extends Component {
label={intl.formatMessage(intlMessages.refreshLabel)}
/>
{this.renderFullscreenButton()}
<div className={styles.progressBar}>
<div
className={styles.loaded}
style={{ width: loaded * 100 + '%' }}
>
<div
className={styles.played}
style={{ width: played * 100 / loaded + '%'}}
>
</div>
</div>
</div>
</div>
),
(deviceInfo.isMobile && playing) && (

View File

@ -71,12 +71,8 @@
}
.progressBar {
display: none;
:hover > & {
display: block;
}
position: absolute;
bottom: 0;
height: 5px;
width: 100%;

View File

@ -17,8 +17,8 @@
.slider {
@extend %baseIndicator;
display: flex;
position: relative;
bottom: 3.5em;
position: absolute;
bottom: 2.5em;
left: 1em;
padding: 0.25rem 0.5rem;
min-width: 200px;