diff options
feat: temp
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | pnpm-lock.yaml | 8 | ||||
| -rw-r--r-- | src/user/ThreeVideo.ts | 8 | ||||
| -rw-r--r-- | src/user/index.ts | 111 |
4 files changed, 74 insertions, 56 deletions
diff --git a/package.json b/package.json index a6c9f48..72507e8 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ }, "dependencies": { "@ffmpeg/ffmpeg": "^0.12.15", - "@ffmpeg/util": "^0.12.2" + "@ffmpeg/util": "^0.12.2", + "three": "^0.178.0" } }
\ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eba1dcc..ae7f10c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,6 +14,9 @@ importers: '@ffmpeg/util': specifier: ^0.12.2 version: 0.12.2 + three: + specifier: ^0.178.0 + version: 0.178.0 devDependencies: '@sveltejs/adapter-static': specifier: 3.0.8 @@ -731,6 +734,9 @@ packages: resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==} engines: {node: '>=18'} + three@0.178.0: + resolution: {integrity: sha512-ybFIB0+x8mz0wnZgSGy2MO/WCO6xZhQSZnmfytSPyNpM0sBafGRVhdaj+erYh5U+RhQOAg/eXqw5uVDiM2BjhQ==} + totalist@3.0.1: resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==} engines: {node: '>=6'} @@ -1336,6 +1342,8 @@ snapshots: mkdirp: 3.0.1 yallist: 5.0.0 + three@0.178.0: {} + totalist@3.0.1: {} typescript@5.8.2: {} diff --git a/src/user/ThreeVideo.ts b/src/user/ThreeVideo.ts new file mode 100644 index 0000000..bbce038 --- /dev/null +++ b/src/user/ThreeVideo.ts @@ -0,0 +1,8 @@ +import { Video as BaseVideo, type FrameTime, type InitConfig } from '$/lib/Player/Video'; +import * as THREE from 'three'; + +export default abstract class ThreeVideo extends BaseVideo { + public async init(config: InitConfig): Promise<void> { + + } +} diff --git a/src/user/index.ts b/src/user/index.ts index 57d5302..fb0001e 100644 --- a/src/user/index.ts +++ b/src/user/index.ts @@ -1,4 +1,5 @@ -import { Video as BaseVideo, type FrameTime, type InitConfig } from '$/lib/Player/Video'; +import { type FrameTime, type InitConfig } from '$/lib/Player/Video'; +import ThreeVideo from './ThreeVideo'; import AudioURL from './03. Lemaitre, Jennie A. - Closer - 2min version.flac?url' type FontInfo = { @@ -15,72 +16,72 @@ const getTextSize = (ctx: CanvasRenderingContext2D, text: string, fontInfo: Font return ctx.measureText(text) } -export default class Video extends BaseVideo { - public ctx!: CanvasRenderingContext2D +export default class Video extends ThreeVideo { protected isPreview = false; protected px(pixels: number) { return this.isPreview ? pixels / 1.5 : pixels } - public async init({ isPreview }: InitConfig): Promise<void> { - // this.resize(this.canvas.parentElement.clientWidth,this.canvas.parentElement.clientHeight) + public async init(config: InitConfig): Promise<void> { + const { isPreview } = config this.isPreview = isPreview this.resize(this.px(1920), this.px(1080)) - this.ctx = this.canvas.getContext('2d')! + const threeInit = super.init(config).catch(e => ([1, e] as const)) - const v = document.createElement('video') - v.load() - await new Promise((rs, rj) => { - let debounce = false; - const timeout = setTimeout(() => { - if (!debounce) rj('Failed to load video - timed out.') - }, 1000); - v.addEventListener('load', () => { - rs(void 0) - clearTimeout(timeout) - }, { - once: true - }) - }) - // + // const v = document.createElement('video') + // v.load() + // await new Promise((rs, rj) => { + // let debounce = false; + // const timeout = setTimeout(() => { + // if (!debounce) rj('Failed to load video - timed out.') + // }, 1000); + // v.addEventListener('load', () => { + // rs(void 0) + // clearTimeout(timeout) + // }, { + // once: true + // }) + // }) + const rs = await threeInit + if (rs && rs[0] === 1) { console.error(rs[1]); throw new Error('Failed to initialize ThreeJS!'); } } public renderFrame(time: FrameTime): Promise<void> | void { const beat = 1 + ((time.seconds - 0.098) * (92 / 60)) const center = [this.w / 2, this.h / 2] as const - if (beat < 13 || beat >= 16) { - this.ctx.fillStyle = '#fff'; - this.ctx.fillRect(0, 0, this.w, this.h); - } else { - this.ctx.fillStyle = '#000'; - this.ctx.fillRect(0, 0, this.w, this.h); - } - const AdDefault: FontInfo = { - family: 'Inter Variable', - size: this.px(52), - weight: 450 - } - if (this.isPreview) - renderText(this.ctx, `${(Math.floor(beat * 100) / 100).toFixed(1)}`, '#646663', { ...AdDefault, size: this.px(12), weight: 400 }, { x: this.w - this.px(4), y: this.h - this.px(4) }, 'end') - switch (true) { - case beat >= 1 && beat < 4.3: - renderText(this.ctx, `Need a new AI assistant?`, '#646663', AdDefault, { x: center[0], y: center[1] }, 'center') - break; - case beat >= 4.3 && beat < 8.4: { - const text = `Like${beat >= 4.8 ? ' new' : ''}${beat >= 5.02 ? ' new' : ''}`; - const longTextWidth = getTextSize(this.ctx, 'Like new new', AdDefault) - renderText(this.ctx, text, '#646663', AdDefault, { x: center[0] - longTextWidth.width / 2, y: center[1] }, 'start') - break; - } - case beat >= 8.4 && beat < 13: { - const text = `Like${beat >= 9 ? ` runs random shit in your terminal` : ''}${beat >= 11 ? ' new' : ''}`; - const longTextWidth = getTextSize(this.ctx, `Like runs random shit in your terminal new`, AdDefault) - renderText(this.ctx, text, '#646663', AdDefault, { x: center[0] - longTextWidth.width / 2, y: center[1] }, 'start') - break; - } - // TODO: + // if (beat < 13 || beat >= 16) { + // this.ctx.fillStyle = '#fff'; + // this.ctx.fillRect(0, 0, this.w, this.h); + // } else { + // this.ctx.fillStyle = '#000'; + // this.ctx.fillRect(0, 0, this.w, this.h); + // } + // const AdDefault: FontInfo = { + // family: 'Inter Variable', + // size: this.px(52), + // weight: 450 + // } + // if (this.isPreview) + // renderText(this.ctx, `${(Math.floor(beat * 100) / 100).toFixed(1)}`, '#646663', { ...AdDefault, size: this.px(12), weight: 400 }, { x: this.w - this.px(4), y: this.h - this.px(4) }, 'end') + // switch (true) { + // case beat >= 1 && beat < 4.3: + // renderText(this.ctx, `Need a new AI assistant?`, '#646663', AdDefault, { x: center[0], y: center[1] }, 'center') + // break; + // case beat >= 4.3 && beat < 8.4: { + // const text = `Like${beat >= 4.8 ? ' new' : ''}${beat >= 5.02 ? ' new' : ''}`; + // const longTextWidth = getTextSize(this.ctx, 'Like new new', AdDefault) + // renderText(this.ctx, text, '#646663', AdDefault, { x: center[0] - longTextWidth.width / 2, y: center[1] }, 'start') + // break; + // } + // case beat >= 8.4 && beat < 13: { + // const text = `Like${beat >= 9 ? ` runs random shit in your terminal` : ''}${beat >= 11 ? ' new' : ''}`; + // const longTextWidth = getTextSize(this.ctx, `Like runs random shit in your terminal new`, AdDefault) + // renderText(this.ctx, text, '#646663', AdDefault, { x: center[0] - longTextWidth.width / 2, y: center[1] }, 'start') + // break; + // } + // // TODO: - default: - break; - } + // default: + // break; + // } } // public fps = 59.94; public fps = 30; |