Event on view updated

[ndaidong]

hi there,

How to setup an event handler after the virtual DOM get updated?

In my specific case, I use HyperApp to render view with several video elements, something like below:

const makePlayer = (videoUrls) => {
  return videoUrls.map((url) => {
    return  video({'video-url': url, 'muted': true}, '');
  });
};

These video elements run with flv.js, in order to make them playable, I need to convert to flv player instances, something like:

const makePlayableVideo = () => {
  return Array.from(document.querySelectorAll('video')).map((videoElement) => {
    const videoSource = videoElement.getAttribute('video-url');
    const flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: videoSource
    });
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    flvPlayer.play();
    return flvPlayer;
  });
};

In regular situation, I can call makePlayableVideo every time when the view get updated. How to do that with HyperApp? Does my approach is suitable to HyperApp?

Thank you,

[jorgebucaran]

I'm afraid that to work with video you'll need to create a custom effect until there's an official way to use video in Hyperapp that makes sense for Hyperapp.

[ndaidong]

@jorgebucaran thank you for your answer.

[jorgebucaran]

Let's leave this open as I'll try to come up with an example for you.

[ndaidong]

@jorgebucaran that would help me a lot. I'm looking into the tutorials and documents about using effect too.

[zaceno]

@ndaidong To your original question about doing something when [a part of] the view is updated:

The view is always meant to be a reflection of the state – no more, no less. So what you really want is to do something when the state is updated. In particular: the part of the state that determines the part of the view that you care about.

State is always changed through actions, so you want to identify the actions that matter and add whatever you need to do to them. This usually means to make them return an effect, so I'm basically saying the same thing you and @jorgebucaran already talked about. Just hoping to clarify the idea.

Sometimes actions / state can be so complex that it's not enough to just add an effect to a couple of actions to solve the problem. In those rare cases you might want to look in to a custom subscriptions, to make things happen in response to changes in the state (not exactly what subscriptions are for, but they can be used that way in a pinch)

[jorgebucaran]

We don't really have a bug here, so let's close this. 🙌

[ndaidong]

@zaceno @jorgebucaran thank you