mozilla-b2g · punamdahiya · Nov 17, 2015 · Nov 26, 2015
diff --git a/apps/music/css/tv.css b/apps/music/css/tv.css
@@ -0,0 +1,7 @@
+#view-stack {
+  bottom: 0;
+}
+
+#tab-bar {
+  display: none !important;
+}
diff --git a/apps/music/elements/music-view-stack.js b/apps/music/elements/music-view-stack.js
@@ -217,6 +217,7 @@ proto.setRootView = function(url) {
       newActiveView.frame.contentWindow.dispatchEvent(
         new CustomEvent('viewvisible')
       );
+      setTimeout(() => newActiveView.frame.contentWindow.focus(), 100);
 
       this.dispatchEvent(new CustomEvent('change', { detail: newActiveView }));
     });
@@ -245,6 +246,7 @@ proto.pushView = function(url) {
       newActiveView.frame.contentWindow.dispatchEvent(
         new CustomEvent('viewvisible')
       );
+      setTimeout(() => newActiveView.frame.contentWindow.focus(), 100);
 
       this.dispatchEvent(new CustomEvent('change', { detail: newActiveView }));
     });
@@ -279,6 +281,7 @@ proto.popView = function(destroy) {
       newActiveView.frame.contentWindow.dispatchEvent(
         new CustomEvent('viewvisible')
       );
+      setTimeout(() => newActiveView.frame.contentWindow.focus(), 100);
 
       this.dispatchEvent(new CustomEvent('change', { detail: newActiveView }));
 

diff --git a/apps/music/index-tv.html b/apps/music/index-tv.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html class="theme-media">
+<head>
+  <meta charset="utf-8">
+  <title>Music</title>
+  <meta name="description" content="Gaia Music">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
+  <meta name="theme-group" content="theme-media">
+  <meta name="theme-color" content="var(--header-background)">
+  <!-- Localization -->
+  <meta name="defaultLanguage" content="en-US">
+  <meta name="availableLanguages" content="en-US">
+  <link rel="localization" href="/locales/music.{locale}.properties">
+  <link rel="localization" href="/shared/locales/media/media.{locale}.properties">
+  <!-- Stylesheets -->
+  <link rel="stylesheet" href="/components/gaia-icons/gaia-icons.css">
+  <link rel="stylesheet" href="/components/gaia-theme/gaia-theme.css">
+  <link rel="stylesheet" href="/css/app.css">
+  <link rel="stylesheet" href="/css/tv.css">
+  <!-- Deferred Scripts -->
+  <script defer src="/components/bridge/bridge.js"></script>
+  <script defer src="/shared/js/intl/l20n-service.js"></script>
+  <script defer src="/shared/js/intl/l20n-client.js"></script>
+  <script defer src="/shared/js/intl_helper.js"></script>
+  <script defer src="/components/gaia-header/dist/gaia-header.js"></script>
+  <script defer src="/components/gaia-toolbar/gaia-toolbar.js"></script>
+  <script defer src="/elements/music-overlay.js"></script>
+  <script defer src="/elements/music-scan-progress.js"></script>
+  <script defer src="/elements/music-tab-bar.js"></script>
+  <script defer src="/elements/music-view-stack.js"></script>
+  <script defer src="/shared/js/lazy_loader.js"></script>
+  <script defer src="/shared/js/mediadb.js"></script>
+  <script defer src="/js/db.js"></script>
+  <script defer src="/js/endpoint.js"></script>
+  <script defer src="/js/config.js"></script>
+  <script defer src="/js/app.js"></script>
+  <!-- Lazy-Loaded Scripts -->
+  <!--
+  <script src="/shared/js/media/remote_controls.js"></script>
+  <script src="/shared/js/omadrm/fl.js"></script>
+  <script src="/shared/js/async_storage.js"></script>
+  <script src="/shared/js/bluetooth_helper.js"></script>
+  <script src="/shared/js/image_utils.js"></script>
+  <script src="/shared/js/text_normalizer.js"></script>
+  <script src="/js/queue.js"></script>
+  <script src="/js/remote.js"></script>
+  <script src="/js/nfc_share.js"></script>
+  -->
+</head>
+<body role="application">
+  <gaia-header id="header" no-font-fit>
+    <h1 id="header-title" data-l10n-id="music"></h1>
+    <button id="player-button" data-icon="play-circle" data-l10n-id="go-to-player-view" hidden></button>
+    <button id="activity-done-button" hidden></button>
+  </gaia-header>
+
+  <music-view-stack id="view-stack">
+    <iframe src="/views/home-tv/index.html"></iframe>
+  </music-view-stack>
+
+  <music-tab-bar id="tab-bar">
+    <button value="home-tv"
+        data-url="/home-tv"
+        data-icon="grid"
+        data-l10n-id="home-tab">
+    </button>
+  </music-tab-bar>
+
+  <music-overlay id="empty-overlay"
+      heading-l10n-id="empty-title"
+      message-l10n-id="empty-text" hidden>
+  </music-overlay>
+
+  <music-overlay id="no-card-overlay"
+      heading-l10n-id="nocard2-title"
+      message-l10n-id="nocard3-text" hidden>
+  </music-overlay>
+
+  <music-overlay id="plugged-in-overlay"
+      heading-l10n-id="pluggedin-title"
+      message-l10n-id="pluggedin-text" hidden>
+  </music-overlay>
+
+  <music-overlay id="upgrade-overlay"
+      heading-l10n-id="upgrade-title"
+      message-l10n-id="upgrade-text" hidden>
+  </music-overlay>
+
+  <music-scan-progress id="scan-progress"
+      heading-l10n-id="unknownArtist"
+      subheading-l10n-id="unknownTitle">
+  </music-scan-progress>
+
+  <audio id="audio"></audio>
+</body>
+</html>
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/manifest.webapp b/apps/music/manifest.webapp
@@ -2,7 +2,7 @@
   "version": "0.0.1",
   "name": "Music",
   "description": "Gaia Music",
-  "launch_path": "/index.html",
+  "launch_path": "/index-tv.html",
   "icons": {
     "84": "/img/icons/music_84.png",
     "126": "/img/icons/music_126.png",
@@ -74,7 +74,7 @@
     }
   },
   "default_locale": "en",
-  "orientation": "default",
+  "orientation": "landscape",
   "messages": [
     { "media-button": "/index.html" }
   ]

diff --git a/apps/music/views/home-tv/index.html b/apps/music/views/home-tv/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="theme-media">
+<head>
+  <meta charset="utf-8">
+  <title data-l10n-id="music">Music</title>
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
+  <!-- Localization -->
+  <meta name="defaultLanguage" content="en-US">
+  <meta name="availableLanguages" content="en-US">
+  <link rel="localization" href="/locales/music.{locale}.properties">
+  <link rel="localization" href="/shared/locales/media/media.{locale}.properties">
+  <!-- Stylesheets -->
+  <link rel="stylesheet" href="/components/gaia-icons/gaia-icons.css">
+  <link rel="stylesheet" href="/components/gaia-theme/gaia-theme.css">
+  <link rel="stylesheet" href="/css/view.css">
+  <link rel="stylesheet" href="view.css">
+  <!-- Deferred Scripts -->
+  <script defer src="/components/bridge/client.js"></script>
+  <script defer src="/shared/js/intl/l20n-client.js"></script>
+  <script defer src="/shared/js/sanitizer.js"></script>
+  <script defer src="/shared/js/lazy_loader.js"></script>
+  <script defer src="/js/config.js"></script>
+  <script defer src="/js/view.js"></script>
+  <script defer src="view.js"></script>
+</head>
+<body role="application">
+  <section id="tiles"></section>
+</body>
+</html>
diff --git a/apps/music/views/home-tv/view.css b/apps/music/views/home-tv/view.css
@@ -0,0 +1,91 @@
+body {
+  overflow-x: hidden;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+}
+
+body[data-search="true"] {
+  overflow: hidden;
+}
+
+music-search-box {
+  padding: 0 16px 10px;
+  border-bottom: solid 1px var(--border-color);
+  box-sizing: border-box;
+}
+
+music-search-box[hidden] {
+  display: none;
+}
+
+#tiles {
+  min-height: 100%;
+}
+
+.search-open #tiles {
+  display: none;
+}
+
+.tile {
+  border: solid 1px var(--background);
+  box-sizing: border-box;
+  display: block;
+  float: inline-start;
+  text-align: match-parent;
+  position: relative;
+  width: 33.3vw;
+  height: 33.3vw;
+  overflow: hidden;
+  text-decoration: none;
+  transition: border 0.2s ease;
+}
+
+.tile.selected {
+  border: solid 10px var(--highlight-color);
+}
+
+.tile:before,
+.tile:after {
+  background-color: rgba(0, 0, 0, 0.5);
+  box-sizing: border-box;
+  color: #fff;
+  font-size: 1.9rem;
+  line-height: 2.8rem;
+  text-shadow: 0 0.1rem rgba(0, 0, 0, 0.5);
+  display: block;
+  position: absolute;
+  padding: 0.15rem 1rem;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2.8rem;
+  z-index: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tile:before {
+  content: attr(data-artist);
+}
+
+.tile:after {
+  content: attr(data-album);
+  color: rgba(255, 255, 255, 0.65);
+  font-size: 1.4rem;
+  line-height: 2.2rem;
+  top: 2.8rem;
+}
+
+.tile > img {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity 250ms;
+}
+
+.tile > img.loaded {
+  opacity: 1;
+}