Cast buttons and fullscreen in player controls

main/ipc.js

@@ -27,6 +27,10 @@ function init () {
   ipcMain.on('setProgress', function (e, progress) {
     setProgress(progress)
   })
+
+  ipcMain.on('toggleFullScreen', function (e) {
+    windows.main.setFullScreen(!windows.main.isFullScreen())
+  })
 }
 
 function addTorrentFromPaste () {

main/menu.js

@@ -8,7 +8,6 @@ function toggleFullScreen () {
   debug('toggleFullScreen')
   if (windows.main) {
     windows.main.setFullScreen(!windows.main.isFullScreen())
-    onToggleFullScreen()
   }
 }
 

renderer/index.css

@@ -325,6 +325,16 @@ body.drag::before {
   margin: 5px auto;
 }
 
+.player-controls .chromecast,
+.player-controls .airplay,
+.player-controls .fullscreen {
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin: 5px;
+  float: right;
+}
+
 .player .scrub-bar:hover .loading-bar {
   height: 5px;
   margin-top: 6px;

renderer/index.js

@@ -163,6 +163,9 @@ function dispatch (action, ...args) {
     state.video.jumpToTime = args[0] /* seconds */
     update()
   }
+  if (action === 'toggleFullScreen') {
+    electron.ipcRenderer.send('toggleFullScreen')
+  }
 }
 
 electron.ipcRenderer.on('addTorrent', function (e, torrentId) {

renderer/views/player.js

@@ -53,9 +53,10 @@ function Player (state, dispatch) {
 function renderPlayerControls (state, dispatch) {
   var positionPercent = 100 * state.video.currentTime / state.video.duration
   var playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 4px)' }
+  var torrent = state.view.torrentPlaying._torrent
 
-  return hx`
+  var elements = [
-    <div class="player-controls">
+    hx`
       <div class="scrub-bar"
         draggable="true"
         onclick=${handleScrub},
@@ -63,11 +64,39 @@ function renderPlayerControls (state, dispatch) {
         ${renderLoadingBar(state)}
         <div class="playback-cursor" style=${playbackCursorStyle}></div>
       </div>
-      <i class="icon play-pause" onclick=${() => dispatch('playPause')}>
+    `
-        ${state.video.isPaused ? 'play_arrow' : 'pause'}
+  ]
+  if (state.view.devices.chromecast) {
+    elements.push(hx`
+      <i.icon.chromecast
+        class="${!torrent.ready ? 'disabled' : ''}"
+        onclick=${() => dispatch('openChromecast', torrent)}>
+        cast
       </i>
-    </div>
+    `)
-  `
+  }
+  if (state.view.devices.airplay) {
+    elements.push(hx`
+      <i.icon.airplay
+        class="${!torrent.ready ? 'disabled' : ''}"
+        onclick=${() => dispatch('openAirplay', torrent)}>
+        airplay
+      </i>
+    `)
+  }
+  elements.push(hx`
+    <i class="icon fullscreen"
+      onclick=${() => dispatch('toggleFullScreen')}>
+      fullscreen
+    </i>
+  `)
+  elements.push(hx`
+    <i class="icon play-pause" onclick=${() => dispatch('playPause')}>
+      ${state.video.isPaused ? 'play_arrow' : 'pause'}
+    </i>
+  `)
+
+  return hx`<div class="player-controls">${elements}</div>`
 
   // Handles a click or drag to scrub (jump to another position in the video)
   function handleScrub (e) {

renderer/views/torrent-list.js

@@ -44,26 +44,6 @@ function renderTorrent (state, dispatch, torrent) {
     `
   ]
 
-  if (state.view.chromecast) {
-    elements.push(hx`
-      <i.btn.icon.chromecast
-        class="${!torrent.ready ? 'disabled' : ''}"
-        onclick=${() => dispatch('openChromecast', torrent)}>
-        cast
-      </i>
-    `)
-  }
-
-  if (state.view.devices.airplay) {
-    elements.push(hx`
-      <i.btn.icon.airplay
-        class="${!torrent.ready ? 'disabled' : ''}"
-        onclick=${() => dispatch('openAirplay', torrent)}>
-        airplay
-      </i>
-    `)
-  }
-
   return hx`<div class="torrent" style=${style}>${elements}</div>`
 }