extern/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-04-01 19:57:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update:Year in review card prevent text overflow for narrator, author and genre #2373

Browse Source
This commit is contained in:
advplyr 2023-12-21 09:44:37 -06:00
parent 2b7122c744
commit 46ec59c74e
1 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/components/stats/YearInReview.vue
View File

@ -37,10 +37,24 @@ export default {
ctx.stroke() ctx.stroke()
} }
const addText = (text, fontSize, fontWeight, color, letterSpacing, x, y) => { const addText = (text, fontSize, fontWeight, color, letterSpacing, x, y, maxWidth = 0) => {
ctx.fillStyle = color ctx.fillStyle = color
ctx.font = `${fontWeight} ${fontSize} Source Sans Pro` ctx.font = `${fontWeight} ${fontSize} Source Sans Pro`
ctx.letterSpacing = letterSpacing ctx.letterSpacing = letterSpacing
// 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})`)
}
}
ctx.fillText(text, x, y) ctx.fillText(text, x, y)
} }
@ -131,21 +145,21 @@ export default {
const topNarrator = this.yearStats.mostListenedNarrator const topNarrator = this.yearStats.mostListenedNarrator
if (topNarrator) { if (topNarrator) {
addText('TOP NARRATOR', '12px', 'normal', tanColor, '1px', 20, 260) addText('TOP NARRATOR', '12px', 'normal', tanColor, '1px', 20, 260)
addText(topNarrator.name, '18px', 'bolder', 'white', '0px', 20, 282) addText(topNarrator.name, '18px', 'bolder', 'white', '0px', 20, 282, 180)
addText(this.$elapsedPrettyExtended(topNarrator.time, true, false), '14px', 'lighter', 'white', '1px', 20, 302) addText(this.$elapsedPrettyExtended(topNarrator.time, true, false), '14px', 'lighter', 'white', '1px', 20, 302)
} }
const topGenre = this.yearStats.topGenres[0] const topGenre = this.yearStats.topGenres[0]
if (topGenre) { if (topGenre) {
addText('TOP GENRE', '12px', 'normal', tanColor, '1px', 215, 260) addText('TOP GENRE', '12px', 'normal', tanColor, '1px', 215, 260)
addText(topGenre.genre, '18px', 'bolder', 'white', '0px', 215, 282) addText(topGenre.genre, '18px', 'bolder', 'white', '0px', 215, 282, 180)
addText(this.$elapsedPrettyExtended(topGenre.time, true, false), '14px', 'lighter', 'white', '1px', 215, 302) addText(this.$elapsedPrettyExtended(topGenre.time, true, false), '14px', 'lighter', 'white', '1px', 215, 302)
} }
const topAuthor = this.yearStats.topAuthors[0] const topAuthor = this.yearStats.topAuthors[0]
if (topAuthor) { if (topAuthor) {
addText('TOP AUTHOR', '12px', 'normal', tanColor, '1px', 20, 335) addText('TOP AUTHOR', '12px', 'normal', tanColor, '1px', 20, 335)
addText(topAuthor.name, '18px', 'bolder', 'white', '0px', 20, 357) addText(topAuthor.name, '18px', 'bolder', 'white', '0px', 20, 357, 180)
addText(this.$elapsedPrettyExtended(topAuthor.time, true, false), '14px', 'lighter', 'white', '1px', 20, 377) addText(this.$elapsedPrettyExtended(topAuthor.time, true, false), '14px', 'lighter', 'white', '1px', 20, 377)
} }