bottpm audio player

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=90" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=91" rel="stylesheet" type="text/css" />
     <link href="/css/user-panel.css?version=1" rel="stylesheet" type="text/css" />
 </head>
 <body>

GanjooRazor/Pages/Auth/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=90" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=91" rel="stylesheet" type="text/css" />
 </head>
 <body class="bk-background">
     <div id="hdr">

GanjooRazor/Pages/Auth/ResetPassword.cshtml

@@ -11,7 +11,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=90" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=91" rel="stylesheet" type="text/css" />
 </head>
 <body class="bk-background">
     <div id="hdr">

GanjooRazor/Pages/Auth/SignUp.cshtml

@@ -12,7 +12,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=90" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=91" rel="stylesheet" type="text/css" />
 </head>
 <body class="bk-background">
     <div id="hdr">

GanjooRazor/Pages/CommentReports/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=90" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=91" rel="stylesheet" type="text/css" />
     <style>
         label {
             width: 100px;

GanjooRazor/Pages/Error.cshtml

@@ -13,7 +13,7 @@
     <title>
         @ViewData["Title"]
     </title>
-    <link href="/css/p8.css?version=90" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=91" 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" />
 

GanjooRazor/Pages/ImageRecommendation/Pin.cshtml

@@ -12,7 +12,7 @@
     <meta name="robots" content="noindex, nofollow" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
-    <link href="/css/p8.css?version=90" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=91" rel="stylesheet" type="text/css" />
     <link href="/css/spotify.css" rel="stylesheet" type="text/css" />
 
     <script src="/lib/jquery/dist/jquery.min.js"></script>

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=90" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=91" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" href="/css/leaflet.css?version=2" />
     <style>
         .leaflet-container {
@@ -23,7 +23,7 @@
             font-family: 'Vazirmatn'
         }
     </style>
-    <script src="/js/bk.js?version=90"></script>
+    <script src="/js/bk.js?version=91"></script>
     <script src="~/js/jquery-1.10.2.min.js"></script>
     <script src="~/js/leaflet.js"></script>
     <script src="~/js/leaflet-providers.js"></script>

GanjooRazor/Pages/Misc/Photos.cshtml

@@ -11,11 +11,11 @@
     <title>
         @Html.Raw(ViewData["Title"])
     </title>
-    <link href="/css/p8.css?version=90" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=91" 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=90"></script>
+    <script src="/js/bk.js?version=91"></script>
     <script>
         var cookieValue = getCookie("playerScrollLock");
         var playerScrollLock = cookieValue === "true";

GanjooRazor/Pages/Partials/GanjoorPage/PageTypes/_PoemPagePartial.cshtml

@@ -71,6 +71,12 @@
                  }
         }
 </script>
+
+<div id="sticky-audio-player" class="up-sticky-player" style="display:none;">
+    <span id="sticky-audio-narrator" class="up-sticky-player__narrator"></span>
+    <div id="sticky-audio-slot" class="up-sticky-player__audio-slot"></div>
+    <a role="button" class="cursor-pointer up-sticky-player__close" onclick="closeStickyPlayer()" title="بستن">✕</a>
+</div>
 }
 
 <script>

GanjooRazor/Pages/Partials/GanjoorPage/_AudioPlayerPartial.cshtml

@@ -84,6 +84,7 @@
                         });
 
                         _setXml('@($"{GanjooRazor.APIRoot.InternetUrl}/api/audio/file/{recitaion.Id}.xml")');
+                        showStickyPlayer(currentAudio, '@Html.Raw(recitaion.AudioArtist)', @recitaion.Id);
                     });
 
                     document.getElementById('audio-@recitaion.Id').addEventListener('timeupdate', () => {

GanjooRazor/Pages/Recitations/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=90" rel="stylesheet" type="text/css" />
+    <link href="~/css/p8.css?version=91" 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=90"></script>
+        <script src="~/js/bk.js?version=91"></script>
         <script src="~/js/jplayersupport.js"></script>
         <script src="~/js/vaabd.js?version=10"></script>
         <script src="~/dist/jplayer/jquery.jplayer.min.js"></script>

GanjooRazor/Pages/Recitations/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=90" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=91" rel="stylesheet" type="text/css" />
 
 </head>
 <body>

GanjooRazor/Pages/Recitations/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=90" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=91" 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=90"></script>
+                <script src="~/js/bk.js?version=91"></script>
                 <script src="~/js/jplayersupport.js"></script>
                 <script src="~/js/vaabd.js?version=10"></script>
                 <script src="~/dist/jplayer/jquery.jplayer.min.js"></script>

GanjooRazor/Pages/Shared/_AdminLayout.cshtml

@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
     <link rel="stylesheet" href="~/css/site.css" />
     <link href="/dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />
-    <link href="/css/p8.css?version=90" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=91" rel="stylesheet" type="text/css" />
     <link href="/css/user-panel.css?version=3" 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" />
@@ -36,7 +36,7 @@
         });
     </script>
 
-    <script src="/js/bk.js?version=90"></script>
+    <script src="/js/bk.js?version=91"></script>
     <script>
         function editBanner(bannerId) {
             var url = '?handler=Edit';

GanjooRazor/Pages/Shared/_Layout.cshtml

@@ -30,11 +30,11 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>@Html.Raw(ViewData["Title"])</title>
-    <link href="/css/p8.css?version=90" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=91" 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=90"></script>
+    <script src="/js/bk.js?version=91"></script>
     <script>
         var cookieValue = getCookie("playerScrollLock");
         var playerScrollLock = cookieValue === "true";

GanjooRazor/Pages/Shared/_UserPanelLayout.cshtml

@@ -9,7 +9,7 @@
     </title>
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
     <link rel="stylesheet" href="~/css/site.css" />
-    <link href="/css/p8.css?version=90" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=91" rel="stylesheet" type="text/css" />
     <link href="/css/user-panel.css?version=3" 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" />
@@ -33,7 +33,7 @@
         });
     </script>
     <script src="/lib/diff.js"></script>
-    <script src="/js/bk.js?version=90"></script>
+    <script src="/js/bk.js?version=91"></script>
     <script>
         function compareCorrectionBlocks(originalElemenyId, editedElementId, resultElementId) {
             var a = document.getElementById(originalElemenyId);

GanjooRazor/Pages/SongRecommendation/Bp.cshtml

@@ -12,7 +12,7 @@
     <meta name="robots" content="noindex, nofollow" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
-    <link href="/css/p8.css?version=90" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=91" rel="stylesheet" type="text/css" />
     <link href="/css/spotify.css" rel="stylesheet" type="text/css" />
 
     <script src="/lib/jquery/dist/jquery.min.js"></script>

GanjooRazor/Pages/SongRecommendation/Golha.cshtml

@@ -11,7 +11,7 @@
     <meta name="robots" content="noindex, nofollow" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />    
-    <link href="/css/p8.css?version=90" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=91" 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>

GanjooRazor/Pages/SongRecommendation/Spotify.cshtml

@@ -12,7 +12,7 @@
     <meta name="robots" content="noindex, nofollow" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
-    <link href="/css/p8.css?version=90" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=91" rel="stylesheet" type="text/css" />
     <link href="/css/spotify.css" rel="stylesheet" type="text/css" />
 
     <script src="/lib/jquery/dist/jquery.min.js"></script>

GanjooRazor/Pages/errors/404.cshtml

@@ -13,7 +13,7 @@
     <title>
         @ViewData["Title"]
     </title>
-    <link href="/css/p8.css?version=90" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=91" 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" />
 

GanjooRazor/Pages/errors/503.cshtml

@@ -14,7 +14,7 @@
     <title>
         @ViewData["Title"]
     </title>
-    <link href="/css/p8.css?version=90" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=91" 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" />
 

GanjooRazor/wwwroot/css/p8.css

@@ -3035,3 +3035,57 @@ mark {
 #after-bio {
     scroll-margin-top: 50px;
 }
+
+/* ---------- sticky mini audio-player (recitation seek controls stay
+   reachable while scrolling the poem text) ---------- */
+
+.up-sticky-player {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 14px;
+    background: var(--card-paper);
+    border-top: 1px solid var(--border-gold);
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
+}
+
+.up-sticky-player__narrator {
+    font-weight: 600;
+    white-space: nowrap;
+    color: var(--lapis);
+    flex-shrink: 0;
+}
+
+.up-sticky-player__audio-slot {
+    flex: 1;
+    min-width: 0;
+}
+
+.up-sticky-player__audio-slot audio {
+    width: 100%;
+    display: block;
+}
+
+.up-sticky-player__close {
+    cursor: pointer;
+    font-size: 1.1rem;
+    line-height: 1;
+    color: var(--lapis);
+    padding: 4px 8px;
+    flex-shrink: 0;
+}
+
+.up-sticky-player__close:hover {
+    color: var(--brand);
+}
+
+@media (max-width: 600px) {
+    .up-sticky-player__narrator {
+        display: none;
+    }
+}

GanjooRazor/wwwroot/js/bk.js

@@ -349,6 +349,71 @@ function hilightverse(vnum, clr, sc, forceScroll) {
     return false;
 }
 
+// ---------- sticky mini audio-player ----------
+// Re-parents the actual playing <audio> element into a fixed bottom bar so its
+// native seek/play/pause controls stay reachable while the user scrolls the
+// poem text, instead of needing to scroll back to the recitation list. Moving
+// an <audio> element via appendChild does not interrupt playback in modern
+// browsers, so this is safe to do mid-play.
+var stickyPlayerOriginalParent = null;
+var stickyPlayerOriginalNextSibling = null;
+var stickyPlayerDismissed = false;
+var stickyPlayerLastRecitationId = null;
+
+function showStickyPlayer(audioElement, narratorName, recitationId) {
+    if (recitationId !== stickyPlayerLastRecitationId) {
+        // a different recitation started - a manual dismissal of a previous
+        // track should not suppress the bar for a newly chosen one
+        stickyPlayerDismissed = false;
+        stickyPlayerLastRecitationId = recitationId;
+    }
+    if (stickyPlayerDismissed) return;
+
+    var bar = document.getElementById('sticky-audio-player');
+    var slot = document.getElementById('sticky-audio-slot');
+    if (!bar || !slot) return;
+
+    if (audioElement.parentElement !== slot) {
+        // if a DIFFERENT audio element is already sitting in the slot (e.g. the
+        // page-level recitation was playing and a couplet-level one just
+        // started), put it back where it came from first so the slot never
+        // ends up holding two <audio> elements at once
+        var existing = slot.firstElementChild;
+        if (existing && existing !== audioElement && stickyPlayerOriginalParent) {
+            if (stickyPlayerOriginalNextSibling) {
+                stickyPlayerOriginalParent.insertBefore(existing, stickyPlayerOriginalNextSibling);
+            } else {
+                stickyPlayerOriginalParent.appendChild(existing);
+            }
+        }
+
+        stickyPlayerOriginalParent = audioElement.parentElement;
+        stickyPlayerOriginalNextSibling = audioElement.nextSibling;
+        slot.appendChild(audioElement);
+    }
+
+    document.getElementById('sticky-audio-narrator').textContent = narratorName;
+    bar.style.display = 'flex';
+}
+
+function closeStickyPlayer() {
+    var slot = document.getElementById('sticky-audio-slot');
+    var bar = document.getElementById('sticky-audio-player');
+    if (!slot || !bar) return;
+
+    var audioElement = slot.firstElementChild;
+    if (audioElement && stickyPlayerOriginalParent) {
+        if (stickyPlayerOriginalNextSibling) {
+            stickyPlayerOriginalParent.insertBefore(audioElement, stickyPlayerOriginalNextSibling);
+        } else {
+            stickyPlayerOriginalParent.appendChild(audioElement);
+        }
+    }
+
+    bar.style.display = 'none';
+    stickyPlayerDismissed = true;
+}
+
 function fillnarrations(coupletIndex) {
     if (typeof (narrators) == "undefined") {
         var blockid = '#play-block-' + coupletIndex;