Added a button allowing song name language switching individually from UI language

TaikoWebUI/Components/ChooseSongNameLanguage.razor

@@ -0,0 +1,54 @@
+@using Blazored.LocalStorage
+@using Microsoft.Extensions.Options
+@using TaikoWebUI.Settings
+@inject NavigationManager NavigationManager
+@inject IOptions<WebUiSettings> Settings
+@inject ILocalStorageService LocalStorage
+
+<MudMenu Icon="@Icons.Material.Filled.Translate" Color="Color.Inherit" Size="Size.Small" Dense="true">
+    <MudText Align="Align.Center" GutterBottom="true">@Localizer["Song Name Language"]</MudText>
+    <MudDivider />
+    @foreach (var culture in supportedCultures)
+    {
+        <MudMenuItem OnClick="() => RequestCultureChange(culture.Key)" OnTouch="() => RequestCultureChange(culture.Key)">@culture.Value</MudMenuItem>
+    }
+</MudMenu>
+
+@code {
+    private readonly Dictionary<CultureInfo, string> supportedCultures = new();
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+        foreach (var language in Settings.Value.SupportedLanguages)
+        {
+            supportedCultures.Add(new CultureInfo(language.CultureCode), language.DisplayName);
+        }
+
+        if (supportedCultures.Count == 0)
+        {
+            supportedCultures.Add(new CultureInfo("en-US"), "English");
+        }
+        
+        var currentSongNameLanguage = await LocalStorage.GetItemAsync<string>("songNameLanguage");
+        
+        if (string.IsNullOrEmpty(currentSongNameLanguage))
+        {
+            await LocalStorage.SetItemAsync("songNameLanguage", "en-US");
+        }
+    }
+
+    private async Task RequestCultureChange(CultureInfo newCulture)
+    {
+        var currentSongNameLanguage = await LocalStorage.GetItemAsync<string>("songNameLanguage");
+        
+        if (currentSongNameLanguage == newCulture.Name)
+        {
+            return;
+        }
+
+        await LocalStorage.SetItemAsync("songNameLanguage", newCulture.Name);
+        
+        NavigationManager.NavigateTo(NavigationManager.Uri, forceLoad: true);
+    }
+}

TaikoWebUI/Components/ChooseUILanguage.razor

@@ -1,31 +1,32 @@
-@using System.Globalization;
+@using Microsoft.Extensions.Options
-@using Microsoft.Extensions.Options
 @using TaikoWebUI.Settings
 @inject NavigationManager NavigationManager
-@inject IJSRuntime JSRuntime
+@inject IJSRuntime JsRuntime
 @inject IOptions<WebUiSettings> Settings
 
-<MudMenu Icon="@Icons.Material.Filled.Translate" Color="Color.Inherit" Size="Size.Small" Dense="true">
+<MudMenu Icon="@Icons.Material.Filled.Language" Color="Color.Inherit" Size="Size.Small" Dense="true">
-    @foreach (var culture in SupportedCultures)
+    <MudText Align="Align.Center" GutterBottom="true">@Localizer["UI Language"]</MudText>
+    <MudDivider />
+    @foreach (var culture in supportedCultures)
     {
         <MudMenuItem OnClick="() => RequestCultureChange(culture.Key)" OnTouch="() => RequestCultureChange(culture.Key)">@culture.Value</MudMenuItem>
     }
 </MudMenu>
 
 @code {
-    public Dictionary<CultureInfo, string> SupportedCultures = new();
+    private Dictionary<CultureInfo, string> supportedCultures = new();
 
     protected override void OnInitialized()
     {
         base.OnInitialized();
         foreach (var language in Settings.Value.SupportedLanguages)
         {
-            SupportedCultures.Add(new CultureInfo(language.CultureCode), language.DisplayName);
+            supportedCultures.Add(new CultureInfo(language.CultureCode), language.DisplayName);
         }
 
-        if (SupportedCultures.Count == 0)
+        if (supportedCultures.Count == 0)
         {
-            SupportedCultures.Add(new CultureInfo("en-US"), "English");
+            supportedCultures.Add(new CultureInfo("en-US"), "English");
         }
     }
 
@@ -36,9 +37,8 @@
             return;
         }
 
-        var js = (IJSInProcessRuntime)JSRuntime;
+        var js = (IJSInProcessRuntime)JsRuntime;
         js.InvokeVoid("blazorCulture.set", newCulture.Name);
         NavigationManager.NavigateTo(NavigationManager.Uri, forceLoad: true);
     }
-
 }

TaikoWebUI/Components/MainLayout.razor

@@ -1,6 +1,5 @@
 @inherits LayoutComponentBase
 @inject Blazored.LocalStorage.ILocalStorageService LocalStorage
-@inject HttpClient Client
 @inject AuthService AuthService
 
 <MudThemeProvider IsDarkMode="@isDarkMode" Theme="@taikoWebUiTheme" />
@@ -11,9 +10,10 @@
     <MudAppBar Elevation="0">
         <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="DrawerToggle" Size="Size.Small" />
         <MudSpacer />
-        <MudStack Spacing="2" Row="true">
+        <MudStack Spacing="3" Row="true">
             <MudIconButton Icon="@DarkModeIcon" Size="Size.Small" Color="Color.Inherit" OnClick="ToggleDarkMode" />
-            <ChooseLanguage />
+            <ChooseUILanguage />
+            <ChooseSongNameLanguage />
         </MudStack>
     </MudAppBar>
     <MudDrawer Elevation="0" Style="border-right:1px solid #ededf0" @bind-Open="drawerOpen">

TaikoWebUI/Localization/LocalizationResource.Designer.cs

@@ -752,6 +752,15 @@ namespace TaikoWebUI.Localization {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to .
+        /// </summary>
+        internal static string Song_Name_Language {
+            get {
+                return ResourceManager.GetString("Song Name Language", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to .
         /// </summary>
@@ -824,6 +833,15 @@ namespace TaikoWebUI.Localization {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to .
+        /// </summary>
+        internal static string UI_Language {
+            get {
+                return ResourceManager.GetString("UI Language", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to .
         /// </summary>

TaikoWebUI/Localization/LocalizationResource.en-US.resx

@@ -594,4 +594,10 @@
   <data name="Rows Per Page:" xml:space="preserve">
     <value>Rows Per Page:</value>
   </data>
+  <data name="UI Language" xml:space="preserve">
+    <value>UI Lang</value>
+  </data>
+  <data name="Song Name Language" xml:space="preserve">
+    <value>Song Lang</value>
+  </data>
 </root>

TaikoWebUI/Localization/LocalizationResource.ja.resx

@@ -594,4 +594,10 @@
   <data name="Rows Per Page:" xml:space="preserve">
     <value>1ページ当たりの行数</value>
   </data>
+  <data name="UI Language" xml:space="preserve">
+    <value>UI言語</value>
+  </data>
+  <data name="Song Name Language" xml:space="preserve">
+    <value>曲名言語</value>
+  </data>
 </root>

TaikoWebUI/Localization/LocalizationResource.resx

@@ -390,4 +390,10 @@
   <data name="Total Credits Played" xml:space="preserve">
     <value />
   </data>
+  <data name="UI Language" xml:space="preserve">
+    <value />
+  </data>
+  <data name="Song Name Language" xml:space="preserve">
+    <value />
+  </data>
 </root>

TaikoWebUI/Localization/LocalizationResource.zh-Hans.resx

@@ -591,4 +591,10 @@
   <data name="Rows Per Page:" xml:space="preserve">
     <value>每页行数</value>
   </data>
+  <data name="UI Language" xml:space="preserve">
+    <value>界面语言</value>
+  </data>
+  <data name="Song Name Language" xml:space="preserve">
+    <value>曲名语言</value>
+  </data>
 </root>

TaikoWebUI/Localization/LocalizationResource.zh-Hant.resx

@@ -591,4 +591,10 @@
   <data name="Rows Per Page:" xml:space="preserve">
     <value>每頁行數</value>
   </data>
+  <data name="UI Language" xml:space="preserve">
+    <value>界面語言</value>
+  </data>
+  <data name="Song Name Language" xml:space="preserve">
+    <value>曲名語言</value>
+  </data>
 </root>

TaikoWebUI/Pages/DaniDojo.razor

@@ -1,8 +1,11 @@
-@inject IGameDataService GameDataService
+@using Blazored.LocalStorage
+
+@inject IGameDataService GameDataService
 @inject HttpClient Client
 @inject AuthService AuthService
 @inject IJSRuntime JsRuntime
 @inject NavigationManager NavigationManager
+@inject ILocalStorageService LocalStorage
 
 @page "/Users/{baid:int}/DaniDojo"
 
@@ -148,12 +151,12 @@ else
                                                         </MudItem>
 
                                                         <MudItem xs="9" md="4" Style="display:flex;flex-direction:column;" Class="pl-4">
-                                                            <MudText Typo="Typo.body1" Style="font-weight: bold;">@GameDataService.GetMusicNameBySongId(musicDetailDictionary, danDataOdaiSong.SongNo, @CurrentLanguage)</MudText>
+                                                            <MudText Typo="Typo.body1" Style="font-weight: bold;">@GameDataService.GetMusicNameBySongId(musicDetailDictionary, danDataOdaiSong.SongNo, SongNameLanguage)</MudText>
-                                                            <MudText Typo="Typo.caption">@GameDataService.GetMusicArtistBySongId(musicDetailDictionary, danDataOdaiSong.SongNo, @CurrentLanguage)</MudText>
+                                                            <MudText Typo="Typo.caption">@GameDataService.GetMusicArtistBySongId(musicDetailDictionary, danDataOdaiSong.SongNo, SongNameLanguage)</MudText>
                                                         </MudItem>
 
 
-                                                        @if (bestDataMap.TryGetValue(danId, out var danBestData))
+                                                        @if (_bestDataMap.TryGetValue(danId, out var danBestData))
                                                         {
                                                             if (danBestData.DanBestStageDataList.Count > index)
                                                             {
@@ -218,7 +221,7 @@ else
                                                         }
                                                         <MudStack Spacing="1">
                                                             <MudText Typo="Typo.subtitle2" Style="font-weight:bold;">@Localizer["Result"]</MudText>
-                                                            @if (bestDataMap.TryGetValue(danId, out var danBestData))
+                                                            @if (_bestDataMap.TryGetValue(danId, out var danBestData))
                                                             {
                                                                 if (danBestData.SoulGaugeTotal >= redRequirement) {
                                                                     barClass = "bar-pass-red";
@@ -288,7 +291,7 @@ else
                                                                     }
                                                                     <MudStack Spacing="1">
                                                                         <MudText Typo="Typo.subtitle2" Style="font-weight:bold;">@Localizer["Result"]</MudText>
-                                                                        @if (bestDataMap.TryGetValue(danId, out var danBestData))
+                                                                        @if (_bestDataMap.TryGetValue(danId, out var danBestData))
                                                                         {
                                                                             var bestData = GetAllBestFromData((DanConditionType)border.OdaiType, danBestData);
 
@@ -381,7 +384,7 @@ else
                                                                             </MudCardHeader>
                                                                             <MudCardContent>
                                                                                 <MudText Typo="Typo.subtitle2" Style="font-weight:bold;">@Localizer["Result"]</MudText>
-                                                                            @if (bestDataMap.TryGetValue(danId, out var danBestData) && (danBestData.DanBestStageDataList.Count > songNumber))
+                                                                            @if (_bestDataMap.TryGetValue(danId, out var danBestData) && (danBestData.DanBestStageDataList.Count > songNumber))
                                                                             {
                                                                                 var bestData = GetSongBestFromData((DanConditionType)border.OdaiType, danBestData, songNumber);
                                                                                 if ((DanConditionType)border.OdaiType is DanConditionType.BadCount or DanConditionType.OkCount)

TaikoWebUI/Pages/DaniDojo.razor.cs

@@ -6,12 +6,13 @@ public partial class DaniDojo
 {
     [Parameter]
     public int Baid { get; set; }
-    public string CurrentLanguage { get; set; } = "ja";
+
+    private string? SongNameLanguage { get; set; }
 
     private DanBestDataResponse? response;
     private UserSetting? userSetting;
 
-    private static Dictionary<uint, DanBestData> bestDataMap = new();
+    private static Dictionary<uint, DanBestData> _bestDataMap = new();
     private Dictionary<uint, MusicDetail> musicDetailDictionary = new();
 
     private readonly List<BreadcrumbItem> breadcrumbs = new();
@@ -29,9 +30,9 @@ public partial class DaniDojo
         response.ThrowIfNull();
         response.DanBestDataList.ForEach(data => data.DanBestStageDataList
             .Sort((stageData, otherStageData) => stageData.SongNumber.CompareTo(otherStageData.SongNumber)));
-        bestDataMap = response.DanBestDataList.ToDictionary(data => data.DanId);
+        _bestDataMap = response.DanBestDataList.ToDictionary(data => data.DanId);
 
-        CurrentLanguage = await JsRuntime.InvokeAsync<string>("blazorCulture.get");
+        SongNameLanguage = await LocalStorage.GetItemAsync<string>("songNameLanguage");
 
         userSetting = await Client.GetFromJsonAsync<UserSetting>($"api/UserSettings/{Baid}");
         
@@ -176,12 +177,12 @@ public partial class DaniDojo
         string icon;
         const string notClearIcon = "<image href='/images/dani_NotClear.png' width='24' height='24' style='filter: contrast(0.65)'/>";
 
-        if (!bestDataMap.ContainsKey(danId))
+        if (!_bestDataMap.ContainsKey(danId))
         {
             return notClearIcon;
         }
 
-        var state = bestDataMap[danId].ClearState;
+        var state = _bestDataMap[danId].ClearState;
 
         icon = state is DanClearState.NotClear ? notClearIcon : $"<image href='/images/dani_{state}.png' width='24' height='24' />";
 
@@ -190,7 +191,7 @@ public partial class DaniDojo
 
     private DanClearState GetDanResultState(uint danId)
     {
-        return bestDataMap.ContainsKey(danId) ? bestDataMap[danId].ClearState : DanClearState.NotClear;
+        return _bestDataMap.ContainsKey(danId) ? _bestDataMap[danId].ClearState : DanClearState.NotClear;
     }
 
     private static uint GetSoulGauge(DanData data, bool isGold)
@@ -217,36 +218,36 @@ public partial class DaniDojo
 
     private static long GetTotalScore(uint danId)
     {
-        return bestDataMap.ContainsKey(danId) ? bestDataMap[danId].DanBestStageDataList.Sum(stageData => stageData.HighScore) : 0;
+        return _bestDataMap.ContainsKey(danId) ? _bestDataMap[danId].DanBestStageDataList.Sum(stageData => stageData.HighScore) : 0;
     }
 
     private static long GetTotalGoodHits(uint danId)
     {
-        return bestDataMap.ContainsKey(danId) ? bestDataMap[danId].DanBestStageDataList.Sum(stageData => stageData.GoodCount) : 0;
+        return _bestDataMap.ContainsKey(danId) ? _bestDataMap[danId].DanBestStageDataList.Sum(stageData => stageData.GoodCount) : 0;
     }
 
     private static long GetTotalOkHits(uint danId)
     {
-        return bestDataMap.ContainsKey(danId) ? bestDataMap[danId].DanBestStageDataList.Sum(stageData => stageData.OkCount) : 0;
+        return _bestDataMap.ContainsKey(danId) ? _bestDataMap[danId].DanBestStageDataList.Sum(stageData => stageData.OkCount) : 0;
     }
 
     private static long GetTotalBadHits(uint danId)
     {
-        return bestDataMap.ContainsKey(danId) ? bestDataMap[danId].DanBestStageDataList.Sum(stageData => stageData.BadCount) : 0;
+        return _bestDataMap.ContainsKey(danId) ? _bestDataMap[danId].DanBestStageDataList.Sum(stageData => stageData.BadCount) : 0;
     }
 
     private static long GetTotalDrumrollHits(uint danId)
     {
-        return bestDataMap.ContainsKey(danId) ? bestDataMap[danId].DanBestStageDataList.Sum(stageData => stageData.DrumrollCount) : 0;
+        return _bestDataMap.ContainsKey(danId) ? _bestDataMap[danId].DanBestStageDataList.Sum(stageData => stageData.DrumrollCount) : 0;
     }
 
     private static long GetTotalMaxCombo(uint danId)
     {
-        return bestDataMap.ContainsKey(danId) ? bestDataMap[danId].DanBestStageDataList.Sum(stageData => stageData.ComboCount) : 0;
+        return _bestDataMap.ContainsKey(danId) ? _bestDataMap[danId].DanBestStageDataList.Sum(stageData => stageData.ComboCount) : 0;
     }
 
     private static long GetTotalHits(uint danId)
     {
-        return bestDataMap.ContainsKey(danId) ? bestDataMap[danId].DanBestStageDataList.Sum(stageData => stageData.TotalHitCount) : 0;
+        return _bestDataMap.ContainsKey(danId) ? _bestDataMap[danId].DanBestStageDataList.Sum(stageData => stageData.TotalHitCount) : 0;
     }
 }

TaikoWebUI/Pages/HighScores.razor

@@ -1,10 +1,10 @@
-@inject IGameDataService GameDataService
+@using TaikoWebUI.Utilities;
+
+@inject IGameDataService GameDataService
 @inject HttpClient Client
 @inject AuthService AuthService
-@inject IJSRuntime JsRuntime
 @inject NavigationManager NavigationManager
 @inject Blazored.LocalStorage.ILocalStorageService LocalStorage
-@using TaikoWebUI.Utilities;
 
 @page "/Users/{baid:int}/HighScores"
 

TaikoWebUI/Pages/HighScores.razor.cs

@@ -1,6 +1,4 @@
-using Microsoft.JSInterop;
+namespace TaikoWebUI.Pages;
-
-namespace TaikoWebUI.Pages;
 
 public partial class HighScores
 {
@@ -29,15 +27,15 @@ public partial class HighScores
 
         userSetting = await Client.GetFromJsonAsync<UserSetting>($"api/UserSettings/{Baid}");
 
-        var language = await JsRuntime.InvokeAsync<string>("blazorCulture.get");
+        var songNameLanguage = await LocalStorage.GetItemAsync<string>("songNameLanguage");
         musicDetailDictionary = await GameDataService.GetMusicDetailDictionary();
 
         response.SongBestData.ForEach(data =>
         {
             var songId = data.SongId;
             data.Genre = GameDataService.GetMusicGenreBySongId(musicDetailDictionary, songId);
-            data.MusicName = GameDataService.GetMusicNameBySongId(musicDetailDictionary, songId, string.IsNullOrEmpty(language) ? "ja" : language);
+            data.MusicName = GameDataService.GetMusicNameBySongId(musicDetailDictionary, songId, string.IsNullOrEmpty(songNameLanguage) ? "ja" : songNameLanguage);
-            data.MusicArtist = GameDataService.GetMusicArtistBySongId(musicDetailDictionary, songId, string.IsNullOrEmpty(language) ? "ja" : language);
+            data.MusicArtist = GameDataService.GetMusicArtistBySongId(musicDetailDictionary, songId, string.IsNullOrEmpty(songNameLanguage) ? "ja" : songNameLanguage);
         });
 
         songBestDataMap = response.SongBestData.GroupBy(data => data.Difficulty)

TaikoWebUI/Pages/PlayHistory.razor

@@ -1,8 +1,11 @@
+@using Blazored.LocalStorage
+
 @inject IGameDataService GameDataService
 @inject HttpClient Client
 @inject AuthService AuthService
 @inject IJSRuntime JsRuntime
 @inject NavigationManager NavigationManager
+@inject ILocalStorageService LocalStorage
 
 @page "/Users/{baid:int}/PlayHistory"
 

TaikoWebUI/Pages/PlayHistory.razor.cs

@@ -12,7 +12,7 @@ public partial class PlayHistory
 
     private string Search { get; set; } = string.Empty;
 
-    private string? currentLanguage;
+    private string? songNameLanguage;
 
     private SongHistoryResponse? response;
 
@@ -35,7 +35,7 @@ public partial class PlayHistory
         response = await Client.GetFromJsonAsync<SongHistoryResponse>($"api/PlayHistory/{(uint)Baid}");
         response.ThrowIfNull();
         
-        currentLanguage = await JsRuntime.InvokeAsync<string>("blazorCulture.get");
+        songNameLanguage = await LocalStorage.GetItemAsync<string>("songNameLanguage");
         
         musicDetailDictionary = await GameDataService.GetMusicDetailDictionary();
 
@@ -43,8 +43,8 @@ public partial class PlayHistory
         {
             var songId = data.SongId;
             data.Genre = GameDataService.GetMusicGenreBySongId(musicDetailDictionary, songId);
-            data.MusicName = GameDataService.GetMusicNameBySongId(musicDetailDictionary, songId, string.IsNullOrEmpty(currentLanguage) ? "ja" : currentLanguage);
+            data.MusicName = GameDataService.GetMusicNameBySongId(musicDetailDictionary, songId, string.IsNullOrEmpty(songNameLanguage) ? "ja" : songNameLanguage);
-            data.MusicArtist = GameDataService.GetMusicArtistBySongId(musicDetailDictionary, songId, string.IsNullOrEmpty(currentLanguage) ? "ja" : currentLanguage);
+            data.MusicArtist = GameDataService.GetMusicArtistBySongId(musicDetailDictionary, songId, string.IsNullOrEmpty(songNameLanguage) ? "ja" : songNameLanguage);
             data.Stars = GameDataService.GetMusicStarLevel(musicDetailDictionary, songId, data.Difficulty);
             data.ShowDetails = false;
         });
@@ -140,7 +140,7 @@ public partial class PlayHistory
             return true;
         }
 
-        var language = currentLanguage ?? "ja";
+        var language = songNameLanguage ?? "ja";
         
         if (songHistoryDataList[0].PlayTime
             .ToString("dddd d MMMM yyyy - HH:mm", CultureInfo.CreateSpecificCulture(language))

TaikoWebUI/Pages/Song.razor

@@ -1,12 +1,13 @@
 @page "/Users/{baid:int}/Songs/{songId:int}"
 
+@using Blazored.LocalStorage
+@using TaikoWebUI.Components.Song
+
 @inject IGameDataService GameDataService
 @inject HttpClient Client
 @inject AuthService AuthService
 @inject NavigationManager NavigationManager
-@inject IJSRuntime JsRuntime
+@inject ILocalStorageService LocalStorage
-
-@using TaikoWebUI.Components.Song;
 
 @if (AuthService.LoginRequired && (!AuthService.IsLoggedIn || (AuthService.GetLoggedInBaid() != Baid && !AuthService.IsAdmin)))
 {

TaikoWebUI/Pages/Song.razor.cs

@@ -1,65 +1,62 @@
-using Microsoft.JSInterop;
+namespace TaikoWebUI.Pages;
 
-namespace TaikoWebUI.Pages
+public partial class Song
 {
-    public partial class Song
+    [Parameter]
+    public int SongId { get; set; }
+
+    [Parameter]
+    public int Baid { get; set; }
+
+    private UserSetting? userSetting;
+    private SongHistoryResponse? response;
+    private List<SongHistoryData>? songHistoryData;
+    private readonly List<BreadcrumbItem> breadcrumbs = new();
+
+    private string songTitle = string.Empty;
+    private string songArtist = string.Empty;
+
+    protected override async Task OnInitializedAsync()
     {
-        [Parameter]
+        await base.OnInitializedAsync();
-        public int SongId { get; set; }
+            
-
+        if (AuthService.LoginRequired && !AuthService.IsLoggedIn)
-        [Parameter]
-        public int Baid { get; set; }
-
-        private UserSetting? userSetting;
-        private SongHistoryResponse? response;
-        private List<SongHistoryData>? songHistoryData;
-        private readonly List<BreadcrumbItem> breadcrumbs = new();
-
-        private string songTitle = string.Empty;
-        private string songArtist = string.Empty;
-
-        protected override async Task OnInitializedAsync()
         {
-            await base.OnInitializedAsync();
+            await AuthService.LoginWithAuthToken();
-            
-            if (AuthService.LoginRequired && !AuthService.IsLoggedIn)
-            {
-                await AuthService.LoginWithAuthToken();
-            }
-
-            response = await Client.GetFromJsonAsync<SongHistoryResponse>($"api/PlayHistory/{(uint)Baid}");
-            response.ThrowIfNull();
-            // Get all song best data with SongId
-            songHistoryData = response.SongHistoryData.Where(data => data.SongId == (uint)SongId).ToList();
-
-            // Get user settings
-            userSetting = await Client.GetFromJsonAsync<UserSetting>($"api/UserSettings/{Baid}");
-            
-            var musicDetailDictionary = await GameDataService.GetMusicDetailDictionary();
-
-            // Get song title and artist
-            var language = await JsRuntime.InvokeAsync<string>("blazorCulture.get");
-            songTitle = GameDataService.GetMusicNameBySongId(musicDetailDictionary, (uint)SongId, string.IsNullOrEmpty(language) ? "ja" : language);
-            songArtist = GameDataService.GetMusicArtistBySongId(musicDetailDictionary, (uint)SongId, string.IsNullOrEmpty(language) ? "ja" : language);
-
-            // Breadcrumbs
-            var formattedSongTitle = songTitle;
-            if (formattedSongTitle.Length > 20)
-            {
-                formattedSongTitle = string.Concat(formattedSongTitle.AsSpan(0, 20), "...");
-            }
-
-            if (AuthService.IsLoggedIn && !AuthService.IsAdmin)
-            {
-                breadcrumbs.Add(new BreadcrumbItem(Localizer["Dashboard"], href: "/"));
-            }
-            else
-            {
-                breadcrumbs.Add(new BreadcrumbItem(Localizer["Users"], href: "/Users"));
-            };
-            breadcrumbs.Add(new BreadcrumbItem($"{userSetting?.MyDonName}", href: null, disabled: true));
-            breadcrumbs.Add(new BreadcrumbItem(Localizer["Song List"], href: $"/Users/{Baid}/Songs", disabled: false));
-            breadcrumbs.Add(new BreadcrumbItem(formattedSongTitle, href: $"/Users/{Baid}/Songs/{SongId}", disabled: false));
         }
+
+        response = await Client.GetFromJsonAsync<SongHistoryResponse>($"api/PlayHistory/{(uint)Baid}");
+        response.ThrowIfNull();
+        // Get all song best data with SongId
+        songHistoryData = response.SongHistoryData.Where(data => data.SongId == (uint)SongId).ToList();
+
+        // Get user settings
+        userSetting = await Client.GetFromJsonAsync<UserSetting>($"api/UserSettings/{Baid}");
+            
+        var musicDetailDictionary = await GameDataService.GetMusicDetailDictionary();
+
+        // Get song title and artist
+        var songNameLanguage = await LocalStorage.GetItemAsync<string>("songNameLanguage");
+        songTitle = GameDataService.GetMusicNameBySongId(musicDetailDictionary, (uint)SongId, string.IsNullOrEmpty(songNameLanguage) ? "ja" : songNameLanguage);
+        songArtist = GameDataService.GetMusicArtistBySongId(musicDetailDictionary, (uint)SongId, string.IsNullOrEmpty(songNameLanguage) ? "ja" : songNameLanguage);
+
+        // Breadcrumbs
+        var formattedSongTitle = songTitle;
+        if (formattedSongTitle.Length > 20)
+        {
+            formattedSongTitle = string.Concat(formattedSongTitle.AsSpan(0, 20), "...");
+        }
+
+        if (AuthService.IsLoggedIn && !AuthService.IsAdmin)
+        {
+            breadcrumbs.Add(new BreadcrumbItem(Localizer["Dashboard"], href: "/"));
+        }
+        else
+        {
+            breadcrumbs.Add(new BreadcrumbItem(Localizer["Users"], href: "/Users"));
+        };
+        breadcrumbs.Add(new BreadcrumbItem($"{userSetting?.MyDonName}", href: null, disabled: true));
+        breadcrumbs.Add(new BreadcrumbItem(Localizer["Song List"], href: $"/Users/{Baid}/Songs", disabled: false));
+        breadcrumbs.Add(new BreadcrumbItem(formattedSongTitle, href: $"/Users/{Baid}/Songs/{SongId}", disabled: false));
     }
-}
+}

TaikoWebUI/Pages/SongList.razor

@@ -1,9 +1,11 @@
-@inject IGameDataService GameDataService
+@using Blazored.LocalStorage
+@using TaikoWebUI.Utilities;
+
+@inject IGameDataService GameDataService
 @inject HttpClient Client
 @inject AuthService AuthService
-@inject IJSRuntime JsRuntime
+@inject ILocalStorageService LocalStorage
 @inject NavigationManager NavigationManager
-@using TaikoWebUI.Utilities;
 
 @page "/Users/{baid:int}/Songs"
 
@@ -55,7 +57,7 @@
                     </ToolBarContent>
                     <HeaderContent>
                         <MudTh>
-                            <MudTableSortLabel T="MusicDetail" SortBy="context => GameDataService.GetMusicNameBySongId(musicDetailDictionary, context.SongId, CurrentLanguage)">
+                            <MudTableSortLabel T="MusicDetail" SortBy="context => GameDataService.GetMusicNameBySongId(musicDetailDictionary, context.SongId, SongNameLanguage)">
                                 @Localizer["Song Title / Artist"]
                             </MudTableSortLabel>
                         </MudTh>
@@ -82,10 +84,10 @@
                             <div>
                                 <a href="@($"/Users/{Baid}/Songs/{context.SongId}")">
                                     <MudText Typo="Typo.body2" Style="font-weight:bold">
-                                        @GameDataService.GetMusicNameBySongId(musicDetailDictionary, context.SongId, CurrentLanguage)
+                                        @GameDataService.GetMusicNameBySongId(musicDetailDictionary, context.SongId, SongNameLanguage)
                                     </MudText>
                                     <MudText Typo="Typo.caption">
-                                        @GameDataService.GetMusicArtistBySongId(musicDetailDictionary, context.SongId, CurrentLanguage)
+                                        @GameDataService.GetMusicArtistBySongId(musicDetailDictionary, context.SongId, SongNameLanguage)
                                     </MudText>
                                 </a>
                             </div>

TaikoWebUI/Pages/SongList.razor.cs

@@ -1,6 +1,4 @@
-using Microsoft.JSInterop;
+namespace TaikoWebUI.Pages;
-
-namespace TaikoWebUI.Pages;
 
 public partial class SongList
 {
@@ -9,7 +7,7 @@ public partial class SongList
     
     private string Search { get; set; } = string.Empty;
     private string GenreFilter { get; set; } = string.Empty;
-    private string CurrentLanguage { get; set; } = "ja";
+    private string? SongNameLanguage { get; set; }
 
     private SongBestResponse? response;
     private UserSetting? userSetting;
@@ -33,7 +31,9 @@ public partial class SongList
         userSetting = await Client.GetFromJsonAsync<UserSetting>($"api/UserSettings/{Baid}");
         musicDetailDictionary = await GameDataService.GetMusicDetailDictionary();
 
-        CurrentLanguage = await JsRuntime.InvokeAsync<string>("blazorCulture.get");
+        SongNameLanguage = await LocalStorage.GetItemAsync<string>("songNameLanguage");
+        
+        Console.WriteLine("Language: " + SongNameLanguage);
 
         if (AuthService.IsLoggedIn && !AuthService.IsAdmin)
         {