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

Merge pull request #765 from EmoPorEmilio/main

Browse Source 
add example solidstart+vite
This commit is contained in:
lucas gelfond 2025-01-07 10:31:45 +01:00 committed by GitHub
commit 0261cbd564
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 8542 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
apps/solidstart-app/.gitignore vendored Normal file
View File

@ -0,0 +1,28 @@
dist
.solid
.output
.vercel
.netlify
.vinxi
# Environment
.env
.env*.local
# dependencies
/node_modules
# IDEs and editors
/.idea
.project
.classpath
*.launch
.settings/
# Temp
gitignore
# System Files
.DS_Store
Thumbs.db

32
apps/solidstart-app/README.md Normal file
View File

@ -0,0 +1,32 @@
# SolidStart
Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);
## Creating a project
```bash
# create a new project in the current directory
npm init solid@latest
# create a new project in my-app
npm init solid@latest my-app
```
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
Solid apps are built with _presets_, which optimise your project for deployment to different environments.
By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different preset, add it to the `devDependencies` in `package.json` and specify in your `app.config.js`.
## This project was created with the [Solid CLI](https://solid-cli.netlify.app)

13
apps/solidstart-app/app.config.ts Normal file
View File

@ -0,0 +1,13 @@
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({
ssr: false,
server: {
static: true,
},
vite: {
optimizeDeps: {
exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util']
},
}
});

8251
apps/solidstart-app/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

23
apps/solidstart-app/package.json Normal file
View File

@ -0,0 +1,23 @@
{
"name": "solidstart-ffmpeg",
"type": "module",
"scripts": {
"dev": "vinxi dev",
"build": "vinxi build",
"start": "vinxi start"
},
"dependencies": {
"@ffmpeg/ffmpeg": "^0.12.10",
"@ffmpeg/util": "^0.12.1",
"@solidjs/router": "^0.14.1",
"@solidjs/start": "^1.0.4",
"autoprefixer": "^10.4.19",
"postcss": "^8.4.38",
"solid-js": "^1.8.18",
"tailwindcss": "^3.4.3",
"vinxi": "^0.3.14"
},
"engines": {
"node": ">=18"
}
}

6
apps/solidstart-app/postcss.config.cjs Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

BIN
apps/solidstart-app/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 664 B

20
apps/solidstart-app/src/app.css Normal file
View File

@ -0,0 +1,20 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--background-rgb: 214, 219, 220;
--foreground-rgb: 0, 0, 0;
}
@media (prefers-color-scheme: dark) {
:root {
--background-rgb: 0, 0, 0;
--foreground-rgb: 255, 255, 255;
}
}
body {
background: rgb(var(--background-rgb));
color: rgb(var(--foreground-rgb));
}

17
apps/solidstart-app/src/app.tsx Normal file
View File

@ -0,0 +1,17 @@
import { Router } from '@solidjs/router';
import { FileRoutes } from '@solidjs/start/router';
import { Suspense } from 'solid-js';
import './app.css';
export default function App() {
return (
<Router
root={(props) => (
<>
<Suspense>{props.children}</Suspense>
</>
)}>
<FileRoutes />
</Router>
);
}

4
apps/solidstart-app/src/entry-client.tsx Normal file
View File

@ -0,0 +1,4 @@
// @refresh reload
import { mount, StartClient } from "@solidjs/start/client";
mount(() => <StartClient />, document.getElementById("app")!);

25
apps/solidstart-app/src/entry-server.tsx Normal file
View File

@ -0,0 +1,25 @@
// @refresh reload
import { createHandler, StartServer } from '@solidjs/start/server';
import { HttpHeader, HttpStatusCode } from '@solidjs/start';
export default createHandler(() => (
<StartServer
document={({ assets, children, scripts }) => (
<html lang='en'>
{/*necessary because ffmpeg library uses sharedArrayBuffer */}
<HttpHeader name='Cross-Origin-Opener-Policy' value='same-origin' />
<HttpHeader name='Cross-Origin-Embedder-Policy' value='require-corp' />
<head>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<link rel='icon' href='/favicon.ico' />
{assets}
</head>
<body>
<div id='app'>{children}</div>
{scripts}
</body>
</html>
)}
/>
));

1
apps/solidstart-app/src/global.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="@solidjs/start/env" />

87
apps/solidstart-app/src/routes/index.tsx Normal file
View File

@ -0,0 +1,87 @@
import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile, toBlobURL } from '@ffmpeg/util';
import { createSignal, Show } from 'solid-js';
const baseURL = 'https://unpkg.com/@ffmpeg/core-mt@0.12.6/dist/esm';
const videoURL =
'https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi';
export default function Home() {
const [loaded, setLoaded] = createSignal(false);
const [isLoading, setIsLoading] = createSignal(false);
let ffmpegRef = new FFmpeg();
let videoRef: any = null;
let messageRef: any = null;
const load = async () => {
setIsLoading(true);
const ffmpeg = ffmpegRef;
ffmpeg.on('log', ({ message }) => {
if (messageRef) messageRef.innerHTML = message;
});
// toBlobURL is used to bypass CORS issue, urls with the same
// domain can be used directly.
await ffmpeg.load({
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
wasmURL: await toBlobURL(
`${baseURL}/ffmpeg-core.wasm`,
'application/wasm'
),
workerURL: await toBlobURL(
`${baseURL}/ffmpeg-core.worker.js`,
'text/javascript'
),
});
setLoaded(true);
setIsLoading(false);
};
const transcode = async () => {
const ffmpeg = ffmpegRef;
// u can use 'https://ffmpegwasm.netlify.app/video/video-15s.avi' to download the video to public folder for testing
await ffmpeg.writeFile('input.avi', await fetchFile(videoURL));
await ffmpeg.exec(['-i', 'input.avi', 'output.mp4']);
const data = (await ffmpeg.readFile('output.mp4')) as any;
if (videoRef)
videoRef.src = URL.createObjectURL(
new Blob([data.buffer], { type: 'video/mp4' })
);
};
return (
<Show
when={loaded()}
fallback={
<button
class='fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] flex items-center bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded'
onClick={load}>
Load ffmpeg-core
<Show when={isLoading()}>
<span class='animate-spin ml-3'>
<svg
viewBox='0 0 1024 1024'
data-icon='loading'
width='1em'
height='1em'
fill='currentColor'
aria-hidden='true'>
<path d='M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z'></path>
</svg>
</span>
</Show>
</button>
}>
<div class='fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]'>
<video ref={videoRef} controls></video>
<br />
<button
onClick={transcode}
class='bg-green-500 hover:bg-green-700 text-white py-3 px-6 rounded'>
Transcode avi to mp4
</button>
<p ref={messageRef}></p>
</div>
</Show>
);
}

8
apps/solidstart-app/tailwind.config.cjs Normal file
View File

@ -0,0 +1,8 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
theme: {
extend: {}
},
plugins: []
};

19
apps/solidstart-app/tsconfig.json Normal file
View File

@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"jsx": "preserve",
"jsxImportSource": "solid-js",
"allowJs": true,
"noEmit": true,
"strict": true,
"types": ["vinxi/types/client"],
"isolatedModules": true,
"paths": {
"~/*": ["./src/*"]
}
}
}

BIN
apps/website/assets/solidstart-vite.xcf Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

8
apps/website/docs/getting-started/examples.md
View File

@ -61,5 +61,13 @@ any of the examples.
url="https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/sveltekit-app" url="https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/sveltekit-app"
/> />
</Grid> </Grid>
<Grid xs={12} sm={6} md={6} lg={6} xl={4}>
<ExampleCard
img="/img/solidstart-vite.png"
title="SolidStart + Vite"
desc="SolidStart with Vite (multithread version)"
url="https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/solidstart-app"
/>
</Grid>
</Grid> </Grid>
</MuiThemeProvider> </MuiThemeProvider>

BIN
apps/website/static/img/solidstart-vite.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB