PIXI loader error (loader is running)

[charlie_says]

Hi,

I'm getting an error when trying to load some mp3s. The loading happens in a chain so the error:

pixi.min.js:9 Uncaught Error: Cannot add resources while the loader is running.

surprises me, as the previous load should be complete.

So - 

is it possible to check if the loader is still loading?

Also, does calling loader.reset() not stop any current loads?

Thanks!

 

[ivan.popelyshev]

What do you mean by chain? Sometimes you have to specify parent resource: https://github.com/englercj/resource-loader/blob/master/src/Loader.js#L298 , just put parentResource in the options, link to previous resource in the chain.

If you dont understand what's going on ,please provide more information. You can also to make an example (jsfiddle) and create an issue at resource-loader github.

[charlie_says]

Sorry @ivan.popelyshev I didn't mean chain like that.

What I'm doing is, loading a video, then loading an associated mp3. I wait until the video complete event fires before starting the audio - they use their own instantiation of a loader.

But, sometimes it seems that the audio trips up - I expect this is because the video hasn't actually loaded, but, with all my tests/experiments there doesn't seem to be a way to conclusively find out if the video has loaded or not (browser buffering/caching etc.)

[ivan.popelyshev]

oh, then you have to ask @xerver why does it work like that, or just write something like "loader.add("xxx", "myaudio.ogg", { parentResource: videoResource })" where videoResource is loaded video in "resource" or passed parameter in that callback you specified.

[charlie_says]

Thanks @ivan.popelyshev adding the resource seems to resolve this issue.

[xerver]

If you are in the process of loading any resources, you must specify a parentResource for any resources you add in (usually these are adding via a middleware).

Otherwise, loading a new root resource during an active load is an error. You will need to call .reset() before you can add root resources again. If there is active loading then reset will abort all active loading and reset the loader to be used for new resources.

[charlie_says]

gotcha, thanks @xerver - although, I was expecting the previous load to be complete, as the new loading is only initiated on the complete event being fired from the previous.

Is this to do with video loading being (at least in part) managed by the browser?

 

[xerver]

Even once loading is complete, you must call reset() before starting a new load. Each loader is really meant to be a one-time-use object, where it collects resources, loads them, then the lifetime ends. The reset() method is there for you to be able to use a single instance again rather than allocating a new one.

It is best if you think of the lifetime of a loader as over as soon as it completes a load, with reset() acting as a "revive" that brings the loader back to life for another use. It is a state machine that only marches forward, and can restart if you explicitly tell it to.

[charlie_says]

Thanks for this @xerver - I think some (if not all) of the issues I've been having with my current project may have been due to misunderstanding how the loader works/should be used.

If I could trouble you for one more question:

As videos get loaded 'a different way' (via fromFile/fromURL(s)) how would be the best way of chaining/sequencing their loading? As they don't have a loader, there's nothing to call reset to?

Thanks!

[xerver]

Not what you mean "they don't have a loader"? Resource-loader supports loading audio/video, and you can pass an array of urls that will each be added as sources. You can also pass an array of parallel mimeTypes to `metadata.mimeType` so that each URL has a mime associated. You can even create and prepare your own <video/> element if you have some complex setup that is required and pass it into the loader as `metadata.loadElement` and set `metadata.skipSource` to true so it just tracks the loading of the element and doesn't create a new one. The event that resource-loader waits for is the `load` or `canplaythrough` event, whichever comes first.

[charlie_says]

Sorry, I meant if you used the helper functions, I wasn't sure how (or if) the loader was exposed.

Elsewhere I do use a loader directly for a video clip, I've now set this so it resets afterwards.

Interestingly, I did quite a lot of experimenting with adding my own video tag to the page, but again hit different issues in different browsers. 

I think that I found the best way of loading video (generally) was to load it as xhr and make a video element from a blob, but, working this way meant that autoplay was lost on some browsers...

Ultimately, after all these experiments, I went back to the simplest implementation (basically basetexture.fromURL) as the more complex ways whilst giving a little more control didn't improve the end result... (drifted off from the original topic here.)

[xerver]

Keep in mind that the .fromX() methods in PIXI do not use the resource-loader library.

[charlie_says]

ahh... ok

I found an issue today that loading video like this:

let options: PIXI.loaders.LoaderOptions = { loadType: PIXI.loaders.Resource.LOAD_TYPE.VIDEO, metaData: { mimeType: 'video/' + videoType } };

            this._videoLoader.add({ name: this._name, url: videoPathAndName + '.' + videoType, options });

            this._videoLoader.on('error', this._errorVideo, this);

            

            this._videoLoader.on('progress', this._progressVideo, this);

            this._videoLoader.on('complete', this._confirmedLoadFirstVideo, this);

fails on older devices (ipad1, kindle fire) so I've changed things so the video is loaded like this:

  let options: PIXI.loaders.LoaderOptions = { loadType: PIXI.loaders.Resource.LOAD_TYPE.VIDEO, metaData: { mimeType: 'video/' + videoType } };

            this._videoTexture = PIXI.VideoBaseTexture.fromUrl({ name: this._name, src: videoPathAndName + '.' + videoType, options });

            this._videoTexture.autoPlay = true;

 

            this._videoTexture.on('loaded', this._confirmedLoadFirstVideo, this);

This appears to work, but is there anything (else) I should be aware of? (I've got a bit of further testing to check that I'm removing the videos from the cache correctly, although, initially it appears fine.)

 

[xerver]

Video on mobile is weird, you can't load/play video until the user interacts with the page. I have no idea what the issue is without debugging it live, and I don't own any of those devices

If you figure it out, feel free to open an issue!