Update website and send total=-1 when no content-type

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

@@ -0,0 +1,104 @@
+import React from "react";
+import clsx from "clsx";
+import styles from "./styles.module.css";
+
+interface LibraryItem {
+  title: string;
+  desc: string;
+  img: string;
+  isBlackBackground?: boolean;
+}
+
+const libs: LibraryItem[] = [
+  {
+    title: "x264",
+    desc: "H.264 Codec",
+    img: require("@site/static/img/libs/x264.png").default,
+    isBlackBackground: true,
+  },
+  {
+    title: "x265",
+    desc: "H.265 codec",
+    img: require("@site/static/img/libs/x265.webp").default,
+  },
+  {
+    title: "libvpx",
+    desc: "VP8/VP9 codec",
+    img: require("@site/static/img/libs/libvpx.png").default,
+  },
+  {
+    title: "theora",
+    desc: "OGV codec",
+    img: require("@site/static/img/libs/theora.png").default,
+  },
+  {
+    title: "lame",
+    desc: "MP3 codec",
+    img: require("@site/static/img/libs/lame.gif").default,
+  },
+  {
+    title: "vorbis",
+    desc: "OGG codec",
+    img: require("@site/static/img/libs/vorbis.png").default,
+  },
+  {
+    title: "opus",
+    desc: "OPUS codec",
+    img: require("@site/static/img/libs/opus.png").default,
+  },
+  {
+    title: "freetype2",
+    desc: "Font file renderer",
+    img: require("@site/static/img/libs/freetype.png").default,
+  },
+  {
+    title: "libass",
+    desc: "subtitle renderer",
+    img: require("@site/static/img/libs/freetype.png").default,
+  },
+  {
+    title: "libwebp",
+    desc: "WEBP codec",
+    img: require("@site/static/img/libs/webp.png").default,
+  },
+];
+
+function Library({ title, desc, img, isBlackBackground = false }: LibraryItem) {
+  return (
+    <div className={clsx("col col--2")}>
+      <div className="text--center">
+        <img
+          src={img}
+          className={clsx(
+            styles.libraryImg,
+            isBlackBackground && styles.blackBackground
+          )}
+        />
+      </div>
+      <div className="text--center padding-horiz--md">
+        <h3>{title}</h3>
+        <p>{desc}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function ExternalLibraries(): JSX.Element {
+  return (
+    <section className={styles.libraries}>
+      <div className="container">
+        <h1 className="text--center">External Libraries</h1>
+        <h4 className="text--center">
+          {" "}
+          ffmpeg.wasm is built with common external libraries, and more of
+          libraries to be added!
+        </h4>
+        <div className="row">
+          {libs.map((props, idx) => (
+            <Library key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

apps/website/src/components/ExternalLibraries/styles.module.css

@@ -0,0 +1,17 @@
+.libraries {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+  background-color: rgba(229,231,235, 1);
+  color: #1b1b1d;
+}
+
+.libraryImg {
+  height: 96px;
+  padding: 16px;
+}
+
+.blackBackground {
+  background-color: #1b1b1d;
+}

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

@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+import { FFmpeg } from "@ffmpeg/ffmpeg";
+
+export default function Playground() {
+  const [loaded, setLoaded] = useState(false);
+  const ffmpeg = new FFmpeg();
+  const load = async () => {
+    ffmpeg.on(FFmpeg.DOWNLOAD, ({ url, total, received, done }) => {
+      console.log(url, total, received, done);
+    });
+    await ffmpeg.load({
+      coreURL: "http://localhost:8080/packages/core/dist/umd/ffmpeg-core.js",
+    });
+    setLoaded(true);
+  };
+  return loaded ? <></> : <button onClick={load}>Load</button>;
+}

apps/website/src/pages/index.tsx

@@ -4,6 +4,7 @@ import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 import HomepageFeatures from "@site/src/components/HomepageFeatures";
+import ExternalLibraries from "@site/src/components/ExternalLibraries";
 
 import styles from "./index.module.css";
 
@@ -31,12 +32,13 @@ export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />"
+      title={`${siteConfig.title}`}
+      description="ffmpeg.wasm is a pure WebAssembly / JavaScript port of FFmpeg"
     >
       <HomepageHeader />
       <main>
         <HomepageFeatures />
+        <ExternalLibraries />
       </main>
     </Layout>
   );

apps/website/src/pages/markdown-page.md

@@ -1,7 +0,0 @@
----
-title: Markdown page example
----
-
-# Markdown page example
-
-You don't need React to write simple standalone pages.

apps/website/src/pages/playground.md

@@ -0,0 +1,8 @@
+import Playground from "@site/src/components/Playground";
+
+# Playground
+
+Hi! Welcome to ffmpeg.wasm playground! Here you can try and test ffmpeg.wasm
+with ease. :smile:
+
+<Playground />