Upgrade deps and use util in Playground

apps/website/package.json

@@ -16,8 +16,8 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "2.1.0",
+    "@docusaurus/core": "^2.2.0",
-    "@docusaurus/preset-classic": "2.1.0",
+    "@docusaurus/preset-classic": "^2.2.0",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@ffmpeg/ffmpeg": "^0.12.0-alpha.0",
@@ -33,7 +33,7 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.1.0",
+    "@docusaurus/module-type-aliases": "^2.2.0",
     "@tsconfig/docusaurus": "^1.0.5",
     "@types/ace": "^0.0.48",
     "docusaurus-plugin-typedoc": "^0.17.5",

apps/website/src/components/Playground/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
 import { FFmpeg } from "@ffmpeg/ffmpeg";
+import { toBlobURL } from "@ffmpeg/util";
 import Stack from "@mui/material/Stack";
 import MuiThemeProvider from "@site/src/components/common/MuiThemeProvider";
 import CoreDownloader from "./CoreDownloader";
@@ -21,15 +22,38 @@ export default function Playground() {
   const ffmpeg = useRef(new FFmpeg());
 
   const load = async (mt: boolean = false) => {
-    setState(State.LOADING);
+    const setProgress = ({ url: _url, received: _received }) => {
-    ffmpeg.current.terminate();
-    ffmpeg.current.on(FFmpeg.DOWNLOAD, ({ url: _url, received: _received }) => {
       setURL(_url as string);
       setReceived(_received);
-    });
+    };
+    const coreURL = await toBlobURL(
+      mt ? CORE_MT_URL : CORE_URL,
+      "text/javascript",
+      true,
+      setProgress
+    );
+    const wasmURL = await toBlobURL(
+      mt
+        ? CORE_MT_URL.replace(/.js$/g, ".wasm")
+        : CORE_URL.replace(/.js$/g, ".wasm"),
+      "application/wasm",
+      true,
+      setProgress
+    );
+    const workerURL = mt
+      ? await toBlobURL(
+          CORE_MT_URL.replace(/.js$/g, ".worker.js"),
+          "text/javascript",
+          true,
+          setProgress
+        )
+      : "";
+    setState(State.LOADING);
+    ffmpeg.current.terminate();
     await ffmpeg.current.load({
-      coreURL: mt ? CORE_MT_URL : CORE_URL,
+      coreURL,
-      thread: mt,
+      wasmURL,
+      workerURL,
     });
     setState(State.LOADED);
   };