b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
208 lines
10 KiB
HTML
Executable file
208 lines
10 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<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="en-US">
|
|
<link rel="localization" href="locales/video.{locale}.properties">
|
|
<link rel="localization" href="/shared/locales/date/date.{locale}.properties">
|
|
<link rel="localization" href="/shared/elements/gaia_menu/locales/gaia_menu.{locale}.properties">
|
|
<!-- 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>
|
|
</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"></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 id="thumbnails-video-button" class="button" data-icon="video"
|
|
role="button" data-l10n-id="video-button" tabindex="0"></a>
|
|
<a 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 id="thumbnails-delete-button" class="button" data-icon="delete"
|
|
role="button" data-l10n-id="delete-button" tabindex="0"></a>
|
|
<a 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 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 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 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 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 id="seek-forward" class="player-controls-button"
|
|
data-icon="skip-forward" data-l10n-id="seek-forward"></button>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<form id="info-view" role="dialog" data-type="confirm" class="hidden"
|
|
data-l10n-id="info-view">
|
|
<section>
|
|
<dl>
|
|
<dt data-l10n-id="name-label"></dt>
|
|
<dd id="info-name" class="value"></dd>
|
|
<dt data-l10n-id="length-label"></dt>
|
|
<dd id="info-length" class="value"></dd>
|
|
<dt data-l10n-id="size-label"></dt>
|
|
<dd id="info-size" class="value"></dd>
|
|
<dt data-l10n-id="video-type-label"></dt>
|
|
<dd id="info-type" class="value"></dd>
|
|
<dt data-l10n-id="date-taken-label"></dt>
|
|
<dd id="info-date" class="value"></dd>
|
|
<dt data-l10n-id="resolution-label"></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"></button>
|
|
</menu>
|
|
</form>
|
|
|
|
<gaia-menu id="options-view" hidden>
|
|
<button class="single-share-button" data-l10n-id="share"></button>
|
|
<button class="single-info-button" data-l10n-id="more-info"></button>
|
|
<button class="single-delete-button" data-l10n-id="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 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>
|