[READ-ONLY] Mirror of https://github.com/probablykasper/ferrum. Music library app for Mac, Linux and Windows
ferrum.kasper.space
electron
linux
macos
music
music-library
music-player
napi
windows
Handle canvas resize
+59
-4
+38
src/lib/visualizer/ShaderToyLite.js
+38
src/lib/visualizer/ShaderToyLite.js
···
441
441
}
442
442
}
443
443
444
+
var recreateTextures = () => {
445
+
;['A', 'B', 'C', 'D'].forEach((key) => {
446
+
if (atexture[key]) {
447
+
// Delete old textures
448
+
gl.deleteTexture(atexture[key])
449
+
gl.deleteTexture(btexture[key])
450
+
gl.deleteFramebuffer(aframebuf[key])
451
+
gl.deleteFramebuffer(bframebuf[key])
452
+
453
+
// Create new textures with updated canvas size
454
+
atexture[key] = createTexture()
455
+
btexture[key] = createTexture()
456
+
aframebuf[key] = createFrameBuffer(atexture[key])
457
+
bframebuf[key] = createFrameBuffer(btexture[key])
458
+
flip[key] = false
459
+
}
460
+
})
461
+
}
462
+
463
+
this.resize = () => {
464
+
// Update WebGL viewport
465
+
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)
466
+
467
+
// Recreate all textures and framebuffers with new dimensions
468
+
recreateTextures()
469
+
470
+
// Reset timing to avoid glitches
471
+
var now = Date.now()
472
+
var elapsed = prevDrawTime - firstDrawTime
473
+
firstDrawTime = now - elapsed
474
+
prevDrawTime = now
475
+
476
+
// Force a redraw
477
+
if (!isPlaying) {
478
+
draw()
479
+
}
480
+
}
481
+
444
482
setup()
445
483
}
+21
-4
src/lib/visualizer/Visualizer.svelte
+21
-4
src/lib/visualizer/Visualizer.svelte
···
7
7
8
8
export let on_close: () => void
9
9
10
+
let canvas: HTMLCanvasElement | undefined
10
11
const canvas_id = 'visualizer'
12
+
let toy: ShaderToyLite | undefined
11
13
12
14
onMount(() => {
13
15
const a = `
···
51
53
fragColor = vec4(col.rgb, 1.);
52
54
}
53
55
`
54
-
const toy = new ShaderToyLite(canvas_id)
56
+
toy = new ShaderToyLite(canvas_id)
55
57
toy.setCommon('')
56
58
toy.setBufferA({ source: a })
57
59
toy.setImage({ source: image, iChannel0: 'A' })
58
60
toy.play()
59
61
console.log('start')
60
62
const visualizer = start_visualizer(audioContext, mediaElementSource, (info) => {
61
-
toy.setStream(info.stream)
62
-
toy.setVolume(info.volume)
63
+
toy?.setStream(info.stream)
64
+
toy?.setVolume(info.volume)
63
65
})
64
66
65
67
return () => {
···
74
76
on_close()
75
77
}
76
78
}}
79
+
on:resize={() => {
80
+
if (canvas) {
81
+
canvas.width = window.innerWidth
82
+
canvas.height = window.innerHeight
83
+
toy?.resize()
84
+
}
85
+
}}
77
86
/>
78
87
79
88
<!-- svelte-ignore a11y_no_static_element_interactions -->
80
89
<div class="fixed top-0 left-0 flex h-screen w-screen items-center justify-center">
81
-
<canvas id={canvas_id} width="840" height="472"></canvas>
90
+
<div class="relative">
91
+
<canvas
92
+
bind:this={canvas}
93
+
class="size-full"
94
+
id={canvas_id}
95
+
width={window.innerWidth}
96
+
height={window.innerHeight}
97
+
></canvas>
98
+
</div>
82
99
</div>