feat: display compatibility hint

herteleo · Nov 2, 2022 · 261be53 · 261be53
1 parent 1464ae0
commit 261be53
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/features/useDir.ts b/src/features/useDir.ts
@@ -29,10 +29,14 @@ export interface CurrentDirEntryFile extends CurrentDirEntryBase {
   mime: string;
 }
 
+export const isFileSystemApiAvailable = ref('showDirectoryPicker' in window);
+
 const rootDir = ref<FileSystemDirectoryHandle>();
 export const currentDir = ref<FileSystemDirectoryHandle>();
 
 export const setRootDir = async () => {
+  if (!isFileSystemApiAvailable.value) return;
+
   rootDir.value = await window.showDirectoryPicker();
   currentDir.value = rootDir.value;
 };

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import useDir, { setRootDir } from '@/features/useDir';
+import useDir, { setRootDir, isFileSystemApiAvailable } from '@/features/useDir';
 import { displayName, version } from '@/../package.json';
 
 useDir();
@@ -13,6 +13,9 @@ useDir();
           <app-icon class="mx-auto opacity-60" name="Folder" size="128" />
           <div class="text-xl capitalize">Click to browse your local files in the browser</div>
           <div class="opacity-30">Because why not. Your local files stay private.</div>
+          <div v-if="!isFileSystemApiAvailable" class="pt-2 text-sm text-amber-600">
+            Sadly your browser is not supported.<br />Try the latest Chrome Browser.
+          </div>
         </div>
       </button>
       <div class="text-sm opacity-20">