Custom Media Time Range that hides unseekable part of the seekbar during Live DVR

[ralfcarneborn]

This might be an odd question but it would really help my usecase.
I am trying out the Mux Player and just learning about the media-chrome, everything is very impressive so far.
But we have these long streams that can go up to 12-16 hours, we are doing Live DVR and the DVR window is max 2 hours.

Since any seeking outside of the seekable range of 2 hours is invalid, I want a custom version of the media-time-range basically, that just hides whatever is before those 2 hours. I might even want to be able to change that to even a smaller seekable range than the 2 hours, lets say the last 30 minutes.

The media-time-display would then be relative to the start of the custom time range, and the duration would then be a max of 2 hours.
How would you go about doing this?

[mmcc]

Right now I think this might be tough to do with our current time range element, but there's work as part of a time range refactor that at least might make implementing some of this easier.

One thought that comes to mind...would something like media-offset work? I'm not sure I've ever seen it tried with a live DVR window, but at least seems like it's directionally what you want?

[ralfcarneborn]

That media-offset did help out a lot, but it doesnt really fit because it doesnt hide the part of the seekbar that is "out of bounds" and the time doesnt count from 0 but from the offset start value and so on.
I have built exactly what i want (custom seekbar) previously in a normal react app, but i kind of want to try and do it in media-chrome´s fashion if you know what i mean.

Lets say i would try and create my own version of media-time-range, is there a guide or best practice of how to extend that class or build on top off it to add the very custom functionality that i want?

Thank you for the answer by the way, much appreciated

[luwes]

It's a bit hacky but it gets the job done I think: https://codesandbox.io/s/media-chrome-offset-live-7nr2zf

      Object.defineProperty(timerange, "mediaSeekable", {
        get() {
          let desc = Object.getOwnPropertyDescriptor(
            Object.getPrototypeOf(timerange),
            "mediaSeekable"
          );
          return desc.get.call(this);
        },
        set(range) {
          if (range == null) {
            this.removeAttribute("mediaseekable");
            return;
          }

          let [, end] = range;
          // clamp to 20s from the end
          range[0] = Math.max(0, end - 20);

          console.log(range);
          this.setAttribute("mediaseekable", range.join(":"));
        }
      });

The monkey patch overrides the mediaSeekable setter so seekable start is clamped 20s from the end for that live stream.
You can change the 20s to any value you see fit.

[ralfcarneborn]

Wow that is so great, thank you so very much, exactly what i was looking for, i can really work with this!
Much appriciated!!