399 lines
21 KiB
Plaintext
399 lines
21 KiB
Plaintext
@page
|
|
@model GanjooRazor.Pages.ReportRecitationModel
|
|
@using DNTPersianUtils.Core
|
|
@{
|
|
Layout = null;
|
|
}
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="fa-IR" dir="rtl">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="robots" content="noindex, nofollow" />
|
|
<title>گنجور » گزارش خطا در خوانش</title>
|
|
<script src="/lib/jquery/dist/jquery.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<link href="/css/p8.css?version=82" 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;
|
|
display: block;
|
|
}
|
|
|
|
input#submit {
|
|
text-align: center;
|
|
background-color: #fff;
|
|
border: 2px solid #300;
|
|
color: #300
|
|
}
|
|
|
|
input#submit:hover {
|
|
background-color: #300;
|
|
color: #fff;
|
|
border: 2px solid #433;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="fa">
|
|
@if (Model.Report.RecitationId == 0)
|
|
{
|
|
<div class="width-100per">
|
|
<div class="width-100per text-align-center">
|
|
<p class="alert-text">
|
|
خطا: خوانشی انتخاب نشده است.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
else
|
|
if (!Model.LoggedIn)
|
|
{
|
|
<div class="width-100per">
|
|
<div class="width-100per text-align-center">
|
|
<p class="alert-text">
|
|
برای ثبت خطا در خوانش‌ها لازم است ابتدا با نام کاربری خود وارد گنجور شوید.
|
|
</p>
|
|
<p class="text-align-center">
|
|
<a href=@Html.Raw($"/login/?redirect=/ReportRecitation/?a={Model.Report.RecitationId}")>ورود به گنجور</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="poem">
|
|
<h2>ثبت خطا در خوانش</h2>
|
|
@if (Model.PostSuccess)
|
|
{
|
|
<p>درخواست شما ثبت شد. این درخواست در فرصت مناسب بررسی و در صورت تناسب با معیارهای حذف خوانش، این خوانش حذف خواهد شد.</p>
|
|
}
|
|
else
|
|
if (Model.LastError != "")
|
|
{
|
|
<p>@Model.LastError</p>
|
|
}
|
|
else
|
|
{
|
|
<p>
|
|
<span style="color:red">لطفاً</span> تنها در صورتی که در خوانش خطایی صورت گرفته یا مشکلات فنی راجع به آن وجود دارد آن را گزارش کنید.
|
|
</p>
|
|
}
|
|
</div>
|
|
@if (!Model.PostSuccess && Model.LastError == "")
|
|
{
|
|
<p>
|
|
@Model.RecitationInfo
|
|
</p>
|
|
|
|
<div class="content">
|
|
<form method="post">
|
|
<table class="width-100per">
|
|
<tr>
|
|
<td>
|
|
<span class="inputlabel">این خوانش چه مشکلی دارد؟ (در صورت غلط خوانی اولین یا مهمترین مصرع و کلمهٔ غلط خوانده شده را گزارش کنید)</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<textarea rows="4" cols="50" asp-for="Report.ReasonText"></textarea>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
در صورت نیاز خط متناظر را مشخص کنید:
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<select asp-for="Report.CoupletIndex">
|
|
@foreach (var item in Model.Couplets)
|
|
{
|
|
<option value="@item.Item1">@($"{(item.Item1 + 1).ToPersianNumbers()} - {item.Item2}")</option>
|
|
}
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<input type="hidden" asp-for="Report.RecitationId" />
|
|
<input type="submit" name="submit" id="submit" value="ثبت خطا" />
|
|
</td>
|
|
</tr>
|
|
|
|
</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: 'Vazirmatn';display: table-cell;font-size: 1.5em;text-shadow: 2px 2px 4px white;">
|
|
@Model.Poem.Category.Poet.Nickname
|
|
</p>
|
|
</div>
|
|
<div id="title2" style="display: table-row">
|
|
<p style="width:100%;height:25%;text-align:center;vertical-align: middle;font-family: 'Vazirmatn';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: 'Vazirmatn';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: 'Vazirmatn';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: 'Vazirmatn';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: 'Vazirmatn';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: 'Vazirmatn';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: 'Vazirmatn';font-size: 0.8em;color:darkgray">
|
|
تصویر پس‌زمینهٔ خوانش یک تصویر تصادفی از سایت <a href="https://unsplash.com/" target="_blank">unsplash.com</a> است و ارتباطی با محتوای شعر ندارد.
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<script src="~/js/bk.js?version=75"></script>
|
|
<script src="~/js/jplayersupport.js"></script>
|
|
<script src="~/js/vaabd.js?version=10"></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>
|
|
</body>
|
|
</html>
|