bring ffmpeg back

package.json

@@ -14,6 +14,7 @@
   "license": "MIT",
   "devDependencies": {
     "@iconify-json/mdi": "^1.1.66",
+    "@types/canvas-confetti": "^1.6.4",
     "solid-devtools": "^0.29.3",
     "typescript": "^5.4.5",
     "unocss": "^0.59.2",
@@ -23,14 +24,16 @@
   "dependencies": {
     "@ffmpeg/ffmpeg": "^0.12.10",
     "@ffmpeg/util": "^0.12.1",
+    "canvas-confetti": "^1.9.2",
     "modern-gif": "^2.0.3",
+    "mp4box": "^0.5.2",
     "sass": "^1.75.0",
     "solid-js": "^1.8.16",
     "yon-utils": "^0.1.20"
   },
   "pnpm": {
-    "patchedDependencies111": {
-      "NOTE": "will make cached frames un-reusable",
+    "patchedDependencies": {
+      "@ffmpeg/[email protected]": "patches/@[email protected]",
       "[email protected]": "patches/[email protected]"
     }
   }

patches/@ffmpeg__ffmpeg@0.12.10.patch

@@ -0,0 +1,14 @@
+diff --git a/package.json b/package.json
+index 8dbc8c0debb38f7031d03aadca1ce6429d51e207..65e5958d19311a998b0978578e9eaf28eb390718 100644
+--- a/package.json
++++ b/package.json
+@@ -12,6 +12,9 @@
+         "import": "./dist/esm/index.js",
+         "require": "./dist/umd/ffmpeg.js"
+       }
++    },
++    "./worker": {
++      "import": "./dist/esm/worker.js"
+     }
+   },
+   "scripts": {

src/App.tsx

@@ -1,5 +1,5 @@
 import { Show, createEffect, createMemo, createRoot, type Component } from 'solid-js';
-import { store } from './store';
+import { store, updateStore } from './store';
 import { FileSelector } from './components/FileSelector';
 import { OptionEditor } from './components/OptionEditor';
 import { ProcessingBar } from './components/Processing';
@@ -25,13 +25,17 @@ const App: Component = () => {
         <div class='flex gap-4 mx-auto max-w-7xl flex-col lg:flex-row'>
           <div class="flex-1">
             <OptionEditor />
+
+            <a
+              href="#" class='mt-2 block text-slate-8 text-center hover:text-blue'
+              onClick={() => updateStore({ file: null, fileInfo: { ...store.fileInfo, url: '' } })}
+            >Choose another file...</a>
           </div>
           <div class="flex-1">
             <ProcessingBar />
             {out()}
           </div>
         </div>
-
       </Show>
 
       <footer class="text-center my-20">

src/components/FileSelector.tsx

@@ -36,6 +36,7 @@ export const FileSelector: Component = () => {
       <div class='font-500 text-center'>
         Choose Video ...
         <div class='text-4 op-60'> or drop your file here</div>
+        <div class='mt-4 text-4 mb--8 op-30'> file will NOT be uploaded</div>
       </div>
     </div>
   );

src/components/OptionEditor.tsx

@@ -1,5 +1,5 @@
 import { createComputed, createMemo, createSignal } from "solid-js";
-import { outputSize, store, updateStore } from "../store";
+import { outputSize, outputTimeRange, store, updateStore } from "../store";
 import { startMouseMove } from 'yon-utils'
 
 export function OptionEditor() {
@@ -91,7 +91,6 @@ export function OptionEditor() {
         break;
     }
   }
-  const computedDuration = createMemo(() => ((store.options.end - store.options.start) / store.options.speed));
 
   function OptionGroupHeader(props: { children: any }) {
     return <h3 class="font-normal p-2 px-4 rounded leading-none text-cyan-1 mt-12">{props.children}</h3>
@@ -151,7 +150,7 @@ export function OptionEditor() {
 
         <div>
           <OptionLabel>Duration</OptionLabel>
-          ≈ {computedDuration().toFixed(2)}s ({(computedDuration() * store.options.framerate).toFixed(0)} frames)
+          ≈ {outputTimeRange().duration.toFixed(2)}s ({outputTimeRange().frameCount} frames)
         </div>
 
         <OptionGroupHeader>

src/components/OutputDisplay.tsx

@@ -1,21 +1,37 @@
 import { Show } from "solid-js";
 import { store } from "../store";
+import confetti from 'canvas-confetti';
 
 function readableFileSize(size: number) {
   const units = ['B', 'KB', 'MB', 'GB', 'TB'];
   const unitIndex = Math.floor(Math.log(size) / Math.log(1024));
   return (size / Math.pow(1024, unitIndex)).toFixed(2) + ' ' + units[unitIndex];
 }
 
+function playConfetti(el: HTMLElement) {
+  const rect = el.getBoundingClientRect();
+  const x = (rect.left + rect.width / 2) / window.innerWidth;
+  const y = (rect.top + rect.height / 2) / window.innerHeight;
+  confetti({
+    particleCount: 100,
+    spread: 70,
+    ticks: 60,
+    origin: { x, y },
+  })
+}
+
 export function OutputDisplay() {
   return <Show when={store.outputFileURL}>
-    <section class="bg-slate-2 rounded-xl p-4 mt-4 animate-zoom-in animate-duration-300 animate-ease-out">
+    <section
+      class="bg-slate-2 rounded-xl p-4 mt-4 animate-zoom-in animate-duration-300 animate-ease-out"
+      ref={e => setTimeout(() => playConfetti(e!), 50)}
+    >
       <h2>Output</h2>
       <p>File size: {readableFileSize(store.outputFileContent?.length || 0)}</p>
       <p>
         <a
           class="decoration-none text-blue-500 hover:underline"
-          download={store.file!.name + ".gif"} href={store.outputFileURL}
+          download={store.file?.name + ".gif"} href={store.outputFileURL}
         >
           <i class="i-mdi-download mr-1"></i>
           Download GIF