Feature Request: Add dynamic data

[MarkoH17]

First off, thank you for such a great project!

I have a use case where I would like to push new events to an already-mounted asciinema-player instance. I understand that I can use the websocket driver to stream events, but I think it would be useful to expose an API where data events could be pushed, something like:

let domElement = document.getElementById("#someId");
let playerInstance = AsciinemaPlayer.create({ data: [...] }, domElement);

this.domElement.on('my-custom-data-event', (event) => {
  let newEvents = event.myCustomEvents; // myCustomEvents = [[timestamp_delta, mode, content]]

  this.playerInstance.appendEvents(newEvents);
})

The docs indicate that data can be "dynamically loaded", yet it appears that this only occurs when playing begins.

If exposing an API to append data to an existing stream isn't possible, would you consider allowing custom drivers to be specified during initialization so custom data loading behavior can be used?

[slavaGanzin]

@ku1ik Hi, Marcin. Have the same request, can make a PR if it will be merged. If you anticipate any challenges or unexpected behaviours, please, share

[eternalphane]

Actually you can provide custom drivers by specifying a function as the src parameter (not tested yet):
https://github.com/asciinema/asciinema-player/blob/327c2ca99ded9f4e590b6224dea6fc3b687a1f68/src/core.js#L622-L623

[ku1ik]

Hey @MarkoH17, @slavaGanzin, @eternalphane 👋

Indeed there's an (undocumented) way of specifying a custom driver, which is experimental and I plan to refactor driver internals before I make this official.

I don't have a timeline for looking into that, but if you'd like to go for a custom driver now here's how you do it:

const driver = function({ feed }) {
  let intervalId;

  return {
    init: function() {
      // terminal window size
      return { cols: 80, rows: 24 };
    },

    play: function() {
      // start playback

      intervalId = setInterval(function() {
        feed("hello ");
      }, 500);

      return true;
    },

    // OPTIONAL:
    // pause: function() {
    //   clearInterval(intervalId);
    //   return true;
    // },

    stop: function() {
      clearInterval(intervalId);
      // perform more cleanup, free other resources
    }
  };
};

AsciinemaPlayer.create(driver, document.getElementById('player'), { theme: 'dracula' });

I hope this helps!