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',
+    "intro",
-    'hello',
     {
-      type: 'category',
+      type: "category",
-      label: 'Tutorial',
+      label: "API",
-      items: ['tutorial-basics/create-a-document'],
+      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}`}
+      title={`${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />"
+      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 />

package-lock.json

@@ -45,6 +45,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",
@@ -38300,6 +38301,7 @@
         "@docusaurus/core": "2.1.0",
         "@docusaurus/module-type-aliases": "2.1.0",
         "@docusaurus/preset-classic": "2.1.0",
+        "@ffmpeg/ffmpeg": "^0.11.5",
         "@mdx-js/react": "^1.6.22",
         "@tsconfig/docusaurus": "^1.0.5",
         "clsx": "^1.2.1",

packages/ffmpeg/package.json

@@ -3,10 +3,10 @@
   "version": "0.11.5",
   "description": "FFmpeg WebAssembly version for browser",
   "main": "./dist/umd/ffmpeg.js",
-  "types": "./dist/umd/ffmpeg.d.ts",
+  "types": "./dist/esm/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/umd/ffmpeg.d.ts",
+      "types": "./dist/esm/index.d.ts",
       "import": "./dist/esm/index.js",
       "require": "./dist/umd/ffmpeg.js"
     }
@@ -16,7 +16,6 @@
     "lint": "eslint src",
     "clean": "rimraf dist",
     "build:umd": "webpack",
-    "build:d": "tsc -p tsconfig.d.json",
     "build:esm": "tsc -p tsconfig.esm.json",
     "build": "npm-run-all clean build:*",
     "docs": "typedoc --entryPointStrategy expand ./src",

packages/ffmpeg/src/classes.ts

@@ -165,7 +165,7 @@ export class FFmpeg extends EventEmitter {
    */
   public load = (config: FFMessageLoadConfig = {}): Promise<IsFirst> => {
     if (!this.#worker) {
-      this.#worker = new Worker(new URL("./worker.ts", import.meta.url));
+      this.#worker = new Worker(new URL("./worker", import.meta.url));
       this.#registerHandlers();
     }
     return this.#send({

packages/ffmpeg/src/errors.ts

@@ -1,9 +1,6 @@
 export const ERROR_RESPONSE_BODY_READER = new Error(
   "failed to get response body reader"
 );
-export const ERROR_ZERO_CONTENT_LENGTH = new Error(
-  "failed to get Content-Length"
-);
 export const ERROR_UNKNOWN_MESSAGE_TYPE = new Error("unknown message type");
 export const ERROR_NOT_LOADED = new Error(
   "ffmpeg is not loaded, call `await ffmpeg.load()` first"

packages/ffmpeg/src/utils.ts

@@ -1,6 +1,5 @@
 import {
   ERROR_RESPONSE_BODY_READER,
-  ERROR_ZERO_CONTENT_LENGTH,
   ERROR_INCOMPLETED_DOWNLOAD,
 } from "./errors";
 import { HeaderContentLength } from "./const";
@@ -28,8 +27,8 @@ export const downloadWithProgress = async (
   let buf;
 
   try {
-    const total = parseInt(resp.headers.get(HeaderContentLength) || "0");
+    // Set total to -1 to indicate that there is not Content-Type Header.
-    if (total === 0) throw ERROR_ZERO_CONTENT_LENGTH;
+    const total = parseInt(resp.headers.get(HeaderContentLength) || "-1");
 
     const reader = resp.body?.getReader();
     if (!reader) throw ERROR_RESPONSE_BODY_READER;

packages/ffmpeg/tsconfig.d.json

@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "src",
-    "declaration": true,
-    "declarationMap": true,
-    "emitDeclarationOnly": true,
-    "outFile": "dist/umd/ffmpeg.d.ts"
-  }
-}