Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-18 17:02:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

time label rendered next to play button

Browse source
This commit is contained in:
NikolaBorislavovHristov 2018-11-12 17:30:11 +02:00
parent 40433a2895
commit da602e9136
2 changed files with 71 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/routes/Player/ControlBar/ControlBar.js
View file

@ -66,15 +66,11 @@ class ControlBar extends PureComponent {
this.setState({ seekTime: this.calculateSeekTime(clientX, currentTarget) });
}
renderPlayPauseButton() {
return (
<div className={styles['button']} onClick={this.props.paused ? this.props.play : this.props.pause}>
<Icon
className={styles['icon']}
icon={this.props.paused ? 'ic_play' : 'ic_pause'}
/>
</div>
);
formatTime = (time) => {
const hours = Math.floor((time / (1000 * 60 * 60)) % 24);
const minutes = Math.floor((time / (1000 * 60)) % 60);
const seconds = Math.floor((time / 1000) % 60);
return `${('0' + hours).slice(-2)}:${('0' + minutes).slice(-2)}:${('0' + seconds).slice(-2)}`;
}
renderSeekBar() {
@ -97,6 +93,32 @@ class ControlBar extends PureComponent {
);
}
renderPlayPauseButton() {
return (
<div className={styles['button']} onClick={this.props.paused ? this.props.play : this.props.pause}>
<Icon
className={styles['icon']}
icon={this.props.paused ? 'ic_play' : 'ic_pause'}
/>
</div>
);
}
renderTimeLabel() {
if (this.props.time === null || this.props.duration === null) {
return null;
}
const currentTime = this.state.seekTime !== -1 ?
this.formatTime(this.state.seekTime)
:
this.formatTime(this.props.time);
return (
<div className={styles['time-label']}>{currentTime} / {this.formatTime(this.props.duration)}</div>
);
}
render() {
return (
<div className={classnames(this.props.className, styles['root-container'])}>
@ -104,6 +126,7 @@ class ControlBar extends PureComponent {
<div className={styles['buttons-bar']}>
{this.renderPlayPauseButton()}
<div className={styles['separator']} />
{this.renderTimeLabel()}
</div>
</div>
);

53
src/routes/Player/ControlBar/styles.less
View file

@ -1,10 +1,14 @@
@import 'stremio-colors';
@control-bar-height: 68px;
@control-bar-height: 84px;
@seek-bar-height: 26px;
@buttons-bar-height: 42px;
.root-container {
height: @control-bar-height;
display: flex;
flex-direction: column;
justify-content: space-around;
top: initial !important;
padding-left: 2%;
padding-right: 2%;
@ -57,24 +61,45 @@
}
}
.button {
height: (@control-bar-height - @seek-bar-height);
width: (@control-bar-height - @seek-bar-height);
.buttons-bar {
width: 100%;
height: @buttons-bar-height;
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
cursor: pointer;
.icon {
width: 70%;
height: 70%;
fill: @colorwhite80;
.button {
height: @buttons-bar-height;
width: @buttons-bar-height;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.icon {
width: 70%;
height: 70%;
fill: @colorwhite80;
}
&:hover {
.icon {
fill: @colorwhite;
}
}
}
&:hover {
.icon {
fill: @colorwhite;
}
.separator {
margin-left: round((@buttons-bar-height * 0.25));
margin-right: round((@buttons-bar-height * 0.25));
width: 1px;
height: @buttons-bar-height;
background-color: @colorneutrallight80;
}
.time-label {
color: @colorwhite;
font-size: 16px;
}
}
}