b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
196 lines
11 KiB
HTML
196 lines
11 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">
|
|
<title>Videos</title>
|
|
<meta name="defaultLanguage" content="en-US">
|
|
<meta name="availableLanguages" content="ar:201601260729, bg:201601260729, bn-BD:201601260729, ca:201601260729, cs:201601260729, da:201601260729, de:201601260729, el:201601260729, en-US:201601260729, es:201601260729, eu:201601260729, fr:201601260729, gl:201601260729, hr:201601260729, hu:201601260729, it:201601260729, ja:201601260729, km:201601260729, ko:201601260729, lt:201601260729, mk:201601260729, ms:201601260729, ne-NP:201601260729, nl:201601260729, pa:201601260729, pl:201601260729, pt-BR:201601260729, ro:201601260729, ru:201601260729, sk:201601260729, sq:201601260729, sr-Cyrl:201601260729, sr-Latn:201601260729, sv-SE:201601260729, tr:201601260729, zh-CN:201601260729, zh-TW:201601260729">
|
|
<link rel="localization" href="/locales-obj/index.{locale}.json">
|
|
|
|
|
|
<!-- this file is loaded lazily but is listed here so it gets packaged
|
|
<link rel="stylesheet" href="shared/style/confirm.css" type="text/css" />
|
|
-->
|
|
<link rel="stylesheet" type="text/css" href="style/video.css">
|
|
<link rel="stylesheet" type="text/css" href="style/info.css">
|
|
<link rel="stylesheet" type="text/css" href="style/spinner.css">
|
|
<link rel="stylesheet" type="text/css" href="style/video_tablet.css" media="(min-height: 768px) and (min-width: 768px)">
|
|
|
|
<!-- Shared Libs -->
|
|
<!-- <script defer="" src="shared/js/intl/l20n.js"></script> -->
|
|
<!-- <script defer="" src="shared/js/intl_helper.js"></script> -->
|
|
<!-- <script defer="" src="shared/js/screen_layout.js"></script> -->
|
|
<!-- <script defer="" src="shared/js/sanitizer.js"></script> -->
|
|
<!-- <script defer="" src="shared/js/mediadb.js"></script> -->
|
|
<!-- <script defer="" src="shared/js/media/media_utils.js"></script> -->
|
|
<!-- <script defer="" src="shared/js/blobview.js"></script> -->
|
|
<!-- <script defer="" src="shared/js/media/get_video_rotation.js"></script> -->
|
|
<!-- <script defer="" src="shared/js/manifest_helper.js"></script> -->
|
|
<!-- <script defer="" src="shared/js/media/video_stats.js"></script> -->
|
|
<!-- <script defer="" src="shared/js/lazy_loader.js"></script> -->
|
|
<!-- <script defer="" src="shared/js/dialogs.js"></script> -->
|
|
|
|
<!-- Web Components -->
|
|
<!-- <script defer="" src="shared/elements/config.js"></script> -->
|
|
<!-- <script defer="" src="shared/js/component_utils.js"></script> -->
|
|
<link rel="stylesheet" type="text/css" href="app://theme.gaiamobile.org/shared/elements/gaia-theme/gaia-theme.css">
|
|
<link rel="stylesheet" type="text/css" href="shared/elements/gaia-icons/gaia-icons.css">
|
|
<!-- <script defer="" src="shared/elements/gaia-header/dist/gaia-header.js"></script> -->
|
|
<!-- <script defer="" src="shared/elements/gaia_menu/script.js"></script> -->
|
|
|
|
<!-- <script defer="" src="js/metadata.js"></script> -->
|
|
<!-- <script defer="" src="js/db.js"></script> -->
|
|
<!-- <script defer="" src="js/thumbnail_list.js"></script> -->
|
|
<!-- <script defer="" src="js/thumbnail_date_group.js"></script> -->
|
|
<!-- <script defer="" src="js/thumbnail_item.js"></script> -->
|
|
<!-- <script defer="" src="js/video_utils.js"></script> -->
|
|
<!-- <script defer="" src="js/forward_rewind_controller.js"></script> -->
|
|
<!-- <script defer="" src="js/video_loading_checker.js"></script> -->
|
|
<!-- <script defer="" src="js/seeker.js"></script> -->
|
|
<!-- <script defer="" src="js/captions.js"></script> -->
|
|
<!-- <script defer="" src="js/video.js"></script> --><script src="./gaia_build_defer_index.js" defer="" type="text/javascript"></script>
|
|
<meta content="2.5" name="appVersion"></head>
|
|
<body role="application" class="skin-dark theme-media">
|
|
<div id="app-container">
|
|
<div id="two-column-spearator"></div>
|
|
<section role="region" id="thumbnail-views">
|
|
<gaia-header ignore-dir="" id="picker-header" action="back" class="thumbnails-list" no-font-fit="">
|
|
<h1 id="picker-title" data-l10n-id="pick-title">Select a video</h1>
|
|
<h1 id="thumbnail-list-title">Video</h1>
|
|
</gaia-header>
|
|
<gaia-header ignore-dir="" id="thumbnails-select-top" action="close" class="thumbnails-select" no-font-fit="">
|
|
<h1 id="thumbnails-number-selected"></h1>
|
|
</gaia-header>
|
|
|
|
<!-- This element gets positioned over different view elements -->
|
|
<!-- It gets styled differently depending on what it is over -->
|
|
<!-- The real thumbnails list is actually inside this ul. We need
|
|
to remove the semantics of this list to be less verbose, if the
|
|
screen reader is on. -->
|
|
<ul role="presentation" id="thumbnails"></ul> <!-- Thumbnails inserted here -->
|
|
|
|
<footer id="thumbnails-bottom" class="thumbnails-list">
|
|
<a aria-label="Video" id="thumbnails-video-button" class="button" data-icon="video" role="button" data-l10n-id="video-button" tabindex="0"></a>
|
|
<a aria-label="Select" id="thumbnails-select-button" class="button" data-icon="select" role="button" data-l10n-id="select-button" tabindex="0"></a>
|
|
</footer>
|
|
<footer id="thumbnails-select-bottom" class="thumbnails-select">
|
|
<a aria-label="Delete" id="thumbnails-delete-button" class="button" data-icon="delete" role="button" data-l10n-id="delete-button" tabindex="0"></a>
|
|
<a aria-label="Share" id="thumbnails-share-button" class="button" data-icon="share" role="button" data-l10n-id="share-button" tabindex="0"></a>
|
|
</footer>
|
|
</section>
|
|
|
|
<!-- (maximized) video player -->
|
|
<section role="region" id="player-view">
|
|
<!-- display this at startup while we create thumbnails -->
|
|
<div aria-valuetext="Loading" id="spinner-overlay" class="hidden" role="progress" data-l10n-id="spinner-overlay"><div id="spinner"></div></div>
|
|
<!-- video controls header -->
|
|
<gaia-header ignore-dir="" id="player-header" action="back" class="video-controls" no-font-fit="">
|
|
<h1 id="video-title"></h1>
|
|
<button aria-label="More" id="options" data-icon="more" data-l10n-id="options-more"></button>
|
|
<button id="picker-done" data-l10n-id="done">Done</button>
|
|
</gaia-header>
|
|
<!-- In order for the screen reader to be able to activate the container
|
|
to toggle controls, it must have the semantics of the button -->
|
|
<div id="video-container" role="button" tabindex="0">
|
|
<!-- Hiding the video element from the screen reader since the
|
|
controls are implemented elsewhere. -->
|
|
<video src="about:blank" id="player" aria-hidden="true"></video>
|
|
</div>
|
|
<!-- video controls footer toolbar -->
|
|
<div role="toolbar" class="video-controls bottom">
|
|
<!-- It is simpler and less verbose (for the screen reader) to not
|
|
expose that this block is a footer and consider it part of
|
|
its toolbar container. -->
|
|
<footer id="videoBar" role="presentation">
|
|
<div id="timeSlider" role="slider">
|
|
<!-- We need to use aria hideen for the text nodes in the slider
|
|
subtree because the screen reader treats sliders as atomic
|
|
elements and does not step inside their subtree. All the
|
|
information is conveyed via the slider attributes instead -->
|
|
<span id="elapsed-text" aria-hidden="true"></span>
|
|
<div id="slider-wrapper" aria-hidden="true">
|
|
<div id="elapsedTime" class="progress"></div>
|
|
<div id="bufferedTime" class="progress"></div>
|
|
<div id="timeBackground" class="progress"></div>
|
|
<button id="playHead"></button>
|
|
</div>
|
|
<span id="duration-text" aria-hidden="true"></span>
|
|
</div>
|
|
<div aria-label="Full screen" id="fullscreen-button" role="button" data-l10n-id="fullscreen-button" tabindex="0"></div>
|
|
</footer>
|
|
<!-- It is simpler and less verbose (for the screen reader) to not
|
|
expose that this block is a footer and consider it part of
|
|
its toolbar container. -->
|
|
<footer id="videoControlBar" role="presentation">
|
|
<div id="videoToolBar">
|
|
<button aria-label="Seek backward" id="seek-backward" class="player-controls-button" data-icon="skip-back" data-l10n-id="seek-backward"></button>
|
|
<button id="play" class="player-controls-button" data-icon="pause"></button>
|
|
<button aria-label="Seek forward" id="seek-forward" class="player-controls-button" data-icon="skip-forward" data-l10n-id="seek-forward"></button>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<form aria-label="Info" id="info-view" role="dialog" data-type="confirm" class="hidden" data-l10n-id="info-view">
|
|
<section>
|
|
<dl>
|
|
<dt data-l10n-id="name-label">Name</dt>
|
|
<dd id="info-name" class="value"></dd>
|
|
<dt data-l10n-id="length-label">Length</dt>
|
|
<dd id="info-length" class="value"></dd>
|
|
<dt data-l10n-id="size-label">Size</dt>
|
|
<dd id="info-size" class="value"></dd>
|
|
<dt data-l10n-id="video-type-label">Video Type</dt>
|
|
<dd id="info-type" class="value"></dd>
|
|
<dt data-l10n-id="date-taken-label">Date Taken</dt>
|
|
<dd id="info-date" class="value"></dd>
|
|
<dt data-l10n-id="resolution-label">Resolution</dt>
|
|
<dd id="info-resolution" class="value"></dd>
|
|
</dl>
|
|
</section>
|
|
<menu>
|
|
<button type="button" id="info-close-button" data-l10n-id="close-button" class="full">Close</button>
|
|
</menu>
|
|
</form>
|
|
|
|
<gaia-menu id="options-view" hidden="">
|
|
<button class="single-share-button" data-l10n-id="share">Share</button>
|
|
<button class="single-info-button" data-l10n-id="more-info">More info</button>
|
|
<button class="single-delete-button" data-l10n-id="delete">Delete</button>
|
|
</gaia-menu>
|
|
|
|
<!-- A thin indeterminate progress bar to indicate scanning -->
|
|
<!-- set class to "throb" to make it go, or hidden" to make it stop -->
|
|
<div id="throbber" class="hidden"></div>
|
|
|
|
<!-- display messages like "No Photos" 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-action-button" class="full"></button>
|
|
</menu>
|
|
</form>
|
|
<form aria-label="Confirm" id="confirm-dialog" role="dialog" data-type="confirm" class="hidden" data-l10n-id="confirm-dialog">
|
|
<section>
|
|
<p id="confirm-msg"></p>
|
|
</section>
|
|
<menu>
|
|
<button id="confirm-cancel"></button>
|
|
<button id="confirm-ok"></button>
|
|
</menu>
|
|
</form>
|
|
<!-- display "Cannot load video because it is in use" here -->
|
|
<form id="in-use-overlay" role="dialog" data-type="confirm" class="hidden">
|
|
<section id="in-use-overlay-content">
|
|
<h1 id="in-use-overlay-title"></h1>
|
|
<p id="in-use-overlay-text"></p>
|
|
</section>
|
|
</form>
|
|
</body>
|
|
|
|
</html>
|