feat: add video output support

cmgriffing · cmgriffing · commit f85c8b40797d · 2024-11-24T20:17:50.000-08:00
diff --git a/playgrounds/app/app.config.ts b/playgrounds/app/app.config.ts
@@ -2,4 +2,7 @@ import { defineConfig } from '@solidjs/start/config'
 
 export default defineConfig({
   ssr: false,
+  vite: {
+    optimizeDeps: { exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util'] },
+  },
 })
diff --git a/playgrounds/app/package.json b/playgrounds/app/package.json
@@ -16,6 +16,9 @@
   },
   "dependencies": {
     "@corvu/resizable": "^0.2.3",
+    "@ffmpeg/core": "^0.12.6",
+    "@ffmpeg/ffmpeg": "^0.12.10",
+    "@ffmpeg/util": "^0.12.1",
     "@fontsource/bungee-inline": "^5.1.0",
     "@fontsource/roboto": "^5.1.0",
     "@kobalte/core": "^0.13.7",
@@ -31,6 +34,7 @@
     "diff-match-patch-es": "^0.1.0",
     "dotenv": "^16.4.5",
     "drizzle-orm": "^0.35.3",
+    "idb": "^8.0.0",
     "jsonwebtoken": "^9.0.2",
     "modern-gif": "^2.0.3",
     "nanoid": "^5.0.7",
diff --git a/playgrounds/app/src/components/Editor.tsx b/playgrounds/app/src/components/Editor.tsx
@@ -55,8 +55,20 @@ import { toast } from 'solid-sonner'
 import { Separator } from './ui/separator'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './ui/accordion'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu'
 import { ShikiCodeBlock } from './ShikiCodeBlock'
 import { SetStoreFunction } from 'solid-js/store'
+import { FFmpeg } from '@ffmpeg/ffmpeg'
+import { fetchFile, toBlobURL } from '@ffmpeg/util'
+import coreURL from '@ffmpeg/core?url'
+import wasmURL from '@ffmpeg/core/wasm?url'
+import { openDB } from 'idb'
+import { ProgressCircle } from './ui/progress-circle'
 
 const animationSeconds = 1
 const animationFPS = 30
@@ -109,6 +121,13 @@ export default function Editor(props: EditorProps) {
   const [isSaving, setIsSaving] = createSignal(false)
   const [highlighter, setHighlighter] = createSignal<HighlighterGeneric<any, any> | undefined>()
 
+  const [isShowingFfmpegDialog, setIsShowingFfmpegDialog] = createSignal(false)
+  const [ffmpegLoaded, setFfmpegLoaded] = createSignal(false)
+  const [isDownloadingFfmpeg, setIsDownloadingFfmpeg] = createSignal(false)
+  const [isGeneratingVideo, setIsGeneratingVideo] = createSignal(false)
+  const [videoProgress, setVideoProgress] = createSignal(0)
+  const ffmpeg = new FFmpeg()
+
   createEffect(() => {
     createHighlighter({
       themes: [props.snippetSettings.theme],
@@ -129,6 +148,8 @@ export default function Editor(props: EditorProps) {
       props.snippetSettings.codeLeft !== '' &&
       props.snippetSettings.codeRight !== '' &&
       !isResizing() &&
+      !isShowingGifDialog() &&
+      !isShowingFfmpegDialog() &&
       isLooping()
     ) {
       if (toggled()) {
@@ -957,16 +978,130 @@ export default function Editor(props: EditorProps) {
                   link.click()
                 }}
               >
-                Download
+                Download GIF
               </Button>
+
+              <Show
+                when={ffmpegLoaded()}
+                fallback={
+                  <Button
+                    onClick={() => {
+                      setIsShowingFfmpegDialog(true)
+                    }}
+                  >
+                    Enable Video
+                  </Button>
+                }
+              >
+                <Button
+                  disabled={isGeneratingVideo()}
+                  onClick={async () => {
+                    setIsGeneratingVideo(true)
+                    setVideoProgress(0)
+                    await ffmpeg.writeFile('input.gif', dataURItoUInt8Array(gifDataUrl()))
+                    await ffmpeg.exec(['-i', 'input.gif', 'output.mp4'])
+                    const data = await ffmpeg.readFile('output.mp4')
+                    const blob = new Blob([data], { type: 'video/mp4' })
+                    const filename = 'giffium.mp4'
+                    const link = document.createElement('a')
+                    link.href = URL.createObjectURL(blob)
+                    link.download = filename
+                    link.click()
+                    setIsGeneratingVideo(false)
+                  }}
+                >
+                  <Show when={isGeneratingVideo()} fallback="Download MP4">
+                    <span class="flex flex-row gap-1 items-center justify-center">
+                      <span>Generating...</span>
+                      <ProgressCircle
+                        radius={12}
+                        value={videoProgress()}
+                        strokeWidth={4}
+                        color="green"
+                        class="border-green-500"
+                      />
+                    </span>
+                  </Show>
+                </Button>
+              </Show>
             </Show>
           </DialogFooter>
         </DialogContent>
       </Dialog>
+      <Dialog open={isShowingFfmpegDialog()} onOpenChange={setIsShowingFfmpegDialog} modal>
+        <DialogContent>
+          <Show when={!isDownloadingFfmpeg()} fallback={<p>Downloading...</p>}>
+            <p class="">To create video, must download ffmpeg.wasm. It is approximately 30MB.</p>
+          </Show>
+          <DialogFooter>
+            <Button
+              disabled={isDownloadingFfmpeg()}
+              onClick={() => setIsShowingFfmpegDialog(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              disabled={isDownloadingFfmpeg()}
+              onClick={async () => {
+                setIsDownloadingFfmpeg(true)
+                const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm'
+                ffmpeg.on('log', ({ message }) => {
+                  console.log(message)
+                })
+                ffmpeg.on('progress', ({ progress, time }) => {
+                  setVideoProgress(Math.round(progress * 100))
+                })
+                try {
+                  // toBlobURL is used to bypass CORS issue, urls with the same
+                  // domain can be used directly.
+                  await ffmpeg.load({
+                    coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
+                    wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
+                    // We use the unpkg to reduce bandwidth usage to netlify
+                    // coreURL,
+                    // wasmURL,
+                  })
+                  setFfmpegLoaded(true)
+                } catch (e) {
+                  console.error(e)
+                  setFfmpegLoaded(false)
+                  // TODO: show error
+                }
+                setIsDownloadingFfmpeg(false)
+                setIsShowingFfmpegDialog(false)
+              }}
+            >
+              Download
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </>
   )
 }
 
+function dataURItoUInt8Array(dataURI: string) {
+  // convert base64 to raw binary data held in a string
+  // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
+  var byteString = atob(dataURI.split(',')[1])
+
+  // separate out the mime component
+  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
+
+  // write the bytes of the string to an ArrayBuffer
+  var ab = new ArrayBuffer(byteString.length)
+
+  // create a view into the buffer
+  var ia = new Uint8Array(ab)
+
+  // set the bytes of the buffer to the correct values
+  for (var i = 0; i < byteString.length; i++) {
+    ia[i] = byteString.charCodeAt(i)
+  }
+
+  return ia
+}
+
 function dataURItoBlob(dataURI: string) {
   // convert base64 to raw binary data held in a string
   // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
@@ -1112,3 +1247,13 @@ async function createAnimationFrame(
 
   return ctx.getImageData(0, 0, canvas.width, canvas.height)
 }
+
+// Not actually necessary since the browser will cache the wasm file
+async function wrappedToBlobURL(url: string, mimeType: string) {
+  const storeName = 'ffmpegCache'
+  const db = await openDB(storeName, 1, {})
+
+  return db.get(storeName, url).catch(() => {
+    return toBlobURL(url, mimeType)
+  })
+}
diff --git a/playgrounds/app/src/components/ui/progress-circle.tsx b/playgrounds/app/src/components/ui/progress-circle.tsx
@@ -0,0 +1,94 @@
+import type { Component, ComponentProps } from 'solid-js'
+import { mergeProps, splitProps } from 'solid-js'
+
+import { cn } from '~/lib/utils'
+
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+const sizes: Record<Size, { radius: number; strokeWidth: number }> = {
+  xs: { radius: 15, strokeWidth: 3 },
+  sm: { radius: 19, strokeWidth: 4 },
+  md: { radius: 32, strokeWidth: 6 },
+  lg: { radius: 52, strokeWidth: 8 },
+  xl: { radius: 80, strokeWidth: 10 },
+}
+
+type ProgressCircleProps = ComponentProps<'div'> & {
+  value?: number
+  size?: Size
+  radius?: number
+  strokeWidth?: number
+  showAnimation?: boolean
+}
+
+const ProgressCircle: Component<ProgressCircleProps> = rawProps => {
+  const props = mergeProps({ size: 'md' as Size, showAnimation: true }, rawProps)
+  const [local, others] = splitProps(props, [
+    'class',
+    'children',
+    'value',
+    'size',
+    'radius',
+    'strokeWidth',
+    'showAnimation',
+  ])
+
+  const value = () => getLimitedValue(local.value)
+  const radius = () => local.radius ?? sizes[local.size].radius
+  const strokeWidth = () => local.strokeWidth ?? sizes[local.size].strokeWidth
+  const normalizedRadius = () => radius() - strokeWidth() / 2
+  const circumference = () => normalizedRadius() * 2 * Math.PI
+  const strokeDashoffset = () => (value() / 100) * circumference()
+  const offset = () => circumference() - strokeDashoffset()
+
+  return (
+    <div class={cn('flex flex-col items-center justify-center', local.class)} {...others}>
+      <svg
+        width={radius() * 2}
+        height={radius() * 2}
+        viewBox={`0 0 ${radius() * 2} ${radius() * 2}`}
+        class="-rotate-90"
+      >
+        <circle
+          r={normalizedRadius()}
+          cx={radius()}
+          cy={radius()}
+          stroke-width={strokeWidth()}
+          fill="transparent"
+          stroke=""
+          stroke-linecap="round"
+          class={cn('stroke-secondary transition-colors ease-linear')}
+        />
+        {value() >= 0 ? (
+          <circle
+            r={normalizedRadius()}
+            cx={radius()}
+            cy={radius()}
+            stroke-width={strokeWidth()}
+            stroke-dasharray={circumference() + ' ' + circumference()}
+            stroke-dashoffset={offset()}
+            fill="transparent"
+            stroke=""
+            stroke-linecap="round"
+            class={cn(
+              'stroke-green-500 transition-colors ease-linear',
+              local.showAnimation ? 'transition-all duration-300 ease-in-out' : '',
+            )}
+          />
+        ) : null}
+      </svg>
+      <div class={cn('absolute flex')}>{local.children}</div>
+    </div>
+  )
+}
+
+function getLimitedValue(input: number | undefined) {
+  if (input === undefined) {
+    return 0
+  } else if (input > 100) {
+    return 100
+  }
+  return input
+}
+
+export { ProgressCircle }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
