dmaax/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

LibWeb: Move media controls' timeline fill to an inner div

Browse source 
This will allow us to contain the buffered ranges within the timeline's
area.
This commit is contained in:
Zaggy1024 2026-03-28 08:43:42 -05:00 committed by Gregory Bertilson
parent 47b6f5e607
commit 8a85cafd36
3 changed files with 13 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
Libraries/LibWeb/HTML/MediaControls.css
View file

@ -48,16 +48,19 @@
.timeline {
z-index: 1;
height: 5px;
padding: 5px 0;
margin: -5px 0;
background: var(--track-color);
background-clip: content-box;
cursor: pointer;
flex-shrink: 0;
text-align: left;
}
.timeline-track {
position: relative;
height: 5px;
background: var(--track-color);
}
.timeline-fill {
height: 100%;
background: var(--accent-color);

4
Libraries/LibWeb/HTML/MediaControls.html
View file

@ -9,7 +9,9 @@
</div>
<div data-name="control-bar" class="controls">
<div data-name="timeline-element" class="timeline">
<div data-name="timeline-fill" class="timeline-fill"></div>
<div data-name="timeline-track" class="timeline-track">
<div data-name="timeline-fill" class="timeline-fill"></div>
</div>
</div>
<div class="button-bar">
<button data-name="play-button" class="control-button play-pause-button">

6
Tests/LibWeb/Layout/expected/hide-audio-based-on-controls.txt
View file

@ -7,7 +7,8 @@ Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] [BFC] children
BlockContainer <div.container.audio> at [8,8] [0+0+0 300 0+0+0] [0+0+0 43 0+0+0] [BFC] children: not-inline
Box <div.controls.visible> at [8,8] flex-container(column) [0+0+0 300 0+0+0] [0+0+0 43 0+0+0] [FFC] children: not-inline
BlockContainer <div.timeline> at [8,8] flex-item [0+0+0 300 0+0+0] [-5+0+5 5 5+0+-5] [BFC] children: not-inline
BlockContainer <div.timeline-fill> at [8,8] [0+0+0 0 0+0+300] [0+0+0 5 0+0+0] children: not-inline
BlockContainer <div.timeline-track> at [8,8] positioned [0+0+0 300 0+0+0] [0+0+0 5 0+0+0] children: not-inline
BlockContainer <div.timeline-fill> at [8,8] [0+0+0 0 0+0+300] [0+0+0 5 0+0+0] children: not-inline
Box <div.button-bar> at [16,17] flex-container(row) flex-item [0+0+8 284 8+0+0] [0+0+4 30 4+0+0] [FFC] children: not-inline
Box <button.control-button.play-pause-button> at [16,20] flex-container(row) flex-item [0+0+0 24 0+0+0] [0+0+0 24 0+0+0] [FFC] children: not-inline
SVGSVGBox <svg.icon.play-pause-icon> at [16,20] flex-item [0+0+0 24 0+0+0] [0+0+0 24 0+0+0] [SVG] children: not-inline
@ -38,7 +39,8 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<DIV>.container.audio) [8,8 300x43]
PaintableBox (Box<DIV>.controls.visible) [8,8 300x43]
PaintableWithLines (BlockContainer<DIV>.timeline) [8,3 300x15]
PaintableWithLines (BlockContainer<DIV>.timeline-fill) [8,8 0x5]
PaintableWithLines (BlockContainer<DIV>.timeline-track) [8,8 300x5]
PaintableWithLines (BlockContainer<DIV>.timeline-fill) [8,8 0x5]
PaintableBox (Box<DIV>.button-bar) [8,13 300x38]
PaintableBox (Box<BUTTON>.control-button.play-pause-button) [16,20 24x24]
SVGSVGPaintable (SVGSVGBox<svg>.icon.play-pause-icon) [16,20 24x24]