74 lines
2.6 KiB
HTML
74 lines
2.6 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
<h1>{{ song.name }}</h1>
|
|
{% if song.original %}
|
|
<p><b>Original:</b> {{ song.original }}</p>
|
|
{% endif %}
|
|
{% if song.author %}
|
|
<p><b>Autoría:</b> {{ song.author }}</p>
|
|
{% endif %}
|
|
{% if song.video %}
|
|
<video id="song-{{ song.path.name }}-video" class="video-js"
|
|
controls preload="auto" width="640" height="264"
|
|
{% if song.cover %}poster="{{ song.cover|url }}"{% endif %}>
|
|
<source src="{{ song.video|url }}" type='{{ song.video_type }}'>
|
|
{% if not song.ass and song.vtt %}
|
|
<track kind="captions" src="{{ song.vtt|url }}" srclang="nm" label="Negro mate" default>
|
|
{% endif %}
|
|
<p class="vjs-no-js">
|
|
To view this video please enable JavaScript, and consider upgrading to a web browser that
|
|
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
|
|
</p>
|
|
</video>
|
|
{% endif %}
|
|
|
|
{% if parsed_srt %}
|
|
<p class="lyrics">
|
|
{% for line in parsed_srt %}
|
|
<button type="button" class="srtline" data-seconds="{{ line.start.total_seconds() }}">⊳</button>
|
|
{{ line.content }}<br/>
|
|
{% endfor %}
|
|
</p>
|
|
{% endif %}
|
|
|
|
{% if song.files %}
|
|
<ul class="files">
|
|
{% for entry in song.files %}
|
|
<li><a href="{{ entry|url }}">{{ entry.name }}</a></li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
|
|
<script>
|
|
let player = videojs('song-{{ song.path.name }}-video');
|
|
{% if song.karaoke_ass or song.ass %}
|
|
player.ready(function () {
|
|
var video = this.tech_.el_;
|
|
window.SubtitlesOctopusOnLoad = function () {
|
|
var options = {
|
|
video: video,
|
|
{% if song.karaoke_ass %}
|
|
subUrl: window.location + '{{ song.karaoke_ass|url }}',
|
|
{% else %}
|
|
subUrl: window.location + '{{ song.ass|url }}',
|
|
{% endif %}
|
|
fonts: [window.location + '{{ root_path }}/static/css/CyrBit.ttf'],
|
|
debug: false,
|
|
workerUrl: window.location + '{{ root_path }}/static/js/JavascriptSubtitlesOctopus-4.0.0/dist/js/subtitles-octopus-worker.js'
|
|
};
|
|
new SubtitlesOctopus(options);
|
|
};
|
|
if (SubtitlesOctopus) {
|
|
SubtitlesOctopusOnLoad();
|
|
}
|
|
});
|
|
const subtitleButtons = document.querySelectorAll('.lyrics button');
|
|
for (let btn of subtitleButtons) {
|
|
btn.addEventListener('click', function() {
|
|
player.currentTime(this.dataset.seconds);
|
|
});
|
|
}
|
|
{% endif %}
|
|
</script>
|
|
{% endblock %}
|