#250 displayin a limited (5) number of recitations for poems with lots of recitations by default

GanjooRazor/Pages/_AudioPlayerPartial.cshtml

@@ -8,7 +8,7 @@
     @for (var nRecitationIndex = 0; nRecitationIndex < Model.Recitations.Length; nRecitationIndex++)
     {
         var recitaion = Model.Recitations[nRecitationIndex];
-        <div class="audio-player">
+        <div class="@Model.CSSClass(nRecitationIndex)">
             <audio id="audio-@(nRecitationIndex + 1)" preload="none" controls>
                 <source src="@recitaion.Mp3Url" title="@($"{recitaion.AudioTitle} به خوانش {recitaion.AudioArtist}")" data-track-number="@(nRecitationIndex + 1)" />
                 مرورگر شما از پخش صدای HTML 5 پشتیبانی نمی‌کند.
@@ -33,7 +33,14 @@
                     _trackTimeChanged(document.getElementById('audio-@(nRecitationIndex + 1)'));
                 });
             </script>
+
+
         </div>
+
+        @if (nRecitationIndex == 4 && Model.Recitations.Length > 5)
+        {
+            <a role="button" class="pagebutton" id="load-all-recitations" onclick="">همهٔ خوانش‌ها<i class="info-buttons">autorenew</i></a>
+        }
     }
 </div>
 

GanjooRazor/Pages/_AudioPlayerPartial.cshtml.cs

@@ -40,5 +40,10 @@ namespace GanjooRazor.Pages
 
             return audiodesc;
         }
+
+        public string CSSClass(int recitationIndex)
+        {
+            return recitationIndex < 5 ? "audio-player" : "hidden-item";
+        }
     }
 }

GanjooRazor/wwwroot/css/p8.css

@@ -1126,4 +1126,12 @@ ol {
 
 .audio-player{
 
+}
+
+.recitaion-info{
+
+}
+
+.hidden-item {
+    display: none;
 }