galene icon indicating copy to clipboard operation
galene copied to clipboard

WIP: Add media failed animation

Open erdnaxe opened this issue 4 years ago • 4 comments

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 ::before CSS modifier.

Is it problematic if we add an element next to <video> to place this animation?

erdnaxe avatar May 06 '21 14:05 erdnaxe

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.

jech avatar Jun 09 '21 13:06 jech

@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.

jech avatar Aug 28 '21 11:08 jech

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:

image

(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.)

erdnaxe avatar Aug 28 '21 16:08 erdnaxe

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.

jech avatar Aug 28 '21 18:08 jech