b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
215 lines
14 KiB
HTML
215 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US" dir="ltr">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
|
|
<meta charset="utf-8">
|
|
<meta name="theme-group" content="theme-media">
|
|
<meta name="theme-color" content="var(--header-background)">
|
|
<title>Music OGA</title>
|
|
<!-- Include shared building blocks -->
|
|
<link rel="stylesheet" type="text/css" href="shared/elements/gaia-icons/gaia-icons.css">
|
|
<link rel="stylesheet" type="text/css" href="shared/elements/gaia-theme/gaia-theme.css">
|
|
<link rel="stylesheet" type="text/css" href="shared/style/confirm.css">
|
|
<link rel="stylesheet" type="text/css" href="shared/style/input_areas.css">
|
|
<link rel="stylesheet" type="text/css" href="shared/style/progress_activity.css">
|
|
<link rel="stylesheet" type="text/css" href="shared/style/status.css">
|
|
<link rel="stylesheet" type="text/css" href="shared/style/tabs.css">
|
|
<link rel="stylesheet" type="text/css" href="style/music.css">
|
|
<!-- Localization -->
|
|
<meta name="defaultLanguage" content="en-US">
|
|
<meta name="availableLanguages" content="ar:201601260730, bg:201601260730, bn-BD:201601260730, ca:201601260730, cs:201601260730, da:201601260730, de:201601260730, el:201601260730, en-US:201601260730, es:201601260730, eu:201601260730, fr:201601260730, gl:201601260730, hr:201601260730, hu:201601260730, it:201601260730, ja:201601260730, km:201601260730, ko:201601260730, lt:201601260730, mk:201601260730, ms:201601260730, ne-NP:201601260730, nl:201601260730, pa:201601260730, pl:201601260730, pt-BR:201601260730, ro:201601260730, ru:201601260730, sk:201601260730, sq:201601260730, sr-Cyrl:201601260730, sr-Latn:201601260730, sv-SE:201601260730, tr:201601260730, zh-CN:201601260730, zh-TW:201601260730">
|
|
<link rel="localization" href="/locales-obj/index.{locale}.json">
|
|
|
|
<!-- Shared code -->
|
|
<!-- <script defer="" src="shared/js/l10n.js"></script> -->
|
|
<!-- <script defer="" src="shared/js/mediadb.js"></script> -->
|
|
<!-- <script defer="" src="shared/js/lazy_loader.js"></script> -->
|
|
<!-- <script defer="" src="shared/js/font_size_utils.js"></script> -->
|
|
<!-- <script defer="" src="shared/js/accessibility_helper.js"></script> -->
|
|
<!-- <script defer="" src="shared/js/async_storage.js"></script> -->
|
|
<!-- <script defer="" src="shared/js/image_utils.js"></script> -->
|
|
<!-- <script defer="" src="shared/js/omadrm/fl.js"></script> -->
|
|
<!-- <script defer="" src="shared/js/sanitizer.js"></script> -->
|
|
<!-- Web components -->
|
|
<!-- <script defer="" src="shared/js/component_utils.js"></script> -->
|
|
<!-- <script defer="" src="shared/elements/gaia_subheader/script.js"></script> -->
|
|
<!-- <script defer="" src="shared/elements/gaia-header/dist/gaia-header.js"></script> -->
|
|
<!-- Specific code -->
|
|
<!-- <script defer="" src="js/utils.js"></script> -->
|
|
<!-- <script defer="" src="js/music.js"></script> -->
|
|
<!-- <script defer="" src="js/db.js"></script> -->
|
|
<!-- <script defer="" src="js/ui/title_bar.js"></script> -->
|
|
<!-- <script defer="" src="js/ui/tab_bar.js"></script> -->
|
|
<!-- <script defer="" src="js/ui/views/mode_manager.js"></script> --><script src="./gaia_build_defer_index.js" defer="" type="text/javascript"></script>
|
|
<!-- Lazy load code -->
|
|
<!--
|
|
<script defer src="shared/js/text_normalizer.js"></script>
|
|
<script defer src="shared/js/bluetooth_helper.js"></script>
|
|
<script defer src="shared/js/media/remote_controls.js"></script>
|
|
<script defer src="js/metadata/*.js"></script>
|
|
<script defer src="js/communications.js"></script>
|
|
<script defer src="js/ui/views/tiles_view.js"></script>
|
|
<script defer src="js/ui/views/list_view.js"></script>
|
|
<script defer src="js/ui/views/subList_view.js"></script>
|
|
<script defer src="js/ui/views/search_view.js"></script>
|
|
-->
|
|
<meta content="2.5" name="appVersion"></head>
|
|
|
|
<body role="application" class="theme-media">
|
|
<gaia-header id="title" action="back" no-font-fit="">
|
|
<h1 id="title-text"><bdi data-l10n-id="music">Music</bdi></h1>
|
|
<button aria-label="Go to player view" id="title-player" data-icon="play-circle" data-l10n-id="go-to-player-view" hidden=""></button>
|
|
<button id="title-done" data-l10n-id="done" hidden="">Done</button>
|
|
</gaia-header>
|
|
<div id="views">
|
|
<div id="views-tiles" class="view bb-tabpanel hidden" aria-labelledby="tabs-mix" role="tabpanel">
|
|
<form id="views-tiles-search" role="search" class="skin-dark">
|
|
<button id="views-tiles-search-close" data-l10n-id="search-close" type="submit">close</button>
|
|
<p>
|
|
<input id="views-tiles-search-input" dir="auto" x-inputmode="verbatim" data-l10n-id="search-music" placeholder="Search Music" type="search">
|
|
<button id="views-tiles-search-clear" type="reset">Clear</button>
|
|
</p>
|
|
</form>
|
|
<div id="views-tiles-anchor"></div>
|
|
</div>
|
|
<div id="views-list" class="view bb-tabpanel hidden" role="tabpanel">
|
|
<form id="views-list-search" role="search" class="skin-dark">
|
|
<button id="views-list-search-close" data-l10n-id="search-close" type="submit">close</button>
|
|
<p>
|
|
<input id="views-list-search-input" x-inputmode="verbatim" data-l10n-id="search-music" placeholder="Search Music" type="search">
|
|
<button id="views-list-search-clear" type="reset">Clear</button>
|
|
</p>
|
|
</form>
|
|
<div id="views-list-anchor" role="listbox"></div>
|
|
</div>
|
|
<div id="views-sublist" class="view hidden">
|
|
<div id="views-sublist-header">
|
|
<img id="views-sublist-header-image">
|
|
<div id="views-sublist-header-controls">
|
|
<bdi id="views-sublist-header-name">Name</bdi>
|
|
<button aria-label="Play" id="views-sublist-controls-play" class="album-controls-button" data-icon="play" data-l10n-id="playbackPlay"></button>
|
|
<button aria-label="Shuffle" id="views-sublist-controls-shuffle" class="album-controls-button" data-icon="shuffle" data-l10n-id="shuffle-toggle"></button>
|
|
</div>
|
|
</div>
|
|
<!-- Bug 968456. Scrollable area needs to be inside an opaque background div to help gecko -->
|
|
<div id="views-scrollable-sublist-anchor"><div id="views-sublist-anchor" role="listbox"></div></div>
|
|
</div>
|
|
<div id="views-player" class="view hidden">
|
|
<div id="player-cover">
|
|
<!-- We have two cover image elements so we can crossfade between
|
|
album art. -->
|
|
<div id="player-cover-image-1" class="cover-image visible"></div>
|
|
<div id="player-cover-image-2" class="cover-image"></div>
|
|
<div id="player-cover-caption">
|
|
<div id="player-cover-artist"><bdi data-l10n-id="songArtist">Song artist</bdi></div>
|
|
<div id="player-cover-album"><bdi data-l10n-id="songAlbum">Song album</bdi></div>
|
|
<button aria-label="Share" id="player-cover-share" class="player-cover-button" data-icon="share" data-l10n-id="share-song"></button>
|
|
</div>
|
|
<div id="player-cover-buttons">
|
|
<button aria-label="Repeat off" id="player-album-repeat" data-l10n-id="repeat-off" value="off" class="player-cover-button" data-icon="repeat"></button>
|
|
<div aria-label="Rating" id="player-album-rating" data-l10n-id="player-album-rating" role="radiogroup">
|
|
<button aria-label="1 stars" class="rating-star" data-rating="1" role="radio" data-l10n-id="rating-star" data-l10n-args="{"n":"1"}"></button>
|
|
<button aria-label="2 stars" class="rating-star" data-rating="2" role="radio" data-l10n-id="rating-star" data-l10n-args="{"n":"2"}"></button>
|
|
<button aria-label="3 stars" class="rating-star" data-rating="3" role="radio" data-l10n-id="rating-star" data-l10n-args="{"n":"3"}"></button>
|
|
<button aria-label="4 stars" class="rating-star" data-rating="4" role="radio" data-l10n-id="rating-star" data-l10n-args="{"n":"4"}"></button>
|
|
<button aria-label="5 stars" class="rating-star" data-rating="5" role="radio" data-l10n-id="rating-star" data-l10n-args="{"n":"5"}"></button>
|
|
</div>
|
|
<button aria-label="Shuffle" id="player-album-shuffle" class="player-cover-button" data-icon="shuffle" aria-pressed="true" data-l10n-id="shuffle-toggle"></button>
|
|
</div>
|
|
<section id="info-banner" role="status">
|
|
<p data-l10n-id="music-paused-notification">Music paused during the call</p>
|
|
</section>
|
|
</div>
|
|
<div id="player-seek" role="slider" aria-valuemin="0">
|
|
<span id="player-seek-elapsed" dir="ltr">00:00</span>
|
|
<div id="player-seek-bar">
|
|
<progress id="player-seek-bar-progress" value="0"></progress>
|
|
<div id="player-seek-bar-indicator"></div>
|
|
</div>
|
|
<span id="player-seek-remaining" dir="ltr">00:00</span>
|
|
</div>
|
|
<div id="player-controls" dir="ltr">
|
|
<button aria-label="Previous" id="player-controls-previous" class="player-controls-button" data-icon="skip-back" data-l10n-id="playbackPrevious"></button>
|
|
<button aria-label="Pause" id="player-controls-play" class="player-controls-button is-pause" data-icon="pause" data-l10n-id="playbackPause"></button>
|
|
<button aria-label="Next" id="player-controls-next" class="player-controls-button" data-icon="skip-forward" data-l10n-id="playbackNext"></button>
|
|
</div>
|
|
<audio id="player-audio" class="hidden"></audio>
|
|
</div>
|
|
<div id="views-search" class="view hidden">
|
|
<form id="views-search-form" role="search" class="skin-dark">
|
|
<button id="views-search-close" data-l10n-id="search-close" type="submit">close</button>
|
|
<p>
|
|
<input id="views-search-input" dir="auto" x-inputmode="verbatim" data-l10n-id="search-music" placeholder="Search Music" type="search">
|
|
<button id="views-search-clear" type="reset">Clear</button>
|
|
</p>
|
|
</form>
|
|
<div id="views-search-no-result" class="search-category hidden">
|
|
<p id="search-no-result" data-l10n-id="search-no-result">No music found</p>
|
|
</div>
|
|
<div id="views-search-anchor">
|
|
<div id="views-search-artists" class="search-category hidden">
|
|
<gaia-subheader skin="dark">
|
|
<span data-l10n-id="search-artists">Artists</span>
|
|
(<span class="search-result-count"></span>)
|
|
</gaia-subheader>
|
|
<div class="search-results" role="listbox"></div>
|
|
</div>
|
|
<div id="views-search-albums" class="search-category hidden">
|
|
<gaia-subheader skin="dark">
|
|
<span data-l10n-id="search-albums">Albums</span>
|
|
(<span class="search-result-count"></span>)
|
|
</gaia-subheader>
|
|
<div class="search-results" role="listbox"></div>
|
|
</div>
|
|
<div id="views-search-titles" class="search-category hidden">
|
|
<gaia-subheader skin="dark">
|
|
<span data-l10n-id="search-titles">Tracks</span>
|
|
(<span class="search-result-count"></span>)
|
|
</gaia-subheader>
|
|
<div class="search-results" role="listbox"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- BB tabs -->
|
|
<div id="tabs">
|
|
<ul role="tablist" class="bb-tablist skin-dark">
|
|
<li id="mix" role="presentation">
|
|
<a aria-label="Mix" id="tabs-mix" data-option="mix" role="tab" tabindex="0" aria-selected="false" aria-controls="views-tiles" data-icon="grid" data-l10n-id="mix-tab"></a>
|
|
</li>
|
|
<li id="playlists" role="presentation">
|
|
<a aria-label="Playlists" id="tabs-playlists" data-option="playlist" role="tab" tabindex="0" aria-selected="false" aria-controls="views-list" data-icon="playlist" data-l10n-id="playlists-tab"></a>
|
|
</li>
|
|
<li id="artists" role="presentation">
|
|
<a aria-label="Artists" id="tabs-artists" data-option="artist" role="tab" tabindex="0" aria-selected="false" aria-controls="views-list" data-icon="artist" data-l10n-id="artists-tab"></a>
|
|
</li>
|
|
<li id="albums" role="presentation">
|
|
<a aria-label="Albums" id="tabs-albums" data-option="album" role="tab" tabindex="0" aria-selected="false" aria-controls="views-list" data-icon="album" data-l10n-id="albums-tab"></a>
|
|
</li>
|
|
<li id="songs" role="presentation">
|
|
<a aria-label="Songs" id="tabs-songs" data-option="title" role="tab" tabindex="0" aria-selected="false" aria-controls="views-list" data-icon="songs" data-l10n-id="songs-tab"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- display scanning progress over the titlebar -->
|
|
<div id="scan-progress" class="hidden">
|
|
<progress id="scan-spinner" class="hidden"></progress>
|
|
<div id="scan-count"></div>
|
|
<div id="scan-artist-container"><bdi id="scan-artist"></bdi></div>
|
|
<div id="scan-title-container"><bdi id="scan-title"></bdi></div>
|
|
</div>
|
|
<!-- display messages like "Scanning", "No Songs" and "No SD Card" here -->
|
|
<form id="overlay" role="dialog" data-type="confirm" class="hidden">
|
|
<section id="overlay-content">
|
|
<h1 id="overlay-title"></h1>
|
|
<p id="overlay-text"></p>
|
|
</section>
|
|
<menu id="overlay-menu" class="hidden">
|
|
<button type="button" id="overlay-cancel-button" class="full" data-l10n-id="overlay-cancel-button">Cancel</button>
|
|
</menu>
|
|
</form>
|
|
<!-- display this at startup while we load music -->
|
|
<div id="spinner-overlay"><progress id="spinner"></progress></div>
|
|
</body>
|
|
|
|
</html>
|