RxJS v7: How to dynamically add/remove and pause/resume observables? - rxjs

Question

Given some arrays:
const recordings = {
foo: [{delay: 5, data: 'a'}, {delay: 2, data: 'b'}],
bar: [{delay: 3, data: 'x'}, {delay: 7, data: 'y'}, {delay: 4, data: 'z'}]
};
Is there a way that I can pass them to a playback method that will do something like the following?:
beginPlayback(timeline, fromIndex = 0) {
let postedIndex = -1;
const observable = from(timeline.slice(fromIndex)).pipe(
concatMap((instant, i) => of({ i, instant }).pipe(delay(instant.delay))),
tap(async ({i, instant}) => {
try {
await post(instant.data);
postedIndex = i;
} catch (err) {
console.error(err);
// Continue playback
}
})
);
const handle = {
postedIndex,
subscription: observable.subscribe()
};
return handle;
}
...and then allow me to manage concurrent playback with an external/public interface like this?:
const handles = {};
const paused = {};
onAddNewRecordingRequest(id, timeline) {
recordings[id] = timeline;
}
onBeginPlaybackRequest(id) {
handles[id] = beginPlayback(recordings[id]);
}
onPauseRequested(id) {
const handle = handles[id];
paused[id] = handle.postedIndex;
handle.subscription.unsubscribe() // dispose of observable
}
onResumeRequested(id) {
const alreadyThroughIndex = paused[id];
handles[id] = beginPlayback(recordings[id], alreadyThroughIndex);
delete paused[id];
}
onStopRequested(id) {
const handle = handles[id];
handle.subscription.unsubscribe() // dispose of observable
}
Is there also a way to automatically remove the observable and the handle when the observable is completed?