diff --git a/README.md b/README.md index e2bea18..2613389 100644 --- a/README.md +++ b/README.md @@ -10,3 +10,4 @@ ![](https://i.imgur.com/imtXN2D.png) ![](https://i.imgur.com/qhr7c7b.png) +![](https://i.imgur.com/YHP96YM.png) diff --git a/deno-src/deno.json b/deno-src/deno.json index ab99706..ee5af67 100644 --- a/deno-src/deno.json +++ b/deno-src/deno.json @@ -1,14 +1,14 @@ { - "tasks": { - "dev": "deno run --watch main.ts" - }, - "imports": { - "@hk/photographer-toolbox": "jsr:@hk/photographer-toolbox@^0.1.8", - "@kunkun/api": "jsr:@kunkun/api@^0.0.40", - "@std/assert": "jsr:@std/assert@1", - "@std/path": "jsr:@std/path@^1.0.7", - "valibot": "jsr:@valibot/valibot@^0.42.1", - "sharp": "npm:sharp@0.33.5", - "fluent-ffmpeg": "npm:fluent-ffmpeg@2.1.3" - } + "tasks": { + "dev": "deno run --watch main.ts" + }, + "imports": { + "@hk/photographer-toolbox": "jsr:@hk/photographer-toolbox@^0.1.8", + "@kunkun/api": "jsr:@kunkun/api@^0.0.40", + "@std/assert": "jsr:@std/assert@1", + "@std/path": "jsr:@std/path@^1.0.7", + "valibot": "jsr:@valibot/valibot@^0.42.1", + "sharp": "npm:sharp@0.33.5", + "fluent-ffmpeg": "npm:fluent-ffmpeg@2.1.3" + } } diff --git a/deno-src/index.ts b/deno-src/index.ts index 552efd8..014b60b 100644 --- a/deno-src/index.ts +++ b/deno-src/index.ts @@ -2,13 +2,13 @@ import ffmpeg from 'fluent-ffmpeg'; import type { API } from '../src/types.ts'; import type { ProcessVideoOptions, Progress } from '@hk/photographer-toolbox/types'; -import { convertVideo } from 'https://jsr.io/@hk/photographer-toolbox/0.1.8/src/video/convert.ts'; // ffmpeg.setFfprobePath('/opt/homebrew/bin/ffprobe'); import { video } from '@hk/photographer-toolbox'; import { expose } from '@kunkun/api/runtime/deno'; expose({ + getAvailableCodecsNamesByType: video.getAvailableCodecsNamesByType, convertVideo: ( inputPath: string, outputPath: string, @@ -28,7 +28,37 @@ expose({ ) ); }, -}); - - - + convertToGif: ( + inputPath: string, + outputPath: string, + options: { + scale?: number; + fps?: number; + duration?: number; + startTime?: number; + }, + startCallback?: () => void, + progressCallback?: (progress: Progress) => void, + endCallback?: () => void + ) => { + console.error(inputPath, outputPath, options); + const outputOptions = [ + `-vf scale=${options.scale ?? 480}:-1:flags=lanczos,fps=${options.fps ?? 10}`, + '-f gif' + ]; + console.error('outputOptions', outputOptions); + video.convertVideo( + inputPath, + outputPath, + { + outputOptions, + duration: options.duration, + startTime: options.startTime + }, + startCallback, + progressCallback, + endCallback + ); + return Promise.resolve(); + } +} satisfies API); diff --git a/package.json b/package.json index c4b6ac6..6880b10 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "$schema": "https://schema.kunkun.sh", "license": "MIT", "name": "kunkun-ext-video-processing", - "version": "0.0.9", + "version": "0.0.10", "repository": "https://github.com/kunkunsh/kunkun-ext-video-processing", "kunkun": { "name": "Video Processing", @@ -15,13 +15,19 @@ }, "demoImages": [ "https://i.imgur.com/imtXN2D.png", - "https://i.imgur.com/qhr7c7b.png" + "https://i.imgur.com/qhr7c7b.png", + "https://i.imgur.com/YHP96YM.png" ], "permissions": [ - "clipboard:read-files", - "system:fs", - "notification:all", "dialog:all", + { + "permission": "fs:exists", + "allow": [ + { + "path": "**" + } + ] + }, "event:drag-drop", { "permission": "shell:deno:spawn", @@ -58,6 +64,21 @@ "dist": "build", "devMain": "http://localhost:5173", "name": "Video Conversion", + "window": { + "titleBarStyle": "overlay", + "hiddenTitle": true + }, + "cmds": [] + }, + { + "main": "/gif", + "dist": "build", + "devMain": "http://localhost:5173/gif", + "name": "Video to GIF", + "window": { + "titleBarStyle": "overlay", + "hiddenTitle": true + }, "cmds": [] } ], @@ -65,7 +86,10 @@ { "name": "Video Info", "main": "dist/video-info.js", - "cmds": [] + "cmds": [], + "window": { + "hiddenTitle": true + } } ] }, diff --git a/src/app.css b/src/app.css index 117997f..dc56d5c 100644 --- a/src/app.css +++ b/src/app.css @@ -1,4 +1,4 @@ -@import url("@kksh/svelte5/themes"); +@import url('@kksh/svelte5/themes'); @tailwind base; @tailwind components; @tailwind utilities; @@ -77,4 +77,4 @@ body { @apply bg-background text-foreground; } -} \ No newline at end of file +} diff --git a/src/lib/api.ts b/src/lib/api.ts index c161e52..e242257 100644 --- a/src/lib/api.ts +++ b/src/lib/api.ts @@ -1,4 +1,4 @@ -import { shell } from '@kksh/api/ui/iframe'; +import { shell, toast } from '@kksh/api/ui/iframe'; import type { API } from '../types'; export async function getRpcAPI() { @@ -22,6 +22,12 @@ export async function getRpcAPI() { }, {} ); + command.stderr.on('data', (data) => { + console.warn(data); + if (data.includes('Conversion failed!')) { + toast.error('Conversion failed!'); + } + }); const api = rpcChannel.getAPI(); return { api, diff --git a/src/lib/components/form-fields/fps.svelte b/src/lib/components/form-fields/fps.svelte index 1dd6f84..fc9f006 100644 --- a/src/lib/components/form-fields/fps.svelte +++ b/src/lib/components/form-fields/fps.svelte @@ -14,10 +14,7 @@
- +
- +
diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 8871245..eba19d8 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -1,7 +1,7 @@ -import { type ClassValue, clsx } from "clsx"; -import { twMerge } from "tailwind-merge"; -import { cubicOut } from "svelte/easing"; -import type { TransitionConfig } from "svelte/transition"; +import { type ClassValue, clsx } from 'clsx'; +import { twMerge } from 'tailwind-merge'; +import { cubicOut } from 'svelte/easing'; +import type { TransitionConfig } from 'svelte/transition'; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); @@ -19,13 +19,9 @@ export const flyAndScale = ( params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 } ): TransitionConfig => { const style = getComputedStyle(node); - const transform = style.transform === "none" ? "" : style.transform; + const transform = style.transform === 'none' ? '' : style.transform; - const scaleConversion = ( - valueA: number, - scaleA: [number, number], - scaleB: [number, number] - ) => { + const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => { const [minA, maxA] = scaleA; const [minB, maxB] = scaleB; @@ -35,13 +31,11 @@ export const flyAndScale = ( return valueB; }; - const styleToString = ( - style: Record - ): string => { + const styleToString = (style: Record): string => { return Object.keys(style).reduce((str, key) => { if (style[key] === undefined) return str; return str + `${key}:${style[key]};`; - }, ""); + }, ''); }; return { @@ -59,4 +53,4 @@ export const flyAndScale = ( }, easing: cubicOut }; -}; \ No newline at end of file +}; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 24c35e5..32d5d8f 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,18 +1,19 @@ + +
+

Convert to GIF

+ + + + + + + + +
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ + + + + +
diff --git a/src/routes/gif/ExplainCard.svelte b/src/routes/gif/ExplainCard.svelte new file mode 100644 index 0000000..5937eb8 --- /dev/null +++ b/src/routes/gif/ExplainCard.svelte @@ -0,0 +1,13 @@ + + + + + + + {description} + diff --git a/src/types.ts b/src/types.ts index 3717b21..7eca272 100644 --- a/src/types.ts +++ b/src/types.ts @@ -5,9 +5,9 @@ import type { } from '@hk/photographer-toolbox/types'; export type API = { - setFfprobePath: (path: string) => void; - setFfmpegPath: (path: string) => void; - readDefaultVideoMetadata: (path: string) => Promise; + // setFfprobePath: (path: string) => void; + // setFfmpegPath: (path: string) => void; + // readDefaultVideoMetadata: (path: string) => Promise; getAvailableCodecsNamesByType: ( type: 'video' | 'audio' | 'subtitle' | string, source?: string @@ -20,4 +20,17 @@ export type API = { progressCallback?: (progress: Progress) => void, endCallback?: () => void ) => Promise; + convertToGif: ( + inputPath: string, + outputPath: string, + options: { + scale?: number; + fps?: number; + duration?: number; + startTime?: number; + }, + startCallback?: () => void, + progressCallback?: (progress: Progress) => void, + endCallback?: () => void + ) => Promise; };