[ER-188] Alternative layout for widget PIP view

[BillCarsonFr]

Your use case

What would you like to do?

For Element Call PIP, we need to implement a new layout:

Why would you like to do it?

We want to have at all time your current mute state visible.
This not actually visible in the current PIP design, there is a top and bottom bar that appears on hover,
and web hardcode the button it if the widget is a all or Jitsi.

The idea is to let the app control what button it wants to show, and having web only showing a header with a back action.

How would you like to achieve it?

We probably want to keep that as a new option layout, and keep the old one for other apps.
When starting an element call we could then use the new PIP style.
This might require a bit of synchronisation (?), if we want that the embedded EC widget to have the bottom control bar itself (or you will have to go back then leave, no shortcut)

Have you considered any alternatives?

No response

Additional context

No response

[toger5]

@daniellekirkwood Working on this reveals that we collide with jitsi. The current overlays in EW are done inside EW not the widget -> they are also used by jitsy.

With the new design we will drop those -> they will also be gone for jitsy.

The back button is still there (see design in OG post), the hangup button will be gone

Two options

• add both pip versions new/old and use old for jitsy (expensive but ensures we do not regress jitsy)
• only add new option and risk other issues with jitsy and regress: users need to first press back -> hangup when using jitsy

[toger5]

Progress update:

• the design is implemented and looks as planned
• Any new redesign should be done as a shared component in EW
  • Exploring the story approach (DONE)
  • Split WidgetPip component into VM and View (WIP)

[TemoCrevlis]

Could the back button on the PiP window become some version of a maximise button?
To me 'back' doesn't exactly convey it will become large again, more so that it will go to a previous page within the PiP window.

[daniellekirkwood]

@daniellekirkwood Working on this reveals that we collide with jitsi. The current overlays in EW are done inside EW not the widget -> they are also used by jitsy.

With the new design we will drop those -> they will also be gone for jitsy.

The back button is still there (see design in OG post), the hangup button will be gone

Two options

• add both pip versions new/old and use old for jitsy (expensive but ensures we do not regress jitsy)
• only add new option and risk other issues with jitsy and regress: users need to first press back -> hangup when using jitsy

We agree to have this small regression on Jitsi for now -- we think it may be the caes that jitsi does expose some hover handup overlay -- tbc