whattheduck: Fix toolbar disappearing after exiting camera preview

Author: bperel

apps/whattheduck/src/components/CameraPreviewOverlay.vue

@@ -28,12 +28,7 @@
       <ion-button ref="takePhotoButton" size="large" :disabled="isSearching" @click="takePhoto()">
         <ion-icon :ios="apertureOutline" :md="apertureSharp" />
       </ion-button>
-      <ion-button
-        size="large"
-        color="danger"
-        :disabled="isSearching"
-        @click="CameraPreview.stop().finally(() => (isCameraPreviewShown = false))"
-      >
+      <ion-button size="large" color="danger" :disabled="isSearching" @click="closeCamera">
         <ion-icon :ios="closeOutline" :md="closeSharp" />
       </ion-button>
       <div
@@ -106,6 +101,12 @@ const { coverId: coverIdEvents, storySearch: storySearchEvents } = inject(dmSock
 const { takePhoto, isSearching } = useCoverSearch(useRouter(), coverIdEvents, storySearchEvents);
 const { isCameraPreviewShown } = storeToRefs(app());
 
+const closeCamera = () => {
+  CameraPreview.stop().finally(() => {
+    isCameraPreviewShown.value = false;
+  });
+};
+
 onIonViewWillLeave(() => {
   isCameraPreviewShown.value = false;
 });

apps/whattheduck/src/components/Collection.vue

@@ -4,7 +4,7 @@
       <CopyListButton />
       <ViewModesButton v-if="!isIOS" />
     </ion-buttons>
-    <ion-header :translucent="true" :class="{ hidden: isCameraPreviewShown }">
+    <ion-header :key="headerKey" :translucent="true" :class="{ hidden: isCameraPreviewShown }">
       <ion-toolbar>
         <ion-buttons slot="start">
           <ion-menu-button color="primary" />
@@ -88,6 +88,15 @@ watch(componentName, () => {
   filterText.value = '';
 });
 
+// Force header re-render when camera preview is closed
+const headerKey = ref(0);
+watch(isCameraPreviewShown, async (shown, wasShown) => {
+  if (wasShown && !shown) {
+    await nextTick();
+    headerKey.value++;
+  }
+});
+
 const showOfflineToast = async () => {
   const toast = await toastController.create({
     message: t(

apps/whattheduck/src/views/CoverSearchResults.vue

@@ -1,6 +1,6 @@
 <template>
   <ion-page>
-    <ion-header :translucent="true">
+    <ion-header :key="headerKey" :translucent="true">
       <ion-toolbar>
         <ion-buttons slot="start">
           <ion-menu-button color="primary" />
@@ -81,6 +81,14 @@ const { issuecodeDetails, publicationNames, issuePopularities, issueQuotations }
 const { fetchPublicationNames, fetchIssuecodeDetails, fetchIssuePopularities, fetchIssueQuotations } = webStores.coa();
 const { currentNavigationItem, isCameraPreviewShown } = storeToRefs(app());
 
+const headerKey = ref(0);
+watch(isCameraPreviewShown, async (shown, wasShown) => {
+  if (wasShown && !shown) {
+    await nextTick();
+    headerKey.value++;
+  }
+});
+
 const { IssueQuotation } = webComponents;
 
 const cover = shallowRef<(typeof covers)['value'][0]>();