[Enhancement]: Add Multi-Language Support for Yearly Overview Images in Statistics Section

[Heisenberg9469]

Type of Enhancement

Web Interface/Frontend

Describe the Feature/Enhancement

would like to propose adding language support for the statistics section, particularly the yearly overview images. Currently, these images are generated in English only. It would be great if they could also be available in other languages, such as German.

Why would this be helpful?

Adding language support for the yearly overview images would make the statistics more accessible and intuitive for non-English speakers. It would enhance the user experience by allowing users to interact with their listening data in their native language, making the platform more relatable and encouraging regular use.

Future Implementation (Screenshot)

I have attached a screenshot to help visualize the current implementation of the yearly overview images. The feature could potentially work by detecting the language settings of the user’s device or allowing the user to manually select their preferred language for the statistics display. This would then generate the yearly overview images in the chosen language.

Audiobookshelf Server Version

2.12.2

Current Implementation (Screenshot)

I have attached a screenshot to help visualize the current implementation of the yearly overview images. The feature could potentially work by detecting the language settings of the user’s device or allowing the user to manually select their preferred language for the statistics display. This would then generate the yearly overview images in the chosen language.

[advplyr]

This one is a bit trickier since we are generating an image using HTML canvas with hard-coded pixel values. The translated text could be a lot longer causing overflow.

For anyone that might want to tackle this one there are 4 YearInReview components.
https://github.com/advplyr/audiobookshelf/blob/master/client/components/stats/YearInReview.vue

There may be a better way to generate the image but if we keep with this method I already wrote a function for checking the length of the text and truncating it if it overflows.

audiobookshelf/client/components/stats/YearInReview.vue

Lines 58 to 69 in e81b346

	// If maxWidth is specified then continue to remove chars until under maxWidth and add ellipsis
	if (maxWidth) {
	let txtWidth = ctx.measureText(text).width
	while (txtWidth > maxWidth) {
	console.warn(`Text "${text}" is greater than max width ${maxWidth} (width:${txtWidth})`)
	if (text.endsWith('...')) text = text.slice(0, -4) // Repeated checks remove 1 char at a time
	else text = text.slice(0, -3) // First check remove last 3 chars
	text += '...'
	txtWidth = ctx.measureText(text).width
	console.log(`Checking text "${text}" (width:${txtWidth})`)
	}
	}

[Vito0912]

Hey @advplyr,
I'm currently working on adding this.
Could we set a limit in Weblate?
Like a soft-limit so translators know that there is not that much of a space?

@nichwall

[nichwall]

Like limiting how long the string can be in Weblate? I don't think there's a way to limit it per string. Weblate gives a warning if the source string (in English) and the destination string (in another language) have too big of a difference of character count, but it's not a hard limit.

Part of the problem is also the width of specific characters, so even if both strings are 10 characters long, they will take a different amount of horizontal space.

[Heisenberg9469]

I want to say thank you for the really quick response and direct implementation!
These are reasons why I just love the Audiobookshelf project! There is real love in the details.