docs: #279 make spotify song selection more responsive

This commit is contained in:
Hamid Reza Mohammadi 2022-02-10 15:45:31 +03:30
parent 1860f0d242
commit d88c1feb0c
24 changed files with 109 additions and 64 deletions

View File

@ -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=32" rel="stylesheet" type="text/css" />
<link href="~/css/p8.css?version=33" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
<script>

View File

@ -11,7 +11,7 @@
<title>انتخاب قطعهٔ موسیقی مرتبط با شعر از بیپتونز</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="/css/p8.css?version=32" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=33" rel="stylesheet" type="text/css" />
<link href="/css/spotify.css" rel="stylesheet" type="text/css" />
<script src="/lib/jquery/dist/jquery.min.js"></script>

View File

@ -14,7 +14,7 @@
@ViewData["Title"]
</title>
<link href="/css/p8.css?version=32" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=33" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

View File

@ -10,7 +10,7 @@
<title>انتخاب قطعه‌ای از برنامهٔ گلها مرتبط با این شعر</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="/css/p8.css?version=32" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=33" 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>

View File

@ -16,7 +16,7 @@
{
<meta name="robots" content="noindex, nofollow" />
}
<link href="/css/p8.css?version=32" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=33" rel="stylesheet" type="text/css" />
<link href="/css/fab.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

View File

@ -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" type="image/x-icon" />
<link href="/css/p8.css?version=32" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=33" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="hdr">

View File

@ -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=32" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=33" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/css/leaflet.css" />
<style>
.leaflet-container {

View File

@ -12,7 +12,7 @@
<title>
@Html.Raw(ViewData["Title"])
</title>
<link href="/css/p8.css?version=32" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=33" rel="stylesheet" type="text/css" />
<link href="/css/fab.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

View File

@ -11,7 +11,7 @@
<title>پیشنهاد شعر مرتبط با تصویر</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="/css/p8.css?version=32" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=33" rel="stylesheet" type="text/css" />
<link href="/css/spotify.css" rel="stylesheet" type="text/css" />
<script src="/lib/jquery/dist//jquery.min.js"></script>

View File

@ -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=32" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=33" rel="stylesheet" type="text/css" />
</head>
<body>

View File

@ -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=32" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=33" rel="stylesheet" type="text/css" />
<style>
label {
width: 100px;

View File

@ -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=32" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=33" rel="stylesheet" type="text/css" />
<style>
label {
width: 100px;

View File

@ -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" type="image/x-icon" />
<link href="/css/p8.css?version=32" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=33" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="hdr">

View File

@ -15,7 +15,7 @@
@ViewData["Title"]
</title>
<link href="/css/p8.css?version=32" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=33" rel="stylesheet" type="text/css" />
<link href="/css/fab.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

View File

@ -9,7 +9,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=32" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=33" rel="stylesheet" type="text/css" />
<link href="/css/fab.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

View File

@ -8,7 +8,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=32" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=33" rel="stylesheet" type="text/css" />
<link href="/css/fab.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

View File

@ -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" type="image/x-icon" />
<link href="/css/p8.css?version=32" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=33" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="hdr">

View File

@ -11,12 +11,12 @@
<title>انتخاب قطعهٔ موسیقی مرتبط با شعر از اسپاتیفای</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="/css/p8.css?version=32" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=33" 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/utils.js"></script>
<script src="/js/spotify.js"></script>
<script src="/js/spotify.js?version=1"></script>
<script type="text/javascript">
$(function () {
$('#spotify').on('click', function() {
@ -101,22 +101,22 @@
@foreach (var suggestedSong in Model.SuggestedSongs)
{
<p>
@if (suggestedSong.Id == Model.InsertedSongId)
{
<text>
<a target="_blank" href="@Html.Raw(suggestedSong.ArtistUrl)" style="color:green">@suggestedSong.ArtistName</a> » <a target="_blank" href="@Html.Raw(suggestedSong.AlbumUrl)" style="color:green">@suggestedSong.AlbumName</a> » <a target="_blank" href="@Html.Raw(suggestedSong.TrackUrl)" style="color:green">@suggestedSong.TrackName</a>
</text>
<p>
@if (suggestedSong.Id == Model.InsertedSongId)
{
<text>
<a target="_blank" href="@Html.Raw(suggestedSong.ArtistUrl)" style="color:green">@suggestedSong.ArtistName</a> » <a target="_blank" href="@Html.Raw(suggestedSong.AlbumUrl)" style="color:green">@suggestedSong.AlbumName</a> » <a target="_blank" href="@Html.Raw(suggestedSong.TrackUrl)" style="color:green">@suggestedSong.TrackName</a>
</text>
}
else
{
<text>
<a target="_blank" href="@Html.Raw(suggestedSong.ArtistUrl)">@suggestedSong.ArtistName</a> » <a target="_blank" href="@Html.Raw(suggestedSong.AlbumUrl)">@suggestedSong.AlbumName</a> » <a target="_blank" href="@Html.Raw(suggestedSong.TrackUrl)">@suggestedSong.TrackName</a>
</text>
}
}
else
{
<text>
<a target="_blank" href="@Html.Raw(suggestedSong.ArtistUrl)">@suggestedSong.ArtistName</a> » <a target="_blank" href="@Html.Raw(suggestedSong.AlbumUrl)">@suggestedSong.AlbumName</a> » <a target="_blank" href="@Html.Raw(suggestedSong.TrackUrl)">@suggestedSong.TrackName</a>
</text>
}
</p>
</p>
}
@if (Model.PostSuccess)
{
@ -139,26 +139,35 @@
<input type="text" class="search" id="searchid" placeholder="خواننده" />&nbsp;<span style="visibility:hidden" id="l1"><a id="artistlink" href="#" target="_blank">صفحهٔ هنرمند</a></span>
<br />
<div id="result"></div>
<span class="inputlabel">آلبوم: </span><select name="album" id="album" disabled="disabled" class="albumtrack"></select>&nbsp;<span style="visibility:hidden" id="l2"><a id="albumlink" href="#" target="_blank">صفحهٔ آلبوم</a></span>
<br />
<span class="inputlabel">آهنگ: </span><select name="track" id="track" disabled="disabled" class="albumtrack"></select>&nbsp;<span style="visibility:hidden" id="l3"><a id="tracklink" href="#" target="_blank">صفحهٔ آهنگ</a></span>
<br />
<span><small>جستجو بر اساس نام آهنگ:</small> </span>
<input type="text" class="trackq" id="trackq" placeholder="عنوان آهنگ" />
<br />
<div id="resultq"></div>
<div id="searching-artists" style="display:none"><img src="/image/loading.gif" /></div>
<div id="album-section">
<span class="inputlabel">آلبوم: </span><select name="album" id="album" disabled="disabled" class="albumtrack"></select>&nbsp;<span style="visibility:hidden" id="l2"><a id="albumlink" href="#" target="_blank">صفحهٔ آلبوم</a></span>
<div id="searching-albums" style="display:none"><img src="/image/loading.gif" /></div>
<div id="song-section">
<br />
<span class="inputlabel">آهنگ: </span><select name="track" id="track" disabled="disabled" class="albumtrack"></select>&nbsp;<span style="visibility:hidden" id="l3"><a id="tracklink" href="#" target="_blank">صفحهٔ آهنگ</a></span>
<br />
<span><small>جستجو بر اساس نام آهنگ:</small> </span>
<input type="text" class="trackq" id="trackq" placeholder="عنوان آهنگ" />
<br />
<div id="resultq"></div>
<div id="searching-songs" style="display:none"><img src="/image/loading.gif" /></div>
<form method="post">
<input type="hidden" asp-for="PoemMusicTrackViewModel.ArtistName" />
<input type="hidden" asp-for="PoemMusicTrackViewModel.ArtistUrl" />
<input type="hidden" asp-for="PoemMusicTrackViewModel.AlbumName" />
<input type="hidden" asp-for="PoemMusicTrackViewModel.AlbumUrl" />
<input type="hidden" asp-for="PoemMusicTrackViewModel.TrackName" />
<input type="hidden" asp-for="PoemMusicTrackViewModel.TrackUrl" />
<span class="inputlabel">توضیح: </span><input type="text" class="albumtrack" placeholder="توضیح" asp-for="PoemMusicTrackViewModel.Description" />
<br />
<input type="submit" name="submit" id="submit" value="پیشنهاد قطعه" />
</form>
</div>
</div>
<form method="post">
<input type="hidden" asp-for="PoemMusicTrackViewModel.ArtistName" />
<input type="hidden" asp-for="PoemMusicTrackViewModel.ArtistUrl" />
<input type="hidden" asp-for="PoemMusicTrackViewModel.AlbumName" />
<input type="hidden" asp-for="PoemMusicTrackViewModel.AlbumUrl" />
<input type="hidden" asp-for="PoemMusicTrackViewModel.TrackName" />
<input type="hidden" asp-for="PoemMusicTrackViewModel.TrackUrl" />
<span class="inputlabel">توضیح: </span><input type="text" class="albumtrack" placeholder="توضیح" asp-for="PoemMusicTrackViewModel.Description" />
<br />
<input type="submit" name="submit" id="submit" value="پیشنهاد قطعه" />
</form>
</div>
}

View File

@ -193,7 +193,7 @@ namespace GanjooRazor.Pages
await _RefreshSpotifyToken();
return await OnPostSearchByArtistNameAsync(search, true);
}
return BadRequest(response.ToString());
return new BadRequestObjectResult(JsonConvert.DeserializeObject<string>(await response.Content.ReadAsStringAsync()));
}

View File

@ -14,7 +14,7 @@
گنجور » برگردان‌ها و نویس‌های شعر
</title>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<link href="~/css/p8.css?version=32" rel="stylesheet" type="text/css" />
<link href="~/css/p8.css?version=33" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
</head>

View File

@ -14,7 +14,7 @@
@ViewData["Title"]
</title>
<link href="/css/p8.css?version=32" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=33" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

View File

@ -15,7 +15,7 @@
@ViewData["Title"]
</title>
<link href="/css/p8.css?version=32" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=33" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

View File

@ -42,7 +42,7 @@ function bnumClick(poemId, index) {
}
var divParent = msr1s[index].className == "m1" ? msr1s[index].parentElement : msr1s[index];
var imgElementId = 'loadingimg-' + divId;
divParent.innerHTML = divParent.innerHTML + '<div class="bnumdiv" id="' + divId + '"><img id="' + imgElementId +'" src="/image/loading.gif" alt="بارگذاری "/></div>';
divParent.innerHTML = divParent.innerHTML + '<div class="bnumdiv" id="' + divId + '"><img id="' + imgElementId +'" src="/image/loading.gif" alt="بارگذاری"/></div>';
$.ajax({
type: "GET",
url: '?Handler=BNumPartial&poemId=' + String(poemId) + '&coupletIndex=' + String(index),

View File

@ -2,13 +2,25 @@
$(".search").keyup(delay(function () {
var searchid = $(this).val();
var dataString = 'search=' + searchid;
$("#album-section").css('display', 'none');
$("#searching-artists").css('display', 'block');
if (searchid != '') {
$.ajax({
type: "POST",
url: "/spotify?handler=SearchByArtistName",
data: dataString,
cache: false,
error: function (e) {
$("#album-section").css('display', 'block');
$("#searching-artists").css('display', 'none');
if (e.responseText == null)
alert(e);
else
alert(e.responseText);
},
success: function (html) {
$("#album-section").css('display', 'block');
$("#searching-artists").css('display', 'none');
$("#result").html(html).show();
}
});
@ -36,6 +48,10 @@
$('#album').attr("disabled", "disabled");
$("#track").attr("disabled", "disabled");
$("#album-section").css('display', 'none');
$("#searching-artists").css('display', 'block');
$.post("/spotify?handler=FillAlbums", {
'artist': $artist_id
},
@ -55,7 +71,13 @@
$('#album').trigger("change");
}, "json");
}, "json").done(function () {
$("#album-section").css('display', 'block');
$("#searching-artists").css('display', 'none');
}).fail(function () {
$("#album-section").css('display', 'block');
$("#searching-artists").css('display', 'none');
});
}
@ -82,6 +104,7 @@
});
$(".trackq").keyup(delay(function () {
$("#searching-songs").css('display', 'block');
var searchid = $(this).val();
var dataString = 'search=' + searchid;
if (searchid != '') {
@ -90,7 +113,15 @@
url: "/spotify?handler=SearchByTrackTitle",
data: dataString,
cache: false,
error: function (e) {
$("#searching-songs").css('display', 'none');
if (e.responseText == null)
alert(e);
else
alert(e.responseText);
},
success: function (html) {
$("#searching-songs").css('display', 'none');
$("#resultq").html(html).show();
}
});
@ -100,7 +131,6 @@
jQuery("#resultq").on("click", function (e) {
var $clicked = $(e.target);
var $artist_name = $clicked.find('.artist_name').html();
var $artist_id = $clicked.find('.artist_id').html();
var $artist_url = $clicked.find('.artist_url').html();
var $album_name = $clicked.find('.album_name').html();
@ -162,6 +192,9 @@
$("#PoemMusicTrackViewModel_AlbumName").val($("#album option:selected").html());
$("#PoemMusicTrackViewModel_AlbumUrl").val($album_url);
$("#song-section").css('display', 'none');
$("#searching-albums").css('display', 'block');
$.post("/spotify?handler=FillTracks", {
'album': $("#album option:selected").val()
},
@ -174,10 +207,13 @@
}
$("#track").removeAttr("disabled");
$('#track').trigger("change");
}, "json");
}, "json").done(function () {
$("#song-section").css('display', 'block');
$("#searching-albums").css('display', 'none');
}).fail(function () {
$("#song-section").css('display', 'block');
$("#searching-albums").css('display', 'none');
});;
}
});
@ -205,5 +241,5 @@
}
});
});