Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-04 21:20:23 +01:00
Code Issues Projects Releases Packages Wiki Activity

Anchor controls inside bottom of video element

Browse source
This commit is contained in:
Fernando Jiménez Moreno 2019-05-06 16:48:28 +02:00
parent 8a4d54af0b
commit 9496dff529
3 changed files with 27 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/script/dom/htmlmediaelement.rs
View file

@ -1725,9 +1725,7 @@ impl HTMLMediaElement {
} }
fn render_controls(&self) { fn render_controls(&self) {
println!("render_controls");
// XXX cannot render controls while parsing. // XXX cannot render controls while parsing.
// XXX render controls as a top layer.
// XXX check that controls are not already rendered. // XXX check that controls are not already rendered.
let element = self.htmlelement.upcast::<Element>(); let element = self.htmlelement.upcast::<Element>();
if let Ok(shadow_root) = element.attach_shadow(IsUserAgentWidget::Yes) { if let Ok(shadow_root) = element.attach_shadow(IsUserAgentWidget::Yes) {

12
resources/media_controls.css
View file

@ -5,11 +5,17 @@ button {
border: none; border: none;
} }
.controls { .root {
display: block; display: block;
position: fixed; position: relative;
width: 100%; width: 100%;
padding: 0 9px; }
.controls {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
} }
.hidden { .hidden {

30
resources/media_controls.js
View file

@ -6,14 +6,16 @@
"use strict"; "use strict";
const MARKUP = ` const MARKUP = `
<button id="play-pause-button"></button> <div class="controls">
<input id="progress" type="range" value="0" min="0" max="100" step="1"></input> <button id="play-pause-button"></button>
<span id="position-duration-box" class="hidden"> <input id="progress" type="range" value="0" min="0" max="100" step="1"></input>
#1 <span id="position-duration-box" class="hidden">
<span id="duration"> / #2</span> #1
</span> <span id="duration"> / #2</span>
<button id="volume-switch"></button> </span>
<input id="volume-level" type="range" value="100" min="0" max="100" step="1"></input> <button id="volume-switch"></button>
<input id="volume-level" type="range" value="100" min="0" max="100" step="1"></input>
</div>
`; `;
// States. // States.
@ -84,10 +86,10 @@
this.media = this.controls.host; this.media = this.controls.host;
// Create root element and load markup. // Create root element and load markup.
const root = document.createElement("div"); this.root = document.createElement("div");
root.classList.add("controls"); this.root.classList.add("root");
root.innerHTML = MARKUP; this.root.innerHTML = MARKUP;
this.controls.appendChild(root); this.controls.appendChild(this.root);
// Import elements. // Import elements.
this.elements = {}; this.elements = {};
@ -210,6 +212,9 @@
} }
render(from = this.state) { render(from = this.state) {
// XXX This should use clientHeight.
this.root.style.height = this.media.videoHeight;
// Error // Error
if (this.state == ERRORED) { if (this.state == ERRORED) {
//XXX render errored state //XXX render errored state
@ -302,6 +307,7 @@
break; break;
case "volumechange": case "volumechange":
case "timeupdate": case "timeupdate":
case "resize":
this.render(); this.render();
break; break;
case "loadedmetadata": case "loadedmetadata":