Skip to content

Commit

Permalink
revert: Add chapter titles and dividers on the seek bar (#6208)
Browse files Browse the repository at this point in the history 
re-open: #3597
  • Loading branch information
@avelad
avelad committed Feb 1, 2024
1 parent 77f252d commit 8c8ffd9
Show file tree
Hide file tree
Showing 5 changed files with 1 addition and 270 deletions.
13 changes: 0 additions & 13 deletions docs/tutorials/ui-customization.md
View file
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
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
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
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
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

0 comments on commit 8c8ffd9

Please sign in to comment.