Add media audio image

[keianhzo]

This PR adds support for the media audio background image that already exists in AFRAME. It does it by implementing a new VideoTexture class that supports an optional image to show instead of the video similarly to what the HTMLVIdeoElement.poster property does.

This also consolidates overrides that we had for the THREE VideoTexture here: https://github.com/mozilla/hubs/blob/ad175eee477637d3a3b0e5dd1609e85deb74aa1e/src/utils/threejs-video-texture-pause.js

I considered other options like creating an audio element and keeping track of it but I thought that this simplifies the code as both media types are handled in the same way using a video element.

Does it makes more sense to rename this to HubsVideoTexture to avoid confusion?

[takahirox]

Sorry, I didn't have long enough time to review the entire change. Just my rough thoughts.

• I suppose it is more straightforward and maintainable if video is in component data? Because, for example, this line requires a lot to know things that are not clear in this file like VideoMenu entity's Mesh must have VideoTexture in .map.

const video = (world.eid2obj.get(videoEid) as any).material.map.video as HTMLVideoElement;

• But if this change is a temporary solution and we will revisit later, it may be acceptable because workable may be better than broken.

• rename this to HubsVideoTexture to avoid confusion

Yes, I like renaming to avoid conflicts. I know video texture extension is under discussion in glTF. If Three.js glTF loader will support it and create Three.js Video texture, our same name VideoTexture may be confusing.

[keianhzo]

That sounds good. I've renamed it to HubsVideoTexture and exposed the video element in a MediaVideoData map.