diff --git a/renderer/index.css b/renderer/index.css index 12b14528..4568754c 100644 --- a/renderer/index.css +++ b/renderer/index.css @@ -27,6 +27,8 @@ body { -webkit-user-select: none; -webkit-app-region: drag; height: 100%; + display: flex; + flex-flow: column; } /* @@ -104,6 +106,7 @@ a:not(.disabled):hover, i:not(.disabled):hover { height: 37px; padding-top: 6px; overflow: hidden; + flex: 0 1 auto; } .header .title { @@ -150,9 +153,10 @@ a:not(.disabled):hover, i:not(.disabled):hover { */ .content { + position: relative; width: 100%; - height: calc(100% - 38px); overflow: auto; + flex: 1 1 auto; } body.drag::before { @@ -171,11 +175,14 @@ body.drag::before { */ .player { + position: absolute; + width: 100%; height: 100%; background-color: #000; } .player .letterbox { + width: 100%; height: 100%; display: flex; } @@ -269,7 +276,7 @@ body.drag::before { .player-controls { position: fixed; - background: rgb(40, 40, 40); + background: rgba(40, 40, 40, 0.8); width: 100%; height: 38px; bottom: 0; @@ -331,11 +338,21 @@ body.drag::before { .player-controls .chromecast, .player-controls .airplay, -.player-controls .fullscreen { +.player-controls .fullscreen, +.player-controls .back { display: block; width: 20px; height: 20px; margin: 5px; +} + +.player-controls .back { + float: left; +} + +.player-controls .chromecast, +.player-controls .airplay, +.player-controls .fullscreen { float: right; } diff --git a/renderer/index.js b/renderer/index.js index 48cfd503..89c63a6b 100644 --- a/renderer/index.js +++ b/renderer/index.js @@ -84,6 +84,17 @@ function init () { electron.ipcRenderer.send('addTorrentFromPaste') }) + document.addEventListener('keydown', function (e) { + console.log('keydown ' + e.which) + if (e.which === 27) { /* ESC means either exit fullscreen or go back */ + if (state.view.isFullScreen) { + dispatch('toggleFullScreen') + } else { + dispatch('back') + } + } + }) + window.addEventListener('focus', function () { state.view.isFocused = true if (state.view.dock.badge > 0) electron.ipcRenderer.send('setBadge', '') diff --git a/renderer/views/app.js b/renderer/views/app.js index 16e01df6..3315df8c 100644 --- a/renderer/views/app.js +++ b/renderer/views/app.js @@ -17,7 +17,12 @@ function App (state, dispatch) { } } - var header = state.view.isFullScreen ? null : Header(state, dispatch) + // Show the header only when we're outside of fullscreen + // Also don't show it in the video player except in OSX + var isOSX = process.platform === 'darwin' + var isVideo = state.view.url === '/player' + var isFullScreen = state.view.isFullScreen + var header = !isFullScreen && (!isVideo || isOSX) ? Header(state, dispatch) : null return hx`
diff --git a/renderer/views/player.js b/renderer/views/player.js index e36fc294..abf9d186 100644 --- a/renderer/views/player.js +++ b/renderer/views/player.js @@ -54,7 +54,7 @@ function Player (state, dispatch) { // TODO: cast buttons function renderPlayerControls (state, dispatch) { var positionPercent = 100 * state.video.currentTime / state.video.duration - var playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 6px)' } + var playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 8px)' } var torrent = state.view.torrentPlaying._torrent var elements = [ @@ -75,6 +75,7 @@ function renderPlayerControls (state, dispatch) { ` ] + // If we've detected a Chromecast or AppleTV, the user can play video there if (state.view.devices.chromecast) { elements.push(hx` `) } + // On OSX, the back button is in the title bar of the window; see app.js + // On other platforms, we render one over the video on mouseover + if(process.platform !== 'darwin') { + elements.push(hx` + dispatch('back')}> + chevron_left + + `) + } elements.push(hx` dispatch('playPause')}> ${state.video.isPaused ? 'play_arrow' : 'pause'}