diff --git a/renderer/index.css b/renderer/index.css index fd862ed3..102a8356 100644 --- a/renderer/index.css +++ b/renderer/index.css @@ -91,7 +91,7 @@ a:not(.disabled):hover, i:not(.disabled):hover { height: 40px; border-radius: 20px; font-size: 22px; - transition: all 0.05s ease-out; + transition: all 0.1s ease-out; text-align: center; } @@ -192,7 +192,7 @@ body.drag::before { background-repeat: no-repeat; background-size: cover; background-position: 0 50%; - transition: all 0.05s ease-out; + transition: all 0.1s ease-out; position: relative; } @@ -259,20 +259,21 @@ body.drag::before { content: ' — '; } - /* - * VIDEO CONTROLS + * PLAYER CONTROLS */ -.player-controls .bottom-bar { + +.player-controls { position: fixed; + background: rgb(40, 40, 40); width: 100%; height: 38px; bottom: 0; opacity: 0; - background-color: rgba(0, 0, 0, 0.25); + transition: all 0.1s ease-out; } -.player:hover .bottom-bar { +.player:hover .player-controls { opacity: 1; } @@ -283,30 +284,35 @@ body.drag::before { height: 23px; /* 3px .loading-bar plus 10px above and below */ top: -10px; left: 0; - cursor: pointer; } .player-controls .loading-bar { position: relative; width: 100%; height: 3px; + margin-top: 7px; background-color: rgba(0, 0, 0, 0.3); + transition: all 0.1s ease-out; + position: absolute; } .player-controls .loading-bar-part { position: absolute; + background-color: #dd0000; top: 0; height: 100%; - background-color: #dd0000; } .player-controls .playback-cursor { position: absolute; - top: -2px; - width: 7px; - height: 7px; - border-radius: 2px; - border: 3px solid #bbbbbb; + top: 2px; + margin-top: 7px; + margin-left: 7px; + background-color: #FFF; + width: 0; + height: 0; + border-radius: 0; + transition: all 0.1s ease-out; } .player-controls .play-pause { @@ -314,5 +320,17 @@ body.drag::before { width: 20px; height: 20px; margin: 5px auto; - cursor: pointer; +} + +.player .scrub-bar:hover .loading-bar { + height: 5px; + margin-top: 6px; +} + +.player .scrub-bar:hover .playback-cursor { + width: 14px; + height: 14px; + margin-top: 0; + margin-left: 0; + border-radius: 7px; } diff --git a/renderer/views/header.js b/renderer/views/header.js index 647e5ea1..ca0c3f0e 100644 --- a/renderer/views/header.js +++ b/renderer/views/header.js @@ -18,7 +18,7 @@ function Header (state, dispatch) { }, 'chevron_right') ]), (function () { - if (state.url !== '/player') { + if (state.view.url !== '/player') { return h('.nav.right', [ h('i.icon.add', { onclick: onAddTorrent diff --git a/renderer/views/player.js b/renderer/views/player.js index 8aaa3f96..2b0405f1 100644 --- a/renderer/views/player.js +++ b/renderer/views/player.js @@ -49,26 +49,26 @@ function Player (state, dispatch) { function renderPlayerControls (state, dispatch) { var positionPercent = 100 * state.video.currentTime / state.video.duration return h('.player-controls', [ - h('.bottom-bar', [ + h('.scrub-bar', { + onclick: handleScrub, + ondrag: handleScrub + }, [ h('.loading-bar', renderLoadingBar(state)), - h('.scrub-bar', { - draggable: true, - onclick: handleScrub, - ondrag: handleScrub - }), h('.playback-cursor', { style: { left: 'calc(' + positionPercent + '% - 4px)' } - }), - h('i.icon.play-pause', { - onclick: () => dispatch('playPause') - }, state.video.isPaused ? 'play_arrow' : 'pause') - ]) + }) + ]), + h('i.icon.play-pause', { + onclick: () => dispatch('playPause') + }, state.video.isPaused ? 'play_arrow' : 'pause') ]) // Handles a click or drag to scrub (jump to another position in the video) function handleScrub (e) { + // TODO: don't use remote -- it does IPC with the main process which is overkill + // just to get the width var windowWidth = electron.remote.getCurrentWindow().getBounds().width var fraction = e.clientX / windowWidth var position = fraction * state.video.duration /* seconds */