diff options
| -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() { |