galene
galene copied to clipboard
WIP: Add media failed animation
Proposal for https://github.com/jech/galene/issues/87.
Some notes:
- I propose to put the animation inside a SVG element to make it easier to tweak in the future. This also prevent the need for more HTML elements.
- This PR is not working as the loading animation is put in background (behind the video stream). To put an image on top of a video, it seems that we need to add another element as
<video>does not seem to support::beforeCSS modifier.
Is it problematic if we add an element next to <video> to place this animation?
I'm not very keen on animations, they tend to use a suprisingly large amount of CPU time when they're many of them. But I'm quite open to such a change if we verify that the CPU time is not too large.
@erdnaxe, just to let you know that I am interested in this patch, and I'm keenly waiting for you to find the right approach.
I am not convinced by the solution I proposed here. Maybe we could avoid showing something on the whole video and rather use div.top-video-controls to show an element when the media is failing.
What do you think of displaying an element in div.top-video-controls when the media is failing? Do you want something more visible?
Proposition of layout, both media are failing, but on the left I am hovering with my mouse:

(I made this screenshot using the Web inspector and adding a SVG element in the top controls, I can patch the JS if it turns out to be what we want.)
I fear it's not visible enough. Think about the usage scenario: you are giving a lecture, and suddenly your connection has an issue. You want to notice it straight away.