Add video quality selector

Signed-off-by: Jesús <heckyel@hyperbola.info>
This commit is contained in:
James Taylor
2021-08-23 19:50:57 -07:00
committed by Jesús
parent c9a75042d2
commit a7da23c6da
3 changed files with 135 additions and 67 deletions

View File

@@ -55,8 +55,17 @@
</video>
</figure>
{% if pair_sources and (not uni_sources or pair_sources[pair_idx][0]['quality'] != uni_sources[uni_idx]['quality']) %}
<script src="/youtube.com/static/js/av-merge.js"></script>
<script src="/youtube.com/static/js/av-merge.js"></script>
{% if using_pair_sources %}
<!-- Initialize av-merge -->
<script>
var srcPair = data['pair_sources'][data['pair_idx']];
var video = document.getElementById('js-video-player');
var videoSource = srcPair[0];
// Do it dynamically rather than as the default in jinja
// in case javascript is disabled
avInitialize(video, srcPair, 0);
</script>
{% endif %}
{% if time_start != 0 %}
@@ -93,8 +102,41 @@
<div class="external-player-controls">
<input class="speed" id="speed-control" type="text" title="Video speed">
<script src="/youtube.com/static/js/speedyplay.js"></script>
<select id="quality-select">
{% for src in uni_sources %}
<option value='{"type": "uni", "index": {{ loop.index0 }}}' {{ 'selected' if loop.index0 == uni_idx and not using_pair_sources else '' }} >{{ src['quality_string'] }} (integrated)</option>
{% endfor %}
{% for src_pair in pair_sources %}
<option value='{"type": "pair", "index": {{ loop.index0}}}' {{ 'selected' if loop.index0 == pair_idx and using_pair_sources else '' }} >{{ src_pair[0]['quality_string'] }}, {{ src_pair[1]['quality_string'] }}</option>
{% endfor %}
</select>
<script>
document.getElementById('quality-select').addEventListener(
'change', function(e) {
var video = document.getElementById('js-video-player');
var selection = JSON.parse(this.value);
var currentVideoTime = video.currentTime;
var videoPaused = video.paused;
var videoSpeed = video.playbackRate;
var videoSource;
if (selection.type == 'uni'){
videoSource = data['uni_sources'][selection.index];
video.src = videoSource.url;
} else {
let srcPair = data['pair_sources'][selection.index];
videoSource = srcPair[0];
avInitialize(video, srcPair, currentVideoTime);
}
setVideoDimensions(videoSource.height, videoSource.width);
video.currentTime = currentVideoTime;
if (!videoPaused){
video.play();
}
video.playbackRate = videoSpeed;
}
);
</script>
</div>
<input class="v-checkbox" name="video_info_list" value="{{ video_info }}" form="playlist-edit" type="checkbox">
<span class="v-direct-link"><a href="https://youtu.be/{{ video_id }}" rel="noopener noreferrer" target="_blank">Direct Link</a></span>