Add qualityselector

This commit is contained in:
Omar Roth
2018-03-13 18:37:56 -05:00
parent 1a6c28735c
commit e37e9a0b8e
6 changed files with 2066 additions and 39 deletions

View File

@@ -1,7 +1,5 @@
<audio poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>" id="player" class="video-js" data-setup="{}" style="width:100%;" controls>
<% adaptive_fmts.each do |fmt| %>
<% if fmt["type"].starts_with?("audio") %>
<source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>'>
<% end %>
<% audio_streams.each do |fmt| %>
<source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["bitrate"] %>k" selected="<%= audio_streams[0]["url"] == fmt["url"] ? true : false %>">
<% end %>
</audio>

View File

@@ -1,5 +1,5 @@
<video poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>" id="player" class="video-js" data-setup="{}" style="width:100%;" controls>
<% fmt_stream.each do |fmt| %>
<source src="<%= fmt["url"]? %>" type='<%= fmt["type"]? %>'>
<source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["quality"] %>" selected="<%= fmt_stream[0]["url"] == fmt["url"] ? true : false %>">
<% end %>
</video>

View File

@@ -1,24 +1,37 @@
<% content_for "header" do %>
<meta name="thumbnail" content="<%= thumbnail %>">
<link rel="stylesheet" href="https://vjs.zencdn.net/6.6.3/video-js.css">
<link rel="stylesheet" href="/css/quality-selector.css">
<script src="https://vjs.zencdn.net/6.6.3/video.js"></script>
<script src="https://cdn.sc.gl/videojs-hotkeys/latest/videojs.hotkeys.min.js"></script>
<script src="/js/silvermine-videojs-quality-selector.js"></script>
<title><%= video.title %> - Invidious</title>
<% end %>
<div class="h-box">
<% if listen %>
<%= render "src/views/player/audio.ecr" %>
<% else %>
<%= render "src/views/player/video.ecr" %>
<% end %>
<% if listen %>
<%= render "src/views/player/audio.ecr" %>
<% else %>
<%= render "src/views/player/video.ecr" %>
<% end %>
</div>
<script>
var options = {
aspectRatio: "16:9",
preload: "auto",
playbackRates: [0.5, 1, 1.5, 2]
playbackRates: [0.5, 1, 1.5, 2],
controlBar: {
children: [
'playToggle',
'volumePanel',
'progressControl',
'remainingTimeDisplay',
'qualitySelector',
'playbackRateMenuButton',
'fullscreenToggle',
],
},
};
var player = videojs('player', options, function() {
this.hotkeys({
@@ -81,7 +94,7 @@ function toggle_comments(target) {
} else {
target.innerHTML = '[ - ]';
body.style.display = '';
}
}
};
</script>
@@ -128,21 +141,21 @@ function toggle_comments(target) {
<hr style="margin-left:1em; margin-right:1em;">
<% if reddit_thread && !reddit_html.empty? %>
<div>
<div style="overflow-wrap:break-word; word-wrap:break-word;">
<div style="overflow-wrap:break-word; word-wrap:break-word;">
<h3>
<a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a>
<%= reddit_thread.data.title %>
</h3>
<b>
<a target="_blank" href="https://reddit.com<%= reddit_thread.data.permalink %>">View more comments on Reddit</a>
</b>
<b>
<a target="_blank" href="https://reddit.com<%= reddit_thread.data.permalink %>">View more comments on Reddit</a>
</b>
</div>
<div>
<%= reddit_html %>
</div>
<%= reddit_html %>
</div>
</div>
<% end %>
</div>
<% end %>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-5">