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

Commit

Permalink
Bug 1132191 - merge pull request #28342 from yzen:bug-1132191 to mozi…
Browse files Browse the repository at this point in the history 
…lla-b2g:master
  • Loading branch information
@mozilla-autolander-deprecated
mozilla-autolander-deprecated committed Mar 9, 2015
2 parents 6212252 + 4d91820 commit 2d3efff
Show file tree
Hide file tree
Showing 12 changed files with 485 additions and 250 deletions.
118 changes: 74 additions & 44 deletions apps/video/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,59 +64,85 @@ <h1 id="thumbnails-number-selected"></h1>

<!-- This element gets positioned over different view elements -->
<!-- It gets styled differently depending on what it is over -->
<ul id="thumbnails"></ul> <!-- Thumbnails inserted here -->
<!-- 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"></a>
<a id="thumbnails-select-button" class="button" data-icon="select"></a>
<a id="thumbnails-video-button" class="button" data-icon="video"
role="button" data-l10n-id="video-button"></a>
<a id="thumbnails-select-button" class="button" data-icon="select"
role="button" data-l10n-id="select-button"></a>
</footer>
<footer id="thumbnails-select-bottom" class="thumbnails-select">
<a id="thumbnails-delete-button" class="button" data-icon="delete"></a>
<a id="thumbnails-share-button" class="button" data-icon="share"></a>
<a id="thumbnails-delete-button" class="button" data-icon="delete"
role="button" data-l10n-id="delete-button"></a>
<a id="thumbnails-share-button" class="button" data-icon="share"
role="button" data-l10n-id="share-button"></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"><div id="spinner"></div></div>
<div id="video-container">
<video src="about:blank" id="player"></video>
<div id="spinner-overlay" class="hidden" role="progress"
data-l10n-id="spinner-overlay"><div id="spinner"></div></div>
<!-- video controls header -->
<gaia-header id="player-header" action="back" class="video-controls">
<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">
<!-- 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 -->
<div id="videoControls">
<section role="region">
<gaia-header id="player-header" action="back">
<h1 id="video-title"></h1>
<button id="options" data-icon="more"></button>
<button id="picker-done" data-l10n-id="done">Done</button>
</gaia-header>
<footer id="videoBar">
<div id="timeSlider">
<span id="elapsed-text"></span>
<div id="slider-wrapper">
<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"></span>
</div>
<div id="fullscreen-button"></div>
</footer>
<footer id="videoControlBar">
<div id="videoToolBar">
<button id="seek-backward" class="player-controls-button" data-icon="skip-back"></button>
<button id="play" class="player-controls-button" data-icon="pause"></button>
<button id="seek-forward" class="player-controls-button" data-icon="skip-forward"></button>
<!-- 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>
</footer>
</section>
<span id="duration-text" aria-hidden="true"></span>
</div>
<div id="fullscreen-button" role="button"
data-l10n-id="fullscreen-button"></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">
<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>
Expand All @@ -139,7 +165,8 @@ <h1 id="video-title"></h1>
</menu>
</form>

<form id="options-view" role="dialog" data-type="action" class="hidden">
<form id="options-view" role="dialog" data-type="action" class="hidden"
data-l10n-id="options-view">
<menu>
<button type="button" class="single-share-button"><span class="gi gi-text" data-l10n-id="share">Share</span></button>
<button type="button" class="single-info-button"><span class="gi gi-text" data-l10n-id="more-info">More info</span></button>
Expand All @@ -151,18 +178,20 @@ <h1 id="video-title"></h1>
<!-- This element is the template of each thumbnail item -->
<div id="thumbnail-group-header" class="hidden">
<!--
<li>
<div class="thumbnail-group-header"></div>
<ul class="thumbnail-group-container"></ul>
<li role="presentation">
<div class="thumbnail-group-header" role="heading"
aria-level="1"></div>
<ul class="thumbnail-group-container" role="listbox"
data-l10n-id="videos-list" aria-multiselectable="true"></ul>
</li>
-->
</div>
<div id="thumbnail-template" class="hidden">
<!--
<li class="thumbnail">
<li class="thumbnail" role="option">
<div class="inner">
<div class="unwatched"></div>
<div class="img"></div>
<div class="img" role="presentation"></div>
<div class="details">
<span class="title">${title}</span>
<span class="duration-text after line-break"> ${duration-text}</span>
Expand All @@ -189,7 +218,8 @@ <h1 id="overlay-title"></h1>
<button type="button" id="overlay-action-button" class="full"></button>
</menu>
</form>
<form id="confirm-dialog" role="dialog" data-type="confirm" class="hidden">
<form id="confirm-dialog" role="dialog" data-type="confirm" class="hidden"
data-l10n-id="confirm-dialog">
<section>
<p id="confirm-msg"></p>
</section>
Expand Down
Loading

0 comments on commit 2d3efff

Please sign in to comment.