From e10c8093c97525bce31e77b6c224ead851b1ffd8 Mon Sep 17 00:00:00 2001 From: Vito0912 <86927734+Vito0912@users.noreply.github.com> Date: Fri, 9 Aug 2024 18:48:29 +0200 Subject: [PATCH 1/3] localization of year in review --- client/components/stats/YearInReview.vue | 26 +++++++++---------- .../components/stats/YearInReviewServer.vue | 24 ++++++++--------- client/components/stats/YearInReviewShort.vue | 8 +++--- client/strings/en-us.json | 19 ++++++++++++++ 4 files changed, 48 insertions(+), 29 deletions(-) diff --git a/client/components/stats/YearInReview.vue b/client/components/stats/YearInReview.vue index 5991cf6b..8564576b 100644 --- a/client/components/stats/YearInReview.vue +++ b/client/components/stats/YearInReview.vue @@ -150,12 +150,12 @@ export default { // Top text addText('audiobookshelf', '28px', 'normal', tanColor, '0px', 65, 28) - addText(`${this.year} YEAR IN REVIEW`, '18px', 'bold', 'white', '1px', 65, 51) + addText(`${this.year} ${this.$strings.StatsYearInReview}`, '18px', 'bold', 'white', '1px', 65, 51) // Top left box createRoundedRect(50, 100, 340, 160) addText(this.yearStats.numBooksFinished, '64px', 'bold', 'white', '0px', 160, 165) - addText('books finished', '28px', 'normal', tanColor, '0px', 160, 210) + addText(this.$strings.StatsBooksFinished, '28px', 'normal', tanColor, '0px', 160, 210) const readIconPath = new Path2D() readIconPath.addPath(new Path2D('M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z'), { a: 2, d: 2, e: 100, f: 160 }) ctx.fillStyle = '#ffffff' @@ -164,40 +164,40 @@ export default { // Box top right createRoundedRect(410, 100, 340, 160) addText(this.$elapsedPrettyExtended(this.yearStats.totalListeningTime, true, false), '40px', 'bold', 'white', '0px', 500, 165) - addText('spent listening', '28px', 'normal', tanColor, '0px', 500, 205) + addText(this.$strings.StatsSpentListening, '28px', 'normal', tanColor, '0px', 500, 205) addIcon('watch_later', 'white', '52px', 440, 180) // Box bottom left createRoundedRect(50, 280, 340, 160) addText(this.yearStats.totalListeningSessions, '64px', 'bold', 'white', '0px', 160, 345) - addText('sessions', '28px', 'normal', tanColor, '1px', 160, 390) + addText(this.$strings.StatsSessions, '28px', 'normal', tanColor, '1px', 160, 390) addIcon('headphones', 'white', '52px', 95, 360) // Box bottom right createRoundedRect(410, 280, 340, 160) addText(this.yearStats.numBooksListened, '64px', 'bold', 'white', '0px', 500, 345) - addText('books listened to', '28px', 'normal', tanColor, '0px', 500, 390) + addText(this.$strings.StatsBooksListenedTo, '28px', 'normal', tanColor, '0px', 500, 390) addIcon('local_library', 'white', '52px', 440, 360) if (!this.variant) { // Text stats const topNarrator = this.yearStats.mostListenedNarrator if (topNarrator) { - addText('TOP NARRATOR', '24px', 'normal', tanColor, '1px', 70, 520) + addText(this.$strings.StatsTopNarrator, '24px', 'normal', tanColor, '1px', 70, 520) addText(topNarrator.name, '36px', 'bolder', 'white', '0px', 70, 564, 330) addText(this.$elapsedPrettyExtended(topNarrator.time, true, false), '24px', 'lighter', 'white', '1px', 70, 599) } const topGenre = this.yearStats.topGenres[0] if (topGenre) { - addText('TOP GENRE', '24px', 'normal', tanColor, '1px', 430, 520) + addText(this.$strings.StatsTopGenre, '24px', 'normal', tanColor, '1px', 430, 520) addText(topGenre.genre, '36px', 'bolder', 'white', '0px', 430, 564, 330) addText(this.$elapsedPrettyExtended(topGenre.time, true, false), '24px', 'lighter', 'white', '1px', 430, 599) } const topAuthor = this.yearStats.topAuthors[0] if (topAuthor) { - addText('TOP AUTHOR', '24px', 'normal', tanColor, '1px', 70, 670) + addText(this.$strings.StatsTopAuthor, '24px', 'normal', tanColor, '1px', 70, 670) addText(topAuthor.name, '36px', 'bolder', 'white', '0px', 70, 714, 330) addText(this.$elapsedPrettyExtended(topAuthor.time, true, false), '24px', 'lighter', 'white', '1px', 70, 749) } @@ -205,7 +205,7 @@ export default { if (this.yearStats.mostListenedMonth?.time) { const jsdate = new Date(this.year, this.yearStats.mostListenedMonth.month, 1) const monthName = this.$formatJsDate(jsdate, 'LLLL') - addText('TOP MONTH', '24px', 'normal', tanColor, '1px', 430, 670) + addText(this.$strings.StatsTopMonth, '24px', 'normal', tanColor, '1px', 430, 670) addText(monthName, '36px', 'bolder', 'white', '0px', 430, 714, 330) addText(this.$elapsedPrettyExtended(this.yearStats.mostListenedMonth.time, true, false), '24px', 'lighter', 'white', '1px', 430, 749) } @@ -214,7 +214,7 @@ export default { finishedBookCoverImgs = Object.values(finishedBookCoverImgs) if (finishedBookCoverImgs.length > 0) { ctx.textAlign = 'center' - addText('Some books finished this year...', '28px', 'normal', tanColor, '0px', canvas.width / 2, 530) + addText(this.$strings.StatsBooksFinishedThisYear, '28px', 'normal', tanColor, '0px', canvas.width / 2, 530) for (let i = 0; i < Math.min(5, finishedBookCoverImgs.length); i++) { let imgToAdd = finishedBookCoverImgs[i] @@ -224,14 +224,14 @@ export default { } else if (this.variant === 2) { // Text stats if (this.yearStats.topAuthors.length) { - addText('TOP AUTHORS', '24px', 'normal', tanColor, '1px', 70, 524) + addText(this.$strings.StatsTopAuthors, '24px', 'normal', tanColor, '1px', 70, 524) for (let i = 0; i < this.yearStats.topAuthors.length; i++) { addText(this.yearStats.topAuthors[i].name, '36px', 'bolder', 'white', '0px', 70, 584 + i * 60, 330) } } if (this.yearStats.topGenres.length) { - addText('TOP GENRES', '24px', 'normal', tanColor, '1px', 430, 524) + addText(this.$strings.StatsTopGenres, '24px', 'normal', tanColor, '1px', 430, 524) for (let i = 0; i < this.yearStats.topGenres.length; i++) { addText(this.yearStats.topGenres[i].genre, '36px', 'bolder', 'white', '0px', 430, 584 + i * 60, 330) } @@ -263,7 +263,7 @@ export default { } }) } else { - this.$toast.error('Cannot share natively on this device') + this.$toast.error(this.$strings.ToastErrorCannotShare) } }) }, diff --git a/client/components/stats/YearInReviewServer.vue b/client/components/stats/YearInReviewServer.vue index 7f3a4f55..123a3071 100644 --- a/client/components/stats/YearInReviewServer.vue +++ b/client/components/stats/YearInReviewServer.vue @@ -141,33 +141,33 @@ export default { // Top text addText('audiobookshelf', '28px', 'normal', tanColor, '0px', 65, 28) - addText(`${this.year} YEAR IN REVIEW`, '18px', 'bold', 'white', '1px', 65, 51) + addText(`${this.year} ${this.$strings.StatsYearInReview}`, '18px', 'bold', 'white', '1px', 65, 51) // Top left box createRoundedRect(40, 100, 230, 100) ctx.textAlign = 'center' addText(this.yearStats.numBooksAdded, '48px', 'bold', 'white', '0px', 155, 140) - addText('books added', '18px', 'normal', tanColor, '0px', 155, 170) + addText(this.$strings.StatsBooksAdded, '18px', 'normal', tanColor, '0px', 155, 170) // Box top right createRoundedRect(285, 100, 230, 100) addText(this.yearStats.numAuthorsAdded, '48px', 'bold', 'white', '0px', 400, 140) - addText('authors added', '18px', 'normal', tanColor, '0px', 400, 170) + addText(this.$strings.StatsAuthorsAdded, '18px', 'normal', tanColor, '0px', 400, 170) // Box bottom left createRoundedRect(530, 100, 230, 100) addText(this.yearStats.numListeningSessions, '48px', 'bold', 'white', '0px', 645, 140) - addText('sessions', '18px', 'normal', tanColor, '1px', 645, 170) + addText(this.$strings.StatsSessions, '18px', 'normal', tanColor, '1px', 645, 170) // Text stats if (this.yearStats.totalBooksAddedSize) { - addText('Your book collection grew to...', '24px', 'normal', tanColor, '0px', canvas.width / 2, 260) + addText(this.$strings.StatsCollectionGrewTo, '24px', 'normal', tanColor, '0px', canvas.width / 2, 260) addText(this.$bytesPretty(this.yearStats.totalBooksSize), '36px', 'bolder', 'white', '0px', canvas.width / 2, 300) addText('+' + this.$bytesPretty(this.yearStats.totalBooksAddedSize), '20px', 'lighter', 'white', '0px', canvas.width / 2, 330) } if (this.yearStats.totalBooksAddedDuration) { - addText('With a total duration of...', '24px', 'normal', tanColor, '0px', canvas.width / 2, 400) + addText(this.$strings.StatsTotalDuration, '24px', 'normal', tanColor, '0px', canvas.width / 2, 400) addText(this.$elapsedPrettyExtended(this.yearStats.totalBooksDuration, true, false), '36px', 'bolder', 'white', '0px', canvas.width / 2, 440) addText('+' + this.$elapsedPrettyExtended(this.yearStats.totalBooksAddedDuration, true, false), '20px', 'lighter', 'white', '0px', canvas.width / 2, 470) } @@ -176,7 +176,7 @@ export default { // Bottom images imgsToAdd = Object.values(imgsToAdd) if (imgsToAdd.length > 0) { - addText('Some additions include...', '24px', 'normal', tanColor, '0px', canvas.width / 2, 540) + addText(this.$strings.StatsBooksAdditional, '24px', 'normal', tanColor, '0px', canvas.width / 2, 540) for (let i = 0; i < Math.min(5, imgsToAdd.length); i++) { let imgToAdd = imgsToAdd[i] @@ -187,14 +187,14 @@ export default { // Text stats ctx.textAlign = 'left' if (this.yearStats.topAuthors.length) { - addText('TOP AUTHORS', '24px', 'normal', tanColor, '1px', 70, 549) + addText(this.$strings.StatsTopAuthors, '24px', 'normal', tanColor, '1px', 70, 549) for (let i = 0; i < this.yearStats.topAuthors.length; i++) { addText(this.yearStats.topAuthors[i].name, '36px', 'bolder', 'white', '0px', 70, 609 + i * 60, 330) } } if (this.yearStats.topNarrators.length) { - addText('TOP NARRATORS', '24px', 'normal', tanColor, '1px', 430, 549) + addText(this.$strings.StatsTopNarrators, '24px', 'normal', tanColor, '1px', 430, 549) for (let i = 0; i < this.yearStats.topNarrators.length; i++) { addText(this.yearStats.topNarrators[i].name, '36px', 'bolder', 'white', '0px', 430, 609 + i * 60, 330) } @@ -203,14 +203,14 @@ export default { // Text stats ctx.textAlign = 'left' if (this.yearStats.topAuthors.length) { - addText('TOP AUTHORS', '24px', 'normal', tanColor, '1px', 70, 549) + addText(this.$strings.StatsTopAuthors, '24px', 'normal', tanColor, '1px', 70, 549) for (let i = 0; i < this.yearStats.topAuthors.length; i++) { addText(this.yearStats.topAuthors[i].name, '36px', 'bolder', 'white', '0px', 70, 609 + i * 60, 330) } } if (this.yearStats.topGenres.length) { - addText('TOP GENRES', '24px', 'normal', tanColor, '1px', 430, 549) + addText(this.$strings.StatsTopGenres, '24px', 'normal', tanColor, '1px', 430, 549) for (let i = 0; i < this.yearStats.topGenres.length; i++) { addText(this.yearStats.topGenres[i].genre, '36px', 'bolder', 'white', '0px', 430, 609 + i * 60, 330) } @@ -239,7 +239,7 @@ export default { } }) } else { - this.$toast.error('Cannot share natively on this device') + this.$toast.error(this.$strings.ToastErrorCannotShare) } }) }, diff --git a/client/components/stats/YearInReviewShort.vue b/client/components/stats/YearInReviewShort.vue index 5d359271..9bcd8735 100644 --- a/client/components/stats/YearInReviewShort.vue +++ b/client/components/stats/YearInReviewShort.vue @@ -131,12 +131,12 @@ export default { // Top text addText('audiobookshelf', '28px', 'normal', tanColor, '0px', 65, 28) - addText(`${this.year} YEAR IN REVIEW`, '18px', 'bold', 'white', '1px', 65, 51) + addText(`${this.year} ${this.$strings.StatsYearInReview}`, '18px', 'bold', 'white', '1px', 65, 51) // Top left box createRoundedRect(15, 75, 280, 110) addText(this.yearStats.numBooksFinished, '48px', 'bold', 'white', '0px', 105, 120) - addText('books finished', '20px', 'normal', tanColor, '0px', 105, 155) + addText(this.$strings.StatsBooksFinished, '20px', 'normal', tanColor, '0px', 105, 155) const readIconPath = new Path2D() readIconPath.addPath(new Path2D('M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z'), { a: 1.5, d: 1.5, e: 55, f: 115 }) ctx.fillStyle = '#ffffff' @@ -144,7 +144,7 @@ export default { createRoundedRect(305, 75, 280, 110) addText(this.yearStats.numBooksListened, '48px', 'bold', 'white', '0px', 400, 120) - addText('books listened to', '20px', 'normal', tanColor, '0px', 400, 155) + addText(this.$strings.StatsBooksListenedTo, '20px', 'normal', tanColor, '0px', 400, 155) addIcon('local_library', 'white', '42px', 345, 130) this.canvas = canvas @@ -169,7 +169,7 @@ export default { } }) } else { - this.$toast.error('Cannot share natively on this device') + this.$toast.error(this.$strings.ToastErrorCannotShare) } }) }, diff --git a/client/strings/en-us.json b/client/strings/en-us.json index 111f9ef9..60e56ae3 100644 --- a/client/strings/en-us.json +++ b/client/strings/en-us.json @@ -771,6 +771,24 @@ "PlaceholderNewPlaylist": "New playlist name", "PlaceholderSearch": "Search..", "PlaceholderSearchEpisode": "Search episode..", + "StatsAuthorsAdded": "authors added", + "StatsBooksListenedTo": "books listened to", + "StatsBooksAdded": "books added", + "StatsBooksAdditional": "Some additions include…", + "StatsBooksFinished": "books finished", + "StatsBooksFinishedThisYear": "Some books finished this year…", + "StatsCollectionGrewTo": "Your book collection grew to…", + "StatsSessions": "sessions", + "StatsSpentListening": "spent listening", + "StatsTotalDuration": "With a total duration of…", + "StatsTopAuthor": "TOP AUTHOR", + "StatsTopAuthors": "TOP AUTHORS", + "StatsTopGenre": "TOP GENRE", + "StatsTopGenres": "TOP GENRES", + "StatsTopMonth": "TOP MONTH", + "StatsTopNarrator": "TOP NARRATOR", + "StatsTopNarrators": "TOP NARRATORS", + "StatsYearInReview": "YEAR IN REVIEW", "ToastAccountUpdateFailed": "Failed to update account", "ToastAccountUpdateSuccess": "Account updated", "ToastAuthorImageRemoveFailed": "Failed to remove image", @@ -806,6 +824,7 @@ "ToastCollectionUpdateSuccess": "Collection updated", "ToastDeleteFileFailed": "Failed to delete file", "ToastDeleteFileSuccess": "File deleted", + "ToastErrorCannotShare": "Cannot share natively on this device", "ToastFailedToLoadData": "Failed to load data", "ToastItemCoverUpdateFailed": "Failed to update item cover", "ToastItemCoverUpdateSuccess": "Item cover updated", From e701d1ab6a9879f04bf8285f44f11e88a02787f3 Mon Sep 17 00:00:00 2001 From: Vito0912 <86927734+Vito0912@users.noreply.github.com> Date: Fri, 9 Aug 2024 18:59:20 +0200 Subject: [PATCH 2/3] now? please --- client/strings/en-us.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/strings/en-us.json b/client/strings/en-us.json index 60e56ae3..b6e5f651 100644 --- a/client/strings/en-us.json +++ b/client/strings/en-us.json @@ -772,11 +772,11 @@ "PlaceholderSearch": "Search..", "PlaceholderSearchEpisode": "Search episode..", "StatsAuthorsAdded": "authors added", - "StatsBooksListenedTo": "books listened to", "StatsBooksAdded": "books added", "StatsBooksAdditional": "Some additions include…", "StatsBooksFinished": "books finished", "StatsBooksFinishedThisYear": "Some books finished this year…", + "StatsBooksListenedTo": "books listened to", "StatsCollectionGrewTo": "Your book collection grew to…", "StatsSessions": "sessions", "StatsSpentListening": "spent listening", From f0c6dccadbdaed7e3946f6f6967785793e887aec Mon Sep 17 00:00:00 2001 From: Vito0912 <86927734+Vito0912@users.noreply.github.com> Date: Fri, 9 Aug 2024 19:24:43 +0200 Subject: [PATCH 3/3] Added max width --- client/components/stats/YearInReview.vue | 20 ++++++++++--------- .../components/stats/YearInReviewServer.vue | 12 ++++++----- client/components/stats/YearInReviewShort.vue | 6 ++++-- client/strings/en-us.json | 2 +- 4 files changed, 23 insertions(+), 17 deletions(-) diff --git a/client/components/stats/YearInReview.vue b/client/components/stats/YearInReview.vue index 8564576b..54f0e65e 100644 --- a/client/components/stats/YearInReview.vue +++ b/client/components/stats/YearInReview.vue @@ -132,6 +132,8 @@ export default { ctx.restore() } + const twoColumnWidth = 210 + ctx.globalAlpha = 1 ctx.textBaseline = 'middle' @@ -150,12 +152,12 @@ export default { // Top text addText('audiobookshelf', '28px', 'normal', tanColor, '0px', 65, 28) - addText(`${this.year} ${this.$strings.StatsYearInReview}`, '18px', 'bold', 'white', '1px', 65, 51) + addText(`${this.year} ${this.$strings.StatsYearInReview}`, '18px', 'bold', 'white', '1px', 65, 51,) // Top left box createRoundedRect(50, 100, 340, 160) addText(this.yearStats.numBooksFinished, '64px', 'bold', 'white', '0px', 160, 165) - addText(this.$strings.StatsBooksFinished, '28px', 'normal', tanColor, '0px', 160, 210) + addText(this.$strings.StatsBooksFinished, '28px', 'normal', tanColor, '0px', 160, 210, twoColumnWidth) const readIconPath = new Path2D() readIconPath.addPath(new Path2D('M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z'), { a: 2, d: 2, e: 100, f: 160 }) ctx.fillStyle = '#ffffff' @@ -164,40 +166,40 @@ export default { // Box top right createRoundedRect(410, 100, 340, 160) addText(this.$elapsedPrettyExtended(this.yearStats.totalListeningTime, true, false), '40px', 'bold', 'white', '0px', 500, 165) - addText(this.$strings.StatsSpentListening, '28px', 'normal', tanColor, '0px', 500, 205) + addText(this.$strings.StatsSpentListening, '28px', 'normal', tanColor, '0px', 500, 205, twoColumnWidth) addIcon('watch_later', 'white', '52px', 440, 180) // Box bottom left createRoundedRect(50, 280, 340, 160) addText(this.yearStats.totalListeningSessions, '64px', 'bold', 'white', '0px', 160, 345) - addText(this.$strings.StatsSessions, '28px', 'normal', tanColor, '1px', 160, 390) + addText(this.$strings.StatsSessions, '28px', 'normal', tanColor, '1px', 160, 390, twoColumnWidth) addIcon('headphones', 'white', '52px', 95, 360) // Box bottom right createRoundedRect(410, 280, 340, 160) addText(this.yearStats.numBooksListened, '64px', 'bold', 'white', '0px', 500, 345) - addText(this.$strings.StatsBooksListenedTo, '28px', 'normal', tanColor, '0px', 500, 390) + addText(this.$strings.StatsBooksListenedTo, '28px', 'normal', tanColor, '0px', 500, 390, twoColumnWidth) addIcon('local_library', 'white', '52px', 440, 360) if (!this.variant) { // Text stats const topNarrator = this.yearStats.mostListenedNarrator if (topNarrator) { - addText(this.$strings.StatsTopNarrator, '24px', 'normal', tanColor, '1px', 70, 520) + addText(this.$strings.StatsTopNarrator, '24px', 'normal', tanColor, '1px', 70, 520, 330) addText(topNarrator.name, '36px', 'bolder', 'white', '0px', 70, 564, 330) addText(this.$elapsedPrettyExtended(topNarrator.time, true, false), '24px', 'lighter', 'white', '1px', 70, 599) } const topGenre = this.yearStats.topGenres[0] if (topGenre) { - addText(this.$strings.StatsTopGenre, '24px', 'normal', tanColor, '1px', 430, 520) + addText(this.$strings.StatsTopGenre, '24px', 'normal', tanColor, '1px', 430, 520, 330) addText(topGenre.genre, '36px', 'bolder', 'white', '0px', 430, 564, 330) addText(this.$elapsedPrettyExtended(topGenre.time, true, false), '24px', 'lighter', 'white', '1px', 430, 599) } const topAuthor = this.yearStats.topAuthors[0] if (topAuthor) { - addText(this.$strings.StatsTopAuthor, '24px', 'normal', tanColor, '1px', 70, 670) + addText(this.$strings.StatsTopAuthor, '24px', 'normal', tanColor, '1px', 70, 670, 330) addText(topAuthor.name, '36px', 'bolder', 'white', '0px', 70, 714, 330) addText(this.$elapsedPrettyExtended(topAuthor.time, true, false), '24px', 'lighter', 'white', '1px', 70, 749) } @@ -205,7 +207,7 @@ export default { if (this.yearStats.mostListenedMonth?.time) { const jsdate = new Date(this.year, this.yearStats.mostListenedMonth.month, 1) const monthName = this.$formatJsDate(jsdate, 'LLLL') - addText(this.$strings.StatsTopMonth, '24px', 'normal', tanColor, '1px', 430, 670) + addText(this.$strings.StatsTopMonth, '24px', 'normal', tanColor, '1px', 430, 670, 330) addText(monthName, '36px', 'bolder', 'white', '0px', 430, 714, 330) addText(this.$elapsedPrettyExtended(this.yearStats.mostListenedMonth.time, true, false), '24px', 'lighter', 'white', '1px', 430, 749) } diff --git a/client/components/stats/YearInReviewServer.vue b/client/components/stats/YearInReviewServer.vue index 123a3071..9843a64d 100644 --- a/client/components/stats/YearInReviewServer.vue +++ b/client/components/stats/YearInReviewServer.vue @@ -123,6 +123,8 @@ export default { ctx.restore() } + const threeColumnTextWidth = 200 + ctx.globalAlpha = 1 ctx.textBaseline = 'middle' @@ -147,17 +149,17 @@ export default { createRoundedRect(40, 100, 230, 100) ctx.textAlign = 'center' addText(this.yearStats.numBooksAdded, '48px', 'bold', 'white', '0px', 155, 140) - addText(this.$strings.StatsBooksAdded, '18px', 'normal', tanColor, '0px', 155, 170) + addText(this.$strings.StatsBooksAdded, '18px', 'normal', tanColor, '0px', 155, 170, threeColumnTextWidth) // Box top right createRoundedRect(285, 100, 230, 100) addText(this.yearStats.numAuthorsAdded, '48px', 'bold', 'white', '0px', 400, 140) - addText(this.$strings.StatsAuthorsAdded, '18px', 'normal', tanColor, '0px', 400, 170) + addText(this.$strings.StatsAuthorsAdded, '18px', 'normal', tanColor, '0px', 400, 170, threeColumnTextWidth) // Box bottom left createRoundedRect(530, 100, 230, 100) addText(this.yearStats.numListeningSessions, '48px', 'bold', 'white', '0px', 645, 140) - addText(this.$strings.StatsSessions, '18px', 'normal', tanColor, '1px', 645, 170) + addText(this.$strings.StatsSessions, '18px', 'normal', tanColor, '1px', 645, 170, threeColumnTextWidth) // Text stats if (this.yearStats.totalBooksAddedSize) { @@ -187,7 +189,7 @@ export default { // Text stats ctx.textAlign = 'left' if (this.yearStats.topAuthors.length) { - addText(this.$strings.StatsTopAuthors, '24px', 'normal', tanColor, '1px', 70, 549) + addText(this.$strings.StatsTopAuthors, '24px', 'normal', tanColor, '1px', 70, 549, 330) for (let i = 0; i < this.yearStats.topAuthors.length; i++) { addText(this.yearStats.topAuthors[i].name, '36px', 'bolder', 'white', '0px', 70, 609 + i * 60, 330) } @@ -203,7 +205,7 @@ export default { // Text stats ctx.textAlign = 'left' if (this.yearStats.topAuthors.length) { - addText(this.$strings.StatsTopAuthors, '24px', 'normal', tanColor, '1px', 70, 549) + addText(this.$strings.StatsTopAuthors, '24px', 'normal', tanColor, '1px', 70, 549, 330) for (let i = 0; i < this.yearStats.topAuthors.length; i++) { addText(this.yearStats.topAuthors[i].name, '36px', 'bolder', 'white', '0px', 70, 609 + i * 60, 330) } diff --git a/client/components/stats/YearInReviewShort.vue b/client/components/stats/YearInReviewShort.vue index 9bcd8735..8a87e224 100644 --- a/client/components/stats/YearInReviewShort.vue +++ b/client/components/stats/YearInReviewShort.vue @@ -113,6 +113,8 @@ export default { ctx.restore() } + const twoColumnWidth = 180 + ctx.globalAlpha = 1 ctx.textBaseline = 'middle' @@ -136,7 +138,7 @@ export default { // Top left box createRoundedRect(15, 75, 280, 110) addText(this.yearStats.numBooksFinished, '48px', 'bold', 'white', '0px', 105, 120) - addText(this.$strings.StatsBooksFinished, '20px', 'normal', tanColor, '0px', 105, 155) + addText(this.$strings.StatsBooksFinished, '20px', 'normal', tanColor, '0px', 105, 155, twoColumnWidth) const readIconPath = new Path2D() readIconPath.addPath(new Path2D('M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z'), { a: 1.5, d: 1.5, e: 55, f: 115 }) ctx.fillStyle = '#ffffff' @@ -144,7 +146,7 @@ export default { createRoundedRect(305, 75, 280, 110) addText(this.yearStats.numBooksListened, '48px', 'bold', 'white', '0px', 400, 120) - addText(this.$strings.StatsBooksListenedTo, '20px', 'normal', tanColor, '0px', 400, 155) + addText(this.$strings.StatsBooksListenedTo, '20px', 'normal', tanColor, '0px', 400, 155, twoColumnWidth) addIcon('local_library', 'white', '42px', 345, 130) this.canvas = canvas diff --git a/client/strings/en-us.json b/client/strings/en-us.json index b6e5f651..a8740b14 100644 --- a/client/strings/en-us.json +++ b/client/strings/en-us.json @@ -780,7 +780,6 @@ "StatsCollectionGrewTo": "Your book collection grew to…", "StatsSessions": "sessions", "StatsSpentListening": "spent listening", - "StatsTotalDuration": "With a total duration of…", "StatsTopAuthor": "TOP AUTHOR", "StatsTopAuthors": "TOP AUTHORS", "StatsTopGenre": "TOP GENRE", @@ -788,6 +787,7 @@ "StatsTopMonth": "TOP MONTH", "StatsTopNarrator": "TOP NARRATOR", "StatsTopNarrators": "TOP NARRATORS", + "StatsTotalDuration": "With a total duration of…", "StatsYearInReview": "YEAR IN REVIEW", "ToastAccountUpdateFailed": "Failed to update account", "ToastAccountUpdateSuccess": "Account updated",