Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

revert: Add chapter titles and dividers on the seek bar #6208

Merged
merged 1 commit into from
Feb 1, 2024
Merged

revert: Add chapter titles and dividers on the seek bar #6208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 0 additions & 13 deletions docs/tutorials/ui-customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,19 +188,6 @@ const config = {
ui.configure(config);
```

If you've chosen to display chapters, you can specify the color for the chapter markers on
the timeline and the text color of the chapter titles that popup on hover:
```js
const config = {
displayChapters: true,
seekBarColors: {
chapterMarks: 'rgb(27, 27, 27)',
chapterLabels: 'rgb(255, 255, 255)'
}
}
ui.configure(config);
```

#### Configuring playback, fast forward and rewind rates
The rate in which the player can play, fast forward and rewind content can be configured using the `playbackRates`, `fastForwardRates` and `rewindRates` options.

Expand Down
11 changes: 1 addition & 10 deletions ui/externs/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,7 @@ shaka.extern = {};
* base: string,
* buffered: string,
* played: string,
* adBreaks: string,
* chapterMarks: string,
* chapterLabels: string
* adBreaks: string
* }}
*
* @property {string} base
Expand All @@ -38,13 +36,6 @@ shaka.extern = {};
* @property {string} adBreaks
* The CSS background color applied to the portion of the seek bar showing
* when the ad breaks are scheduled to occur on the timeline.
* @property {string} chapterMarks
* The CSS border color applied to sections of the seek bar showing
* when the chapters start and end on the timeline.
* Defaults to dark grey rgb(27, 27, 27).
* @property {string} chapterLabels
* The CSS text color applied to the chapter labels that appear above the
* seek bar on hover. Defaults to white rgb(255, 255, 255).
* @exportDoc
*/
shaka.extern.UISeekBarColors;
Expand Down
33 changes: 0 additions & 33 deletions ui/less/range_elements.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,36 +154,3 @@
.shaka-ad-markers {
.overlay-child();
}

#shaka-player-ui-chapters-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
z-index: 0;
}

.shaka-chapter {
height: 100%;
position: relative;
}

.shaka-chapter-label {
position: relative;
top: -2.5em;
width: 100%;
text-align: center;
text-shadow: 1px 1px gray;
line-height: normal;
}

.shaka-chapter > div:first-child {
width: 100%;
height: 100%;
border-right: 1px solid;
position: absolute;
}

.shaka-chapter:last-child > div:first-child {
border-right: none;
}
212 changes: 0 additions & 212 deletions ui/seek_bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ goog.require('shaka.ui.RangeElement');
goog.require('shaka.ui.Utils');
goog.require('shaka.util.Dom');
goog.require('shaka.util.Error');
goog.require('shaka.util.EventManager');
goog.require('shaka.util.Mp4Parser');
goog.require('shaka.util.Networking');
goog.require('shaka.util.Timer');
Expand Down Expand Up @@ -84,18 +83,6 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
this.markAdBreaks_();
});

/**
* @private {shaka.util.EventManager}
*/
this.chaptersEventManager_ = new shaka.util.EventManager();


/** @private {!HTMLElement} */
this.chaptersContainer_ = shaka.util.Dom.createHTMLElement('div');
this.chaptersContainer_.id = 'shaka-player-ui-chapters-container';
this.container.appendChild(this.chaptersContainer_);

this.setupChapters_();

/**
* When user is scrubbing the seek bar - we should pause the video - see
Expand Down Expand Up @@ -238,8 +225,6 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
this.adBreaksTimer_ = null;
}

this.chaptersEventManager_.release();

super.release();
}

Expand Down Expand Up @@ -693,203 +678,6 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
return minutes + ':' + seconds;
}
}

/**
* Sets up the chapter element creator and change handling.
* @private
*/
setupChapters_() {
let language = 'und';
/** @type {!Array<shaka.extern.Chapter>} */
let chapters = [];

/**
* Does a value compare on chapters.
* @param {shaka.extern.Chapter} a
* @param {shaka.extern.Chapter} b
* @return {boolean}
*/
const chaptersEqual = (a, b) => {
return (!a && !b) || (a.id === b.id && a.title === b.title &&
a.startTime === b.startTime && a.endTime === b.endTime);
};

/** @type {function(): void} */
const handleChapterTrackChange = () => {
let nextLanguage = 'und';
/** @type {!Array<shaka.extern.Chapter>} */
let nextChapters = [];

const currentLocales = this.localization.getCurrentLocales();
for (const locale of Array.from(currentLocales)) {
nextLanguage = locale;
nextChapters = this.player.getChapters(nextLanguage);
if (nextChapters.length) {
break;
}
}
if (!nextChapters.length) {
nextLanguage = 'und';
nextChapters = this.player.getChapters(nextLanguage);
}

const languageChanged = nextLanguage !== language;
const chaptersChanged = chapters.length !== nextChapters.length ||
!chapters.some((c, idx) => {
const n = nextChapters.at(idx);
return chaptersEqual(c, n) ||
nextChapters.some((n) => chaptersEqual(c, n));
});

language = nextLanguage;
chapters = nextChapters;
if (!nextChapters.length) {
this.deletePreviousChapters_();
} else if (languageChanged || chaptersChanged) {
this.createChapterElements_(this.container, chapters);
}
};

handleChapterTrackChange();

this.eventManager.listen(
this.player, 'unloading', () => {
this.deletePreviousChapters_();
language = 'und';
chapters = [];
});

this.eventManager.listen(
this.player, 'trackschanged', handleChapterTrackChange);

this.eventManager.listen(
this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
handleChapterTrackChange();
});

this.eventManager.listen(
this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
handleChapterTrackChange();
});
}

/**
* Builds and inserts ChaptersElement into dom container.
* @param {!HTMLElement} container
* @param {!Array<shaka.extern.Chapter>} chapterTracks
* @private
*/
createChapterElements_(container, chapterTracks) {
this.deletePreviousChapters_();

const hiddenClass = 'shaka-hidden';

/** @type {{start: number, end: number}} */
const seekRange = this.player.seekRange();

/**
* @type {!Array<{
* start: number,
* end: number,
* size: number,
* title: string,
* id: string
* }>}
* */
const chapters = [];

for (const c of chapterTracks) {
if (c.startTime >= seekRange.end) {
continue;
}
const start = c.startTime > seekRange.start ?
c.startTime : seekRange.start;
const end = c.endTime < seekRange.end ?
c.endTime : seekRange.end;
const size = (end-start);
chapters.push({start, end, size, title: c.title, id: c.id});
}

if (chapters.length < 2) {
return;
}

const totalSize = chapters.reduce((t, c) => {
t += c.size;
return t;
}, 0);

/**
* @type {!Array<{
* start: number,
* end: number,
* el: HTMLElement
* }>}
* */
const chapterElMap = [];

for (const c of chapters) {
/** @type {!HTMLElement} */
const chapterEl = shaka.util.Dom.createHTMLElement('div');
chapterEl.classList.add('shaka-chapter');
chapterEl.style.width = `${c.size * 100 / totalSize}%`;

this.chaptersContainer_.appendChild(chapterEl);

/** @type {!HTMLElement} */
const chapterMarker = shaka.util.Dom.createHTMLElement('div');
chapterMarker.style.borderColor =
this.config_.seekBarColors.chapterMarks;
chapterEl.appendChild(chapterMarker);

/** @type {!HTMLElement} */
const chapterLabel = shaka.util.Dom.createHTMLElement('p');
chapterLabel.classList.add('shaka-chapter-label', hiddenClass);
chapterLabel.style.color =
this.config_.seekBarColors.chapterLabels;
chapterLabel.innerText = c.title;
chapterEl.appendChild(chapterLabel);

chapterElMap.push(
{start: c.start, end: c.end, el: chapterLabel});
}

// Add chapter event listeners
this.chaptersEventManager_.listen(this.bar, 'pointermove', (e) => {
if (!e.target) {
return;
}
const target = /** @type {HTMLElement} */(e.target);

const screenXDiff = e.offsetX / target.clientWidth;
const rangeMax = parseInt(target.getAttribute('max'), 10);
const hoverVal = screenXDiff * rangeMax;

for (const c of chapterElMap) {
const hidden = c.el.classList.contains(hiddenClass);
const inChapter = c.start <= hoverVal && hoverVal < c.end;
if (inChapter === hidden) {
c.el.classList.toggle(hiddenClass);
}
}
}, {passive: true});

this.chaptersEventManager_.listen(this.bar, 'pointerout', () => {
for (const c of chapterElMap) {
if (!c.el.classList.contains(hiddenClass)) {
c.el.classList.add(hiddenClass);
}
}
}, {passive: true});
}

/**
* @private
*/
deletePreviousChapters_() {
this.chaptersEventManager_.removeAll();
shaka.util.Dom.removeAllChildren(this.chaptersContainer_);
}
};


Expand Down
2 changes: 0 additions & 2 deletions ui/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,8 +229,6 @@ shaka.ui.Overlay = class {
buffered: 'rgba(255, 255, 255, 0.54)',
played: 'rgb(255, 255, 255)',
adBreaks: 'rgb(255, 204, 0)',
chapterMarks: 'rgb(27, 27, 27)',
chapterLabels: 'rgb(255, 255, 255)',
},
volumeBarColors: {
base: 'rgba(255, 255, 255, 0.54)',
Expand Down
Loading