Move aspectRatio into videojs options

This commit is contained in:
Omar Roth 2018-07-30 18:13:26 -05:00
parent 381b644dab
commit 78f995c903
2 changed files with 28 additions and 49 deletions

View file

@ -51,7 +51,7 @@ video, #my_video, .video-js, .vjs-default-skin
<script> <script>
var options = { var options = {
preload: "auto", preload: 'auto',
playbackRates: [0.5, 1, 1.5, 2], playbackRates: [0.5, 1, 1.5, 2],
controlBar: { controlBar: {
children: [ children: [
@ -112,32 +112,10 @@ player.offset({
end: <%= video_end %> end: <%= video_end %>
}); });
function toggle(target) {
body = target.parentNode.parentNode.children[1];
if (body.style.display === null || body.style.display === '') {
target.innerHTML = '[ + ]';
body.style.display = 'none';
} else {
target.innerHTML = '[ - ]';
body.style.display = '';
}
};
function toggle_comments(target) {
body = target.parentNode.parentNode.parentNode.children[1];
if (body.style.display === null || body.style.display === '') {
target.innerHTML = '[ + ]';
body.style.display = 'none';
} else {
target.innerHTML = '[ - ]';
body.style.display = '';
}
};
<% if !listen %> <% if !listen %>
var currentSources = player.currentSources(); var currentSources = player.currentSources();
for ( var i = 0; i < currentSources.length; i++ ) { for ( var i = 0; i < currentSources.length; i++ ) {
if (player.canPlayType(currentSources[i]["type"].split(";")[0]) === "") { if (player.canPlayType(currentSources[i]['type'].split(';')[0]) === '') {
currentSources.splice(i); currentSources.splice(i);
i--; i--;
} }

View file

@ -35,7 +35,7 @@
<div class="h-box"> <div class="h-box">
<video style="width:100%" playsinline poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>" <video style="width:100%" playsinline poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>"
id="player" class="video-js vjs-16-9" data-setup="{}" id="player" class="video-js" data-setup="{}"
<% if autoplay %>autoplay<% end %> <% if autoplay %>autoplay<% end %>
<% if video_loop %>loop<% end %> <% if video_loop %>loop<% end %>
controls> controls>
@ -44,14 +44,14 @@
<% else %> <% else %>
<% if listen %> <% if listen %>
<% audio_streams.each_with_index do |fmt, i| %> <% audio_streams.each_with_index do |fmt, i| %>
<source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["bitrate"] %>k" selected="<%= i == 0 ? true : false %>"> <source src="<%= fmt["url"] %>" type="<%= fmt["type"] %>" label="<%= fmt["bitrate"] %>k" selected="<%= i == 0 ? true : false %>">
<% end %> <% end %>
<% else %> <% else %>
<% fmt_stream.each_with_index do |fmt, i| %> <% fmt_stream.each_with_index do |fmt, i| %>
<% if preferences %> <% if preferences %>
<source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= preferences.quality == fmt["label"].split(" - ")[0] %>"> <source src="<%= fmt["url"] %>" type="<%= fmt["type"] %>" label="<%= fmt["label"] %>" selected="<%= preferences.quality == fmt["label"].split(" - ")[0] %>">
<% else %> <% else %>
<source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= i == 0 ? true : false %>"> <source src="<%= fmt["url"] %>" type="<%= fmt["type"] %>" label="<%= fmt["label"] %>" selected="<%= i == 0 ? true : false %>">
<% end %> <% end %>
<% end %> <% end %>
@ -66,7 +66,8 @@
<script> <script>
var options = { var options = {
preload: "auto", aspectRatio: '16:9',
preload: 'auto',
playbackRates: [0.5, 1, 1.5, 2], playbackRates: [0.5, 1, 1.5, 2],
controlBar: { controlBar: {
children: [ children: [
@ -135,7 +136,7 @@ player.offset({
<% if !listen %> <% if !listen %>
var currentSources = player.currentSources(); var currentSources = player.currentSources();
for ( var i = 0; i < currentSources.length; i++ ) { for ( var i = 0; i < currentSources.length; i++ ) {
if (player.canPlayType(currentSources[i]["type"].split(";")[0]) === "") { if (player.canPlayType(currentSources[i]['type'].split(';')[0]) === '') {
currentSources.splice(i); currentSources.splice(i);
i--; i--;
} }
@ -146,37 +147,37 @@ player.src(currentSources);
function toggle(target) { function toggle(target) {
body = target.parentNode.parentNode.children[1]; body = target.parentNode.parentNode.children[1];
if (body.style.display === null || body.style.display === "") { if (body.style.display === null || body.style.display === '') {
target.innerHTML = "[ + ]"; target.innerHTML = '[ + ]';
body.style.display = "none"; body.style.display = 'none';
} else { } else {
target.innerHTML = "[ - ]"; target.innerHTML = '[ - ]';
body.style.display = ""; body.style.display = '';
} }
} }
function toggle_comments(target) { function toggle_comments(target) {
body = target.parentNode.parentNode.parentNode.children[1]; body = target.parentNode.parentNode.parentNode.children[1];
if (body.style.display === null || body.style.display === "") { if (body.style.display === null || body.style.display === '') {
target.innerHTML = "[ + ]"; target.innerHTML = '[ + ]';
body.style.display = "none"; body.style.display = 'none';
} else { } else {
target.innerHTML = "[ - ]"; target.innerHTML = '[ - ]';
body.style.display = ""; body.style.display = '';
} }
} }
function timeout(ms, promise) { function timeout(ms, promise) {
return new Promise(function(resolve, reject) { return new Promise(function(resolve, reject) {
setTimeout(function() { setTimeout(function() {
reject(new Error("timeout")); reject(new Error('timeout'));
}, ms); }, ms);
promise.then(resolve, reject); promise.then(resolve, reject);
}); });
} }
function load_comments(target) { function load_comments(target) {
var continuation = target.getAttribute("data-continuation"); var continuation = target.getAttribute('data-continuation');
var body = target.parentNode.parentNode; var body = target.parentNode.parentNode;
var fallback = body.innerHTML; var fallback = body.innerHTML;
@ -184,7 +185,7 @@ function load_comments(target) {
'<h3><center><i class="loading fas fa-spinner"></i></center></h3>'; '<h3><center><i class="loading fas fa-spinner"></i></center></h3>';
var url = var url =
"/api/v1/comments/<%= video.id %>?format=html&continuation=" + continuation; '/api/v1/comments/<%= video.id %>?format=html&continuation=' + continuation;
timeout(5000, fetch(url)) timeout(5000, fetch(url))
.then(function(response) { .then(function(response) {
return response.json(); return response.json();
@ -205,13 +206,13 @@ function load_comments(target) {
} }
function get_reddit_comments() { function get_reddit_comments() {
fetch("/api/v1/comments/<%= video.id %>?source=reddit") fetch('/api/v1/comments/<%= video.id %>?source=reddit')
.then(function(response) { .then(function(response) {
return response.json(); return response.json();
}) })
.then( .then(
function(jsonResponse) { function(jsonResponse) {
comments = document.getElementById("comments"); comments = document.getElementById('comments');
comments.innerHTML = ` comments.innerHTML = `
<div> <div>
<h3> <h3>
@ -237,13 +238,13 @@ function get_reddit_comments() {
} }
function get_youtube_comments() { function get_youtube_comments() {
fetch("/api/v1/comments/<%= video.id %>?format=html") fetch('/api/v1/comments/<%= video.id %>?format=html')
.then(function(response) { .then(function(response) {
return response.json(); return response.json();
}) })
.then( .then(
function(jsonResponse) { function(jsonResponse) {
comments = document.getElementById("comments"); comments = document.getElementById('comments');
comments.innerHTML = ` comments.innerHTML = `
<div>{content_html}</div> <div>{content_html}</div>
<hr style="margin-left:1em; margin-right:1em;">`.supplant({ <hr style="margin-left:1em; margin-right:1em;">`.supplant({
@ -251,7 +252,7 @@ function get_youtube_comments() {
}); });
}, },
function(response) { function(response) {
comments.innerHTML = ""; comments.innerHTML = '';
} }
); );
} }
@ -259,7 +260,7 @@ function get_youtube_comments() {
String.prototype.supplant = function(o) { String.prototype.supplant = function(o) {
return this.replace(/{([^{}]*)}/g, function(a, b) { return this.replace(/{([^{}]*)}/g, function(a, b) {
var r = o[b]; var r = o[b];
return typeof r === "string" || typeof r === "number" ? r : a; return typeof r === 'string' || typeof r === 'number' ? r : a;
}); });
}; };