From 2144ba0d64b8e5bf1a28dfc7df1353ecac879352 Mon Sep 17 00:00:00 2001
From: Varun Patil <radialapps@gmail.com>
Date: Sun, 15 Oct 2023 15:23:57 -0700
Subject: [PATCH] tooling: switch to Volar

Signed-off-by: Varun Patil <radialapps@gmail.com>
---
 .vscode/settings.json                          |  1 -
 README.md                                      |  3 ++-
 src/components/admin/AdminMixin.ts             |  3 ++-
 .../admin/sections/VideoTranscoder.vue         | 18 +++++++++---------
 src/components/top-matter/AlbumTopMatter.vue   |  8 ++++----
 src/components/viewer/Viewer.vue               |  6 +++---
 6 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 7abca2a5..f7e6c177 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -84,7 +84,6 @@
   "[vue]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "vetur.experimental.templateInterpolationService": true,
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
diff --git a/README.md b/README.md
index c0df93c2..fc1f3adf 100644
--- a/README.md
+++ b/README.md
@@ -59,7 +59,8 @@ Memories is a _batteries-included_ photo management solution for Nextcloud with
    - [PHP-CS-Fixer](https://marketplace.visualstudio.com/items?itemName=muuvmuuv.vscode-just-php-cs-fixer): For PHP formatting (alternatively, `make php-cs-fixer`)
    - [Psalm](https://marketplace.visualstudio.com/items?itemName=getpsalm.psalm-vscode-plugin): For PHP static analysis (alternatively, `make psalm`)
    - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode): For autoformatting Vue and Typescript
-   - [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur): For Vue intellisense and static analysis
+   - [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar): For Vue intellisense and static analysis
+   - [Volar Typescript](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin): For Vue Typescript support
 
 ## 🤝 Support the project
 
diff --git a/src/components/admin/AdminMixin.ts b/src/components/admin/AdminMixin.ts
index b3b69a38..eee7cf83 100644
--- a/src/components/admin/AdminMixin.ts
+++ b/src/components/admin/AdminMixin.ts
@@ -20,7 +20,8 @@ export default defineComponent({
 
   props: {
     status: {
-      type: Object as PropType<ISystemStatus>,
+      type: Object as PropType<ISystemStatus | null>,
+      default: null,
       required: false,
     },
     config: {
diff --git a/src/components/admin/sections/VideoTranscoder.vue b/src/components/admin/sections/VideoTranscoder.vue
index 9f51455f..6754d346 100644
--- a/src/components/admin/sections/VideoTranscoder.vue
+++ b/src/components/admin/sections/VideoTranscoder.vue
@@ -16,16 +16,16 @@
         <NcNoteCard :type="binaryStatusType(status.govod)">
           {{ binaryStatus('go-vod', status.govod) }}
         </NcNoteCard>
-      </template>
 
-      <NcCheckboxRadioSwitch
-        :disabled="!enableTranscoding"
-        :checked.sync="config['memories.vod.external']"
-        @update:checked="update('memories.vod.external')"
-        type="switch"
-      >
-        {{ t('memories', 'Enable external transcoder (go-vod {version})', { version: status?.govod_want }) }}
-      </NcCheckboxRadioSwitch>
+        <NcCheckboxRadioSwitch
+          :disabled="!enableTranscoding"
+          :checked.sync="config['memories.vod.external']"
+          @update:checked="update('memories.vod.external')"
+          type="switch"
+        >
+          {{ t('memories', 'Enable external transcoder (go-vod {version})', { version: status.govod_want }) }}
+        </NcCheckboxRadioSwitch>
+      </template>
 
       <NcTextField
         :disabled="!enableTranscoding"
diff --git a/src/components/top-matter/AlbumTopMatter.vue b/src/components/top-matter/AlbumTopMatter.vue
index f818924c..a83e7d61 100644
--- a/src/components/top-matter/AlbumTopMatter.vue
+++ b/src/components/top-matter/AlbumTopMatter.vue
@@ -41,7 +41,7 @@
       <NcActions :inline="isMobile ? 1 : 3">
         <NcActionButton
           :aria-label="t('memories', 'Create new album')"
-          @click="$refs.createModal.open(false)"
+          @click="$refs.createModal?.open(false)"
           close-after-click
           v-if="isAlbumList"
         >
@@ -50,7 +50,7 @@
         </NcActionButton>
         <NcActionButton
           :aria-label="t('memories', 'Share album')"
-          @click="$refs.shareModal.open(false)"
+          @click="$refs.shareModal?.open(false)"
           close-after-click
           v-if="canEditAlbum"
         >
@@ -68,7 +68,7 @@
         </NcActionButton>
         <NcActionButton
           :aria-label="t('memories', 'Edit album details')"
-          @click="$refs.createModal.open(true)"
+          @click="$refs.createModal?.open(true)"
           close-after-click
           v-if="canEditAlbum"
         >
@@ -77,7 +77,7 @@
         </NcActionButton>
         <NcActionButton
           :aria-label="t('memories', 'Remove album')"
-          @click="$refs.deleteModal.open()"
+          @click="$refs.deleteModal?.open()"
           close-after-click
           v-if="!isAlbumList"
         >
diff --git a/src/components/viewer/Viewer.vue b/src/components/viewer/Viewer.vue
index f63e7595..1f93b3ee 100644
--- a/src/components/viewer/Viewer.vue
+++ b/src/components/viewer/Viewer.vue
@@ -7,7 +7,7 @@
     @fullscreenchange="fullscreenChange"
     @keydown="keydown"
   >
-    <ImageEditor v-if="editorOpen" :photo="currentPhoto" @close="editorOpen = false" />
+    <ImageEditor v-if="editorOpen && currentPhoto" :photo="currentPhoto" @close="editorOpen = false" />
 
     <!-- Loading indicator -->
     <XLoadingIcon class="loading-icon centered" v-if="loading" />
@@ -90,7 +90,7 @@
             :aria-label="t('memories', 'Download')"
             @click="downloadCurrent"
             :close-after-click="true"
-            v-if="!this.initState.noDownload && !isLocal"
+            v-if="!initState.noDownload && !isLocal"
           >
             {{ t('memories', 'Download') }}
             <template #icon>
@@ -98,7 +98,7 @@
             </template>
           </NcActionButton>
           <NcActionButton
-            v-if="!this.initState.noDownload && currentPhoto?.liveid"
+            v-if="!initState.noDownload && currentPhoto?.liveid"
             :aria-label="t('memories', 'Download Video')"
             @click="downloadCurrentLiveVideo"
             :close-after-click="true"