Fix Fullscreen mode support in ViewerOverlay

[ShGKme]

☑️ Resolves

• Fix Viewer overlay doesn't support full screen mode #9444

🖼️ Screenshots

🏚️ Before	🏡 After

🚧 Tasks

In the Fullscreen mode, Talk Vue app (#content-vue) is a top layer element. It is not possible to display any other elements outside the Talk app on top of the top layer using CSS.

Both Viewer and ViewerOverlayCallView are rendered outside the Talk app and had this problem. With Viewer it is solved now by a fixme hack with manual moving a DOM element with Viewer to the Talk app.

This PR fixes this problem in a similar way, in a fullscreen mode Teleport is used to move the ViewerOverlay not to the body, but to the Talk app (#content-vue).

A do not like this solution. Formally this is not correct to use Portal/Teleport to move something inside the Vue app. It should only be used to teleport something outside the app and Vue app content should never be mutated directly without Vue and its Virtual DOM.

Alternative solutions could be:

1. Use the full version of the Portal library
   • Requires adding a heavy library
   • Doesn't solve the same problem with Viewer anyway
2. Create and use a new child of #content-vue as Talk Vue app, so its parent could be in the Fullscreen allowing to render new elements there
   • Changes the Talk app layout by making #content-vue not a vue app or changes the Talk app server-side template. I'm afraid, it could break many things. I'd consider doing something like these in techdept later.

So I haven't found any better solution :(

🏁 Checklist

• ⛑️ Tests (unit and/or integration) are included or not required
• 📘 API documentation in docs/ has been updated or is not required
• 📗 User documentation in https://github.com/nextcloud/documentation/tree/master/user_manual/talk has been updated or is not required
• 🔖 Capability is added or not needed

[ShGKme]

/backport to stable27

[ShGKme]

Tested in a call with and without participants in normal and Fullscreen modes

[nickvergessen]

Work when:

1. Fullscreen
2. Join call
3. Open viewer

Does not work when:

1. Join call
2. Open viewer
3. Fullscreen

[ShGKme]

Does not work when:

1. Join call
2. Open viewer
3. Fullscreen

Yes. But this is not related to the viewer overlay. It didn't work even without overlay, because the viewer is moved only once on opening.

Do you prefer to fix this problem in this PR together with the overlay bug?

[ShGKme]

Hmm, Portal also doesn't react to the target selector update. So a little bit related.

[ShGKme]

A new commit adds support to the fullscreen mode toggle after overlay opening.

But it still requires a fix for the same issue with the viewer.