diff --git a/src/TafsirQuran.UI/Components/AudioPlayer.razor b/src/TafsirQuran.UI/Components/AudioPlayer.razor index 28c17d7..84fb15c 100644 --- a/src/TafsirQuran.UI/Components/AudioPlayer.razor +++ b/src/TafsirQuran.UI/Components/AudioPlayer.razor @@ -2,35 +2,38 @@ @inject ApiOptions ApiOptions @implements IAsyncDisposable -
-
@Title
-
- @if (ShowFavorite) - { - - } - @if (ShowBookmark) - { - - } +
+
+ +
+ @if (ShowFavorite) + { + + } + @if (ShowBookmark) + { + + } +
@if (!string.IsNullOrWhiteSpace(AudioUrl)) { - -
- +
+
@Format(current) / @Format(duration)
-
@Format(current) / @Format(duration)
+
} else { -

صوت این آیه در دسترس نیست

+

صوت این آیه در دسترس نیست

}
@@ -46,6 +49,7 @@ [Parameter] public EventCallback OnFavoriteToggle { get; set; } [Parameter] public EventCallback OnBookmarkToggle { get; set; } [Parameter] public EventCallback OnProgress { get; set; } + [Parameter] public EventCallback OnTitleClick { get; set; } private ElementReference audioEl; private ElementReference root; @@ -54,6 +58,7 @@ private double current; private double duration; private string boundKey = ""; + private bool bound; private string AudioSrc => ResolveAudioUrl(AudioUrl ?? ""); @@ -61,10 +66,11 @@ { if (string.IsNullOrWhiteSpace(AudioUrl)) return; - if (firstRender) + if (!bound) { self = DotNetObjectReference.Create(this); await Js.InvokeVoidAsync("tqAudio.bind", audioEl, self); + bound = true; } var key = string.IsNullOrWhiteSpace(AudioKey) ? AudioSrc : AudioKey; @@ -131,7 +137,8 @@ { try { - await Js.InvokeVoidAsync("tqAudio.unbind", audioEl); + if (bound) + await Js.InvokeVoidAsync("tqAudio.unbind", audioEl); } catch { /* ignore */ } self?.Dispose(); diff --git a/src/TafsirQuran.UI/Components/PlayerDock.razor b/src/TafsirQuran.UI/Components/PlayerDock.razor new file mode 100644 index 0000000..e9dd401 --- /dev/null +++ b/src/TafsirQuran.UI/Components/PlayerDock.razor @@ -0,0 +1,42 @@ +@inject PlayerSessionService Session +@inject NavigationManager Nav +@implements IDisposable + +@if (Session.HasTrack) +{ +
+ +
+} + +@code { + protected override void OnInitialized() => Session.Changed += OnChanged; + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (!firstRender) return; + await Session.EnsureLoadedAsync(); + } + + private async Task OnProgress(double position) => await Session.ReportPositionAsync(position); + + private void GoToTrack() + { + if (Session.HasTrack) + Nav.NavigateTo(Session.ResumeHref); + } + + private void OnChanged() => InvokeAsync(StateHasChanged); + + public void Dispose() => Session.Changed -= OnChanged; +} diff --git a/src/TafsirQuran.UI/Components/SkeletonBlock.razor b/src/TafsirQuran.UI/Components/SkeletonBlock.razor new file mode 100644 index 0000000..f455408 --- /dev/null +++ b/src/TafsirQuran.UI/Components/SkeletonBlock.razor @@ -0,0 +1,27 @@ +@if (Variant == "lines") +{ + +} +else if (Variant == "cards") +{ + +} +else +{ + +} + +@code { + [Parameter] public string Variant { get; set; } = "block"; + [Parameter] public int Lines { get; set; } = 4; +} diff --git a/src/TafsirQuran.UI/Layout/AppLayout.razor b/src/TafsirQuran.UI/Layout/AppLayout.razor index d3b3218..b8129b6 100644 --- a/src/TafsirQuran.UI/Layout/AppLayout.razor +++ b/src/TafsirQuran.UI/Layout/AppLayout.razor @@ -2,7 +2,7 @@ @implements IDisposable @inject AuthStateService Auth -
+
@code { + [Inject] private PlayerSessionService Session { get; set; } = default!; private bool sidebarOpen; + private bool hasDock; - protected override void OnInitialized() => Auth.Changed += OnAuthChanged; + protected override void OnInitialized() + { + Auth.Changed += OnAuthChanged; + Session.Changed += OnSessionChanged; + hasDock = Session.HasTrack; + } protected override async Task OnAfterRenderAsync(bool firstRender) { if (!firstRender) return; await Auth.RefreshAsync(); + await Session.EnsureLoadedAsync(); + hasDock = Session.HasTrack; await InvokeAsync(StateHasChanged); } private void OnAuthChanged() => InvokeAsync(StateHasChanged); + private void OnSessionChanged() + { + hasDock = Session.HasTrack; + InvokeAsync(StateHasChanged); + } private void ToggleSidebar() => sidebarOpen = !sidebarOpen; private void CloseSidebar() => sidebarOpen = false; - public void Dispose() => Auth.Changed -= OnAuthChanged; + public void Dispose() + { + Auth.Changed -= OnAuthChanged; + Session.Changed -= OnSessionChanged; + } } diff --git a/src/TafsirQuran.UI/Layout/Sidebar.razor b/src/TafsirQuran.UI/Layout/Sidebar.razor index 4058335..492412b 100644 --- a/src/TafsirQuran.UI/Layout/Sidebar.razor +++ b/src/TafsirQuran.UI/Layout/Sidebar.razor @@ -16,6 +16,7 @@
} + فهرست سوره‌ها علاقه‌مندی‌ها نشان‌شده‌ها درباره ما diff --git a/src/TafsirQuran.UI/Pages/HomePage.razor b/src/TafsirQuran.UI/Pages/HomePage.razor index 37376c5..3645221 100644 --- a/src/TafsirQuran.UI/Pages/HomePage.razor +++ b/src/TafsirQuran.UI/Pages/HomePage.razor @@ -1,12 +1,23 @@ @page "/" @inject TafsirApiClient Api +@inject PlayerSessionService Player +@inject NavigationManager Nav +@implements IDisposable

تفسیر قرآن

+ @if (Player.HasTrack) + { + + } + @if (loading) { -

در حال بارگذاری...

+ } else if (tafsirs.Count == 0) { @@ -33,11 +44,14 @@ private List tafsirs = []; private bool loading = true; + protected override void OnInitialized() => Player.Changed += OnPlayerChanged; + protected override async Task OnAfterRenderAsync(bool firstRender) { if (!firstRender) return; try { + await Player.EnsureLoadedAsync(); tafsirs = (await Api.GetTafsirsAsync()).ToList(); } catch @@ -50,4 +64,10 @@ await InvokeAsync(StateHasChanged); } } + + private void Resume() => Nav.NavigateTo(Player.ResumeHref); + + private void OnPlayerChanged() => InvokeAsync(StateHasChanged); + + public void Dispose() => Player.Changed -= OnPlayerChanged; } diff --git a/src/TafsirQuran.UI/Pages/TafsirPage.razor b/src/TafsirQuran.UI/Pages/TafsirPage.razor index 1436b19..244157d 100644 --- a/src/TafsirQuran.UI/Pages/TafsirPage.razor +++ b/src/TafsirQuran.UI/Pages/TafsirPage.razor @@ -4,111 +4,128 @@ @inject TafsirApiClient Api @inject IDeviceIdStore DeviceStore @inject NavigationManager Nav +@inject PlayerSessionService Player
-
-

@title

-

@author

- @if (view == View.Ayahs || view == View.Detail) +
+ @if (loadingMeta) { - + + } + else + { +

+ @title + @if (!string.IsNullOrWhiteSpace(author)) + { + (@author) + } +

+ }
- @if (loading) + @if (view == View.Surahs) { -

در حال بارگذاری...

- } - else if (view == View.Surahs) - { -
- @foreach (var s in surahs) - { -
- - -
- } -
+ @if (loadingSurahs) + { + + } + else + { +
+ @foreach (var s in surahs) + { +
+ + +
+ } +
+ } } else if (view == View.Ayahs) { -

سوره @selectedSurah?.NameFa

-
- @foreach (var a in ayahs) - { - - } -
+

سوره @(selectedSurah?.NameFa ?? "…")

+ @if (loadingAyahs) + { + + } + else + { +
+ @foreach (var a in ayahs) + { + + } +
+ } } - else if (detail is not null) + else if (view == View.Detail) {
- - - + + +
-
-

@detail.TextAr

- @if (!string.IsNullOrWhiteSpace(detail.TextFa)) + @if (loadingDetail || detail is null) + { + + + } + else + { +
+

@detail.TextAr

+ @if (!string.IsNullOrWhiteSpace(detail.TextFa)) + { +

@detail.TextFa

+ } +
+ + @if (!string.IsNullOrWhiteSpace(detail.NotesHtml)) { -

@detail.TextFa

+
+ نکته‌ها +
@((MarkupString)detail.NotesHtml)
+
+ } + @if (!string.IsNullOrWhiteSpace(detail.MessagesHtml)) + { +
+ پیام‌ها +
@((MarkupString)detail.MessagesHtml)
+
+ } + @if (!string.IsNullOrWhiteSpace(detail.VideoEmbedUrl)) + { +
+ فیلم +
+ +
+
} -
- - - - @if (!string.IsNullOrWhiteSpace(detail.NotesHtml)) - { -
- نکته‌ها -
@((MarkupString)detail.NotesHtml)
-
- } - @if (!string.IsNullOrWhiteSpace(detail.MessagesHtml)) - { -
- پیام‌ها -
@((MarkupString)detail.MessagesHtml)
-
- } - @if (!string.IsNullOrWhiteSpace(detail.VideoEmbedUrl)) - { -
- فیلم -
- -
-
}
} @@ -124,16 +141,16 @@ private string title = "تفسیر"; private string author = ""; private Guid tafsirId; - private bool loading = true; + private bool loadingMeta = true; + private bool loadingSurahs; + private bool loadingAyahs; + private bool loadingDetail; private string? routeKey; private View view = View.Surahs; private List surahs = []; private List ayahs = []; private SurahListItemDto? selectedSurah; private AyahDetailDto? detail; - private double initialPosition; - private bool isFavorite; - private bool isBookmarked; private string deviceId = ""; private bool ready; @@ -157,7 +174,15 @@ if (routeKey == key) return; routeKey = key; - loading = true; + if (AyahNumber is not null && SurahNumber is not null) view = View.Detail; + else if (SurahNumber is not null) view = View.Ayahs; + else view = View.Surahs; + + loadingMeta = true; + loadingSurahs = view == View.Surahs; + loadingAyahs = view == View.Ayahs; + loadingDetail = view == View.Detail; + detail = null; await InvokeAsync(StateHasChanged); try @@ -166,37 +191,39 @@ deviceId = await DeviceStore.GetOrCreateAsync(); var tafsirs = await Api.GetTafsirsAsync(); - var tafsir = tafsirs.FirstOrDefault(t => t.Slug == slug); + var tafsir = tafsirs.FirstOrDefault(t => t.Slug == Slug); title = tafsir?.Title ?? "تفسیر"; author = tafsir?.Author ?? ""; tafsirId = tafsir?.Id ?? Guid.Empty; + loadingMeta = false; + await InvokeAsync(StateHasChanged); - if (AyahNumber is int a && SurahNumber is int s) - { - view = View.Detail; + if (view == View.Detail && SurahNumber is int s && AyahNumber is int a) await LoadDetail(s, a); - } - else if (SurahNumber is int sn) - { - view = View.Ayahs; + else if (view == View.Ayahs && SurahNumber is int sn) await LoadAyahs(sn); - } else - { - view = View.Surahs; - surahs = (await Api.GetSurahsAsync(deviceId, tafsirId == Guid.Empty ? null : tafsirId)).ToList(); - } + await LoadSurahs(); } finally { - loading = false; + loadingMeta = false; + loadingSurahs = false; + loadingAyahs = false; + loadingDetail = false; await InvokeAsync(StateHasChanged); } } - private string slug => Slug; - - private void BackToSurahs() => Nav.NavigateTo($"/tafsir/{Slug}"); + private void GoBack() + { + if (view == View.Detail && SurahNumber is int s) + Nav.NavigateTo($"/tafsir/{Slug}/surah/{s}"); + else if (view == View.Ayahs) + Nav.NavigateTo($"/tafsir/{Slug}"); + else + Nav.NavigateTo("/"); + } private void OpenSurah(int n) => Nav.NavigateTo($"/tafsir/{Slug}/surah/{n}"); @@ -206,30 +233,52 @@ Nav.NavigateTo($"/tafsir/{Slug}/surah/{s}/ayah/{n}"); } + private void GoPrevAyah() + { + if (detail?.PrevAyah is int p) OpenAyah(p); + } + + private void GoNextAyah() + { + if (detail?.NextAyah is int n) OpenAyah(n); + } + + private async Task LoadSurahs() + { + loadingSurahs = true; + await InvokeAsync(StateHasChanged); + surahs = (await Api.GetSurahsAsync(deviceId, tafsirId == Guid.Empty ? null : tafsirId)).ToList(); + loadingSurahs = false; + } + private async Task LoadAyahs(int surahNumber) { - surahs = surahs.Count > 0 ? surahs : (await Api.GetSurahsAsync(deviceId, tafsirId == Guid.Empty ? null : tafsirId)).ToList(); + loadingAyahs = true; + await InvokeAsync(StateHasChanged); + if (surahs.Count == 0) + surahs = (await Api.GetSurahsAsync(deviceId, tafsirId == Guid.Empty ? null : tafsirId)).ToList(); selectedSurah = surahs.FirstOrDefault(x => x.Number == surahNumber); ayahs = (await Api.GetAyahsAsync(Slug, surahNumber, deviceId)).ToList(); + loadingAyahs = false; } private async Task LoadDetail(int surahNumber, int ayahNumber) { + loadingDetail = true; + await InvokeAsync(StateHasChanged); detail = await Api.GetAyahAsync(Slug, surahNumber, ayahNumber); + loadingDetail = false; + await InvokeAsync(StateHasChanged); + if (detail is null) return; - - var progress = await Api.GetProgressAsync(deviceId); - initialPosition = progress is not null - && progress.SurahNumber == surahNumber - && progress.AyahNumber == ayahNumber - ? progress.PositionSeconds - : 0; - - var favorites = await Api.GetFavoritesAsync(deviceId); - var bookmarks = await Api.GetAyahBookmarksAsync(deviceId); - isFavorite = favorites.Any(f => f.TafsirId == detail.TafsirId && f.SurahNumber == surahNumber && f.AyahNumber == ayahNumber); - isBookmarked = bookmarks.Any(b => b.TafsirId == detail.TafsirId && b.SurahNumber == surahNumber && b.AyahNumber == ayahNumber); tafsirId = detail.TafsirId; + + var resumePos = Player.HasTrack + && Player.SurahNumber == surahNumber + && Player.AyahNumber == ayahNumber + ? Player.PositionSeconds + : 0; + await Player.SetTrackAsync(detail, resumePos); } private async Task ToggleSurahBookmark(SurahListItemDto s) @@ -241,31 +290,4 @@ await Api.AddSurahBookmarkAsync(new ToggleSurahBookmarkRequest(tafsirId, s.Number, deviceId)); surahs = (await Api.GetSurahsAsync(deviceId, tafsirId)).ToList(); } - - private async Task ToggleFavorite() - { - if (detail is null) return; - if (isFavorite) - await Api.RemoveFavoriteAsync(detail.TafsirId, detail.SurahNumber, detail.AyahNumber, deviceId); - else - await Api.AddFavoriteAsync(new ToggleAyahRequest(detail.TafsirId, detail.SurahNumber, detail.AyahNumber, deviceId)); - isFavorite = !isFavorite; - } - - private async Task ToggleBookmark() - { - if (detail is null) return; - if (isBookmarked) - await Api.RemoveAyahBookmarkAsync(detail.TafsirId, detail.SurahNumber, detail.AyahNumber, deviceId); - else - await Api.AddAyahBookmarkAsync(new ToggleAyahRequest(detail.TafsirId, detail.SurahNumber, detail.AyahNumber, deviceId)); - isBookmarked = !isBookmarked; - } - - private async Task SaveProgress(double position) - { - if (detail is null) return; - await Api.SaveProgressAsync(new UpsertProgressRequest( - detail.TafsirId, detail.SurahNumber, detail.AyahNumber, position, deviceId)); - } } diff --git a/src/TafsirQuran.UI/Services/PlayerSessionService.cs b/src/TafsirQuran.UI/Services/PlayerSessionService.cs new file mode 100644 index 0000000..a0190b7 --- /dev/null +++ b/src/TafsirQuran.UI/Services/PlayerSessionService.cs @@ -0,0 +1,163 @@ +using TafsirQuran.Shared.Dtos; +using TafsirQuran.Shared.Services; + +namespace TafsirQuran.UI.Services; + +public sealed class PlayerSessionService +{ + private readonly TafsirApiClient _api; + private readonly IDeviceIdStore _devices; + private bool _loaded; + private string _deviceId = ""; + + public PlayerSessionService(TafsirApiClient api, IDeviceIdStore devices) + { + _api = api; + _devices = devices; + } + + public event Action? Changed; + + public bool HasTrack => SurahNumber > 0 && AyahNumber > 0 && !string.IsNullOrWhiteSpace(TafsirSlug); + + public Guid TafsirId { get; private set; } + public string TafsirSlug { get; private set; } = "ghatreh-chekani"; + public int SurahNumber { get; private set; } + public int AyahNumber { get; private set; } + public string SurahNameFa { get; private set; } = ""; + public string? AudioUrl { get; private set; } + public double PositionSeconds { get; private set; } + public bool IsFavorite { get; private set; } + public bool IsBookmarked { get; private set; } + + public string DisplayTitle => + string.IsNullOrWhiteSpace(SurahNameFa) + ? $"آیه {AyahNumber}" + : $"{SurahNameFa} - آیه {AyahNumber}"; + + public string ResumeHref => + HasTrack ? $"/tafsir/{TafsirSlug}/surah/{SurahNumber}/ayah/{AyahNumber}" : "/"; + + public async Task EnsureLoadedAsync() + { + if (_loaded) return; + _deviceId = await _devices.GetOrCreateAsync(); + try + { + var progress = await _api.GetProgressAsync(_deviceId); + if (progress is not null) + { + TafsirId = progress.TafsirId; + SurahNumber = progress.SurahNumber; + AyahNumber = progress.AyahNumber; + SurahNameFa = progress.SurahNameFa ?? ""; + PositionSeconds = progress.PositionSeconds; + + var tafsirs = await _api.GetTafsirsAsync(); + var tafsir = tafsirs.FirstOrDefault(t => t.Id == progress.TafsirId); + TafsirSlug = tafsir?.Slug ?? "ghatreh-chekani"; + + var detail = await _api.GetAyahAsync(TafsirSlug, SurahNumber, AyahNumber); + if (detail is not null) + { + AudioUrl = detail.AudioUrl; + SurahNameFa = detail.SurahNameFa; + await SyncFlagsAsync(); + } + } + } + catch + { + /* ignore bootstrap failures */ + } + + _loaded = true; + Notify(); + } + + public async Task SetTrackAsync(AyahDetailDto detail, double position = 0) + { + await EnsureDeviceAsync(); + TafsirId = detail.TafsirId; + TafsirSlug = detail.TafsirSlug; + SurahNumber = detail.SurahNumber; + AyahNumber = detail.AyahNumber; + SurahNameFa = detail.SurahNameFa; + AudioUrl = detail.AudioUrl; + PositionSeconds = position; + await SyncFlagsAsync(); + Notify(); + await PersistAsync(position); + } + + public async Task ReportPositionAsync(double position) + { + if (!HasTrack) return; + PositionSeconds = position; + await PersistAsync(position); + Notify(); + } + + public async Task ToggleFavoriteAsync() + { + if (!HasTrack) return; + await EnsureDeviceAsync(); + if (IsFavorite) + await _api.RemoveFavoriteAsync(TafsirId, SurahNumber, AyahNumber, _deviceId); + else + await _api.AddFavoriteAsync(new ToggleAyahRequest(TafsirId, SurahNumber, AyahNumber, _deviceId)); + IsFavorite = !IsFavorite; + Notify(); + } + + public async Task ToggleBookmarkAsync() + { + if (!HasTrack) return; + await EnsureDeviceAsync(); + if (IsBookmarked) + await _api.RemoveAyahBookmarkAsync(TafsirId, SurahNumber, AyahNumber, _deviceId); + else + await _api.AddAyahBookmarkAsync(new ToggleAyahRequest(TafsirId, SurahNumber, AyahNumber, _deviceId)); + IsBookmarked = !IsBookmarked; + Notify(); + } + + private async Task SyncFlagsAsync() + { + try + { + var favorites = await _api.GetFavoritesAsync(_deviceId); + var bookmarks = await _api.GetAyahBookmarksAsync(_deviceId); + IsFavorite = favorites.Any(f => + f.TafsirId == TafsirId && f.SurahNumber == SurahNumber && f.AyahNumber == AyahNumber); + IsBookmarked = bookmarks.Any(b => + b.TafsirId == TafsirId && b.SurahNumber == SurahNumber && b.AyahNumber == AyahNumber); + } + catch + { + /* ignore */ + } + } + + private async Task PersistAsync(double position) + { + try + { + await EnsureDeviceAsync(); + await _api.SaveProgressAsync(new UpsertProgressRequest( + TafsirId, SurahNumber, AyahNumber, position, _deviceId)); + } + catch + { + /* ignore */ + } + } + + private async Task EnsureDeviceAsync() + { + if (string.IsNullOrWhiteSpace(_deviceId)) + _deviceId = await _devices.GetOrCreateAsync(); + } + + private void Notify() => Changed?.Invoke(); +} diff --git a/src/TafsirQuran.UI/Services/UiServiceCollectionExtensions.cs b/src/TafsirQuran.UI/Services/UiServiceCollectionExtensions.cs index 13404c9..f7f9007 100644 --- a/src/TafsirQuran.UI/Services/UiServiceCollectionExtensions.cs +++ b/src/TafsirQuran.UI/Services/UiServiceCollectionExtensions.cs @@ -12,6 +12,7 @@ public static class UiServiceCollectionExtensions services.AddScoped(); services.AddScoped(); services.AddScoped(); + services.AddScoped(); services.AddScoped(sp => { var http = new HttpClient { BaseAddress = new Uri(normalized) }; diff --git a/src/TafsirQuran.UI/wwwroot/css/app.css b/src/TafsirQuran.UI/wwwroot/css/app.css index 2f7f023..60dd22f 100644 --- a/src/TafsirQuran.UI/wwwroot/css/app.css +++ b/src/TafsirQuran.UI/wwwroot/css/app.css @@ -118,6 +118,7 @@ button, input { font: inherit; } .user-chip { padding: 0.5rem 0.9rem; color: #c7d8ce; font-size: 0.9rem; } .content { padding: 1.25rem 1rem 2.5rem; max-width: 980px; margin: 0 auto; } +.app-shell.has-player-dock .content { padding-bottom: 8.5rem; } .home { padding-top: 1.5rem; } .tile-grid { display: grid; gap: 1rem; } @@ -181,11 +182,18 @@ button, input { font: inherit; } .ayah-block { margin-bottom: 1rem; } .ayah-ar { font-family: var(--font-ar); - font-size: clamp(1.4rem, 3vw, 1.9rem); - line-height: 2; - margin: 0 0 0.5rem; + font-size: clamp(1.75rem, 4.2vw, 2.35rem); + line-height: 2.05; + margin: 0 0 0.65rem; + color: #14261e; + font-weight: 700; +} +.ayah-fa { + margin: 0; + font-size: clamp(1.05rem, 2.6vw, 1.28rem); + line-height: 1.95; + color: #3a4a42; } -.ayah-fa { margin: 0; color: var(--muted); } .audio-player { display: flex; flex-direction: column; gap: 0.85rem; } .player-title { font-weight: 600; } @@ -272,3 +280,81 @@ button, input { font: inherit; } padding: 0.9rem 1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); } .chip:disabled { opacity: 0.45; cursor: default; } + +.page-header-row { + display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; + margin-bottom: 1rem; +} +.page-title-inline { + margin: 0; font-size: clamp(1.15rem, 3.5vw, 1.45rem); font-weight: 700; + display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; +} +.title-author { font-weight: 500; color: var(--muted); font-size: 0.92em; } +.back-btn { + flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; + border: 1px solid var(--line); background: #fff; cursor: pointer; + font-size: 1.25rem; line-height: 1; color: var(--brand-deep); +} + +.skeleton-stack { display: grid; gap: 0.65rem; margin: 0.5rem 0 1rem; } +.skeleton-line, .skeleton-card, .skeleton-block { + background: linear-gradient(90deg, rgba(28,43,36,0.07), rgba(28,43,36,0.14), rgba(28,43,36,0.07)); + background-size: 200% 100%; + animation: skeleton-shine 1.2s ease-in-out infinite; + border-radius: 10px; +} +.skeleton-line { height: 14px; } +.skeleton-card { height: 64px; border-radius: 14px; } +.skeleton-block { height: 120px; } +@keyframes skeleton-shine { + 0% { background-position: 100% 0; } + 100% { background-position: -100% 0; } +} + +.player-dock { + position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; + padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom)); + background: rgba(243, 239, 230, 0.94); + backdrop-filter: blur(14px); + border-top: 1px solid var(--line); + box-shadow: 0 -10px 28px rgba(28, 43, 36, 0.08); +} +.dock-player { + max-width: 980px; margin: 0 auto; + border: 1px solid var(--line); + background: #fff; + border-radius: 18px; + padding: 0.75rem 0.9rem 0.85rem; + direction: rtl; + text-align: right; +} +.dock-top { + display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; + margin-bottom: 0.55rem; +} +.dock-title { + border: 0; background: transparent; padding: 0; cursor: pointer; + font-weight: 700; font-size: 0.98rem; color: var(--ink); text-align: right; +} +.dock-actions { display: flex; gap: 0.35rem; flex-shrink: 0; } +.icon-chip { + width: 36px; height: 36px; border-radius: 10px; + border: 1px solid var(--line); background: #fff; cursor: pointer; + color: var(--muted); font-size: 1rem; +} +.icon-chip.on { background: var(--brand); color: #fff; border-color: var(--brand); } +.rtl-controls { + display: grid; grid-template-columns: auto 1fr auto; gap: 0.65rem; align-items: center; + direction: rtl; +} +.dock-empty { margin: 0; font-size: 0.9rem; } + +.resume-btn { + width: 100%; margin: 0 0 1rem; padding: 1rem 1.1rem; + border: 1px solid rgba(31,107,74,0.35); border-radius: 18px; + background: linear-gradient(135deg, rgba(31,107,74,0.12), rgba(31,107,74,0.04)); + cursor: pointer; text-align: right; + display: flex; flex-direction: column; gap: 0.25rem; +} +.resume-label { font-weight: 700; color: var(--brand-deep); } +.resume-meta { color: var(--muted); font-size: 0.9rem; } diff --git a/src/TafsirQuran.Web/wwwroot/service-worker.published.js b/src/TafsirQuran.Web/wwwroot/service-worker.published.js index cc008ff..9dedcb4 100644 --- a/src/TafsirQuran.Web/wwwroot/service-worker.published.js +++ b/src/TafsirQuran.Web/wwwroot/service-worker.published.js @@ -1,5 +1,5 @@ // Cache static WASM assets only — never HTML navigations. -const CACHE = 'tafsirquran-wasm-v2'; +const CACHE = 'tafsirquran-wasm-v3'; self.addEventListener('install', event => event.waitUntil(self.skipWaiting())); self.addEventListener('activate', event => event.waitUntil(