kalugin66/webtorrent-desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Playback controls: fix scrub ghosting

Browse Source
This commit is contained in:
DC
2016-03-05 02:13:04 -08:00
parent 4c010cb642
commit 1b630b5025
2 changed files with 21 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
renderer/index.css
View File

@@ -290,8 +290,8 @@ body.drag::before {
.player-controls .loading-bar { .player-controls .loading-bar {
position: relative; position: relative;
width: 100%; width: 100%;
top: -3px;
height: 3px; height: 3px;
margin-top: 7px;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
transition: all 0.1s ease-out; transition: all 0.1s ease-out;
position: absolute; position: absolute;
@@ -306,7 +306,7 @@ body.drag::before {
.player-controls .playback-cursor { .player-controls .playback-cursor {
position: absolute; position: absolute;
top: 2px; top: -8px;
background-color: #FFF; background-color: #FFF;
width: 0; width: 0;
height: 0; height: 0;
@@ -325,6 +325,11 @@ body.drag::before {
margin: 5px auto; margin: 5px auto;
} }
.player-controls .chromecast,
.player-controls .airplay {
font-size: 22px; /* make the cast icons less huge */
}
.player-controls .chromecast, .player-controls .chromecast,
.player-controls .airplay, .player-controls .airplay,
.player-controls .fullscreen { .player-controls .fullscreen {
@@ -335,12 +340,11 @@ body.drag::before {
float: right; float: right;
} }
.player .scrub-bar:hover .loading-bar { .player .playback-bar:hover .loading-bar {
height: 5px; height: 5px;
margin-top: 6px;
} }
.player .scrub-bar:hover .playback-cursor { .player .playback-bar:hover .playback-cursor {
width: 14px; width: 14px;
height: 14px; height: 14px;
border-radius: 7px; border-radius: 7px;

23
renderer/views/player.js
View File

@@ -52,18 +52,25 @@ function Player (state, dispatch) {
// TODO: cast buttons // TODO: cast buttons
function renderPlayerControls (state, dispatch) { function renderPlayerControls (state, dispatch) {
var positionPercent = 100 * state.video.currentTime / state.video.duration var positionPercent = 100 * state.video.currentTime / state.video.duration
var playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 4px)' } var playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 6px)' }
var torrent = state.view.torrentPlaying._torrent var torrent = state.view.torrentPlaying._torrent
var elements = [ var elements = [
hx` hx`
<div class="scrub-bar" <div class="playback-bar">
draggable="true"
onclick=${handleScrub},
ondrag=${handleScrub}>
${renderLoadingBar(state)} ${renderLoadingBar(state)}
<div class="playback-cursor" style=${playbackCursorStyle}></div> <div class="playback-cursor" style=${playbackCursorStyle}></div>
<div class="scrub-bar"
draggable="true"
onclick=${handleScrub},
ondrag=${handleScrub}></div>
</div> </div>
`,
hx`
<i class="icon fullscreen"
onclick=${() => dispatch('toggleFullScreen')}>
fullscreen
</i>
` `
] ]
if (state.view.devices.chromecast) { if (state.view.devices.chromecast) {
@@ -84,12 +91,6 @@ function renderPlayerControls (state, dispatch) {
</i> </i>
`) `)
} }
elements.push(hx`
<i class="icon fullscreen"
onclick=${() => dispatch('toggleFullScreen')}>
fullscreen
</i>
`)
elements.push(hx` elements.push(hx`
<i class="icon play-pause" onclick=${() => dispatch('playPause')}> <i class="icon play-pause" onclick=${() => dispatch('playPause')}>
${state.video.isPaused ? 'play_arrow' : 'pause'} ${state.video.isPaused ? 'play_arrow' : 'pause'}