Player: chapter follow-up tweaks

- Make the chapters button appear consistently.
  - Previously, it was only appearing for Original.
  - We still hide it for mobile, as per previous explanation.
- Changed the Chapters button position and popup aesthetics.
This commit is contained in:
infinite-persistence 2022-05-05 18:01:21 +08:00
parent a4a20aa8e0
commit 511097cd67
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
4 changed files with 22 additions and 1 deletions

View file

@ -1673,6 +1673,7 @@
"Exit Fullscreen (f)": "Exit Fullscreen (f)",
"Theater Mode (t)": "Theater Mode (t)",
"Default Mode (t)": "Default Mode (t)",
"Chapters": "Chapters",
"Quality": "Quality",
"Auto": "Auto",
"Auto --[Video quality. Short form]--": "Auto",

View file

@ -126,7 +126,7 @@ function overrideHoverTooltip(player: any, tsData: TimestampData, duration: numb
function load(player: any, timestampData: TimestampData, duration: number) {
player.one('loadedmetadata', () => {
const textTrack = player.addTextTrack('chapters', 'label', 'en');
const textTrack = player.addTextTrack('chapters', __('Chapters'), 'en');
setTimeout(() => {
const values = Object.values(timestampData);
@ -144,6 +144,11 @@ function load(player: any, timestampData: TimestampData, duration: number) {
values.map((v) => v.seconds),
duration
);
const chaptersButton = player?.controlBar?.chaptersButton;
if (chaptersButton) {
chaptersButton.update();
}
}, REQUIRED_DELAY_FOR_IOS_MS);
});
}

View file

@ -634,6 +634,18 @@ $control-bar-icon-size: 0.8rem;
}
}
.vjs-chapters-button {
.vjs-menu {
width: 20em;
left: -3em;
}
li {
text-align: left;
padding: var(--spacing-xxxs) var(--spacing-s);
}
}
.vjs-chromecast-button,
.vjs-airplay-button {
.vjs-icon-placeholder {

View file

@ -299,6 +299,9 @@ button.vjs-big-play-button {
.vjs-custom-control-spacer {
order: 9 !important;
}
.vjs-chapters-button {
order: 10 !important;
}
.vjs-button--autoplay-next {
order: 10 !important;
}