ability to recheck and play recitations while reporting errors
This commit is contained in:
Hamid Reza Mohammadi
parent
2717c801d5
commit
b204b9b33e
@ -11,9 +11,10 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<title>گزارش خطا در خوانش</title>
|
||||
<title>گنجور » گزارش خطا در خوانش</title>
|
||||
<script src="/lib/jquery/dist/jquery.min.js"></script>
|
||||
<link href="/css/p8.css?version=54" rel="stylesheet" type="text/css" />
|
||||
<link href="~/dist/skin/pink.flag/css/jplayer.pink.flag.min.css" rel="stylesheet" type="text/css" />
|
||||
<style>
|
||||
label {
|
||||
width: 100px;
|
||||
@ -91,7 +92,7 @@
|
||||
<table class="width-100per">
|
||||
<tr>
|
||||
<td>
|
||||
<span class="inputlabel">این خوانش چه مشکلی دارد؟ (در صورت غلط خوانی اولین مصرع و کلمهٔ غلط خوانده شده را گزارش کنید)</span>
|
||||
<span class="inputlabel">این خوانش چه مشکلی دارد؟ (در صورت غلط خوانی اولین یا مهمترین مصرع و کلمهٔ غلط خوانده شده را گزارش کنید)</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -124,6 +125,271 @@
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div style="width:95%;max-width:500px;min-width:380px;margin:auto">
|
||||
<div id="jp_container_1" class="jp-video jp-video-270p">
|
||||
<div class="jp-type-playlist">
|
||||
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
|
||||
<div id="textcnt" style="display:table;width:100%;height:400px;vertical-align: bottom;background-image: url('https://source.unsplash.com/500x400/?flowers');color:white">
|
||||
<div id="title1" style="display: table-row">
|
||||
<p style="width:100%;height:25%;text-align:center;vertical-align: middle;font-family: 'Vazir';display: table-cell;font-size: 1.5em;text-shadow: 2px 2px 4px white;">
|
||||
@Model.Poem.Category.Poet.Name
|
||||
</p>
|
||||
</div>
|
||||
<div id="title2" style="display: table-row">
|
||||
<p style="width:100%;height:25%;text-align:center;vertical-align: middle;font-family: 'Vazir';display: table-cell;font-size: 1.5em;text-shadow: 2px 2px 4px white;">
|
||||
@for (int i = 1; i < Model.Poem.Category.Cat.Ancestors.Count; i++)
|
||||
{
|
||||
<text>
|
||||
@Model.Poem.Category.Cat.Ancestors.ElementAt(i).Title »
|
||||
</text>
|
||||
|
||||
}
|
||||
@Model.Poem.Category.Cat.Title
|
||||
</p>
|
||||
</div>
|
||||
<div id="title3" style="display: table-row">
|
||||
<p style="width:100%;height:25%;text-align:center;vertical-align: middle;font-family: 'Vazir';display: table-cell;font-size: 1.5em;text-shadow: 2px 2px 4px white;">
|
||||
@Model.Recitation.AudioTitle
|
||||
</p>
|
||||
</div>
|
||||
<div id="title4" style="display: table-row">
|
||||
<p style="width:100%;height:25%;text-align:center;vertical-align: middle;font-family: 'Vazir';display: table-cell;font-size: 1em;text-shadow: 2px 2px 4px white;">
|
||||
به خوانش @Model.Recitation.AudioArtist
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="verse1div" style="display: table-row;visibility: hidden;">
|
||||
<div style="width:100%;height:50%;text-align:center;vertical-align: bottom;font-family: 'Vazir';display: table-cell;font-size: 1.5em;text-shadow: 2px 2px 4px white;">
|
||||
<p id="verse1" style="width:80%;margin:auto;background-color:rgba(0, 0, 0, .4);margin-bottom:5px">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="verse2div" style="display: table-row;visibility: hidden">
|
||||
<div style="width:100%;height:50%;text-align:center;vertical-align: top;font-family: 'Vazir';display: table-cell;font-size: 1.5em;text-shadow: 2px 2px 4px white;">
|
||||
<p id="verse2" style="width:80%;margin:auto;background-color:rgba(0, 0, 0, .4);margin-top:5px">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="normaldiv" style="display: table-row;visibility: hidden">
|
||||
<div style="width:100%;height:100%;text-align:center;vertical-align: middle;font-family: 'Vazir';display: table-cell;font-size: 1.5em;text-shadow: 2px 2px 4px white;">
|
||||
<p id="normal" style="width:80%;margin:auto;background-color:rgba(0, 0, 0, .4);">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="jp-gui">
|
||||
<div class="jp-video-play">
|
||||
<button class="jp-video-play-icon" tabindex="0">پخش</button>
|
||||
</div>
|
||||
<div class="jp-interface">
|
||||
<div class="jp-progress">
|
||||
<div class="jp-seek-bar">
|
||||
<div class="jp-play-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jp-current-time"> </div>
|
||||
<div class="jp-duration"> </div>
|
||||
<div class="jp-controls-holder">
|
||||
<div class="jp-controls">
|
||||
<button class="jp-previous" tabindex="0">قبلی</button>
|
||||
<button class="jp-play" tabindex="0">پخش</button>
|
||||
<button class="jp-next" tabindex="0">بعدی</button>
|
||||
<button class="jp-stop" tabindex="0">توقف</button>
|
||||
</div>
|
||||
<div class="jp-volume-controls">
|
||||
<button class="jp-mute" tabindex="0">بیصدا</button>
|
||||
<button class="jp-volume-max" tabindex="0">حداکثر صدا</button>
|
||||
<div class="jp-volume-bar">
|
||||
<div class="jp-volume-bar-value"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jp-toggles">
|
||||
<button class="jp-repeat" tabindex="0">تکرار</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jp-details">
|
||||
<div class="jp-title"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jp-playlist">
|
||||
<ul>
|
||||
<!-- The method Playlist.displayPlaylist() uses this unordered list -->
|
||||
<li> </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="jp-no-solution">
|
||||
<span>نیاز به بروزآوری</span>
|
||||
جهت خوانش شعر شما یا باید از مرورگر جدیدی همچون <a href="http://getfirefox.com/">فایرفاکس</a> استفاده کنید یا افزونه <a href="http://get.adobe.com/flashplayer/" target="_blank">فلش</a> مرورگرتان را بروزآوری کنید.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-family: 'Vazir';font-size: 0.8em;color:darkgray">
|
||||
تصویر پسزمینهٔ خوانش یک تصویر تصادفی از سایت <a href="https://unsplash.com/" target="_blank">unsplash.com</a> است و ارتباطی با محتوای شعر ندارد.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="~/js/bk.js?version=38"></script>
|
||||
<script src="~/js/jplayersupport.js"></script>
|
||||
<script src="~/js/vaabd.js?version=4"></script>
|
||||
<script src="~/dist/jplayer/jquery.jplayer.min.js"></script>
|
||||
<script src="~/dist/add-on/jplayer.playlist.min.js"></script>
|
||||
<script>
|
||||
var verses = [];
|
||||
|
||||
@{
|
||||
<text>
|
||||
@Html.Raw($" var normaltext = { (Model.Poem.Verses.Where(v => v.VersePosition == RMuseum.Models.Ganjoor.VersePosition.Paragraph).Any() ? "true" : "false") }")
|
||||
</text>
|
||||
for (int i = 0; i < Model.Poem.Verses.Length; i++)
|
||||
{
|
||||
<text>
|
||||
@Html.Raw($"verses[{i}] = '{Model.Poem.Verses[i].Text}';")
|
||||
</text>
|
||||
}
|
||||
}
|
||||
|
||||
function prepareclip(xmlfilename, poemtitle, auartist, oggurl, mp3url, verseArray) {
|
||||
var verseStart = [];
|
||||
var verseEnd = [];
|
||||
var verseIndex = [];
|
||||
var nLastHighlight = -1;
|
||||
var vCount = 0;
|
||||
|
||||
audioxmlfiles[0] = xmlfilename;
|
||||
|
||||
|
||||
var jlist = new jPlayerPlaylist({
|
||||
jPlayer: "#jquery_jplayer_1",
|
||||
cssSelectorAncestor: "#jp_container_1"
|
||||
}, [
|
||||
{
|
||||
title: poemtitle,
|
||||
artist: auartist,
|
||||
mp3: mp3url
|
||||
},
|
||||
],
|
||||
{
|
||||
setmedia: function (event) {
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: audioxmlfiles[jlist.current],
|
||||
dataType: "xml",
|
||||
success: function (xml) {
|
||||
var nOneSecondBugFix = 2000;
|
||||
$(xml).find('OneSecondBugFix').each(function () {
|
||||
nOneSecondBugFix = parseInt($(xml).find('OneSecondBugFix').text());
|
||||
});
|
||||
var v = 0;
|
||||
$(xml).find('SyncInfo').each(function () {
|
||||
verseStart[v] = parseInt($(this).find('AudioMiliseconds').text()) / nOneSecondBugFix;
|
||||
verseIndex[v] = parseInt($(this).find('VerseOrder').text());
|
||||
if (v > 0)
|
||||
verseEnd[v - 1] = verseStart[v];
|
||||
v++;
|
||||
});
|
||||
v--;
|
||||
if (v > 1)
|
||||
verseEnd[v] = verseStart[v] + 2 * (verseEnd[v - 1] - verseStart[v - 1]);
|
||||
vCount = v;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
|
||||
timeupdate: function (event) { // 4Hz
|
||||
var curTime = event.jPlayer.status.currentTime;
|
||||
if (curTime > 0) {
|
||||
if (normaltext == true) {
|
||||
for (i = 0; i <= vCount; i++) {
|
||||
if (curTime >= verseStart[i] && curTime <= verseEnd[i]) {
|
||||
|
||||
|
||||
if (nLastHighlight != verseIndex[i]) {
|
||||
|
||||
$('#title1').hide();
|
||||
$('#title2').hide();
|
||||
$('#title3').hide();
|
||||
$('#title4').hide();
|
||||
$('#normal').text(verseArray[verseIndex[i]]);
|
||||
$('#verse1div').css("visibility", "hidden");
|
||||
$('#verse2div').css("visibility", "hidden");
|
||||
$('#verse1div').hide();
|
||||
$('#verse2div').hide();
|
||||
$('#normaldiv').css("visibility", "visible");
|
||||
|
||||
}
|
||||
nLastHighlight = verseIndex[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
for (i = 0; i <= vCount; i += 2) {
|
||||
if (curTime >= verseStart[i] && curTime <= verseEnd[i]) {
|
||||
|
||||
|
||||
if (nLastHighlight != verseIndex[i]) {
|
||||
|
||||
$('#title1').hide();
|
||||
$('#title2').hide();
|
||||
$('#title3').hide();
|
||||
$('#title4').hide();
|
||||
$('#verse1').text(verseArray[verseIndex[i]]);
|
||||
$('#verse2').text(verseArray[verseIndex[i] + 1]);
|
||||
$('#normaldiv').css("visibility", "hidden");
|
||||
$('#normaldiv').hide();
|
||||
$('#verse1div').css("visibility", "visible");
|
||||
$('#verse2div').css("visibility", "visible");
|
||||
}
|
||||
nLastHighlight = verseIndex[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
ended: function (event) { // 4Hz
|
||||
|
||||
},
|
||||
swfPath: "dist/jplayer",
|
||||
supplied: "mp3",
|
||||
wmode: "window",
|
||||
useStateClassSkin: true,
|
||||
autoBlur: false,
|
||||
smoothPlayBar: true,
|
||||
keyEnabled: true,
|
||||
remainingDuration: true,
|
||||
toggleDuration: true
|
||||
});
|
||||
|
||||
return jlist;
|
||||
|
||||
}
|
||||
|
||||
|
||||
//<![CDATA[
|
||||
$(document).ready(function () {
|
||||
|
||||
prepareclip('@Html.Raw($"{GanjooRazor.APIRoot.InternetUrl}/api/audio/file/{Model.Recitation.Id}.xml")', '@Model.Recitation.AudioTitle',
|
||||
'به خوانش @Model.Recitation.AudioArtist', '', '@Model.Recitation.Mp3Url', verses);
|
||||
|
||||
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
@ -28,6 +28,16 @@ namespace GanjooRazor.Pages
|
||||
/// </summary>
|
||||
private readonly IConfiguration Configuration;
|
||||
|
||||
/// <summary>
|
||||
/// recitation
|
||||
/// </summary>
|
||||
public PublicRecitationViewModel Recitation { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// poem
|
||||
/// </summary>
|
||||
public GanjoorPoemCompleteViewModel Poem { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// constructor
|
||||
/// </summary>
|
||||
@ -99,10 +109,10 @@ namespace GanjooRazor.Pages
|
||||
}
|
||||
else
|
||||
{
|
||||
var recitation = JsonConvert.DeserializeObject<PublicRecitationViewModel>(await response.Content.ReadAsStringAsync());
|
||||
RecitationInfo = $"{recitation.AudioTitle} به خوانش {recitation.AudioArtist}";
|
||||
Recitation = JsonConvert.DeserializeObject<PublicRecitationViewModel>(await response.Content.ReadAsStringAsync());
|
||||
RecitationInfo = $"{Recitation.AudioTitle} به خوانش {Recitation.AudioArtist}";
|
||||
|
||||
var pageUrlResponse = await _httpClient.GetAsync($"{APIRoot.Url}/api/ganjoor/pageurl?id={recitation.PoemId}");
|
||||
var pageUrlResponse = await _httpClient.GetAsync($"{APIRoot.Url}/api/ganjoor/pageurl?id={Recitation.PoemId}");
|
||||
if (!pageUrlResponse.IsSuccessStatusCode)
|
||||
{
|
||||
LastError = JsonConvert.DeserializeObject<string>(await pageUrlResponse.Content.ReadAsStringAsync());
|
||||
@ -118,7 +128,7 @@ namespace GanjooRazor.Pages
|
||||
}
|
||||
var pageInformation = JObject.Parse(await pageQuery.Content.ReadAsStringAsync()).ToObject<GanjoorPageCompleteViewModel>();
|
||||
|
||||
|
||||
Poem = pageInformation.Poem;
|
||||
int coupetIndex = -1;
|
||||
string coupletText = "";
|
||||
List<Tuple<int, string>> couplets = new List<Tuple<int, string>>();
|
||||
@ -188,6 +198,11 @@ namespace GanjooRazor.Pages
|
||||
Couplets = couplets.ToArray();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
},
|
||||
"AllowedHosts": "*",
|
||||
"GoogleAnalyticsCode": "",
|
||||
"APIRoot": "http://localhost:3439",
|
||||
"GlobalAPIRoot": "http://localhost:3439",
|
||||
"APIRoot": "https://api.ganjoor.net",
|
||||
"GlobalAPIRoot": "https://api.ganjoor.net",
|
||||
"SiteUrl": "http://localhost:33081",
|
||||
"MockSpotify": "False",
|
||||
"Spotify": {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user