Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

Commit

Permalink
Merge branch 'music-nga-tv' of https://github.com/justindarc/gaia int…
Browse files Browse the repository at this point in the history 
…o music-nga-tv
  • Loading branch information
@punamdahiya
punamdahiya committed Nov 23, 2015
2 parents b8ca97d + da21d9f commit f3e4d34
Show file tree
Hide file tree
Showing 11 changed files with 608 additions and 2 deletions.
7 changes: 7 additions & 0 deletions apps/music/css/tv.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
#view-stack {
bottom: 0;
}

#tab-bar {
display: none !important;
}
3 changes: 3 additions & 0 deletions apps/music/elements/music-view-stack.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }));
});
Expand Down Expand Up @@ -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 }));
});
Expand Down Expand Up @@ -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 }));

Expand Down
96 changes: 96 additions & 0 deletions apps/music/index-tv.html
View file
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 2 additions & 2 deletions apps/music/manifest.webapp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -74,7 +74,7 @@
}
},
"default_locale": "en",
"orientation": "default",
"orientation": "landscape",
"messages": [
{ "media-button": "/index.html" }
]
Expand Down
29 changes: 29 additions & 0 deletions apps/music/views/home-tv/index.html
View file
Original file line number Diff line number Diff line change
@@ -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>
91 changes: 91 additions & 0 deletions apps/music/views/home-tv/view.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
Loading

0 comments on commit f3e4d34

Please sign in to comment.