Music TV Demo - Handle keydown in player view

mozilla-b2g · Dec 1, 2015 · 749c5d5 · 749c5d5
1 parent 6d0172b
commit 749c5d5
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 9 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';
 
@@ -28,8 +28,8 @@ const VIEWS = {
   ALBUMS:          {TAB: 'albums',    URL: '/views/albums/index.html'},
   ARTIST_DETAIL:   {TAB: 'artists',   URL: '/views/artist-detail/index.html'},
   ARTISTS:         {TAB: 'artists',   URL: '/views/artists/index.html'},
-  HOME:            {TAB: 'home',      URL: '/views/home/index.html'},
-  PLAYER:          {TAB: 'home',      URL: '/views/player/index.html'},
+  HOME:            {TAB: 'home',      URL: '/views/home-tv/index.html'},
+  PLAYER:          {TAB: 'home',      URL: '/views/player-tv/index.html'},
   PLAYLIST_DETAIL: {TAB: 'playlists', URL: '/views/playlist-detail/index.html'},
   PLAYLISTS:       {TAB: 'playlists', URL: '/views/playlists/index.html'},
   SONGS:           {TAB: 'songs',     URL: '/views/songs/index.html'}
@@ -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/home-tv/view.js b/apps/music/views/home-tv/view.js
@@ -24,6 +24,9 @@ var HomeView = View.extend(function HomeView() {
     var selectedIndex = [].indexOf.call(elements, selectedElement);
 
     switch (evt.key) {
+      case 'Escape':
+        this.client.method('navigate', '/player-tv');
+        break;
       case 'ArrowUp':
         selectedIndex = clamp(0, elements.length - 1, selectedIndex - 3);
         break;
@@ -41,9 +44,6 @@ var HomeView = View.extend(function HomeView() {
         this.client.method('navigate', selectedElement.getAttribute('href'));
         break;
     }
-
-    console.log('keydown == ', evt);
-
     selectedElement.classList.remove('selected');
 
     selectedElement = elements[selectedIndex];

diff --git a/apps/music/views/player-tv/view.js b/apps/music/views/player-tv/view.js
@@ -45,6 +45,29 @@ var PlayerView = View.extend(function PlayerView() {
     this.seekBar.elapsedTime = elapsedTime;
   });
 
+  window.addEventListener('keydown', (evt) => {
+    switch (evt.key) {
+      case 'Escape':
+        // Goes back to music home screen
+        this.client.method('navigate');
+        break;
+      case 'ArrowLeft':
+        this.previous();
+        break;
+      case 'ArrowRight':
+        this.next();
+        break;
+      case 'Enter':
+        if (this.controls.paused) {
+          this.play();
+        }
+        else {
+          this.pause();
+        }
+        break;
+    }
+  });
+
   this.update();
 });