From cbdb8e60c3afc5b600a1c8514cd44cbd7d195534 Mon Sep 17 00:00:00 2001
From: Hamid Reza Mohammadi <mohammadi.hr@gmail.com>
Date: Mon, 11 Dec 2023 16:47:09 +0330
Subject: [PATCH] #415 recitation types in client

---
 GanjooRazor/Areas/User/Pages/VerseAdd.cshtml  |  2 +-
 GanjooRazor/Pages/AudioClip.cshtml            |  4 ++--
 GanjooRazor/Pages/Books.cshtml                |  2 +-
 GanjooRazor/Pages/Bp.cshtml                   |  2 +-
 GanjooRazor/Pages/Error.cshtml                |  2 +-
 GanjooRazor/Pages/FAQ.cshtml                  |  2 +-
 GanjooRazor/Pages/Golha.cshtml                |  2 +-
 GanjooRazor/Pages/Hashieha.cshtml             |  2 +-
 GanjooRazor/Pages/Index.cshtml                |  4 ++--
 GanjooRazor/Pages/Index.cshtml.cs             |  3 ++-
 GanjooRazor/Pages/Login.cshtml                |  2 +-
 GanjooRazor/Pages/Map.cshtml                  |  4 ++--
 GanjooRazor/Pages/Photos.cshtml               |  2 +-
 GanjooRazor/Pages/Pin.cshtml                  |  2 +-
 GanjooRazor/Pages/RecitationsOrder.cshtml     |  2 +-
 GanjooRazor/Pages/ReportComment.cshtml        |  2 +-
 GanjooRazor/Pages/ReportRecitation.cshtml     |  4 ++--
 GanjooRazor/Pages/Search.cshtml               |  2 +-
 GanjooRazor/Pages/Shared/_AdminLayout.cshtml  |  2 +-
 .../Pages/Shared/_UserPanelLayout.cshtml      |  2 +-
 GanjooRazor/Pages/Simi.cshtml                 |  2 +-
 GanjooRazor/Pages/Tagged.cshtml               |  2 +-
 GanjooRazor/Pages/_AudioPlayerPartial.cshtml  | 20 +++++++++----------
 .../Pages/_AudioPlayerPartial.cshtml.cs       |  2 ++
 GanjooRazor/Pages/_GanjoorPagePartial.cshtml  |  6 +++---
 .../Pages/_InlinePageUtilsPartial.cshtml      | 15 +++++++++++++-
 GanjooRazor/Pages/errors/404.cshtml           |  2 +-
 GanjooRazor/Pages/errors/503.cshtml           |  2 +-
 GanjooRazor/wwwroot/css/p8.css                |  4 ++++
 GanjooRazor/wwwroot/js/bk.js                  |  4 ++--
 30 files changed, 64 insertions(+), 44 deletions(-)

diff --git a/GanjooRazor/Areas/User/Pages/VerseAdd.cshtml b/GanjooRazor/Areas/User/Pages/VerseAdd.cshtml
index 1cf2568c..b0696b44 100644
--- a/GanjooRazor/Areas/User/Pages/VerseAdd.cshtml
+++ b/GanjooRazor/Areas/User/Pages/VerseAdd.cshtml
@@ -14,7 +14,7 @@
     <meta name="robots" content="noindex, nofollow" />
     <title>پیشنهاد اضافه شدن مصرع‌های جا افتاده</title>
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <link href="/css/p8.css?version=64" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=65" rel="stylesheet" type="text/css" />
     <style>
         label {
             width: 100px;
diff --git a/GanjooRazor/Pages/AudioClip.cshtml b/GanjooRazor/Pages/AudioClip.cshtml
index 9441ac83..eb7bbbf3 100644
--- a/GanjooRazor/Pages/AudioClip.cshtml
+++ b/GanjooRazor/Pages/AudioClip.cshtml
@@ -15,7 +15,7 @@
         گنجور » نمایش خوانش
     </title>
     <link href="~/dist/skin/pink.flag/css/jplayer.pink.flag.min.css" rel="stylesheet" type="text/css" />
-    <link href="~/css/p8.css?version=64" rel="stylesheet" type="text/css" />
+    <link href="~/css/p8.css?version=65" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
     <script>
@@ -150,7 +150,7 @@
         </p>
 
         <script src="~/lib/jquery/dist/jquery.min.js"></script>
-        <script src="~/js/bk.js?version=44"></script>
+        <script src="~/js/bk.js?version=45"></script>
         <script src="~/js/jplayersupport.js"></script>
         <script src="~/js/vaabd.js?version=6"></script>
         <script src="~/dist/jplayer/jquery.jplayer.min.js"></script>
diff --git a/GanjooRazor/Pages/Books.cshtml b/GanjooRazor/Pages/Books.cshtml
index 504a1556..e7c76beb 100644
--- a/GanjooRazor/Pages/Books.cshtml
+++ b/GanjooRazor/Pages/Books.cshtml
@@ -16,7 +16,7 @@
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <script src="/js/bk.js?version=44"></script>
+    <script src="/js/bk.js?version=45"></script>
     <script>
         var cookieValue = getCookie("playerScrollLock");
         var playerScrollLock = cookieValue === "true";
diff --git a/GanjooRazor/Pages/Bp.cshtml b/GanjooRazor/Pages/Bp.cshtml
index 869e40b2..ee9f8289 100644
--- a/GanjooRazor/Pages/Bp.cshtml
+++ b/GanjooRazor/Pages/Bp.cshtml
@@ -11,7 +11,7 @@
     <title>انتخاب قطعهٔ موسیقی مرتبط با شعر از بیپتونز</title>
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
-    <link href="/css/p8.css?version=64" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=65" rel="stylesheet" type="text/css" />
     <link href="/css/spotify.css" rel="stylesheet" type="text/css" />
 
     <script src="/lib/jquery/dist/jquery.min.js"></script>
diff --git a/GanjooRazor/Pages/Error.cshtml b/GanjooRazor/Pages/Error.cshtml
index 3b45d3e6..6053d8b1 100644
--- a/GanjooRazor/Pages/Error.cshtml
+++ b/GanjooRazor/Pages/Error.cshtml
@@ -14,7 +14,7 @@
         @ViewData["Title"]
     </title>
 
-    <link href="/css/p8.css?version=64" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=65" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
 
diff --git a/GanjooRazor/Pages/FAQ.cshtml b/GanjooRazor/Pages/FAQ.cshtml
index e0cced66..4eb0a98f 100644
--- a/GanjooRazor/Pages/FAQ.cshtml
+++ b/GanjooRazor/Pages/FAQ.cshtml
@@ -16,7 +16,7 @@
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <script src="/js/bk.js?version=44"></script>
+    <script src="/js/bk.js?version=45"></script>
     <script>
         var cookieValue = getCookie("playerScrollLock");
         var playerScrollLock = cookieValue === "true";
diff --git a/GanjooRazor/Pages/Golha.cshtml b/GanjooRazor/Pages/Golha.cshtml
index 1caa2d74..bdf75f90 100644
--- a/GanjooRazor/Pages/Golha.cshtml
+++ b/GanjooRazor/Pages/Golha.cshtml
@@ -10,7 +10,7 @@
     <title>انتخاب قطعه‌ای از برنامهٔ گلها مرتبط با این شعر</title>
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
-    <link href="/css/p8.css?version=64" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=65" rel="stylesheet" type="text/css" />
     <link href="/css/spotify.css" rel="stylesheet" type="text/css" />
     <script src="/lib/jquery/dist/jquery.min.js"></script>
     <script src="~/js/golha.js"></script>
diff --git a/GanjooRazor/Pages/Hashieha.cshtml b/GanjooRazor/Pages/Hashieha.cshtml
index b11a4f89..a4ef6da0 100644
--- a/GanjooRazor/Pages/Hashieha.cshtml
+++ b/GanjooRazor/Pages/Hashieha.cshtml
@@ -18,7 +18,7 @@
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <script src="/js/bk.js?version=44"></script>
+    <script src="/js/bk.js?version=45"></script>
     <script>
         var cookieValue = getCookie("playerScrollLock");
         var playerScrollLock = cookieValue === "true";
diff --git a/GanjooRazor/Pages/Index.cshtml b/GanjooRazor/Pages/Index.cshtml
index 2fd5522a..410313e6 100644
--- a/GanjooRazor/Pages/Index.cshtml
+++ b/GanjooRazor/Pages/Index.cshtml
@@ -12,11 +12,11 @@
     <title>
         @Html.Raw(ViewData["Title"])
     </title>
-    <link href="/css/p8.css?version=64" rel="stylesheet" type="text/css">
+    <link href="/css/p8.css?version=65" rel="stylesheet" type="text/css">
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon">
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml">
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <script src="/js/bk.js?version=44"></script>
+    <script src="/js/bk.js?version=45"></script>
     <script>
         var cookieValue = getCookie("playerScrollLock");
         var playerScrollLock = cookieValue === "true";
diff --git a/GanjooRazor/Pages/Index.cshtml.cs b/GanjooRazor/Pages/Index.cshtml.cs
index 0ab49a43..722dc519 100644
--- a/GanjooRazor/Pages/Index.cshtml.cs
+++ b/GanjooRazor/Pages/Index.cshtml.cs
@@ -101,7 +101,8 @@ namespace GanjooRazor.Pages
                 LoggedIn = LoggedIn,
                 Recitations = recitations.Where(a => a.RecitationType == recitationType).ToArray(),
                 ShowAllRecitaions = minimumControls ? true : ShowAllRecitaions,
-                CategoryMode = minimumControls
+                CategoryMode = minimumControls,
+                RecitationType = recitationType,
             };
         }
 
diff --git a/GanjooRazor/Pages/Login.cshtml b/GanjooRazor/Pages/Login.cshtml
index 59de727a..ee45deb6 100644
--- a/GanjooRazor/Pages/Login.cshtml
+++ b/GanjooRazor/Pages/Login.cshtml
@@ -13,7 +13,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
-    <link href="/css/p8.css?version=64" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=65" rel="stylesheet" type="text/css" />
 </head>
 <body class="bk-background">
     <div id="hdr">
diff --git a/GanjooRazor/Pages/Map.cshtml b/GanjooRazor/Pages/Map.cshtml
index 94bf18d0..d612e45a 100644
--- a/GanjooRazor/Pages/Map.cshtml
+++ b/GanjooRazor/Pages/Map.cshtml
@@ -12,7 +12,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="سخنوران و نویسندگان گنجور روی نقشهٔ جغرافیایی" />
     <meta charset="utf-8" />
-    <link href="/css/p8.css?version=64" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=65" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" href="/css/leaflet.css" />
     <style>
         .leaflet-container {
@@ -23,7 +23,7 @@
             font-family: 'Vazir'
         }
     </style>
-    <script src="/js/bk.js?version=44"></script>
+    <script src="/js/bk.js?version=45"></script>
     <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="~/js/leaflet.js"></script>
     <script src="~/js/leaflet-providers.js"></script>
diff --git a/GanjooRazor/Pages/Photos.cshtml b/GanjooRazor/Pages/Photos.cshtml
index 17550e9a..f007eaf0 100644
--- a/GanjooRazor/Pages/Photos.cshtml
+++ b/GanjooRazor/Pages/Photos.cshtml
@@ -15,7 +15,7 @@
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <script src="/js/bk.js?version=44"></script>
+    <script src="/js/bk.js?version=45"></script>
     <script>
         var cookieValue = getCookie("playerScrollLock");
         var playerScrollLock = cookieValue === "true";
diff --git a/GanjooRazor/Pages/Pin.cshtml b/GanjooRazor/Pages/Pin.cshtml
index 0aed7727..e4892624 100644
--- a/GanjooRazor/Pages/Pin.cshtml
+++ b/GanjooRazor/Pages/Pin.cshtml
@@ -11,7 +11,7 @@
     <title>پیشنهاد شعر مرتبط با تصویر</title>
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
-    <link href="/css/p8.css?version=64" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=65" rel="stylesheet" type="text/css" />
     <link href="/css/spotify.css" rel="stylesheet" type="text/css" />
 
     <script src="/lib/jquery/dist//jquery.min.js"></script>
diff --git a/GanjooRazor/Pages/RecitationsOrder.cshtml b/GanjooRazor/Pages/RecitationsOrder.cshtml
index 193c6381..cdf16064 100644
--- a/GanjooRazor/Pages/RecitationsOrder.cshtml
+++ b/GanjooRazor/Pages/RecitationsOrder.cshtml
@@ -12,7 +12,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="robots" content="noindex, nofollow" />
     <title>اطلاعات رتبه‌بندی خوانش‌های شعر</title>
-    <link href="/css/p8.css?version=64" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=65" rel="stylesheet" type="text/css" />
 
 </head>
 <body>
diff --git a/GanjooRazor/Pages/ReportComment.cshtml b/GanjooRazor/Pages/ReportComment.cshtml
index a5146c36..29d59693 100644
--- a/GanjooRazor/Pages/ReportComment.cshtml
+++ b/GanjooRazor/Pages/ReportComment.cshtml
@@ -11,7 +11,7 @@
     <meta name="robots" content="noindex, nofollow" />
     <title>درخواست حذف حاشیه</title>
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <link href="/css/p8.css?version=64" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=65" rel="stylesheet" type="text/css" />
     <style>
         label {
             width: 100px;
diff --git a/GanjooRazor/Pages/ReportRecitation.cshtml b/GanjooRazor/Pages/ReportRecitation.cshtml
index 3cec0eca..76e58c7a 100644
--- a/GanjooRazor/Pages/ReportRecitation.cshtml
+++ b/GanjooRazor/Pages/ReportRecitation.cshtml
@@ -13,7 +13,7 @@
     <meta name="robots" content="noindex, nofollow" />
     <title>گنجور » گزارش خطا در خوانش</title>
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <link href="/css/p8.css?version=64" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=65" rel="stylesheet" type="text/css" />
     <link href="~/dist/skin/pink.flag/css/jplayer.pink.flag.min.css" rel="stylesheet" type="text/css" />
     <style>
         label {
@@ -238,7 +238,7 @@
 
 
 
-                <script src="~/js/bk.js?version=44"></script>
+                <script src="~/js/bk.js?version=45"></script>
                 <script src="~/js/jplayersupport.js"></script>
                 <script src="~/js/vaabd.js?version=6"></script>
                 <script src="~/dist/jplayer/jquery.jplayer.min.js"></script>
diff --git a/GanjooRazor/Pages/Search.cshtml b/GanjooRazor/Pages/Search.cshtml
index b0f62297..49991241 100644
--- a/GanjooRazor/Pages/Search.cshtml
+++ b/GanjooRazor/Pages/Search.cshtml
@@ -21,7 +21,7 @@
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <script src="/js/bk.js?version=44"></script>
+    <script src="/js/bk.js?version=45"></script>
     <script>
         var cookieValue = getCookie("playerScrollLock");
         var playerScrollLock = cookieValue === "true";
diff --git a/GanjooRazor/Pages/Shared/_AdminLayout.cshtml b/GanjooRazor/Pages/Shared/_AdminLayout.cshtml
index ee18646e..d6e06328 100644
--- a/GanjooRazor/Pages/Shared/_AdminLayout.cshtml
+++ b/GanjooRazor/Pages/Shared/_AdminLayout.cshtml
@@ -35,7 +35,7 @@
         });
     </script>
 
-    <script src="/js/bk.js?version=44"></script>
+    <script src="/js/bk.js?version=45"></script>
     <script>
         function editBanner(bannerId) {
             var url = '?handler=Edit';
diff --git a/GanjooRazor/Pages/Shared/_UserPanelLayout.cshtml b/GanjooRazor/Pages/Shared/_UserPanelLayout.cshtml
index 85960751..a16d12c0 100644
--- a/GanjooRazor/Pages/Shared/_UserPanelLayout.cshtml
+++ b/GanjooRazor/Pages/Shared/_UserPanelLayout.cshtml
@@ -32,7 +32,7 @@
         });
     </script>
     <script src="/lib/diff.js"></script>
-    <script src="/js/bk.js?version=44"></script>
+    <script src="/js/bk.js?version=45"></script>
     <script>
         function compareCorrectionBlocks(originalElemenyId, editedElementId, resultElementId) {
             var a = document.getElementById(originalElemenyId);
diff --git a/GanjooRazor/Pages/Simi.cshtml b/GanjooRazor/Pages/Simi.cshtml
index 87320661..3480a2f0 100644
--- a/GanjooRazor/Pages/Simi.cshtml
+++ b/GanjooRazor/Pages/Simi.cshtml
@@ -17,7 +17,7 @@
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <script src="/js/bk.js?version=44"></script>
+    <script src="/js/bk.js?version=45"></script>
     <script>
         var cookieValue = getCookie("playerScrollLock");
         var playerScrollLock = cookieValue === "true";
diff --git a/GanjooRazor/Pages/Tagged.cshtml b/GanjooRazor/Pages/Tagged.cshtml
index 28f87dc4..6ab47b27 100644
--- a/GanjooRazor/Pages/Tagged.cshtml
+++ b/GanjooRazor/Pages/Tagged.cshtml
@@ -18,7 +18,7 @@
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <script src="/js/bk.js?version=44"></script>
+    <script src="/js/bk.js?version=45"></script>
     <script>
         var cookieValue = getCookie("playerScrollLock");
         var playerScrollLock = cookieValue === "true";
diff --git a/GanjooRazor/Pages/_AudioPlayerPartial.cshtml b/GanjooRazor/Pages/_AudioPlayerPartial.cshtml
index b90a6dc7..dcd47677 100644
--- a/GanjooRazor/Pages/_AudioPlayerPartial.cshtml
+++ b/GanjooRazor/Pages/_AudioPlayerPartial.cshtml
@@ -9,15 +9,15 @@
     {
         var recitaion = Model.Recitations[nRecitationIndex];
         <div class="@Model.CSSClass(nRecitationIndex)" id="@recitaion.Id">
-            <audio id="audio-@(nRecitationIndex + 1)" preload="none" controls>
+            <audio id="audio-@Model.RecitationType-@(nRecitationIndex + 1)" preload="none" controls>
                 <source src="@recitaion.Mp3Url" title="@($"{recitaion.AudioTitle} به خوانش {recitaion.AudioArtist}")" data-track-number="@(nRecitationIndex + 1)">
                 مرورگر شما از پخش صدای HTML 5 پشتیبانی نمی‌کند.
             </audio>
             @if (nRecitationIndex != (Model.Recitations.Length - 1))
             {
                 <script>
-                    document.getElementById('audio-@(nRecitationIndex + 1)').addEventListener("ended", function () {
-                        document.getElementById('audio-@(nRecitationIndex + 2)').play();
+                    document.getElementById('audio-@Model.RecitationType-@(nRecitationIndex + 1)').addEventListener("ended", function () {
+                        document.getElementById('audio-@Model.RecitationType-@(nRecitationIndex + 2)').play();
                         showAllRecitations();
                     });
                 </script>
@@ -29,7 +29,7 @@
                 }
                 else
                 {
-                    <a role="button" onclick="document.getElementById('audio-@(nRecitationIndex + 1)').play()" class="actionlink">@recitaion.AudioTitle</a> @Html.Raw(Model.getAudioDesc(recitaion, nRecitationIndex == 0))
+                    <a role="button" onclick="document.getElementById('audio-@Model.RecitationType-@(nRecitationIndex + 1)').play()" class="actionlink">@recitaion.AudioTitle</a> @Html.Raw(Model.getAudioDesc(recitaion, nRecitationIndex == 0))
                 }
                 
             </div>
@@ -37,7 +37,7 @@
             @if(!Model.CategoryMode)
             {
                 <div class="audio-partial-action-box">
-                    <a role="button" class="w3tooltip cursor-pointer recitation-button" onclick="document.getElementById('audio-@(nRecitationIndex + 1)').play()"><i class="recitation-icons recitation-play"></i><span class="w3tooltiptext">پخش</span></a>
+                    <a role="button" class="w3tooltip cursor-pointer recitation-button" onclick="document.getElementById('audio-@Model.RecitationType-@(nRecitationIndex + 1)').play()"><i class="recitation-icons recitation-play"></i><span class="w3tooltiptext">پخش</span></a>
                     <a role="button" class="w3tooltip cursor-pointer recitation-button" href="@($"/AudioClip/?a={recitaion.Id}")" onclick="wpopen(this.href); return false"><i class="recitation-icons recitation-download"></i><span class="w3tooltiptext">دریافت خوانش</span></a>
                     <a role="button" class="w3tooltip cursor-pointer recitation-button" href="@($"/ReportRecitation/?a={recitaion.Id}")" onclick="wpopen(this.href); return false"><i class="recitation-icons recitation-report"></i><span class="w3tooltiptext">گزارش خطا</span></a>
                     @if (Model.LoggedIn)
@@ -71,8 +71,8 @@
                     </div>
                 }
                 <script>
-                    document.getElementById('audio-@(nRecitationIndex + 1)').addEventListener('play', () => {
-                        currentAudio = document.getElementById('audio-@(nRecitationIndex + 1)');
+                    document.getElementById('audio-@Model.RecitationType-@(nRecitationIndex + 1)').addEventListener('play', () => {
+                        currentAudio = document.getElementById('audio-@Model.RecitationType-@(nRecitationIndex + 1)');
                         var audioList = document.querySelectorAll('audio');
                         audioList.forEach(function (audioElement) {
                             if (audioElement != currentAudio) {
@@ -83,8 +83,8 @@
                         _setXml('@($"{GanjooRazor.APIRoot.InternetUrl}/api/audio/file/{recitaion.Id}.xml")');
                     });
 
-                    document.getElementById('audio-@(nRecitationIndex + 1)').addEventListener('timeupdate', () => {
-                        _trackTimeChanged(document.getElementById('audio-@(nRecitationIndex + 1)'));
+                    document.getElementById('audio-@Model.RecitationType-@(nRecitationIndex + 1)').addEventListener('timeupdate', () => {
+                        _trackTimeChanged(document.getElementById('audio-@Model.RecitationType-@(nRecitationIndex + 1)'));
                     });
                 </script>
             }
@@ -93,7 +93,7 @@
 
         @if (!Model.ShowAllRecitaions && nRecitationIndex == 4 && Model.Recitations.Length > 5)
         {
-            <a role="button" class="pagebutton" id="load-all-recitations" onclick="showAllRecitations()">همهٔ خوانش‌ها<i class="info-buttons">autorenew</i></a>
+            <a role="button" class="pagebutton" id="load-all-recitations-@Model.RecitationType" onclick="showAllRecitations('load-all-recitations-@Model.RecitationType')">همهٔ خوانش‌ها<i class="info-buttons">autorenew</i></a>
         }
     }
     <script>
diff --git a/GanjooRazor/Pages/_AudioPlayerPartial.cshtml.cs b/GanjooRazor/Pages/_AudioPlayerPartial.cshtml.cs
index e6326a6e..1e54e76c 100644
--- a/GanjooRazor/Pages/_AudioPlayerPartial.cshtml.cs
+++ b/GanjooRazor/Pages/_AudioPlayerPartial.cshtml.cs
@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Mvc.RazorPages;
+using RMuseum.Models.GanjoorAudio;
 using RMuseum.Models.GanjoorAudio.ViewModels;
 
 namespace GanjooRazor.Pages
@@ -9,6 +10,7 @@ namespace GanjooRazor.Pages
         public PublicRecitationViewModel[] Recitations { get; set; }
         public bool ShowAllRecitaions { get; set; }
         public bool CategoryMode { get; set; }
+        public RecitationType RecitationType { get; set; }
 
         public string getAudioDesc(PublicRecitationViewModel recitation, bool contributionLink = false)
         {
diff --git a/GanjooRazor/Pages/_GanjoorPagePartial.cshtml b/GanjooRazor/Pages/_GanjoorPagePartial.cshtml
index 27d5bf65..d87d8531 100644
--- a/GanjooRazor/Pages/_GanjoorPagePartial.cshtml
+++ b/GanjooRazor/Pages/_GanjoorPagePartial.cshtml
@@ -606,11 +606,11 @@
 
                                     if (Model.GanjoorPage.Poem.Recitations.Where(a => a.RecitationType == RMuseum.Models.GanjoorAudio.RecitationType.Commentary).Any())
                                     {
-                                        <div class="related-images-frame" id="commantaries">
+                                        <div class="related-images-frame" id="commentaries">
                                             <div class="century">
-                                                @(Model.GanjoorPage.Poem.Recitations.Where(a => a.RecitationType == RMuseum.Models.GanjoorAudio.RecitationType.Commentary).Count() > 1 ? "شرح‌‌های صوتی" : "شرح صوتی") <a role="button" class="w3tooltip cursor-pointer" onclick="switch_section('commantaries-section', 'commantaries-collapse-button')"><i class="info-buttons expand_circle_down" id="commantaries-collapse-button"></i><span class="w3tooltiptext">جمع شود / باز شود</span></a>
+                                                @(Model.GanjoorPage.Poem.Recitations.Where(a => a.RecitationType == RMuseum.Models.GanjoorAudio.RecitationType.Commentary).Count() > 1 ? "شرح‌‌های صوتی" : "شرح صوتی") <a role="button" class="w3tooltip cursor-pointer" onclick="switch_section('commentaries-section', 'commentaries-collapse-button')"><i class="info-buttons expand_circle_down" id="commentaries-collapse-button"></i><span class="w3tooltiptext">جمع شود / باز شود</span></a>
                                             </div>
-                                            <div id="commantaries-section">
+                                            <div id="commentaries-section">
                                                 <partial name="_AudioPlayerPartial" model=@Model.GetRecitationsModel(Model.GanjoorPage.Poem.Recitations, false, RMuseum.Models.GanjoorAudio.RecitationType.Commentary) />
                                             </div>
                                         </div>
diff --git a/GanjooRazor/Pages/_InlinePageUtilsPartial.cshtml b/GanjooRazor/Pages/_InlinePageUtilsPartial.cshtml
index 922fd965..d3660fbf 100644
--- a/GanjooRazor/Pages/_InlinePageUtilsPartial.cshtml
+++ b/GanjooRazor/Pages/_InlinePageUtilsPartial.cshtml
@@ -141,7 +141,7 @@
 
             @if 
             (
-                (Model.GanjoorPage != null && Model.GanjoorPage.Poem != null && Model.GanjoorPage.Poem.Recitations.Length > 0)
+                (Model.GanjoorPage != null && Model.GanjoorPage.Poem != null && Model.GanjoorPage.Poem.Recitations.Where(a => a.RecitationType == RMuseum.Models.GanjoorAudio.RecitationType.Normal).Any())
                 ||
                 (Model.CategoryHasRecitations)
             )
@@ -154,6 +154,19 @@
                 </a>
             }
 
+            @if
+           (
+           Model.GanjoorPage != null && Model.GanjoorPage.Poem != null && Model.GanjoorPage.Poem.Recitations.Where(a => a.RecitationType == RMuseum.Models.GanjoorAudio.RecitationType.Commentary).Any()
+           )
+            {
+                <a href="#commentaries" role="button" class="w3tooltip cursor-pointer">
+                    <div class="circled-number">
+                        <i class="noindent-info-button commentary-listen"></i>
+                    </div>
+                    <span class="w3tooltiptext">شرح‌های صوتی</span>
+                </a>
+            }
+
             @if
             (
                 (Model.CategoryPoemGeoDateTags != null && Model.CategoryPoemGeoDateTags.Length > 0)
diff --git a/GanjooRazor/Pages/errors/404.cshtml b/GanjooRazor/Pages/errors/404.cshtml
index ea32b4a6..746e13c0 100644
--- a/GanjooRazor/Pages/errors/404.cshtml
+++ b/GanjooRazor/Pages/errors/404.cshtml
@@ -14,7 +14,7 @@
         @ViewData["Title"]
     </title>
 
-    <link href="/css/p8.css?version=64" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=65" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
 
diff --git a/GanjooRazor/Pages/errors/503.cshtml b/GanjooRazor/Pages/errors/503.cshtml
index 28258b04..02488a16 100644
--- a/GanjooRazor/Pages/errors/503.cshtml
+++ b/GanjooRazor/Pages/errors/503.cshtml
@@ -15,7 +15,7 @@
         @ViewData["Title"]
     </title>
 
-    <link href="/css/p8.css?version=64" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=65" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
 
diff --git a/GanjooRazor/wwwroot/css/p8.css b/GanjooRazor/wwwroot/css/p8.css
index 28bc5e50..371743b9 100644
--- a/GanjooRazor/wwwroot/css/p8.css
+++ b/GanjooRazor/wwwroot/css/p8.css
@@ -1513,6 +1513,10 @@ audio {
     content: 'hearing';
 }
 
+.commentary-listen::after {
+    content: 'spatial_audio_off';
+}
+
 .recitation-comments::after {
     content: 'question_answer';
 }
diff --git a/GanjooRazor/wwwroot/js/bk.js b/GanjooRazor/wwwroot/js/bk.js
index 21ab66ee..ff9ce6fb 100644
--- a/GanjooRazor/wwwroot/js/bk.js
+++ b/GanjooRazor/wwwroot/js/bk.js
@@ -905,12 +905,12 @@ function loadMoreRelatedFromPoet(poetId, rhythm, rhymeLetters, skipPoemFullUrl1,
     });
 }
 
-function showAllRecitations() {
+function showAllRecitations(buttonId) {
     const hiddenRecitations = document.querySelectorAll('.hidden-recitation');
     hiddenRecitations.forEach(function (recitation) {
         recitation.className = 'audio-player';
     });
-    document.getElementById('load-all-recitations').style.display = 'none';
+    document.getElementById(buttonId).style.display = 'none';
 }
 
 function switch_section(sectionId, buttonId) {