Skip to content

Commit 89a06ad

Browse files
author
Pietro Passarelli - News Labs
committed
Adding some css to player control
1 parent eb53feb commit 89a06ad

File tree

3 files changed

+62
-49
lines changed

3 files changed

+62
-49
lines changed

‎src/lib/TranscriptEditor/MediaPlayer/PlayerControls.js‎

Lines changed: 52 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -43,41 +43,6 @@ class PlayerControls extends React.Component {
4343
render() {
4444
return (
4545
<div className={ style.playerControls }>
46-
<button
47-
className={ style.playerButton }
48-
onClick={ this.props.rollback }>
49-
<FontAwesomeIcon icon={ faUndo } />
50-
</button>
51-
52-
<button
53-
className={ style.playerButton }
54-
onMouseDown={ this.setIntervalHelperBackward }
55-
onMouseUp={ this.clearIntervalHelper }
56-
onClick={ () => {this.props.skipBackward(); } }>
57-
<FontAwesomeIcon icon={ faBackward } />
58-
</button>
59-
60-
<button
61-
className={ style.playerButton }
62-
onClick={ this.props.playMedia }>
63-
{this.props.isPlaying ? <FontAwesomeIcon icon={ faPause } /> : <FontAwesomeIcon icon={ faPlay } />}
64-
</button>
65-
66-
<button
67-
className={ style.playerButton }
68-
onMouseDown={ this.setIntervalHelperForward }
69-
onMouseUp={ this.clearIntervalHelper }
70-
onClick={ () => {this.props.skipForward(); } }>
71-
<FontAwesomeIcon icon={ faForward } />
72-
</button>
73-
74-
<span className={ style.playBackRate }>
75-
<Select
76-
options={ this.props.playbackRateOptions }
77-
currentValue={ this.props.playbackRate.toString() }
78-
name={ 'playbackRate' }
79-
handleChange={ this.props.setPlayBackRate } />
80-
</span>
8146

8247
<div className={ style.timeBox }>
8348
<span className={ style.currentTime }
@@ -87,18 +52,58 @@ class PlayerControls extends React.Component {
8752
<span className={ style.duration }>{this.props.duration}</span>
8853
</div>
8954

90-
<button
91-
className={ style.playerButton }
92-
onClick={ this.props.handleSaveTranscript }>
93-
<FontAwesomeIcon icon={ faSave } />
94-
</button>
55+
<div className={ style.btnsGroup }>
56+
<button
57+
className={ style.playerButton }
58+
onClick={ this.props.rollback }>
59+
<FontAwesomeIcon icon={ faUndo } />
60+
</button>
61+
62+
<button
63+
className={ style.playerButton }
64+
onMouseDown={ this.setIntervalHelperBackward }
65+
onMouseUp={ this.clearIntervalHelper }
66+
onClick={ () => {this.props.skipBackward(); } }>
67+
<FontAwesomeIcon icon={ faBackward } />
68+
</button>
69+
70+
<button
71+
className={ style.playerButton }
72+
onClick={ this.props.playMedia }>
73+
{this.props.isPlaying ? <FontAwesomeIcon icon={ faPause } /> : <FontAwesomeIcon icon={ faPlay } />}
74+
</button>
75+
76+
<button
77+
className={ style.playerButton }
78+
onMouseDown={ this.setIntervalHelperForward }
79+
onMouseUp={ this.clearIntervalHelper }
80+
onClick={ () => {this.props.skipForward(); } }>
81+
<FontAwesomeIcon icon={ faForward } />
82+
</button>
83+
</div>
9584

96-
<button
97-
className={ style.playerButton }
98-
onClick={ this.props.pictureInPicture }
99-
>
100-
<FontAwesomeIcon icon={ faTv } />
101-
</button>
85+
<div className={ style.btnsGroup }>
86+
<span className={ style.playBackRate }>
87+
<Select
88+
options={ this.props.playbackRateOptions }
89+
currentValue={ this.props.playbackRate.toString() }
90+
name={ 'playbackRate' }
91+
handleChange={ this.props.setPlayBackRate } />
92+
</span>
93+
94+
<button
95+
className={ style.playerButton }
96+
onClick={ this.props.handleSaveTranscript }>
97+
<FontAwesomeIcon icon={ faSave } />
98+
</button>
99+
100+
<button
101+
className={ style.playerButton }
102+
onClick={ this.props.pictureInPicture }
103+
>
104+
<FontAwesomeIcon icon={ faTv } />
105+
</button>
106+
</div>
102107

103108
<VolumeControl
104109
handleMuteVolume={ this.props.handleMuteVolume }
@@ -109,7 +114,7 @@ class PlayerControls extends React.Component {
109114
textOverflow: 'ellipsis',
110115
whiteSpace: 'nowrap',
111116
overflow: 'hidden',
112-
width: '40vw',
117+
width: '20vw',
113118
display: 'inline-block',
114119
marginLeft: '1em'
115120
} }>

‎src/lib/TranscriptEditor/MediaPlayer/PlayerControls.module.css‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
margin-left: 0.5em;
77
margin: 1em;
88
display: flex;
9+
justify-content: flex-start;
910
}
1011

1112
.playerControls > * {
@@ -23,13 +24,18 @@
2324
padding: 0.5em;
2425
border: 0;
2526
color: white;
27+
background: color-darkest-grey;
2628
font-size: 1em;
2729
cursor: pointer;
30+
/* border-color: black;
31+
border-width: 0.1rem;
32+
border-style: solid; */
2833
}
2934

3035
.playBackRate{
3136
border: 0;
3237
color: white;
38+
background: color-darkest-grey;
3339
font-size: 1em;
3440
cursor: pointer;
3541
position: relative;
@@ -39,7 +45,7 @@
3945
.playBackRate::before{
4046
content: '×';
4147
position: absolute;
42-
bottom: 11px;
48+
bottom: -2px;
4349
left: 12px;
4450
}
4551

@@ -50,6 +56,8 @@
5056
outline: none;
5157
width: auto;
5258
width: 100%;
59+
color:white;
60+
background-color: color-darkest-grey;
5361
}
5462

5563
.timeBox {

‎src/lib/TranscriptEditor/MediaPlayer/Select.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
-moz-appearance: none;
55
appearance: none;
66
height: 20px;
7-
width: 60px!important;
7+
width: 70px!important;
88
border-radius: 0;
99
padding-left: 8px;
1010
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEyNS4zMDQgMTI1LjMwNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTI1LjMwNCAxMjUuMzA0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPGc+CgkJPHBvbHlnb24gcG9pbnRzPSI2Mi42NTIsMTAzLjg5NSAwLDIxLjQwOSAxMjUuMzA0LDIxLjQwOSAgICIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);

0 commit comments

Comments
 (0)