forked from ffmpegwasm/ffmpeg.wasm
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add SvelteKit Example (ffmpegwasm#684)
* Add SvelteKit Example * package-lock.json
- Loading branch information
1 parent
0e90726
commit ae1cdac
Showing
24 changed files
with
18,983 additions
and
15,267 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
.DS_Store | ||
node_modules | ||
/build | ||
/.svelte-kit | ||
/package | ||
.env | ||
.env.* | ||
!.env.example | ||
|
||
# Ignore files for PNPM, NPM and YARN | ||
pnpm-lock.yaml | ||
package-lock.json | ||
yarn.lock |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
/** @type { import("eslint").Linter.Config } */ | ||
module.exports = { | ||
root: true, | ||
extends: [ | ||
'eslint:recommended', | ||
'plugin:@typescript-eslint/recommended', | ||
'plugin:svelte/recommended', | ||
'prettier' | ||
], | ||
parser: '@typescript-eslint/parser', | ||
plugins: ['@typescript-eslint'], | ||
parserOptions: { | ||
sourceType: 'module', | ||
ecmaVersion: 2020, | ||
extraFileExtensions: ['.svelte'] | ||
}, | ||
env: { | ||
browser: true, | ||
es2017: true, | ||
node: true | ||
}, | ||
overrides: [ | ||
{ | ||
files: ['*.svelte'], | ||
parser: 'svelte-eslint-parser', | ||
parserOptions: { | ||
parser: '@typescript-eslint/parser' | ||
} | ||
} | ||
] | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
.DS_Store | ||
node_modules | ||
/build | ||
/.svelte-kit | ||
/package | ||
.env | ||
.env.* | ||
!.env.example | ||
vite.config.js.timestamp-* | ||
vite.config.ts.timestamp-* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
engine-strict=true |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
# Ignore files for PNPM, NPM and YARN | ||
pnpm-lock.yaml | ||
package-lock.json | ||
yarn.lock |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
{ | ||
"useTabs": true, | ||
"singleQuote": true, | ||
"trailingComma": "none", | ||
"printWidth": 100, | ||
"plugins": ["prettier-plugin-svelte"], | ||
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
# create-svelte | ||
|
||
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte). | ||
|
||
## Creating a project | ||
|
||
If you're seeing this, you've probably already done this step. Congrats! | ||
|
||
```bash | ||
# create a new project in the current directory | ||
npm create svelte@latest | ||
|
||
# create a new project in my-app | ||
npm create svelte@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 | ||
|
||
To create a production version of your app: | ||
|
||
```bash | ||
npm run build | ||
``` | ||
|
||
You can preview the production build with `npm run preview`. | ||
|
||
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
{ | ||
"name": "sveltekit-app", | ||
"version": "0.0.1", | ||
"private": true, | ||
"scripts": { | ||
"dev": "vite dev", | ||
"build": "vite build", | ||
"preview": "vite preview", | ||
"test": "npm run test:integration && npm run test:unit", | ||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", | ||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", | ||
"lint": "prettier --check . && eslint .", | ||
"format": "prettier --write .", | ||
"test:integration": "playwright test", | ||
"test:unit": "vitest" | ||
}, | ||
"devDependencies": { | ||
"@ffmpeg/ffmpeg": "*", | ||
"@ffmpeg/util": "*", | ||
"@playwright/test": "^1.41.2", | ||
"@sveltejs/adapter-auto": "^3.1.1", | ||
"@sveltejs/kit": "^2.5.0", | ||
"@sveltejs/vite-plugin-svelte": "^3.0.2", | ||
"@tsconfig/node18": "^18.2.2", | ||
"@types/eslint": "8.56.2", | ||
"@typescript-eslint/eslint-plugin": "^6.21.0", | ||
"@typescript-eslint/parser": "^6.21.0", | ||
"eslint": "^8.56.0", | ||
"eslint-config-prettier": "^9.1.0", | ||
"eslint-plugin-svelte": "^2.35.1", | ||
"prettier": "^3.2.5", | ||
"prettier-plugin-svelte": "^3.1.2", | ||
"svelte": "^4.2.10", | ||
"svelte-check": "^3.6.4", | ||
"tslib": "^2.6.2", | ||
"typescript": "^5.3.3", | ||
"vite": "^5.1.1", | ||
"vitest": "^1.2.2" | ||
}, | ||
"type": "module" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import type { PlaywrightTestConfig } from '@playwright/test'; | ||
|
||
const config: PlaywrightTestConfig = { | ||
webServer: { | ||
command: 'npm run build && npm run preview', | ||
port: 4173 | ||
}, | ||
testDir: 'tests', | ||
testMatch: /(.+\.)?(test|spec)\.[jt]s/ | ||
}; | ||
|
||
export default config; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
// See https://kit.svelte.dev/docs/types#app | ||
// for information about these interfaces | ||
declare global { | ||
namespace App { | ||
// interface Error {} | ||
// interface Locals {} | ||
// interface PageData {} | ||
// interface PageState {} | ||
// interface Platform {} | ||
} | ||
} | ||
|
||
export {}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
%sveltekit.head% | ||
</head> | ||
<body data-sveltekit-preload-data="hover"> | ||
<div style="display: contents">%sveltekit.body%</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { describe, it, expect } from 'vitest'; | ||
|
||
describe('sum test', () => { | ||
it('adds 1 + 2 to equal 3', () => { | ||
expect(1 + 2).toBe(3); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
<script lang="ts"> | ||
import { FFmpeg } from '@ffmpeg/ffmpeg'; | ||
// @ts-ignore | ||
import type { LogEvent } from '@ffmpeg/ffmpeg/dist/esm/types'; | ||
import { fetchFile, toBlobURL } from '@ffmpeg/util'; | ||
let videoEl: HTMLVideoElement; | ||
const baseURL = 'https://unpkg.com/@ffmpeg/[email protected]/dist/esm'; | ||
const videoURL = 'https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi'; | ||
let message = 'Click Start to Transcode'; | ||
async function transcode() { | ||
const ffmpeg = new FFmpeg(); | ||
message = 'Loading ffmpeg-core.js'; | ||
ffmpeg.on('log', ({ message: msg }: LogEvent) => { | ||
message = msg; | ||
console.log(message); | ||
}); | ||
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') | ||
}); | ||
message = 'Start transcoding'; | ||
await ffmpeg.writeFile('test.avi', await fetchFile(videoURL)); | ||
await ffmpeg.exec(['-i', 'test.avi', 'test.mp4']); | ||
message = 'Complete transcoding'; | ||
const data = await ffmpeg.readFile('test.mp4'); | ||
console.log('done'); | ||
videoEl.src = URL.createObjectURL( | ||
new Blob([(data as Uint8Array).buffer], { type: 'video/mp4' }) | ||
); | ||
} | ||
</script> | ||
|
||
<div> | ||
<!-- svelte-ignore a11y-media-has-caption --> | ||
<video bind:this={videoEl} controls /> | ||
<br /> | ||
<button on:click={transcode}>Start</button> | ||
<p>{message}</p> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
// place files you want to import through the `$lib` alias in this folder. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
<script lang="ts"> | ||
import FFmpegDemo from '../lib/FFmpegDemo.svelte'; | ||
</script> | ||
|
||
<h1>Welcome to SvelteKit</h1> | ||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p> | ||
<FFmpegDemo></FFmpegDemo> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import adapter from '@sveltejs/adapter-auto'; | ||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; | ||
|
||
/** @type {import('@sveltejs/kit').Config} */ | ||
const config = { | ||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors | ||
// for more information about preprocessors | ||
preprocess: vitePreprocess(), | ||
|
||
kit: { | ||
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. | ||
// If your environment is not supported or you settled on a specific environment, switch out the adapter. | ||
// See https://kit.svelte.dev/docs/adapters for more information about adapters. | ||
adapter: adapter() | ||
} | ||
}; | ||
|
||
export default config; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import { expect, test } from '@playwright/test'; | ||
|
||
test('index page has expected h1', async ({ page }) => { | ||
await page.goto('/'); | ||
await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible(); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
{ | ||
"extends": "./.svelte-kit/tsconfig.json", | ||
"compilerOptions": { | ||
"allowJs": true, | ||
"checkJs": true, | ||
"esModuleInterop": true, | ||
"forceConsistentCasingInFileNames": true, | ||
"resolveJsonModule": true, | ||
"skipLibCheck": true, | ||
"sourceMap": true, | ||
"strict": true, | ||
"moduleResolution": "bundler" | ||
} | ||
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias | ||
// | ||
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes | ||
// from the referenced tsconfig.json - TypeScript does not merge them in | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import { sveltekit } from '@sveltejs/kit/vite'; | ||
import { fileURLToPath, URL } from 'node:url' | ||
import { defineConfig } from 'vitest/config'; | ||
|
||
/** @type {import('vite').Plugin} */ | ||
const viteServerConfig = { | ||
name: 'log-request-middleware', | ||
configureServer(server) { | ||
server.middlewares.use((req, res, next) => { | ||
res.setHeader("Access-Control-Allow-Origin", "*"); | ||
res.setHeader("Access-Control-Allow-Methods", "GET"); | ||
res.setHeader("Cross-Origin-Opener-Policy", "same-origin"); | ||
res.setHeader("Cross-Origin-Embedder-Policy", "require-corp"); | ||
next(); | ||
}); | ||
} | ||
}; | ||
|
||
|
||
export default defineConfig({ | ||
plugins: [sveltekit(), viteServerConfig], | ||
test: { | ||
include: ['src/**/*.{test,spec}.{js,ts}'] | ||
}, | ||
resolve: { | ||
alias: { | ||
'@': fileURLToPath(new URL('./src', import.meta.url)) | ||
} | ||
}, | ||
optimizeDeps: { | ||
exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util'] | ||
}, | ||
server: { | ||
headers: { | ||
'Cross-Origin-Opener-Policy': 'same-origin', | ||
'Cross-Origin-Embedder-Policy': 'require-corp' | ||
}, | ||
fs: { | ||
allow: ['../..'] | ||
} | ||
} | ||
}); |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.