fix: deband for anamorphic videos

This commit is contained in:
ThaUnknown 2025-07-18 18:40:49 +02:00
parent 7e43d855f2
commit 4cc657d818
No known key found for this signature in database
4 changed files with 50 additions and 38 deletions

View file

@ -1,6 +1,6 @@
{
"name": "ui",
"version": "6.4.57",
"version": "6.4.58",
"license": "BUSL-1.1",
"private": true,
"packageManager": "pnpm@9.15.5",
@ -85,7 +85,7 @@
"tailwind-variants": "^1.0.0",
"uint8-util": "^2.2.5",
"urql": "^4.2.2",
"video-deband": "^1.0.8",
"video-deband": "^1.0.9",
"wonka": "^6.3.5",
"workbox-core": "^7.3.0",
"workbox-precaching": "^7.3.0",

View file

@ -123,8 +123,8 @@ importers:
specifier: ^4.2.2
version: 4.2.2(@urql/core@5.2.0(graphql@16.10.0))(react@19.0.0)
video-deband:
specifier: ^1.0.8
version: 1.0.8
specifier: ^1.0.9
version: 1.0.9
wonka:
specifier: ^6.3.5
version: 6.3.5
@ -2607,8 +2607,8 @@ packages:
peerDependencies:
svelte: ^4.0.0 || ^5.0.0-next.1
video-deband@1.0.8:
resolution: {integrity: sha512-QdEVDl29WWSb/HkGuLmdExto7x90WYqz1DdljT7IiCVH/zqepuCS2OnGX/C3kHDIIOiumtFWEj7z9wUiVojiSA==}
video-deband@1.0.9:
resolution: {integrity: sha512-WDFy0jhd8phsPw1oirtLLCsjJ1YBiUmMKzAj947o7T2sMX5bMAewDfQ8nwPDM9Z3NQ51Wr/jWB/QyOLNJD3wzQ==}
vite-plugin-static-copy@3.0.2:
resolution: {integrity: sha512-/seLvhUg44s1oU9RhjTZZy/0NPbfNctozdysKcvPovxxXZdI5l19mGq6Ri3IaTf1Dy/qChS4BSR7ayxeu8o9aQ==}
@ -5355,7 +5355,7 @@ snapshots:
bits-ui: 0.21.16(svelte@4.2.19)
svelte: 4.2.19
video-deband@1.0.8:
video-deband@1.0.9:
dependencies:
rvfc-polyfill: 1.0.7
twgl.js: 5.5.4

View file

@ -273,9 +273,14 @@
function createDeband (video: HTMLVideoElement, playerDeband: boolean) {
const create = () => {
destroy()
deband = new VideoDeband(video)
deband.canvas.classList.add('deband-canvas', 'w-full', 'h-full', 'pointer-events-none', 'object-contain')
video.before(deband.canvas)
try {
deband = new VideoDeband(video)
deband.canvas.classList.add('deband-canvas', 'w-full', 'h-full', 'pointer-events-none', 'object-contain')
video.before(deband.canvas)
} catch (e) {
console.error('Failed to create video deband:', e)
destroy()
}
}
const destroy = () => {

View file

@ -66,36 +66,43 @@
const oneOverScale = 1 / scale
function makeGlobe (canvas: HTMLCanvasElement) {
const globe = createGlobe(canvas, {
devicePixelRatio: window.devicePixelRatio,
width: size,
height: size,
phi: 0,
theta: 0.1,
dark: 1,
diffuse: 1.4,
mapSamples: 19000,
mapBrightness: 6,
opacity: 0.8,
baseColor: [0.23, 0.23, 0.23],
markerColor: [0.05, 1, 0],
glowColor: [0, 0, 0],
markers: [],
scale,
offset: [size * 0.8 * oneOverScale, size * oneOverScale * 0.4],
onRender: state => {
state.phi = Date.now() * 0.0002 % (Math.PI * 2)
state.width = size
state.height = size
state.offset = [size * 0.8 * oneOverScale, size * oneOverScale * 0.4]
try {
const globe = createGlobe(canvas, {
devicePixelRatio: window.devicePixelRatio,
width: size,
height: size,
phi: 0,
theta: 0.1,
dark: 1,
diffuse: 1.4,
mapSamples: 19000,
mapBrightness: 6,
opacity: 0.8,
baseColor: [0.23, 0.23, 0.23],
markerColor: [0.05, 1, 0],
glowColor: [0, 0, 0],
markers: [],
scale,
offset: [size * 0.8 * oneOverScale, size * oneOverScale * 0.4],
onRender: state => {
state.phi = Date.now() * 0.0002 % (Math.PI * 2)
state.width = size
state.height = size
state.offset = [size * 0.8 * oneOverScale, size * oneOverScale * 0.4]
state.markers = Object.values(markers).filter(m => m)
state.markers = Object.values(markers).filter(m => m)
}
})
return {
destroy () {
globe.destroy()
}
}
})
return {
destroy () {
globe.destroy()
} catch (e) {
console.error('Failed to create globe', e)
return {
destroy () {}
}
}
}