Update position on dvr playlists

[ariselseng]

Hi, I have plans to use this with a live dvr playlist. Is there a method for updating the position of a marker?

[tjenkinson]

Not yet! Would be nice though.

Would your stream be a sliding window, or just extending?

If time 0 never changes then I think it should already work.

If it's a siding window then this needs a bit of thinking of how to keep everything synchronised and what time the user will provide and when.

I'm thinking maybe it would be a helper that you would pass your marker to, and it would then update it's time from that point onwards to keep it in sync, and remove it when it's drops off the start.

On 2 Feb 2016, at 18:40, Ari [email protected] wrote:

Hi, I have plans to use this with a live dvr playlist Is there a method for updating the position of a marker?

— Reply to this email directly or view it on GitHub.

[ariselseng]

My stream is sliding yes :/

Right now I am trying to figure out how I add/remove a marker dynamically. Updating its time is trivial. Can I add and remove markers right now?

[ariselseng]

How do I add a marker? I have tried this.

var markers = player.getPlugin("markers-plugin")
var addMarker = function (time, tooltipText) {
        var a = new ClapprMarkersPlugin.StandardMarker(time,tooltipText)
        var $tooltip = a.getTooltipEl()
        if ($tooltip) {
                $tooltip = $($tooltip)
        }
        var marker = {
                emitter: a.getEmitter(),
                $marker: $(a.getMarkerEl()),
                markerLeft: null,
                $tooltip: $tooltip,
                $tooltipContainer: null,
                tooltipContainerLeft: null,
                tooltipContainerBottom: null,
                tooltipChangedHandler: null,
                time: a.getTime(),
                onDestroy: a.onDestroy
        }
        console.log(marker)
        markers._createMarker(marker)
  }

[tjenkinson]

There isn't a nice way yet. The _addMarker is meant to be just internal. Shouldn't be too complicated to add though I might have some time to look at this later

On 2 Feb 2016, at 19:36, Ari [email protected] wrote:

How do I add a marker? I have tried this.

var markers = player.getPlugin("markers-plugin") var addMarker = function (time, tooltipText) { var a = new ClapprMarkersPlugin.StandardMarker(time,tooltipText) var $tooltip = a.getTooltipEl() if ($tooltip) { $tooltip = $($tooltip) } var marker = { emitter: a.getEmitter(), $marker: $(a.getMarkerEl()), markerLeft: null, $tooltip: $tooltip, $tooltipContainer: null, tooltipContainerLeft: null, tooltipContainerBottom: null, tooltipChangedHandler: null, time: a.getTime(), onDestroy: a.onDestroy } console.log(marker) markers._createMarker(marker) } — Reply to this email directly or view it on GitHub.

[ariselseng]

@tjenkinson Thanks :)

btw, i cannot build it from source, as it complains about jquery and lodash which is not listed as dependencies.

[tjenkinson]

That's strange because they are in package.json. You definitely done npm install?

On 2 Feb 2016, at 19:47, Ari [email protected] wrote:

@tjenkinson Thanks :)

btw, i cannot build it from source, as it complains about jquery and lodash which is not listed as dependencies.

— Reply to this email directly or view it on GitHub.

[ariselseng]

Yes. When I renamed "jQuery" to "jquery it worked. I also ran "npm install lodash" but I am not sure if that actually had any impact.

[tjenkinson]

That's strange because it's "jquery" on npm, and I don't use lodash anywhere :/ Also it builds fine on travis and that starts empty.

I've added addMarker() to master now. Will look at removeMarker() tomorrow.

    var markersPlugin = player.getPlugin("markers-plugin");
    var newMarker = new ClapprMarkersPlugin.StandardMarker(5, "I'm new!");
    setTimeout(function() {
      markersPlugin.addMarker(newMarker);
    }, 4000);

should work

[ariselseng]

Nice :) With a helper that can recieve an array like: [{text:"Lorem", time: 10}, {text:"Ipsum", time: 20}] and be smart about what needs updating in the actual plugin that would be awesome. So that I could just pass all my events that I want in the timeline at an interval and have it update accordingly with minimal DOM writes.

[ariselseng]

Btw, here is my build errors from a fresh git pull. ERROR in ./src/index.js Module not found: Error: Cannot resolve module 'jQuery' in /home/cowai/stuff/clappr-markers-plugin/src @ ./src/index.js 1:1956-1973

[ariselseng]

I guess you are on a mac and use a case-insensitive filesystem?

[ariselseng]

Here is a hack I am using right now: I feed player.setMarkers with [{text:"Lorem", time: 10}, {text:"Ipsum", time: 20}]. the reason for having the function inside player is just for my case. It works very good right now. I simply call setMarkers at an interval and everything works very smoothly.

  var player = new Clappr.Player(config);
  player.markersPlugin = player.getPlugin("markers-plugin")
  player.setMarkers = function(markers) {
      var diff = 0;
      //remove markers until the amount is the correct one
      if (player.markersPlugin._markers.length > markers.length) {
        diff = -1; // set to a value other than 0 to trigger _createInitialMarkers()
        for (var i = container.player.markersPlugin._markers.length - 1; i > markers.length - 1; i--) {
          player.markersPlugin._markers[i].$marker.remove()
          player.markersPlugin._markers[i].$tooltip.remove()
          delete player.core.options.markersPlugin.markers[i]

        }
      } else {
        //add markers if the amount is lower than it should
        diff = markers.length - container.player.markersPlugin._markers.length
        for (i = 0; i < diff; i++) {
          player.core.options.markersPlugin.markers.push(new ClapprMarkersPlugin.StandardMarker(0, " "))
        }
      }
      if (markers.length && diff !== 0) {
        // "redraw" if there is a difference in amount of markers
        player.markersPlugin._markers = []
        player.markersPlugin._createInitialMarkers()
      }
      //now the correct amount of markers is set
      for (var i = 0; i < markers.length; i++) {
        if (player.markersPlugin._markers[i] !== undefined) {
          if (player.markersPlugin._markers[i].tooltipText !== markers[i].text) {
            player.markersPlugin._markers[i].tooltipText = markers[i].text
            player.markersPlugin._markers[i].$tooltip.text(markers[i].text)
          }
          player.markersPlugin._markers[i].time = markers[i].time

        }
      }
    }

[tjenkinson]

You should now be able to use addMarker() and removeMarker() to add and remove markers dynamically. To update the times for markers you can use setTime() on the markers themselves.

I just submitted a PR to clappr (https://github.com/clappr/clappr/issues/825) which should make it possible to update the marker times accurately when the stream slides.