dumtruck/konowebcodecs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update website and @ffmpeg/util

Browse Source
This commit is contained in:
Jerome Wu 2022-10-06 20:52:39 +08:00
parent a40571f1b9
commit cf7f537bd8
14 changed files with 549 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
apps/website/docs/api/classes/FFmpeg.md
View File

@ -28,7 +28,7 @@ const ffmpeg = new FFmpeg();
#### Defined in
[packages/ffmpeg/src/classes.ts:97](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/e3bc2e1/packages/ffmpeg/src/classes.ts#L97)
[packages/ffmpeg/src/classes.ts:97](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/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/e3bc2e1/packages/ffmpeg/src/classes.ts#L95)
[packages/ffmpeg/src/classes.ts:95](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/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/e3bc2e1/packages/ffmpeg/src/classes.ts#L94)
[packages/ffmpeg/src/classes.ts:94](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/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/e3bc2e1/packages/ffmpeg/src/classes.ts#L88)
[packages/ffmpeg/src/classes.ts:88](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/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/e3bc2e1/packages/ffmpeg/src/classes.ts#L84)
[packages/ffmpeg/src/classes.ts:84](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/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/e3bc2e1/packages/ffmpeg/src/classes.ts#L85)
[packages/ffmpeg/src/classes.ts:85](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/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/e3bc2e1/packages/ffmpeg/src/classes.ts#L86)
[packages/ffmpeg/src/classes.ts:86](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/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/e3bc2e1/packages/ffmpeg/src/classes.ts#L33)
[packages/ffmpeg/src/classes.ts:33](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/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/e3bc2e1/packages/ffmpeg/src/classes.ts#L52)
[packages/ffmpeg/src/classes.ts:52](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/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/e3bc2e1/packages/ffmpeg/src/classes.ts#L69)
[packages/ffmpeg/src/classes.ts:69](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/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/e3bc2e1/packages/ffmpeg/src/classes.ts#L197)
[packages/ffmpeg/src/classes.ts:197](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/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/e3bc2e1/packages/ffmpeg/src/classes.ts#L166)
[packages/ffmpeg/src/classes.ts:166](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/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/e3bc2e1/packages/ffmpeg/src/classes.ts#L218)
[packages/ffmpeg/src/classes.ts:218](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/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/e3bc2e1/packages/ffmpeg/src/classes.ts#L315)
[packages/ffmpeg/src/classes.ts:315](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/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/e3bc2e1/packages/ffmpeg/src/classes.ts#L337)
[packages/ffmpeg/src/classes.ts:337](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/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/e3bc2e1/packages/ffmpeg/src/classes.ts#L293)
[packages/ffmpeg/src/classes.ts:293](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/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/e3bc2e1/packages/ffmpeg/src/classes.ts#L326)
[packages/ffmpeg/src/classes.ts:326](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/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/e3bc2e1/packages/ffmpeg/src/classes.ts#L272)
[packages/ffmpeg/src/classes.ts:272](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/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/e3bc2e1/packages/ffmpeg/src/classes.ts#L304)
[packages/ffmpeg/src/classes.ts:304](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/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/e3bc2e1/packages/ffmpeg/src/classes.ts#L246)
[packages/ffmpeg/src/classes.ts:246](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/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/e3bc2e1/packages/ffmpeg/src/classes.ts#L104)
[packages/ffmpeg/src/classes.ts:104](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/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/e3bc2e1/packages/ffmpeg/src/classes.ts#L143)
[packages/ffmpeg/src/classes.ts:143](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/1582ee2/packages/ffmpeg/src/classes.ts#L143)
___

3
apps/website/package.json
View File

@ -21,6 +21,7 @@
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@ffmpeg/ffmpeg": "^0.12.0-alpha.0",
"@ffmpeg/util": "^0.12.0-alpha.0",
"@fontsource/roboto": "^4.5.8",
"@mdx-js/react": "^1.6.22",
"@mui/icons-material": "^5.10.6",
@ -28,11 +29,13 @@
"clsx": "^1.2.1",
"prism-react-renderer": "^1.3.5",
"react": "^17.0.2",
"react-ace": "^10.1.0",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "2.1.0",
"@tsconfig/docusaurus": "^1.0.5",
"@types/ace": "^0.0.48",
"docusaurus-plugin-typedoc": "^0.17.5",
"typedoc": "^0.23.15",
"typedoc-plugin-markdown": "^3.13.6",

20
apps/website/src/components/MuiThemeProvider/index.tsx Normal file
View File

@ -0,0 +1,20 @@
import React from "react";
import { useColorMode } from "@docusaurus/theme-common";
import { ThemeProvider, createTheme } from "@mui/material/styles";
const lightTheme = createTheme({});
const darkTheme = createTheme({
palette: {
mode: "dark",
},
});
export default function MuiThemeProvider(props: any) {
const { colorMode } = useColorMode();
return (
<ThemeProvider
theme={colorMode === "dark" ? darkTheme : lightTheme}
{...props}
/>
);
}

16
apps/website/src/components/Playground/CoreDownloader.tsx Normal file
View File

@ -0,0 +1,16 @@
import * as React from "react";
import Typography from "@mui/material/Typography";
import Container from "@mui/material/Container";
import LinearProgressWithLabel from "./LinearProgressWithLabel";
import { CORE_SIZE } from "./const";
export default function CoreDownloader({ url, received }) {
const total = CORE_SIZE[url];
return (
<Container>
<Typography>{`Downloading ${url}`}</Typography>
<Typography>{`(${received} / ${total} bytes)`}</Typography>
<LinearProgressWithLabel value={(received / total) * 100} />
</Container>
);
}

53
apps/website/src/components/Playground/CoreSelector.tsx Normal file
View File

@ -0,0 +1,53 @@
import * as React from "react";
import Button from "@mui/material/Button";
import Container from "@mui/material/Container";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@mui/material/FormControl";
import FormLabel from "@mui/material/FormLabel";
import styles from "./styles.module.css";
interface CoreSelectorProps {
option: string;
onChange: (event: React.ChangeEvent<HTMLInputElement>) => any;
onSubmit: () => any;
}
export default function CoreSelector({
option,
onChange,
onSubmit,
}: CoreSelectorProps) {
return (
<Container className={styles.margin}>
<Container className={styles.margin}>
<FormControl>
<FormLabel id="core-selector">Select a Core Option</FormLabel>
<RadioGroup
aria-labelledby="core-selector"
name="core-selector"
value={option}
onChange={onChange}
>
<FormControlLabel
value="core"
control={<Radio />}
label="Core (Slower, but stable)"
/>
<FormControlLabel
value="core-mt"
disabled={typeof SharedArrayBuffer !== "function"}
control={<Radio />}
label="Core Multi-threaded (Faster, but lower compatibility and unstable)"
/>
</RadioGroup>
</FormControl>
</Container>
<Container>
<Button variant="contained" onClick={onSubmit}>
Load
</Button>
</Container>
</Container>
);
}

246
apps/website/src/components/Playground/Editor.tsx Normal file
View File

@ -0,0 +1,246 @@
/// <reference types="ace" />
import * as React from "react";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import FolderIcon from "@mui/icons-material/Folder";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import IconButton from "@mui/material/IconButton";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import RefreshIcon from "@mui/icons-material/Refresh";
import UploadFileIcon from "@mui/icons-material/UploadFile";
import UploadIcon from "@mui/icons-material/Upload";
import Tooltip from "@mui/material/Tooltip";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import { useColorMode } from "@docusaurus/theme-common";
import { FFmpeg } from "@ffmpeg/ffmpeg";
import { fetchFile } from "@ffmpeg/util";
import AceEditor from "react-ace";
import styles from "./styles.module.css";
import { getFFmpeg } from "./ffmpeg";
import { SAMPLE_FILES } from "./const";
import LinearProgressWithLabel from "./LinearProgressWithLabel";
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/mode-text";
import "ace-builds/src-noconflict/theme-dracula";
import "ace-builds/src-noconflict/theme-github";
const defaultArgs = JSON.stringify(["-i", "video.avi", "video.mp4"], null, 2);
const options = ["Download", "Download as Text File", "Delete"];
const genFFmpegText = (args: string) => {
let data: any = [];
try {
data = JSON.parse(args);
} catch (e) {}
return `// equivalent ffmpeg.wasm API call
ffmpeg.exec(${JSON.stringify(data)});
// equivalent ffmpeg command line
ffmpeg ${data.join(" ")}`;
};
export default function Editor() {
const { useState, useEffect } = React;
const [args, setArgs] = useState<string>(defaultArgs);
const [logs, setLogs] = useState<string[]>([]);
const [output, setOutput] = useState<Ace.Editor>();
const [path, setPath] = useState<string>("/");
const [nodes, setNodes] = useState<string[]>([]);
const [progress, setProgress] = useState<number>(-1);
const { colorMode } = useColorMode();
const theme = colorMode === "dark" ? "github" : "dracula";
const scrollToEnd = () => {
output && output.renderer.scrollToLine(Number.POSITIVE_INFINITY);
};
const loadSamples = async () => {
const ffmpeg = getFFmpeg();
Object.keys(SAMPLE_FILES).forEach(async (name) => {
await ffmpeg.writeFile(name, await fetchFile(SAMPLE_FILES[name]));
});
// Somehow we need to wait a little bit before reading the new nodes.
setTimeout(async () => {
setNodes(await ffmpeg.listDir(path));
}, 500);
};
const refreshDir = async () => {
setNodes(await getFFmpeg().listDir(path));
};
const exec = async () => {
const ffmpeg = getFFmpeg();
setProgress(-1);
const logListener = ({ message }) => {
setLogs((_logs) => [..._logs, message]);
scrollToEnd();
};
const progListener = ({ progress: prog }) => {
setProgress(prog * 100);
};
ffmpeg.on(FFmpeg.LOG, logListener);
ffmpeg.on(FFmpeg.PROGRESS, progListener);
await ffmpeg.exec(JSON.parse(args));
ffmpeg.removeListener(FFmpeg.LOG, logListener);
ffmpeg.removeListener(FFmpeg.PROGRESS, progListener);
setNodes(await ffmpeg.listDir(path));
};
useEffect(() => {
const ffmpeg = getFFmpeg();
ffmpeg.listDir(path).then((nodes) => {
setNodes(nodes);
});
}, []);
return (
<Box sx={{ flexGrow: 1 }}>
<Grid
container
spacing={{ xs: 2, md: 3 }}
columns={{ xs: 4, sm: 8, md: 12 }}
>
<Grid item xs={4}>
<Stack direction="row" className={styles.fsTitle}>
<Typography>File System:</Typography>
<Box>
<Tooltip title="Upload a media file">
<IconButton onClick={() => {}} aria-label="upload-media-file">
<UploadFileIcon />
</IconButton>
</Tooltip>
<Tooltip title="Upload a text file">
<IconButton onClick={() => {}} aria-label="upload-text">
<UploadIcon />
</IconButton>
</Tooltip>
<Tooltip title="Refresh directory">
<IconButton onClick={refreshDir} aria-label="fresh">
<RefreshIcon />
</IconButton>
</Tooltip>
</Box>
</Stack>
<Typography>{`${path}`}</Typography>
<List dense={true}>
{nodes.map((node, index) => (
<ListItem
key={index}
secondaryAction={
<>
<IconButton
aria-label="more"
id="long-button"
aria-haspopup="true"
edge="end"
>
<MoreVertIcon />
</IconButton>
<Menu
id="long-menu"
MenuListProps={{
"aria-labelledby": "long-button",
}}
PaperProps={{
style: {
width: "20ch",
},
}}
>
{options.map((option) => (
<MenuItem key={option} selected={option === "Download"}>
{option}
</MenuItem>
))}
</Menu>
</>
}
>
<ListItemIcon>
<FolderIcon />
</ListItemIcon>
<ListItemText primary={node} />
</ListItem>
))}
</List>
</Grid>
<Grid item xs={8}>
<Stack spacing={1}>
<Box>
<Typography>Edit JSON below to update command:</Typography>
<AceEditor
mode="json"
theme={theme}
name="input-args"
fontSize={16}
showPrintMargin={true}
showGutter={true}
width="100%"
minLines={8}
maxLines={8}
highlightActiveLine={true}
value={args}
onChange={(value) => setArgs(value)}
setOptions={{ tabSize: 2 }}
/>
</Box>
<AceEditor
mode="javascript"
theme={theme}
name="ffmpeg.wasm"
fontSize={16}
showGutter={false}
width="100%"
minLines={6}
maxLines={6}
readOnly
highlightActiveLine={false}
value={genFFmpegText(args)}
setOptions={{ tabSize: 2 }}
/>
<Stack direction="row" spacing={2} className={styles.alignRight}>
<Button onClick={loadSamples}>Load Sample Files</Button>
<Button variant="contained" onClick={exec}>
Run
</Button>
</Stack>
{progress === -1 ? (
<></>
) : (
<>
<Typography>Transcoding Progress:</Typography>
<LinearProgressWithLabel value={progress} />
</>
)}
<AceEditor
placeholder="ffmpeg console output"
mode="text"
theme={theme}
name="console"
fontSize={16}
width="100%"
minLines={8}
maxLines={8}
readOnly
showPrintMargin={true}
highlightActiveLine={false}
value={logs.join("\n")}
setOptions={{ tabSize: 2 }}
onLoad={(editor) => setOutput(editor)}
/>
</Stack>
</Grid>
</Grid>
</Box>
);
}

23
apps/website/src/components/Playground/LinearProgressWithLabel.tsx Normal file
View File

@ -0,0 +1,23 @@
import * as React from "react";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import LinearProgress, {
LinearProgressProps,
} from "@mui/material/LinearProgress";
export default function LinearProgressWithLabel(
props: LinearProgressProps & { value: number }
) {
return (
<Box sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ width: "100%", mr: 1 }}>
<LinearProgress variant="determinate" {...props} />
</Box>
<Box sx={{ minWidth: 35 }}>
<Typography variant="body2" color="text.secondary">{`${Math.round(
props.value
)}%`}</Typography>
</Box>
</Box>
);
}

12
apps/website/src/components/Playground/const.ts Normal file
View File

@ -0,0 +1,12 @@
export const CORE_SIZE = {
"https://unpkg.com/@ffmpeg/core@0.12.0-alpha.2/dist/umd/ffmpeg-core.js": 111646,
"https://unpkg.com/@ffmpeg/core@0.12.0-alpha.2/dist/umd/ffmpeg-core.wasm": 31967534,
"https://unpkg.com/@ffmpeg/core-mt@0.12.0-alpha.2/dist/umd/ffmpeg-core.js": 130002,
"https://unpkg.com/@ffmpeg/core-mt@0.12.0-alpha.2/dist/umd/ffmpeg-core.wasm": 32441947,
"https://unpkg.com/@ffmpeg/core-mt@0.12.0-alpha.2/dist/umd/ffmpeg-core.worker.js": 2978,
};
export const SAMPLE_FILES = {
"video.avi":
"https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-3s.avi",
};

5
apps/website/src/components/Playground/ffmpeg.ts Normal file
View File

@ -0,0 +1,5 @@
import { FFmpeg } from "@ffmpeg/ffmpeg";
let ffmpeg = new FFmpeg();
export const getFFmpeg = () => ffmpeg;

72
apps/website/src/components/Playground/index.tsx
View File

@ -1,38 +1,54 @@
import React, { useState } from "react";
import * as React from "react";
import { FFmpeg } from "@ffmpeg/ffmpeg";
import Button from "@mui/material/Button";
import { useColorMode } from "@docusaurus/theme-common";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import MuiThemeProvider from "@site/src/components/MuiThemeProvider";
import CoreSelector from "./CoreSelector";
import CoreDownloader from "./CoreDownloader";
import Editor from "./Editor";
import { getFFmpeg } from "./ffmpeg";
const lightTheme = createTheme({});
const darkTheme = createTheme({
palette: {
mode: "dark",
},
});
enum State {
NOT_LOADED,
LOADING,
LOADED,
}
export default function Playground() {
const [loaded, setLoaded] = useState(false);
const { colorMode } = useColorMode();
const ffmpeg = new FFmpeg();
const { useState } = React;
const [state, setState] = useState(State.LOADED);
const [option, setOption] = useState("core");
const [url, setURL] = useState("");
const [received, setReceived] = useState(0);
const load = async () => {
ffmpeg.on(FFmpeg.DOWNLOAD, ({ url, total, received, done }) => {
console.log(url, total, received, done);
setState(State.LOADING);
const ffmpeg = getFFmpeg();
ffmpeg.terminate();
ffmpeg.on(FFmpeg.DOWNLOAD, ({ url: _url, received: _received }) => {
setURL(_url as string);
setReceived(_received);
});
await ffmpeg.load({
coreURL: "http://localhost:8080/packages/core/dist/umd/ffmpeg-core.js",
});
setLoaded(true);
await ffmpeg.load();
setState(State.LOADED);
};
return (
<ThemeProvider theme={colorMode === "dark" ? darkTheme : lightTheme}>
{loaded ? (
<></>
) : (
<Button variant="contained" onClick={load}>
Load
</Button>
)}
</ThemeProvider>
<MuiThemeProvider>
{(() => {
switch (state) {
case State.LOADING:
return <CoreDownloader url={url} received={received} />;
case State.LOADED:
return <Editor />;
default:
return <></>;
}
})()}
<CoreSelector
option={option}
onChange={(event) => {
setOption((event.target as HTMLInputElement).value);
}}
onSubmit={load}
/>
</MuiThemeProvider>
);
}

13
apps/website/src/components/Playground/styles.module.css Normal file
View File

@ -0,0 +1,13 @@
.margin {
margin-bottom: 32px;
}
.alignRight {
display: flex;
justify-content: flex-end;
}
.fsTitle {
align-items: center;
justify-content: space-between;
}

86
package-lock.json generated
View File

@ -48,6 +48,7 @@
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@ffmpeg/ffmpeg": "^0.12.0-alpha.0",
"@ffmpeg/util": "^0.12.0-alpha.0",
"@fontsource/roboto": "^4.5.8",
"@mdx-js/react": "^1.6.22",
"@mui/icons-material": "^5.10.6",
@ -55,11 +56,13 @@
"clsx": "^1.2.1",
"prism-react-renderer": "^1.3.5",
"react": "^17.0.2",
"react-ace": "^10.1.0",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "2.1.0",
"@tsconfig/docusaurus": "^1.0.5",
"@types/ace": "^0.0.48",
"docusaurus-plugin-typedoc": "^0.17.5",
"typedoc": "^0.23.15",
"typedoc-plugin-markdown": "^3.13.6",
@ -6099,6 +6102,12 @@
"integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==",
"dev": true
},
"node_modules/@types/ace": {
"version": "0.0.48",
"resolved": "https://registry.npmjs.org/@types/ace/-/ace-0.0.48.tgz",
"integrity": "sha512-esV6hOWiDOZ6d7w5S11iLu6LQsPGe/9RPzhri7gNNLdrK1LFpO9/m7IZhQL6dat0JHICJ7l51zvHAiCgnPLLHA==",
"dev": true
},
"node_modules/@types/body-parser": {
"version": "1.19.2",
"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@ -6838,6 +6847,11 @@
"node": ">= 0.6"
}
},
"node_modules/ace-builds": {
"version": "1.11.2",
"resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.11.2.tgz",
"integrity": "sha512-1VNeUF56b6gkaeeWJXMBBuz5n0ceDchjUwwVmTKpNM/N3YRrUEpykGEEsg7Y1PKP7IRyqtXfAu6VJDg7OZaLfA=="
},
"node_modules/acorn": {
"version": "8.8.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
@ -9884,6 +9898,11 @@
"node": ">=0.3.1"
}
},
"node_modules/diff-match-patch": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz",
"integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw=="
},
"node_modules/dir-glob": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@ -14057,6 +14076,16 @@
"resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
"integrity": "sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw=="
},
"node_modules/lodash.get": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
"integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ=="
},
"node_modules/lodash.isequal": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
"integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
},
"node_modules/lodash.ismatch": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz",
@ -17862,6 +17891,22 @@
"node": ">=0.10.0"
}
},
"node_modules/react-ace": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/react-ace/-/react-ace-10.1.0.tgz",
"integrity": "sha512-VkvUjZNhdYTuKOKQpMIZi7uzZZVgzCjM7cLYu6F64V0mejY8a2XTyPUIMszC6A4trbeMIHbK5fYFcT/wkP/8VA==",
"dependencies": {
"ace-builds": "^1.4.14",
"diff-match-patch": "^1.0.5",
"lodash.get": "^4.4.2",
"lodash.isequal": "^4.5.0",
"prop-types": "^15.7.2"
},
"peerDependencies": {
"react": "^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-base16-styling": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.6.0.tgz",
@ -27277,6 +27322,12 @@
"integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==",
"dev": true
},
"@types/ace": {
"version": "0.0.48",
"resolved": "https://registry.npmjs.org/@types/ace/-/ace-0.0.48.tgz",
"integrity": "sha512-esV6hOWiDOZ6d7w5S11iLu6LQsPGe/9RPzhri7gNNLdrK1LFpO9/m7IZhQL6dat0JHICJ7l51zvHAiCgnPLLHA==",
"dev": true
},
"@types/body-parser": {
"version": "1.19.2",
"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@ -27907,6 +27958,11 @@
"negotiator": "0.6.3"
}
},
"ace-builds": {
"version": "1.11.2",
"resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.11.2.tgz",
"integrity": "sha512-1VNeUF56b6gkaeeWJXMBBuz5n0ceDchjUwwVmTKpNM/N3YRrUEpykGEEsg7Y1PKP7IRyqtXfAu6VJDg7OZaLfA=="
},
"acorn": {
"version": "8.8.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
@ -30127,6 +30183,11 @@
"integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
"dev": true
},
"diff-match-patch": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz",
"integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw=="
},
"dir-glob": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@ -33195,6 +33256,16 @@
"resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
"integrity": "sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw=="
},
"lodash.get": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
"integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ=="
},
"lodash.isequal": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
"integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
},
"lodash.ismatch": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz",
@ -35976,6 +36047,18 @@
"object-assign": "^4.1.1"
}
},
"react-ace": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/react-ace/-/react-ace-10.1.0.tgz",
"integrity": "sha512-VkvUjZNhdYTuKOKQpMIZi7uzZZVgzCjM7cLYu6F64V0mejY8a2XTyPUIMszC6A4trbeMIHbK5fYFcT/wkP/8VA==",
"requires": {
"ace-builds": "^1.4.14",
"diff-match-patch": "^1.0.5",
"lodash.get": "^4.4.2",
"lodash.isequal": "^4.5.0",
"prop-types": "^15.7.2"
}
},
"react-base16-styling": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.6.0.tgz",
@ -39122,15 +39205,18 @@
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@ffmpeg/ffmpeg": "^0.12.0-alpha.0",
"@ffmpeg/util": "^0.12.0-alpha.0",
"@fontsource/roboto": "^4.5.8",
"@mdx-js/react": "^1.6.22",
"@mui/icons-material": "^5.10.6",
"@mui/material": "^5.10.8",
"@tsconfig/docusaurus": "^1.0.5",
"@types/ace": "^0.0.48",
"clsx": "^1.2.1",
"docusaurus-plugin-typedoc": "^0.17.5",
"prism-react-renderer": "^1.3.5",
"react": "^17.0.2",
"react-ace": "^10.1.0",
"react-dom": "^17.0.2",
"typedoc": "^0.23.15",
"typedoc-plugin-markdown": "^3.13.6",

3
package.json
View File

@ -16,7 +16,8 @@
"test:browser:server": "http-server -c-1 --cors -p 3000 .",
"test:node": "mocha --exit --bail -t 60000",
"test:node:core:mt": "npm run test:node -- --require tests/test-helper-mt.js tests/ffmpeg-core.test.js",
"test:node:core:st": "npm run test:node -- --require tests/test-helper-st.js tests/ffmpeg-core.test.js"
"test:node:core:st": "npm run test:node -- --require tests/test-helper-st.js tests/ffmpeg-core.test.js",
"prepublishOnly": "lerna run build --scope='@ffmpeg/*'"
},
"workspaces": [
"packages/*",

5
packages/util/tsconfig.json
View File

@ -1,3 +1,6 @@
{
"extends": "../../tsconfig.json"
"extends": "../../tsconfig.json",
"compilerOptions": {
"declaration": true
}
}