From 11f36468e1b731be2bbe3fef560cf85adf4a8239 Mon Sep 17 00:00:00 2001 From: Feross Aboukhadijeh Date: Fri, 4 Mar 2016 16:24:33 -0800 Subject: [PATCH 1/4] native apps don't use the pointer cursor Even video player apps. Confirmed by looking at VLC, Quicktime, and Playback. --- renderer/index.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/renderer/index.css b/renderer/index.css index fd862ed3..9adbbb75 100644 --- a/renderer/index.css +++ b/renderer/index.css @@ -283,7 +283,6 @@ body.drag::before { height: 23px; /* 3px .loading-bar plus 10px above and below */ top: -10px; left: 0; - cursor: pointer; } .player-controls .loading-bar { @@ -314,5 +313,4 @@ body.drag::before { width: 20px; height: 20px; margin: 5px auto; - cursor: pointer; } From 6d1223e0904e290388b2d40d8126617e3eec0a24 Mon Sep 17 00:00:00 2001 From: Feross Aboukhadijeh Date: Fri, 4 Mar 2016 16:24:57 -0800 Subject: [PATCH 2/4] add css transition to player controls --- renderer/index.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/renderer/index.css b/renderer/index.css index 9adbbb75..68175032 100644 --- a/renderer/index.css +++ b/renderer/index.css @@ -259,10 +259,10 @@ body.drag::before { content: ' — '; } - /* * VIDEO CONTROLS */ + .player-controls .bottom-bar { position: fixed; width: 100%; @@ -270,6 +270,7 @@ body.drag::before { bottom: 0; opacity: 0; background-color: rgba(0, 0, 0, 0.25); + transition: all 0.1s ease-out; } .player:hover .bottom-bar { From b6f24f7726e01318752babcff1c8e58dc475722c Mon Sep 17 00:00:00 2001 From: Feross Aboukhadijeh Date: Fri, 4 Mar 2016 16:48:37 -0800 Subject: [PATCH 3/4] fix: hide add button when on player page --- renderer/views/header.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 From ad8399af1c9ce6869afd0f539a43e54c12e84197 Mon Sep 17 00:00:00 2001 From: Feross Aboukhadijeh Date: Fri, 4 Mar 2016 17:46:42 -0800 Subject: [PATCH 4/4] Nicer player controls - make bottom bar match header bar color - enlarge cursor and loading bar on hover - remove extraneous .bottom-bar class --- renderer/index.css | 43 +++++++++++++++++++++++++++++----------- renderer/views/player.js | 22 ++++++++++---------- 2 files changed, 42 insertions(+), 23 deletions(-) diff --git a/renderer/index.css b/renderer/index.css index 68175032..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; } @@ -260,20 +260,20 @@ body.drag::before { } /* - * 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; } @@ -290,23 +290,29 @@ body.drag::before { 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 { @@ -315,3 +321,16 @@ body.drag::before { height: 20px; margin: 5px auto; } + +.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/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 */