a reward for the most friendly users

package-lock.json

@@ -45,6 +45,7 @@
         "next-themes": "^0.2.1",
         "postcss": "8.4.38",
         "qs": "^6.12.1",
+        "query-string": "^9.0.0",
         "react": "18.3.1",
         "react-device-frameset": "^1.3.4",
         "react-dom": "18.3.1",
@@ -3621,6 +3622,14 @@
         }
       }
     },
+    "node_modules/decode-uri-component": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
+      "integrity": "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==",
+      "engines": {
+        "node": ">=14.16"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -4411,6 +4420,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/filter-obj": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz",
+      "integrity": "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -6290,6 +6310,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/query-string": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-9.0.0.tgz",
+      "integrity": "sha512-4EWwcRGsO2H+yzq6ddHcVqkCQ2EFUSfDMEjF8ryp8ReymyZhIuaFRGLomeOQLkrzacMHoyky2HW0Qe30UbzkKw==",
+      "dependencies": {
+        "decode-uri-component": "^0.4.1",
+        "filter-obj": "^5.1.0",
+        "split-on-first": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -6844,6 +6880,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/split-on-first": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-3.0.0.tgz",
+      "integrity": "sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/streamsearch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",

package.json

@@ -46,6 +46,7 @@
     "next-themes": "^0.2.1",
     "postcss": "8.4.38",
     "qs": "^6.12.1",
+    "query-string": "^9.0.0",
     "react": "18.3.1",
     "react-device-frameset": "^1.3.4",
     "react-dom": "18.3.1",

src/app/main.tsx

@@ -26,6 +26,7 @@ import { Input } from '@/components/ui/input'
 import { Field } from '@/components/form/field'
 import { Label } from '@/components/form/label'
 import { VideoOrientation } from './types'
+import { getParam } from '@/lib/utils/getParam'
 
 export function Main() {
   const [_isPending, startTransition] = useTransition()
@@ -59,6 +60,8 @@ export function Main() {
   const saveClap = useStore(s => s.saveClap)
   const loadClap = useStore(s => s.loadClap)
 
+  const canSeeBetaFeatures = getParam<boolean>("beta", false)
+
   const hasPendingTasks =
     storyGenerationStatus === "generating" ||
     voiceGenerationStatus === "generating" ||
@@ -390,7 +393,7 @@ export function Main() {
                       </Button>
                     */}
 
-                    {/*
+                    {canSeeBetaFeatures ?
                     <Button
                       onClick={() => saveClap()}
                       disabled={!currentClap || isBusy}
@@ -403,12 +406,10 @@ export function Main() {
                         storyPromptDraft ? "opacity-100" : "opacity-80"
                       )}
                     >
-                     <span className="mr-1">Save preset</span>
-                    </Button>
-                    */}
-                    <div></div>
+                     <span className="mr-1">Save project</span>
+                    </Button> : <div></div>
+                    }
   
-
                     <div className=" 
                     flex flex-row
                     justify-between items-center

src/lib/utils/getParam.ts

@@ -0,0 +1,19 @@
+import queryString from 'query-string'
+
+export function getParam<T>(name: string, defaultValue: T): T {
+  try {
+    const params = queryString.parseUrl(
+      typeof window !== "undefined" ? (window.location.href || "") : ""
+    )
+    const stringValue = params.query[name]?.toString() || `${defaultValue || ""}`
+    if (typeof defaultValue === "number") {
+      return Number(stringValue) as T
+    } else if (typeof defaultValue === "boolean") {
+      return Boolean(stringValue) as T
+    } else {
+      return stringValue as T
+    }
+  } catch (err) {
+    return defaultValue
+  }
+}