diff options
author | Grigorii K. Shartsev <me@shgk.me> | 2023-05-23 15:08:29 +0000 |
---|---|---|
committer | backportbot-nextcloud[bot] <backportbot-nextcloud[bot]@users.noreply.github.com> | 2023-05-24 15:21:08 +0000 |
commit | a13c84f2f8e826ea4fa320414587a05dcfd32564 (patch) | |
tree | 49576115fb5778d2e6468efc01bef8a8ef012a23 /src/components/CallView | |
parent | fff00d66230ca1ae1585f4b5905810a998bca6b1 (diff) |
fix(ViewerOverlay): fullscreen mode support
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
Diffstat (limited to 'src/components/CallView')
-rw-r--r-- | src/components/CallView/shared/ViewerOverlayCallView.vue | 15 |
1 files changed, 14 insertions, 1 deletions
diff --git a/src/components/CallView/shared/ViewerOverlayCallView.vue b/src/components/CallView/shared/ViewerOverlayCallView.vue index 110c658d1..6e2501abd 100644 --- a/src/components/CallView/shared/ViewerOverlayCallView.vue +++ b/src/components/CallView/shared/ViewerOverlayCallView.vue @@ -19,7 +19,16 @@ <template> <div ref="ghost" class="viewer-overlay-ghost"> - <Portal> + <!-- + Viewer Overlay should be teleported to be to the top of DOM to be on top of the Viewer, + because by default Viewer is on top of an entire Talk (#content-vue). + In the fullscreen mode Viewer is manually moved to #content-vue which is top layer by Fullscreen API. + FIXME: this is not correct to use Portal/Teleport to move something inside the Vue app. + Alternative solutions could be: + - Use full version of the Portal library (doesn't solve the same problem with Viewer) + - Use a new child of #content-vue as Talk Vue app + --> + <Portal :selector="isFullscreen ? '#content-vue' : 'body'"> <!-- Add .app-talk to use Talk icon classes outside of #content-vue --> <div class="viewer-overlay app-talk" :style="{ @@ -182,6 +191,10 @@ export default { conversation() { return this.$store.getters.conversation(this.token) }, + + isFullscreen() { + return this.$store.getters.isFullscreen() + }, }, mounted() { |