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

@ -0,0 +1,25 @@
.vjs-quality-selector .vjs-menu-button {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.vjs-quality-selector .vjs-icon-placeholder {
font-family: "VideoJS";
font-weight: normal;
font-style: normal;
}
.vjs-quality-selector .vjs-icon-placeholder:before {
content: "\f110";
}
.vjs-quality-changing .vjs-big-play-button {
display: none;
}
.vjs-quality-changing .vjs-control-bar {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
visibility: visible;
opacity: 1;
}

File diff suppressed because it is too large Load Diff

View File

@ -189,14 +189,6 @@ get "/watch" do |env|
fmt_stream << HTTP::Params.parse(string) fmt_stream << HTTP::Params.parse(string)
end end
signature = false
if fmt_stream[0]? && fmt_stream[0]["s"]?
signature = true
end
# We want lowest quality first
fmt_stream.reverse!
adaptive_fmts = [] of HTTP::Params adaptive_fmts = [] of HTTP::Params
if video.info.has_key?("adaptive_fmts") if video.info.has_key?("adaptive_fmts")
video.info["adaptive_fmts"].split(",") do |string| video.info["adaptive_fmts"].split(",") do |string|
@ -204,6 +196,11 @@ get "/watch" do |env|
end end
end end
signature = false
if adaptive_fmts[0]? && adaptive_fmts[0]["s"]?
signature = true
end
if signature if signature
adaptive_fmts.each do |fmt| adaptive_fmts.each do |fmt|
fmt["url"] += "&signature=" + decrypt_signature(fmt["s"]) fmt["url"] += "&signature=" + decrypt_signature(fmt["s"])
@ -214,6 +211,19 @@ get "/watch" do |env|
end end
end end
# 3gpp doesn't appear to play correclty in Chrome, so here we remove it
fmt_stream = fmt_stream.compact_map { |s| !s["type"].starts_with?("video/3gpp") ? s : nil }
fmt_stream = fmt_stream.uniq { |s| s["quality"] }
video_streams = adaptive_fmts.compact_map { |s| s["type"].starts_with?("video") ? s : nil }
video_streams = video_streams.uniq { |s| s["size"] }
audio_streams = adaptive_fmts.compact_map { |s| s["type"].starts_with?("audio") ? s : nil }
audio_streams.sort_by! { |s| s["bitrate"].to_i }.reverse!
audio_streams.each do |fmt|
fmt["bitrate"] = (fmt["bitrate"].to_f64/1000).to_i.to_s
end
rvs = [] of Hash(String, String) rvs = [] of Hash(String, String)
if video.info.has_key?("rvs") if video.info.has_key?("rvs")
video.info["rvs"].split(",").each do |rv| video.info["rvs"].split(",").each do |rv|

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

View File

@ -1,24 +1,37 @@
<% content_for "header" do %> <% content_for "header" do %>
<meta name="thumbnail" content="<%= thumbnail %>"> <meta name="thumbnail" content="<%= thumbnail %>">
<link rel="stylesheet" href="https://vjs.zencdn.net/6.6.3/video-js.css"> <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://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="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> <title><%= video.title %> - Invidious</title>
<% end %> <% end %>
<div class="h-box"> <div class="h-box">
<% if listen %> <% if listen %>
<%= render "src/views/player/audio.ecr" %> <%= render "src/views/player/audio.ecr" %>
<% else %> <% else %>
<%= render "src/views/player/video.ecr" %> <%= render "src/views/player/video.ecr" %>
<% end %> <% end %>
</div> </div>
<script> <script>
var options = { var options = {
aspectRatio: "16:9", aspectRatio: "16:9",
preload: "auto", 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() { var player = videojs('player', options, function() {
this.hotkeys({ this.hotkeys({
@ -81,7 +94,7 @@ function toggle_comments(target) {
} else { } else {
target.innerHTML = '[ - ]'; target.innerHTML = '[ - ]';
body.style.display = ''; body.style.display = '';
} }
}; };
</script> </script>