Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-05 05:30:08 +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) {
println!("render_controls");
// XXX cannot render controls while parsing.
// XXX render controls as a top layer.
// XXX check that controls are not already rendered.
let element = self.htmlelement.upcast::<Element>();
if let Ok(shadow_root) = element.attach_shadow(IsUserAgentWidget::Yes) {

12
resources/media_controls.css
View file

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

30
resources/media_controls.js
View file

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