Fix open link in export and UI state (#505)

Author: ameer2468

apps/desktop/src-tauri/src/lib.rs

@@ -1016,7 +1016,9 @@ async fn create_editor_instance(window: Window) -> Result<SerializedEditorInstan
 #[tauri::command]
 #[specta::specta]
 async fn get_editor_meta(editor: WindowEditorInstance) -> Result<RecordingMeta, String> {
-    Ok(editor.meta().clone())
+    // Always reload the latest meta from disk using the project path
+    let path = editor.project_path.clone();
+    RecordingMeta::load_for_project(&path).map_err(|e| e.to_string())
 }
 
 #[tauri::command]

apps/desktop/src/routes/editor/Editor.tsx

@@ -1,7 +1,6 @@
 import { Button } from "@cap/ui-solid";
 import { trackDeep } from "@solid-primitives/deep";
 import { throttle } from "@solid-primitives/scheduled";
-import { useSearchParams } from "@solidjs/router";
 import { createMutation } from "@tanstack/solid-query";
 import { convertFileSrc } from "@tauri-apps/api/core";
 import {
@@ -13,7 +12,6 @@ import {
   createSignal,
   on,
   onMount,
-  untrack,
 } from "solid-js";
 import { createStore } from "solid-js/store";
 
@@ -55,7 +53,7 @@ export function Editor() {
 
           return {
             editorInstance,
-            meta: ctx.metaQuery.data,
+            meta: () => ctx.metaQuery.data,
             refetchMeta: async () => {
               await ctx.metaQuery.refetch();
             },

apps/desktop/src/routes/editor/ExportDialog.tsx

@@ -5,6 +5,7 @@ import {
   createMutation,
   createQuery,
   keepPreviousData,
+  useQueryClient,
 } from "@tanstack/solid-query";
 import { save as saveDialog } from "@tauri-apps/plugin-dialog";
 import { cx } from "cva";
@@ -26,6 +27,7 @@ import toast from "solid-toast";
 import Tooltip from "~/components/Tooltip";
 import { authStore } from "~/store";
 import { trackEvent } from "~/utils/analytics";
+import { exportVideo } from "~/utils/export";
 import {
   commands,
   events,
@@ -42,7 +44,6 @@ import {
   PopperContent,
   topSlideAnimateClasses,
 } from "./ui";
-import { exportVideo } from "~/utils/export";
 
 export const COMPRESSION_OPTIONS: Array<{
   label: string;
@@ -96,6 +97,8 @@ export function ExportDialog() {
     refetchMeta,
   } = useEditorContext();
 
+  const queryClient = useQueryClient();
+
   const [settings, setSettings] = makePersisted(
     createStore({
       format: "mp4" as "mp4" | "gif",
@@ -196,7 +199,7 @@ export function ExportDialog() {
 
       const savePath = await saveDialog({
         filters: [{ name: "mp4 filter", extensions: ["mp4"] }],
-        defaultPath: `~/Desktop/${meta.prettyName}.mp4`,
+        defaultPath: `~/Desktop/${meta()?.prettyName}.mp4`,
       });
       if (!savePath) {
         setExportState(reconcile({ type: "idle" }));
@@ -297,7 +300,7 @@ export function ExportDialog() {
         setExportState({ type: "uploading", progress: 0 });
 
         // Now proceed with upload
-        const result = meta.sharing
+        const result = meta()?.sharing
           ? await commands.uploadExportedVideo(projectPath, "Reupload")
           : await commands.uploadExportedVideo(projectPath, {
               Initial: { pre_created_video: null },
@@ -794,7 +797,7 @@ export function ExportDialog() {
                 >
                   <div class="relative">
                     <a
-                      href={meta.sharing?.link}
+                      href={meta()?.sharing?.link}
                       target="_blank"
                       rel="noreferrer"
                       class="block"
@@ -805,7 +808,7 @@ export function ExportDialog() {
                           setTimeout(() => {
                             setCopyPressed(false);
                           }, 2000);
-                          navigator.clipboard.writeText(meta.sharing?.link!);
+                          navigator.clipboard.writeText(meta()?.sharing?.link!);
                         }}
                         variant="lightdark"
                         class="flex gap-2 justify-center items-center"

apps/desktop/src/routes/editor/ShareButton.tsx

@@ -1,16 +1,16 @@
 import { Button } from "@cap/ui-solid";
 import { createMutation } from "@tanstack/solid-query";
-import { createEffect, createResource, createSignal, Show } from "solid-js";
+import { createSignal, Show } from "solid-js";
 import { createStore, produce, reconcile } from "solid-js/store";
 
 import Tooltip from "~/components/Tooltip";
 import { createProgressBar } from "~/routes/editor/utils";
 import { authStore } from "~/store";
+import { exportVideo } from "~/utils/export";
 import { commands, events } from "~/utils/tauri";
 import { useEditorContext } from "./context";
 import { RESOLUTION_OPTIONS } from "./Header";
 import { Dialog, DialogContent } from "./ui";
-import { exportVideo } from "~/utils/export";
 
 function ShareButton() {
   const { editorInstance, meta } = useEditorContext();
@@ -86,7 +86,7 @@ function ShareButton() {
         setUploadState({ type: "uploading", progress: 0 });
 
         // Now proceed with upload
-        const result = meta?.sharing
+        const result = meta()?.sharing
           ? await commands.uploadExportedVideo(projectPath, "Reupload")
           : await commands.uploadExportedVideo(projectPath, {
               Initial: { pre_created_video: null },
@@ -136,7 +136,7 @@ function ShareButton() {
 
   return (
     <div class="relative">
-      <Show when={meta?.sharing}>
+      <Show when={meta()?.sharing}>
         {(sharing) => {
           const url = () => new URL(sharing().link);
 

apps/desktop/src/routes/editor/context.ts

@@ -54,7 +54,7 @@ export type RenderState =
 
 export const [EditorContextProvider, useEditorContext] = createContextProvider(
   (props: {
-    meta: TransformedMeta;
+    meta: () => TransformedMeta | undefined;
     editorInstance: SerializedEditorInstance;
     refetchMeta(): Promise<void>;
   }) => {
@@ -108,21 +108,6 @@ export const [EditorContextProvider, useEditorContext] = createContextProvider(
         : undefined
     );
 
-    // This is used in ShareButton.tsx to notify the component that the metadata has changed, from ExportDialog.tsx
-    // When a video is uploaded, the metadata is updated
-
-    const [lastMetaUpdate, setLastMetaUpdate] = createSignal<{
-      videoId: string;
-      timestamp: number;
-    } | null>(null);
-
-    const metaUpdateStore = {
-      notifyUpdate: (videoId: string) => {
-        setLastMetaUpdate({ videoId, timestamp: Date.now() });
-      },
-      getLastUpdate: lastMetaUpdate,
-    };
-
     createEffect(
       on(
         () => editorState.playing,
@@ -221,9 +206,6 @@ export const [EditorContextProvider, useEditorContext] = createContextProvider(
       setDialog,
       project,
       setProject,
-      metaUpdateStore,
-      lastMetaUpdate,
-      setLastMetaUpdate,
       projectHistory: createStoreHistory(project, setProject),
       editorState,
       setEditorState,
@@ -312,6 +294,8 @@ export const [EditorInstanceContextProvider, useEditorInstanceContext] =
       queryFn: editorInstance()
         ? () => commands.getEditorMeta().then(transformMeta)
         : skipToken,
+      cacheTime: 0,
+      staleTime: 0,
     }));
 
     return {

packages/ui/src/components/input/Input.tsx

@@ -14,8 +14,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           "flex px-4 w-full text-sm font-thin transition-all duration-200 text-gray-12 bg-gray-1 border-gray-4 outline-0 focus:bg-gray-3",
           "rounded-xl hover:bg-gray-2 hover:border-gray-5 h-[48px] placeholder:text-gray-8 py-[14px] border-[1px] focus:border-gray-5",
           "file:border-0 file:bg-transparent file:text-sm file:font-medium",
-          "disabled:cursor-not-allowed disabled:bg-gray-2 disabled:bg-gray-2 disabled:text-gray-9 placeholder:transition-all",
-          "ring-0 ring-gray-2 focus:ring-1 focus:ring-gray-12 focus:ring-offset-2 ring-offset-gray-1 placeholder:text-gray-12 placeholder:duration-200",
+          "disabled:cursor-not-allowed disabled:bg-gray-2 disabled:text-gray-9 placeholder:transition-all",
+          "ring-0 ring-gray-2 focus:ring-1 focus:ring-gray-12 focus:ring-offset-2 ring-offset-gray-1 hover:placeholder:text-gray-12 placeholder:duration-200",
           className
         )}
         ref={ref}