sliftutils 0.19.0 → 0.21.0

package/index.d.ts

@@ -570,6 +570,7 @@ declare module "sliftutils/storage/FileFolderAPI" {
             }
         ]>;
     };
+    export declare function setFileAPIKey(key: string): void;
     export declare const getDirectoryHandle: {
         (): Promise<DirectoryWrapper>;
         reset(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sliftutils",
-    "version": "0.19.0",
+    "version": "0.21.0",
     "main": "index.js",
     "license": "MIT",
     "files": [

package/render-utils/InputLabel.tsx

@@ -200,7 +200,7 @@ export class InputLabel extends preact.Component<InputLabelProps> {
         }
         return (
             <label onClick={onClick} className={
-                css.hbox(0).relative
+                css.hbox(5).relative
                 + " trigger-hover "
                 + props.outerClass
                 + (props.flavor === "large" && css.fontSize(18, "soft"))

package/storage/FileFolderAPI.d.ts

@@ -40,6 +40,7 @@ type DirectoryWrapper = {
         }
     ]>;
 };
+export declare function setFileAPIKey(key: string): void;
 export declare const getDirectoryHandle: {
     (): Promise<DirectoryWrapper>;
     reset(): void;

package/storage/FileFolderAPI.tsx

@@ -46,7 +46,14 @@ let displayData = observable({
     ui: undefined as undefined | preact.ComponentChildren,
 }, undefined, { deep: false });
 
-const storageKey = "syncFileSystemCamera3";
+let fileAPIKey = "";
+function getFileAPIKey() {
+    if (!fileAPIKey) throw new Error("Must call setFileAPIKey before using file system. Just pass any key. This prevents reusing the file system api that other development apps might be using.");
+    return fileAPIKey;
+}
+export function setFileAPIKey(key: string) {
+    fileAPIKey = key;
+}
 
 @observer
 class DirectoryPrompter extends preact.Component {
@@ -206,7 +213,7 @@ export const getDirectoryHandle = lazy(async function getDirectoryHandle(): Prom
 
         let handle: DirectoryWrapper | undefined;
 
-        let storedId = localStorage.getItem(storageKey);
+        const storedId = localStorage.getItem(getFileAPIKey());
         if (storedId) {
             let doneLoad = false;
             setTimeout(() => {
@@ -216,7 +223,45 @@ export const getDirectoryHandle = lazy(async function getDirectoryHandle(): Prom
             }, 500);
             try {
                 handle = await tryToLoadPointer(storedId);
-            } catch { }
+            } catch (e) {
+                console.error(e);
+                // Check if the error is due to user activation being required
+                const errorMessage = e instanceof Error ? e.message : String(e);
+                if (errorMessage.includes("user activation") || errorMessage.includes("User activation")) {
+                    doneLoad = true;
+                    // Show UI to get user to click and retry
+                    let retryCallback: (success: boolean) => void;
+                    let retryPromise = new Promise<boolean>(resolve => {
+                        retryCallback = resolve;
+                    });
+                    displayData.ui = (
+                        <button
+                            className={css.fontSize(40).pad2(80, 40)}
+                            onClick={async () => {
+                                displayData.ui = "Loading...";
+                                try {
+                                    const retryHandle = await tryToLoadPointer(storedId);
+                                    if (retryHandle) {
+                                        handle = retryHandle;
+                                        retryCallback(true);
+                                    } else {
+                                        retryCallback(false);
+                                    }
+                                } catch (retryError) {
+                                    console.error("Retry failed:", retryError);
+                                    retryCallback(false);
+                                }
+                            }}
+                        >
+                            Click to restore file system access
+                        </button>
+                    );
+                    const success = await retryPromise;
+                    if (handle) {
+                        return handle;
+                    }
+                }
+            }
             doneLoad = true;
             if (handle) {
                 return handle;
@@ -234,7 +279,7 @@ export const getDirectoryHandle = lazy(async function getDirectoryHandle(): Prom
                     const handle = await window.showDirectoryPicker();
                     await handle.requestPermission({ mode: "readwrite" });
                     let storedId = await storeFileSystemPointer({ mode: "readwrite", handle });
-                    localStorage.setItem(storageKey, storedId);
+                    localStorage.setItem(getFileAPIKey(), storedId);
                     fileCallback(handle as any);
                 }}
             >
@@ -265,7 +310,7 @@ export const getFileStorage = lazy(async function getFileStorage(): Promise<File
     return wrapHandle(handle);
 });
 export function resetStorageLocation() {
-    localStorage.removeItem(storageKey);
+    localStorage.removeItem(getFileAPIKey());
     window.location.reload();
 }