Music TV Demo - Handle keydown in player view

mozilla-b2g · Nov 30, 2015 · bfae611 · bfae611
1 parent f3e4d34
commit bfae611
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 5 deletions.
diff --git a/apps/music/js/app.js b/apps/music/js/app.js
@@ -1,4 +1,4 @@
-/* exported onSearchOpen, onSearchClose */
+/* exported onSearchOpen, onSearchClose, navigateBack */
 /* global SERVICE_WORKERS, bridge */
 'use strict';
 
@@ -292,6 +292,18 @@ function navigateToURL(url, replaceRoot) {
   window.history.pushState(null, null, url);
 }
 
+function navigateBack() {
+  var isPlayerView = viewStack.activeView &&
+    viewStack.activeView.url === VIEWS.PLAYER.URL;
+
+  if (viewStack.views.length > 1) {
+    // Don't destroy the popped view if it is the "Player" view.
+    viewStack.popView(!isPlayerView);
+    window.history.back();
+    return;
+  }
+}
+
 function updateOverlays() {
 
   if (emptyOverlay) {

diff --git a/apps/music/js/endpoint.js b/apps/music/js/endpoint.js
@@ -1,6 +1,6 @@
 /* global AlbumArtCache, AudioMetadata, Database, LazyLoader, NFCShare,
-          PlaybackQueue, Remote, bridge, navigateToURL, onSearchOpen,
-          onSearchClose */
+          PlaybackQueue, Remote, bridge, navigateToURL, navigateBack,
+          onSearchOpen, onSearchClose */
 'use strict';
 
 var audio           = null;
@@ -466,7 +466,11 @@ function getDatabaseStatus() {
 }
 
 function navigate(url) {
-  navigateToURL(url);
+  if(url) {
+    navigateToURL(url);
+  } else {
+    navigateBack();
+  }
 }
 
 function searchOpen() {

diff --git a/apps/music/views/player-tv/index.html b/apps/music/views/player-tv/index.html
@@ -31,6 +31,6 @@
 <body role="application">
   <music-artwork id="artwork"></music-artwork>
   <music-seek-bar id="seek-bar"></music-seek-bar>
-  <music-controls id="controls"></music-controls>
+  <music-controls id="controls" tabindex=1></music-controls>
 </body>
 </html>
diff --git a/apps/music/views/player-tv/view.css b/apps/music/views/player-tv/view.css
@@ -3,3 +3,7 @@ music-artwork {
   width: 100%;
   height: calc(100% - 9.1rem);
 }
+
+#container > button.highlight {
+  background: var(--highlight-color);
+}
diff --git a/apps/music/views/player-tv/view.js b/apps/music/views/player-tv/view.js
@@ -45,6 +45,31 @@ var PlayerView = View.extend(function PlayerView() {
     this.seekBar.elapsedTime = elapsedTime;
   });
 
+  window.addEventListener('keydown', (evt) => {
+    if (evt.key === 'Escape') {
+      // Goes back to music home screen
+      this.client.method('navigate');
+      return;
+    }
+    switch (evt.key) {
+      case 'ArrowLeft':
+        this.previous();
+        break;
+      case 'ArrowRight':
+        this.next();
+        break;
+      case 'Enter':
+        if (this.controls.paused) {
+          this.play();
+        }
+        else {
+          this.pause();
+        }
+        break;
+    }
+    console.log('player keydown == ', evt);
+  });
+
   this.update();
 });