From 5eb311e9a409105f19a72786c1974bd09dbe196e Mon Sep 17 00:00:00 2001
From: Jo Van Bulck <jo.vanbulck@cs.kuleuven.be>
Date: Thu, 28 Nov 2024 15:33:12 -0800
Subject: [PATCH] photosphere: hide close button when pane is open

---
 src/components/viewer/PhotoSphere.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/viewer/PhotoSphere.vue b/src/components/viewer/PhotoSphere.vue
index 95506e49..25585cf6 100644
--- a/src/components/viewer/PhotoSphere.vue
+++ b/src/components/viewer/PhotoSphere.vue
@@ -1,6 +1,7 @@
 <template>
   <div id="viewer" class="viewer__photosphere top-left fill-block">
     <NcButton
+      v-if="!hideCloseButton"
       id="close-photosphere-viewer"
       :ariaLabel="t('memories', 'Close')"
       :title="t('memories', 'Close')"
@@ -24,6 +25,7 @@ import CloseThickIcon from 'vue-material-design-icons/CloseThick.vue';
 
 import { Viewer } from '@photo-sphere-viewer/core';
 import { AutorotatePlugin } from '@photo-sphere-viewer/autorotate-plugin';
+import { events } from '@photo-sphere-viewer/core';
 import '@photo-sphere-viewer/core/index.css';
 
 export default defineComponent({
@@ -45,6 +47,7 @@ export default defineComponent({
 
   data: () => ({
     viewer: null as Viewer | null,
+    hideCloseButton: false,
   }),
 
   async mounted() {
@@ -68,6 +71,15 @@ export default defineComponent({
       ],
     });
 
+    // Hide the close button when the PhotoSphere panel is open
+    this.viewer.addEventListener('show-panel', ({ panelId: string }) => {
+      this.hideCloseButton = true;
+    });
+
+    this.viewer.addEventListener('hide-panel', ({ panelId: string }) => {
+      this.hideCloseButton = false;
+    });
+
     // Handle keyboard
     window.addEventListener('keydown', this.handleKeydown, true);
   },
@@ -95,7 +107,6 @@ export default defineComponent({
     },
 
     close() {
-      this.viewer?.destroy();
       window.removeEventListener('keydown', this.handleKeydown, true);
       this.$emit('close');
     },
@@ -130,8 +141,6 @@ export default defineComponent({
     right: 0;
     top: 0;
     z-index: 9999;
-    //background-color: transparent;
-    margin-right: 10px;
   }
 }
 </style>