Merge pull request #3262 from Vito0912/lang/add-year-in-review

lang/localization of "year in review"

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} 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, 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('spent listening', '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('sessions', '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('books listened to', '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('TOP NARRATOR', '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('TOP GENRE', '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('TOP AUTHOR', '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('TOP MONTH', '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)
         }
@@ -214,7 +216,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 +226,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 +265,7 @@ export default {
               }
             })
         } else {
-          this.$toast.error('Cannot share natively on this device')
+          this.$toast.error(this.$strings.ToastErrorCannotShare)
         }
       })
     },

client/components/stats/YearInReviewServer.vue

@@ -123,6 +123,8 @@ export default {
         ctx.restore()
       }
 
+      const threeColumnTextWidth = 200
+
       ctx.globalAlpha = 1
       ctx.textBaseline = 'middle'
 
@@ -141,33 +143,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, threeColumnTextWidth)
 
       // 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, threeColumnTextWidth)
 
       // 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, threeColumnTextWidth)
 
       // 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 +178,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 +189,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, 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)
           }
         }
 
         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 +205,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, 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)
           }
         }
 
         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 +241,7 @@ export default {
               }
             })
         } else {
-          this.$toast.error('Cannot share natively on this device')
+          this.$toast.error(this.$strings.ToastErrorCannotShare)
         }
       })
     },

client/components/stats/YearInReviewShort.vue

@@ -113,6 +113,8 @@ export default {
         ctx.restore()
       }
 
+      const twoColumnWidth = 180
+
       ctx.globalAlpha = 1
       ctx.textBaseline = 'middle'
 
@@ -131,12 +133,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, 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('books listened to', '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
@@ -169,7 +171,7 @@ export default {
               }
             })
         } else {
-          this.$toast.error('Cannot share natively on this device')
+          this.$toast.error(this.$strings.ToastErrorCannotShare)
         }
       })
     },

client/strings/en-us.json

@@ -771,6 +771,24 @@
   "PlaceholderNewPlaylist": "New playlist name",
   "PlaceholderSearch": "Search..",
   "PlaceholderSearchEpisode": "Search episode..",
+  "StatsAuthorsAdded": "authors added",
+  "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",
+  "StatsTopAuthor": "TOP AUTHOR",
+  "StatsTopAuthors": "TOP AUTHORS",
+  "StatsTopGenre": "TOP GENRE",
+  "StatsTopGenres": "TOP GENRES",
+  "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",
   "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",