Add chapter marks in the seek bar

[hiren3897]

Have you read the Tutorials?
yes

Have you read the FAQ and checked for duplicate open issues?
yes

What version of Shaka Player are you using?
latest

Please ask your question
I want to edit the shaka-range-container CSS is it possible to do so?

I tried to edit it but it picks the default CSS settings on progress update.

I want to make the input range circle in red color and the progress update of currentTime also in red and I have already created the overlay of my chapters on the timeline I just want to hide the shaka-range-container and display my chapters with just a progress update in red and the input circle in red.

Maybe Same as youtube!!

my Current UI

What I want to do

Is it possible? how?

Thank you advance for your answers : )

[joeyparrish]

You can override the default CSS with your own, or replace it entirely.

However, the colors for the range elements are created in JavaScript, not CSS. We have configuration to give you control over that. Here are the defaults:

You can override it, for example, with something like this:

video.ui.configure({
  seekBarColors: {
    base: 'white',
    buffered: 'red',
    played: 'blue',
  },
});

Which results in a look like this:

Does this help?

[hiren3897]

Hello @joeyparrish

Yes, I was aware of the changing color of the seek bar using UI config, but if I want to change the design of the seek bar same as youtube with a gap in between overlayed with the chapters, I can do this by overriding the CSS?

Do I have to modify only shaka-range-container ?

Thanks :)

[kocoten1992]

@hiren3897 , how do you create chapters like that ? It isn't support by shaka-player by default right ? I'm interested!

Back to the question, if I'm reading right - you already have your own chapter element, now you need the circle to be red and the default seek bar to be transparent ? You can set seekBarColors to transparent ?

If you want a css only solution, I think you'll need !important, it was defined here

https://github.com/google/shaka-player/blob/4c975621a0110a7e6d21be2b8e2cebeb80e1cb1c/ui/seek_bar.js#L250-L260

And with every tick, it would overwrite all your css (without !important tag). I think set !important on .shaka-seek-bar-container would do the trick.

[kocoten1992]

I've another trick, but it overkill for this: you overwrite part of shaka-player at compile time.

Build shaka-player:

python3 build/build.py +@complete +seek_bar_overwrite.js

seek_bar_overwrite.js:

goog.provide('shaka.ui.SeekBar');

let update = shaka.ui.SeekBar.prototype.update;

shaka.ui.SeekBar.prototype.update = function () {
  let updateSuper = update();
  // overwrite just the color (this is just example)
  const gradient = [ 
    'to right', 
    this.makeColor_(unbufferedColor, bufferStartFraction), 
    this.makeColor_(colors.played, bufferStartFraction), 
    this.makeColor_(colors.played, playheadFraction), 
    this.makeColor_(colors.buffered, playheadFraction), 
    this.makeColor_(colors.buffered, bufferEndFraction), 
    this.makeColor_(colors.base, bufferEndFraction), 
  ]; 
  this.container.style.background =
    'linear-gradient(' + gradient.join(',') + ')';
  return updateSuper;
}

Disable Reject global variables.

You need to disable that rules in conformance.textproto

@joeyparrish , wdyt about this technique, should I add this to our tutorial ?

[hiren3897]

Hello @kocoten1992

@hiren3897 , how do you create chapters like that ? It isn't support by shaka-player by default right ? I'm interested!

Yes, you are right I created chapters my way ^^

Back to the question, if I'm reading right - you already have your own chapter element, now you need the circle to be red and the default seek bar to be transparent? You can set seekBarColors to transparent ?

Yes, we can transparent the seek bar "base" and "buffered" and keep the "played" to red color.

I tried to append my chapters in the shaka-seek-bar-container but a good CSS is required to be overlayed on the seek-bar and also it should be capable to listen chapters click and a seek-bar (input) click event. In short same as youtube does ^^

But I am having a hard time doing so...

[kocoten1992]

I see your dilemma, either create from scratch seekbar with your functionality or a custom element and link it with current seekbar right ?

Since you already create your element, maybe just go with that, if I was doing it, my strategy would be:

1. Expose an api for the communication between them.
2. When user click on chapter it will notify seekbar (or the otherway around).

For example: there is a private method https://github.com/google/shaka-player/blob/d5769eeda47524998a714a3d701604561d761b6d/ui/controls.js#L1312, we can make that api public and use it for communication:

// controls-extension.js
goog.require('shaka.ui.Controls');

/**
 * @override
 * @export
 */
shaka.ui.Controls.prototype.seek = function (currentTime) {
  this.seek_(currentTime);
}

Build with python3 build/build.py +controls-extension.js

And in your chapter element, we can do this:

this.controls_.seek(currentTime);

None of the code was tested, this is just an idea, hope it help.

[joeyparrish]

There is something in seek_bar.js already for ad markers, which overlay the seek bar. A similar technique could be used for chapter markers. We would be happy to have a PR for this, especially if we can find a standardized way to source the chapter data for various streaming formats.

My advice is to modify seek_bar.js in a fork to get the effect you want. You may want to generalize the ad-marker system (see adMarkerContainer_, adCuePoints_, and markAdBreaks_). When you have something you like, we can discuss your changes, reach an agreement on the details of your design, and then we can merge a PR.

What do you think?

[hiren3897]

Hello, @joeyparrish Thanks for your ideas. I will be working on this from next week so I will let you when I have a good workable solution with me, then we can surely discuss PR :)

[hochhaus]

@hiren3897 Do you have any update on the status of your personal solution?

[hiren3897]

Hello @hochhaus
I have a pretty good solution for the chapter's VOD that is in my application.

@joeyparrish @avelad
Currently, I am struggling with MULTIPLE chapter management because in shaka-player for example:

• If I addChapterTrack() for the first time

  • URL: holds 10 chapter information
    https://gist.githubusercontent.com/hiren3897/2ccfe08bb7f99892d28e7d91c2cb1293/raw/9f85cb7ea0b8ca35cd09528b2339f6c486d0e372/10BBB.vtt
  • it returns an array of 10 chapters using getChapters('en')

• Then again I addChapterTrack() for the second time

  • URL: holds next 5 chapter information https://gist.githubusercontent.com/hiren3897/711508f42a3ad31105c64eb06bc8426c/raw/03a849d06f161046bfafbd9f5387369e0576565c/next5BBB.vtt
    • it returns the same array of 10 chapters using getChapters('en') added before
    • We don't have an update for an array with old + new chapters added to the player.

Do we have any kind of solution for this? Or it sounds more like a bug?
because the behavior should be when we add another chapter webvtt we should have an updated ARRAY of chapters.

A code for reference:

const getChaptersData = async(chapterUrl, language, mimeType) => {
  await this.player_.addChaptersTrack(`${chapterUrl}`, `${language}`, `${mimeType}`);

  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(this.player_.getChapters(`${language}`));
    }, 1.5 * 1000); // it by defaults requires a delay of 1.5 seconds to get the chapters
  });
};

// 10 https://gist.githubusercontent.com/hiren3897/2ccfe08bb7f99892d28e7d91c2cb1293/raw/9f85cb7ea0b8ca35cd09528b2339f6c486d0e372/10BBB.vtt
// 5 https://gist.githubusercontent.com/hiren3897/711508f42a3ad31105c64eb06bc8426c/raw/03a849d06f161046bfafbd9f5387369e0576565c/next5BBB.vtt
// full https://gist.githubusercontent.com/hiren3897/b7d30a2505a1a8929175aaa7ded7c013/raw/0fce37ff8e389dcd86bdd4dc102ec4d23bf39b6d/BBB.vtt
setTimeout(async() => {
  console.log('first 10');
  const data = await getChaptersData('https://gist.githubusercontent.com/hiren3897/2ccfe08bb7f99892d28e7d91c2cb1293/raw/9f85cb7ea0b8ca35cd09528b2339f6c486d0e372/10BBB.vtt', 'en', 'text/vtt');
  console.log({ data }); // 10 chapters array in console
  console.log(this.player_.getChaptersTracks()); // have one track in console
}, 5000);

setTimeout(async() => {
  console.log('next 5 added');
  const data = await getChaptersData('https://gist.githubusercontent.com/hiren3897/711508f42a3ad31105c64eb06bc8426c/raw/03a849d06f161046bfafbd9f5387369e0576565c/next5BBB.vtt', 'en', 'text/vtt');
  console.log({ data });  // same 10 chapters array in console
  console.log(this.player_.getChaptersTracks()); // have 2 tracks in console
}, 10000);

OUTPUT

Thank you for you help in advance :)

[avelad]

@hiren3897 I have a solution for this, throughout today I'll do a PR to solve it.

On the other hand, your second VTT file is wrong, the WEBVTT header is missing.

[hiren3897]

@avelad Thanks for the quick response
here is my second WEBVTT: https://gist.github.com/hiren3897/711508f42a3ad31105c64eb06bc8426c

Once you resolve the problem please update me on the solution.

I have a question
Once you do a PR on this and then it will be set to be released on the next launch date because for me it is urgent and I am dependent on npm release for my current project.

Do you have any idea how I can make it work for now? or when will be the release of 3.3.1 ?

[avelad]

About the dates, someone from the ShakaPlayer team has to answer...

[hiren3897]

Okay, thanks

@avelad
And can you tell me is it possible to solve this problem with a temporary fix now? I am using npm
should we merge the array?
how do we get both WEBVTT data from the player?

@joeyparrish can we know the date? thanks

[joeyparrish]

I don't have time to do another release today, but I have been cherry-picking changes to the v3.3.x release branch. I'll see if I have time tomorrow.

[hochhaus]

Thanks @hiren3897, @avelad and @joeyparrish.

@hiren3897 Are you able to share details (ideally code) about the solution in your application? Is it at the point where a PR to this repo makes sense?

[hiren3897]

I don't have time to do another release today, but I have been cherry-picking changes to the v3.3.x release branch. I'll see if I have time tomorrow.

It will be really appreciated 🥳 thanks

[hiren3897]

Thanks @hiren3897, @avelad and @joeyparrish.

@hiren3897 Are you able to share details (ideally code) about the solution in your application? Is it at the point where a PR to this repo makes sense?

For now, I am quite busy with my application for VOD and live chapters. I will do this PR when I will have the best time of mine. :)

[hochhaus]

Thanks @hiren3897

[theodab]

We use Apache to host the demo page locally for testing. If you'd rather not set that up, you could also use a script, like the SimpleHTTPServer python script.

[avelad]

@Trail3lazer Please, create a PR in this repo. It seems that you create the PR in you own repo. Thanks.

[Trail3lazer]

@avelad Sorry, I didn't see this sooner. I created a PR a few days ago but realized I forgot to include language support. I am finishing some unit tests then I'll create another PR. I can create it sooner if that would be helpful.

[Trail3lazer]

@avelad I'm having a lot of trouble trying to access dom elements in the UI integration tests. Am I setting up this test incorrectly? UiUtils.getElementByClassName(videoContainer, 'shaka-seek-bar-container') returns an empty object.
Integration test file:
chapter_ui_integration.txt
PR with all my changes:
Add the option for chapter titles and dividers on the seek bar
My test I wrote is failing because I'm struggling with the setup.

edit: fix grammar and syntax errors.

[Trail3lazer]

@avelad Sorry, I have been working on schoolwork and was unavailable to look into the PR comments you left until today. It looks like my changes from #5771 were plain text copied and then merged with this PR #5863. Please link my commits and add me as a contributor.

[avelad]

Since there are problems with the functionality, the changes will be reverted and the issue will be opened again in case someone wants to work on it