add: video thumbnail generate

s/components/omni-media/component.ts

@@ -12,9 +12,9 @@ export const OmniMedia = shadow_component({styles}, use => {
 	const [media, setMedia, getMedia] = use.state<Video[]>([])
 
 	use.setup(() => {
-		const unsub = media_controller.on_media_change((change) => {
+		const unsub = media_controller.on_media_change(async (change) => {
 			if(change.action === "added") {
-				const video_files = media_controller.create_videos_from_video_files(change.files)
+				const video_files = await media_controller.create_videos_from_video_files(change.files)
 				setMedia([...getMedia(), ...video_files])
 			}
 			if(change.action === "removed") {

s/components/omni-media/types.ts

@@ -18,6 +18,7 @@ export interface AudioFile extends MediaFile {
 export interface Video extends MediaFile {
 	kind: "video"
 	element: HTMLVideoElement
+	thumbnail: string
 }
 
 export interface Audio extends MediaFile {

s/context/controllers/media/controller.ts

@@ -1,7 +1,7 @@
 import {pub} from "@benev/slate"
 import {quick_hash} from "@benev/construct"
 
-import {Video, MediaFile} from "../../../components/omni-media/types"
+import {Video, MediaFile} from "../../../components/omni-media/types.js"
 
 export class Media {
 	#database_request = window.indexedDB.open("database", 3)
@@ -80,14 +80,32 @@ export class Media {
 			check_if_duplicate!.onerror = (error) => console.log("error")
 		}
 	}
+
+	create_video_thumbnail(video: HTMLVideoElement): Promise<string> {
+		const canvas = document.createElement("canvas")
+		canvas.width = 150
+		canvas.height = 50
+		const ctx = canvas.getContext("2d")
+		video.currentTime = 1000/60
+		const f = (resolve: (url: string) => void) => {
+			ctx?.drawImage(video, 0, 0, 150, 50)
+			const url = canvas.toDataURL()
+			resolve(url)
+			removeEventListener("seeked", () => f(resolve))
+		}
+		return new Promise((resolve) => {
+			video.addEventListener("seeked", () => f(resolve))
+		})
+	}
 
-	create_videos_from_video_files(files: MediaFile[]) {
+	async create_videos_from_video_files(files: MediaFile[]) {
 		const videos: Video[] = []
 		for(const {file, hash} of files) {
 			const video = document.createElement('video')
 			video.src = URL.createObjectURL(file)
 			video.load()
-			videos.push({element: video, file, hash, kind: "video"})
+			const url = await this.create_video_thumbnail(video)
+			videos.push({element: video, file, hash, kind: "video", thumbnail: url})
 		}
 		return videos
 	}

s/context/controllers/timeline/actions.ts

@@ -31,7 +31,8 @@ export const timeline_actions = actionize({
 			start: 0,
 			end: duration,
 			track: 2,
-			file: video.file
+			file: video.file,
+			thumbnail: video.thumbnail
 		}
 		compositor.VideoManager.add_video(effect)
 		state.timeline.effects.push(effect)

s/context/controllers/timeline/types.ts

@@ -30,6 +30,7 @@ export interface Effect {
 export interface VideoEffect extends Effect {
 	kind: "video"
 	file: File
+	thumbnail: string
 }
 
 export type TextEffectProps = Omit<TextEffect, keyof Effect | "kind">