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

apps/website/README.md

@@ -5,13 +5,13 @@ This website is built using [Docusaurus 2](https://docusaurus.io/), a modern sta
 ### Installation
 
 ```
-$ yarn
+$ lerna bootstrap
 ```
 
 ### Local Development
 
 ```
-$ yarn start
+$ npm start
 ```
 
 This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
@@ -19,7 +19,7 @@ This command starts a local development server and opens up a browser window. Mo
 ### Build
 
 ```
-$ yarn build
+$ npm run build
 ```
 
 This command generates static content into the `build` directory and can be served using any static contents hosting service.
@@ -29,13 +29,13 @@ This command generates static content into the `build` directory and can be serv
 Using SSH:
 
 ```
-$ USE_SSH=true yarn deploy
+$ USE_SSH=true npm run deploy
 ```
 
 Not using SSH:
 
 ```
-$ GIT_USER=<Your GitHub username> yarn deploy
+$ GIT_USER=<Your GitHub username> npm run deploy
 ```
 
 If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

apps/website/docs/api/classes/FFmpeg.md

@@ -28,7 +28,7 @@ const ffmpeg = new FFmpeg();
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:97](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L97)
+[packages/ffmpeg/src/classes.ts:97](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L97)
 
 ## Properties
 
@@ -38,7 +38,7 @@ const ffmpeg = new FFmpeg();
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:95](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L95)
+[packages/ffmpeg/src/classes.ts:95](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L95)
 
 ___
 
@@ -51,7 +51,7 @@ be called when we receive message from web worker.
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:94](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L94)
+[packages/ffmpeg/src/classes.ts:94](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L94)
 
 ___
 
@@ -61,7 +61,7 @@ ___
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:88](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L88)
+[packages/ffmpeg/src/classes.ts:88](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L88)
 
 ___
 
@@ -121,7 +121,7 @@ node_modules/@types/node/events.d.ts:290
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:84](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L84)
+[packages/ffmpeg/src/classes.ts:84](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L84)
 
 ___
 
@@ -131,7 +131,7 @@ ___
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:85](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L85)
+[packages/ffmpeg/src/classes.ts:85](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L85)
 
 ___
 
@@ -141,7 +141,7 @@ ___
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:86](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L86)
+[packages/ffmpeg/src/classes.ts:86](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L86)
 
 ## Event Methods
 
@@ -172,7 +172,7 @@ ffmpeg.on(FFmpeg.DOWNLOAD, ({ url, total, received, delta, done }) => {
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:33](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L33)
+[packages/ffmpeg/src/classes.ts:33](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L33)
 
 ▸ **on**(`event`, `listener`): [`FFmpeg`](FFmpeg.md)
 
@@ -203,7 +203,7 @@ log includes output to stdout and stderr.
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:52](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L52)
+[packages/ffmpeg/src/classes.ts:52](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L52)
 
 ▸ **on**(`event`, `listener`): [`FFmpeg`](FFmpeg.md)
 
@@ -235,7 +235,7 @@ input and output video/audio file are the same.
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:69](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L69)
+[packages/ffmpeg/src/classes.ts:69](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L69)
 
 ___
 
@@ -278,7 +278,7 @@ const data = ffmpeg.readFile("video.mp4");
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:197](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L197)
+[packages/ffmpeg/src/classes.ts:197](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L197)
 
 ___
 
@@ -303,7 +303,7 @@ as it initializes WebAssembly and other essential variables.
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:166](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L166)
+[packages/ffmpeg/src/classes.ts:166](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L166)
 
 ___
 
@@ -320,7 +320,7 @@ Terminate all ongoing API calls and terminate web worker.
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:218](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L218)
+[packages/ffmpeg/src/classes.ts:218](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L218)
 
 ___
 
@@ -344,7 +344,7 @@ Create a directory.
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:315](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L315)
+[packages/ffmpeg/src/classes.ts:315](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L315)
 
 ___
 
@@ -366,7 +366,7 @@ Delete an empty directory.
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:337](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L337)
+[packages/ffmpeg/src/classes.ts:337](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L337)
 
 ___
 
@@ -388,7 +388,7 @@ Delete a file.
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:293](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L293)
+[packages/ffmpeg/src/classes.ts:293](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L293)
 
 ___
 
@@ -410,7 +410,7 @@ List directory contents.
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:326](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L326)
+[packages/ffmpeg/src/classes.ts:326](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L326)
 
 ___
 
@@ -441,7 +441,7 @@ const data = await ffmpeg.readFile("video.mp4");
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:272](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L272)
+[packages/ffmpeg/src/classes.ts:272](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L272)
 
 ___
 
@@ -464,7 +464,7 @@ Rename a file or directory.
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:304](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L304)
+[packages/ffmpeg/src/classes.ts:304](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L304)
 
 ___
 
@@ -496,7 +496,7 @@ await ffmpeg.writeFile("text.txt", "hello world");
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:246](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L246)
+[packages/ffmpeg/src/classes.ts:246](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L246)
 
 ___
 
@@ -514,7 +514,7 @@ register worker message event handlers.
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:104](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L104)
+[packages/ffmpeg/src/classes.ts:104](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L104)
 
 ___
 
@@ -537,7 +537,7 @@ Generic function to send messages to web worker.
 
 #### Defined in
 
-[packages/ffmpeg/src/classes.ts:143](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/6060815/packages/ffmpeg/src/classes.ts#L143)
+[packages/ffmpeg/src/classes.ts:143](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/44115b1/packages/ffmpeg/src/classes.ts#L143)
 
 ___
 

apps/website/docusaurus.config.js

@@ -8,7 +8,7 @@ const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 const config = {
   title: "ffmpeg.wasm",
   tagline:
-    "ffmpeg.wasm is pure WebAssembly / JavaScript port of FFmpeg enabling video & audio record, convert and stream right inside browsers!",
+    "ffmpeg.wasm is a pure WebAssembly / JavaScript port of FFmpeg enabling video & audio record, convert and stream right inside browsers!",
   url: "https://ffmpegwasm.netlify.app",
   baseUrl: "/",
   onBrokenLinks: "throw",
@@ -68,9 +68,10 @@ const config = {
             type: "doc",
             docId: "intro",
             position: "left",
-            label: "Tutorial",
+            label: "Docs",
           },
           { to: "/blog", label: "Blog", position: "left" },
+          { to: "/playground", label: "Playground", position: "left" },
           {
             href: "https://github.com/ffmpegwasm/ffmpeg.wasm",
             label: "GitHub",

apps/website/package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@docusaurus/core": "2.1.0",
     "@docusaurus/preset-classic": "2.1.0",
+    "@ffmpeg/ffmpeg": "^0.11.5",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",

apps/website/sidebars.js

@@ -14,20 +14,17 @@
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
+  // tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
 
   // But you can create a sidebar manually
-  /*
   tutorialSidebar: [
-    'intro',
-    'hello',
+    "intro",
     {
-      type: 'category',
-      label: 'Tutorial',
-      items: ['tutorial-basics/create-a-document'],
+      type: "category",
+      label: "API",
+      items: ["api/classes/FFmpeg"],
     },
   ],
-   */
 };
 
 module.exports = sidebars;

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 />