From 0a15a1a8bad7401fd457f30cfa49903251c3174b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?A=CC=81lvaro=20Velad=20Galva=CC=81n?= Date: Thu, 1 Feb 2024 08:17:56 +0100 Subject: [PATCH] revert: Add chapter titles and dividers on the seek bar --- docs/tutorials/ui-customization.md | 13 -- ui/externs/ui.js | 11 +- ui/less/range_elements.less | 33 ----- ui/seek_bar.js | 212 ----------------------------- ui/ui.js | 2 - 5 files changed, 1 insertion(+), 270 deletions(-) diff --git a/docs/tutorials/ui-customization.md b/docs/tutorials/ui-customization.md index 7bb460b485..86447319f7 100644 --- a/docs/tutorials/ui-customization.md +++ b/docs/tutorials/ui-customization.md @@ -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. diff --git a/ui/externs/ui.js b/ui/externs/ui.js index a66a184196..cd9f523a71 100644 --- a/ui/externs/ui.js +++ b/ui/externs/ui.js @@ -21,9 +21,7 @@ shaka.extern = {}; * base: string, * buffered: string, * played: string, - * adBreaks: string, - * chapterMarks: string, - * chapterLabels: string + * adBreaks: string * }} * * @property {string} base @@ -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; diff --git a/ui/less/range_elements.less b/ui/less/range_elements.less index 6af646a0c0..2fbdeed88c 100644 --- a/ui/less/range_elements.less +++ b/ui/less/range_elements.less @@ -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; -} diff --git a/ui/seek_bar.js b/ui/seek_bar.js index 17c3dfeded..bef3e96501 100644 --- a/ui/seek_bar.js +++ b/ui/seek_bar.js @@ -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'); @@ -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 @@ -238,8 +225,6 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement { this.adBreaksTimer_ = null; } - this.chaptersEventManager_.release(); - super.release(); } @@ -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} */ - 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} */ - 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} 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_); - } }; diff --git a/ui/ui.js b/ui/ui.js index 23b5101057..3b0f4acdbd 100644 --- a/ui/ui.js +++ b/ui/ui.js @@ -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)',