Added artist list concatenation for albums that have over 10 artists (#…

…4830)

* Added condition to display concatenated text if artist count is over 10. Fixed #4228

* Added string to strings.json. Used globalize.translate()

* Moved code to getArtistLinksHtml function

* Update src/controllers/itemDetails/index.js

Co-authored-by: Bill Thornton <thornbill@users.noreply.github.com>

* Simplify appending other artists string

* Update src/controllers/itemDetails/index.js

Co-authored-by: Bill Thornton <thornbill@users.noreply.github.com>

* Update src/controllers/itemDetails/index.js

Co-authored-by: felix920506 <felix920506@gmail.com>

* Update src/strings/en-us.json

Co-authored-by: felix920506 <felix920506@gmail.com>

---------

Co-authored-by: AJ <ajdlc@protonmail.com>
Co-authored-by: Bill Thornton <thornbill@users.noreply.github.com>
Co-authored-by: felix920506 <felix920506@gmail.com>

src/controllers/itemDetails/index.js

@@ -386,17 +386,25 @@ function reloadUserDataButtons(page, item) {
 
 function getArtistLinksHtml(artists, serverId, context) {
     const html = [];
+    const numberOfArtists = artists.length;
 
-    for (const artist of artists) {
+    for (let i = 0; i < Math.min(numberOfArtists, 10); i++) {
+        const artist = artists[i];
         const href = appRouter.getRouteUrl(artist, {
-            context: context,
+            context,
             itemType: 'MusicArtist',
-            serverId: serverId
+            serverId
         });
         html.push('<a style="color:inherit;" class="button-link" is="emby-linkbutton" href="' + href + '">' + escapeHtml(artist.Name) + '</a>');
     }
 
-    return html.join(' / ');
+    let fullHtml = html.join(' / ');
+
+    if (numberOfArtists > 10) {
+        fullHtml = globalize.translate('AndOtherArtists', fullHtml, numberOfArtists - 10);
+    }
+
+    return fullHtml;
 }
 
 /**

src/strings/en-us.json

@@ -46,6 +46,7 @@
     "AllowTonemappingHelp": "Tone-mapping can transform the dynamic range of a video from HDR to SDR while maintaining image details and colors, which are very important information for representing the original scene. Currently works only with 10bit HDR10, HLG and DoVi videos. This requires the corresponding GPGPU runtime.",
     "AlwaysPlaySubtitles": "Always Play",
     "AlwaysPlaySubtitlesHelp": "Subtitles matching the language preference will be loaded regardless of the audio language.",
+    "AndOtherArtists": "{0} and {1} other artists.",
     "AnyLanguage": "Any Language",
     "Anytime": "Anytime",
     "ApiKeysCaption": "List of the currently enabled API keys",