Skip to content

Commit

Permalink
Bug 1812936 - Keep playpause button centered in PiP. r=pip-reviewers,…
Browse files Browse the repository at this point in the history 
…mhowell

Differential Revision: https://phabricator.services.mozilla.com/D172839
  • Loading branch information
Niklas Baumgardner committed Mar 21, 2023
1 parent c7db173 commit 202e78e
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 58 deletions.
74 changes: 40 additions & 34 deletions toolkit/components/pictureinpicture/content/player.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,44 +66,50 @@
</div>
</div>
<div class="controls-bottom-lower">
<div id="timestamp" class="control-item" hidden="true"></div>
<button id="seekBackward" class="control-item control-button tooltip-over-controls center-tooltip" hidden="true" data-l10n-id="pictureinpicture-seekbackward-btn" data-l10n-attrs="tooltip" tabindex="11"></button>
<button id="playpause" class="control-item control-button tooltip-over-controls center-tooltip" tabindex="1"
data-l10n-id="pictureinpicture-pause-btn" data-l10n-attrs="tooltip"/>
<button id="seekForward" class="control-item control-button tooltip-over-controls center-tooltip" hidden="true" data-l10n-id="pictureinpicture-seekforward-btn" data-l10n-attrs="tooltip" tabindex="2"></button>
<button id="audio" class="control-item control-button tooltip-over-controls center-tooltip" hidden="true" data-l10n-attrs="tooltip" tabindex="3"/>
<button id="closed-caption" class="control-item control-button tooltip-over-controls center-tooltip closed-caption" hidden="true" disabled="true" data-l10n-id="pictureinpicture-subtitles-btn" data-l10n-attrs="tooltip" tabindex="4"></button>
<div id="settings" class="hide">
<div class="panel">
<div class="box">
<div class="subtitle-grid">
<label data-l10n-id="pictureinpicture-subtitles-label" class="bold"></label>
<label class="switch">
<input id="subtitles-toggle" type="checkbox" tabindex="5" checked=""/>
<span class="slider" role="presentation"></span>
</label>
</div>
<div class="grey-line"></div>
<div class="font-size-selection">
<label data-l10n-id="pictureinpicture-font-size-label" class="bold"></label>
<label>
<input id="small" type="radio" name="cc-size" tabindex="6"/>
<span data-l10n-id="pictureinpicture-font-size-small"></span>
</label>
<label>
<input id="medium" type="radio" name="cc-size" tabindex="6"/>
<span data-l10n-id="pictureinpicture-font-size-medium"></span>
</label>
<label>
<input id="large" type="radio" name="cc-size" tabindex="6"/>
<span data-l10n-id="pictureinpicture-font-size-large"></span>
</label>
<div class="start-controls">
<div id="timestamp" class="control-item" hidden="true"></div>
</div>
<div class="center-controls">
<button id="seekBackward" class="control-item control-button tooltip-over-controls center-tooltip" hidden="true" data-l10n-id="pictureinpicture-seekbackward-btn" data-l10n-attrs="tooltip" tabindex="11"></button>
<button id="playpause" class="control-item control-button tooltip-over-controls center-tooltip" tabindex="1"
data-l10n-id="pictureinpicture-pause-btn" data-l10n-attrs="tooltip"/>
<button id="seekForward" class="control-item control-button tooltip-over-controls center-tooltip" hidden="true" data-l10n-id="pictureinpicture-seekforward-btn" data-l10n-attrs="tooltip" tabindex="2"></button>
</div>
<div class="end-controls">
<button id="audio" class="control-item control-button tooltip-over-controls center-tooltip" hidden="true" data-l10n-attrs="tooltip" tabindex="3"/>
<button id="closed-caption" class="control-item control-button tooltip-over-controls center-tooltip closed-caption" hidden="true" disabled="true" data-l10n-id="pictureinpicture-subtitles-btn" data-l10n-attrs="tooltip" tabindex="4"></button>
<div id="settings" class="hide">
<div class="panel">
<div class="box">
<div class="subtitle-grid">
<label data-l10n-id="pictureinpicture-subtitles-label" class="bold"></label>
<label class="switch">
<input id="subtitles-toggle" type="checkbox" tabindex="5" checked=""/>
<span class="slider" role="presentation"></span>
</label>
</div>
<div class="grey-line"></div>
<div class="font-size-selection">
<label data-l10n-id="pictureinpicture-font-size-label" class="bold"></label>
<label>
<input id="small" type="radio" name="cc-size" tabindex="6"/>
<span data-l10n-id="pictureinpicture-font-size-small"></span>
</label>
<label>
<input id="medium" type="radio" name="cc-size" tabindex="6"/>
<span data-l10n-id="pictureinpicture-font-size-medium"></span>
</label>
<label>
<input id="large" type="radio" name="cc-size" tabindex="6"/>
<span data-l10n-id="pictureinpicture-font-size-large"></span>
</label>
</div>
</div>
<div class="arrow"></div>
</div>
<div class="arrow"></div>
</div>
<button id="fullscreen" class="control-item control-button tooltip-over-controls inline-end-tooltip" hidden="true" data-l10n-id="pictureinpicture-fullscreen-btn" data-l10n-attrs="tooltip" tabindex="7"></button>
</div>
<button id="fullscreen" class="control-item control-button tooltip-over-controls inline-end-tooltip" hidden="true" data-l10n-id="pictureinpicture-fullscreen-btn" data-l10n-attrs="tooltip" tabindex="7"></button>
</div>
</div>
</div>
Expand Down
66 changes: 42 additions & 24 deletions toolkit/themes/shared/pictureinpicture/player.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,10 +84,28 @@ browser {

.controls-bottom-lower {
display: grid;
grid-template-columns: 16ch auto repeat(3, minmax(16px, 32px)) auto repeat(3, minmax(16px, 32px));
grid-template-areas:
"timestamp . seekbackward playpause seekforward . audio closedcaption fullscreen";
grid-template-columns: repeat(3, 1fr);
margin: 0 24px;
}

.start-controls {
display: grid;
justify-self: start;
}

.center-controls {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas: "seekbackward playpause seekforward";
justify-self: center;
gap: 8px;
}

.end-controls {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas: "audio closedcaption fullscreen";
justify-self: end;
gap: 8px;
}

Expand Down Expand Up @@ -542,34 +560,26 @@ input:checked + .slider::before {
display: none;
}

.controls-bottom-lower {
grid-template-columns: 16ch auto repeat(3, minmax(16px, 32px)) auto repeat(2, minmax(16px, 32px));
grid-template-areas:
"timestamp . seekbackward playpause seekforward . audio fullscreen";
.end-controls {
grid-template-columns: repeat(2, 1fr);
grid-template-areas: "audio fullscreen";
}
}

@media (width <= 400px) {
#fullscreen {
@media (width <= 440px) {
#timestamp {
display: none;
}

.controls-bottom-lower {
grid-template-columns: 16ch repeat(3, minmax(16px, 32px)) auto minmax(16px, 32px);
grid-template-areas:
"timestamp seekbackward playpause seekforward . audio";
}
}

@media (width <= 350px) {
#timestamp {
#fullscreen {
display: none;
}

.controls-bottom-lower {
grid-template-columns: auto repeat(3, minmax(16px, 32px)) auto minmax(16px, 32px);
grid-template-areas:
". seekbackward playpause seekforward . audio";
.end-controls {
grid-template-columns: repeat(1, 1fr);
grid-template-areas: "audio";
}
}

Expand All @@ -582,13 +592,21 @@ input:checked + .slider::before {
@media (width <= 300px) {
.scrubber-no-drag,
#seekForward,
#seekBackward {
#seekBackward,
.start-controls {
display: none;
}

.controls-bottom-lower {
grid-template-columns: auto minmax(16px, 32px) auto minmax(16px, 32px) auto;
grid-template-areas:
". playpause . audio .";
grid-template-columns: repeat(2, 1fr);
}

.center-controls {
grid-template-columns: repeat(1, 1fr);
grid-template-areas: "playpause";
}

.end-controls {
justify-self: center;
}
}

0 comments on commit 202e78e

Please sign in to comment.