Music TV Demo - Handle keydown in player view

mozilla-b2g · Nov 26, 2015 · e1ad740 · e1ad740
1 parent f3e4d34
commit e1ad740
Show file tree

Hide file tree

Showing 5 changed files with 88 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,9 +45,72 @@ 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;
+    }
+    if (evt.target === this.controls) {
+      evt.preventDefault();
+
+      var container = this.controls.shadowRoot.lastElementChild;
+
+      var elements = container.querySelectorAll('button');
+      var selectedElement = container.querySelector('.highlight');
+      if (!selectedElement) {
+        elements[0].classList.add('highlight');
+        // TODO: remove the inline style and figure out
+        // why button.highlight style is getting overridden
+        elements[0].style.backgroundColor = '#00caf2';
+      }
+
+      var selectedIndex = [].indexOf.call(elements, selectedElement);
+      switch (evt.key) {
+       case 'ArrowLeft':
+          selectedIndex = clamp(0, elements.length - 1, selectedIndex - 1);
+          break;
+        case 'ArrowRight':
+          selectedIndex = clamp(0, elements.length - 1, selectedIndex + 1);
+          break;
+        case 'Enter':
+          if (selectedIndex == 2 ){
+            // this goes back to home screen.
+            // TODO: figure out why next click doesn't work
+            this.client.method('navigate');
+          } else {
+            simulateClick(elements[selectedIndex]);
+          }
+          break;
+      }
+
+      selectedElement.classList.remove('highlight');
+      selectedElement.style.backgroundColor = 'transparent';
+
+      selectedElement = elements[selectedIndex];
+
+      selectedElement.classList.add('highlight');
+      selectedElement.style.backgroundColor = '#00caf2';
+    }
+    console.log('player keydown == ', evt);
+  });
+
   this.update();
 });
 
+function simulateClick(element) {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+  element.dispatchEvent(event);
+}
+
+function clamp(min, max, value) {
+  return Math.min(Math.max(min, value), max);
+}
+
 PlayerView.prototype.update = function() {
   this.getPlaybackStatus().then((status) => {
     this.getSong(status.filePath).then((song) => {