Skip to content

fix(holiday): use standard Wikimedia thumbnail size and load images once #1278

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Mygod merged 2 commits into from
Nov 1, 2026
Merged

fix(holiday): use standard Wikimedia thumbnail size and load images once #1278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f3ec583
fix(holiday): use standard Wikimedia thumbnail size and load images once
claude Oct 31, 2026
e31bbf6
fix(holiday): rely on the naturalWidth check for failed images
Mygod Nov 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions config/default.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,8 +216,8 @@
"name": "Halloween",
"enabled": true,
"images": [
"https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Fluent_Emoji_flat_1f383.svg/640px-Fluent_Emoji_flat_1f383.svg.png",
"https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Ghost.svg/640px-Ghost.svg.png"
"https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Fluent_Emoji_flat_1f383.svg/120px-Fluent_Emoji_flat_1f383.svg.png",
"https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Ghost.svg/120px-Ghost.svg.png"
],
"imageScale": 2,
"startDay": 29,
Expand Down
22 changes: 17 additions & 5 deletions src/features/holiday/HolidayAnimations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ export class HolidayAnimations {
this.imageWidth = 15 * scale
this.baseImages = images
this.images = []
/** @type {Map<string, HTMLImageElement>} */
this.loaded = new Map()
this.minScale = 0.3
this.interval = null
this.canvas = /** @type {HTMLCanvasElement} */ (
Expand Down Expand Up @@ -39,12 +41,10 @@ export class HolidayAnimations {
this.setCanvasSize()
this.ctx.clearRect(0, 0, this.w, this.h)
this.images.forEach((item) => {
item.image = new Image()
item.image.style.height = item.height
item.image.style.width = item.width
item.image.src = item.src
const image = this.loaded.get(item.src)
if (!image.complete || !image.naturalWidth) return
this.ctx.globalAlpha = item.opacity
this.ctx.drawImage(item.image, item.x, item.y, item.width, item.height)
this.ctx.drawImage(image, item.x, item.y, item.width, item.height)
})
this.move()
}
Expand All @@ -54,6 +54,18 @@ export class HolidayAnimations {
return
}
this.setCanvasSize()
// Load each source once; creating a new Image every frame re-requested
// any URL that failed to load, every frame
this.baseImages.forEach((src) => {
if (this.loaded.has(src)) return
const image = new Image()
image.onerror = () => {
// eslint-disable-next-line no-console
console.warn('[HolidayEffect] failed to load image', src)
}
image.src = src
this.loaded.set(src, image)
})
for (let a = 0; a < 30; a += 1) {
const scale = Math.random() * (1 - this.minScale) + this.minScale
this.images.push({
Expand Down
Loading