Format JavaScript

This commit is contained in:
Omar Roth 2018-08-09 16:01:39 -05:00
parent 3154f250d8
commit 02a4bbccb6
2 changed files with 84 additions and 79 deletions

View file

@ -65,22 +65,22 @@ video, #my_video, .video-js, .vjs-default-skin
<script> <script>
var options = { var options = {
<% if autoplay %> <% if autoplay %>
preload: 'auto', preload: "auto",
<% end %> <% end %>
playbackRates: [0.5, 1, 1.5, 2], playbackRates: [0.5, 1, 1.5, 2],
controlBar: { controlBar: {
children: [ children: [
'playToggle', "playToggle",
'volumePanel', "volumePanel",
'currentTimeDisplay', "currentTimeDisplay",
'timeDivider', "timeDivider",
'durationDisplay', "durationDisplay",
'progressControl', "progressControl",
'remainingTimeDisplay', "remainingTimeDisplay",
'captionsButton', "captionsButton",
'qualitySelector', "qualitySelector",
'playbackRateMenuButton', "playbackRateMenuButton",
'fullscreenToggle' "fullscreenToggle"
] ]
} }
}; };
@ -91,12 +91,12 @@ var shareOptions = {
url: "<%= host_url %>/<%= video.id %>?<%= host_params %>", url: "<%= host_url %>/<%= video.id %>?<%= host_params %>",
title: "<%= video.title.dump_unquoted %>", title: "<%= video.title.dump_unquoted %>",
description: "<%= description %>", description: "<%= description %>",
image: '<%= thumbnail %>', image: "<%= thumbnail %>",
embedCode: `<iframe id='ivplayer' type='text/html' width='640' height='360' embedCode: `<iframe id='ivplayer' type='text/html' width='640' height='360'
src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>` src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>`
}; };
var player = videojs('player', options, function() { var player = videojs("player", options, function() {
this.hotkeys({ this.hotkeys({
volumeStep: 0.1, volumeStep: 0.1,
seekStep: 5, seekStep: 5,
@ -105,7 +105,7 @@ var player = videojs('player', options, function() {
play: { play: {
key: function(e) { key: function(e) {
// Toggle play with K Key // Toggle play with K Key
return (e.which === 75); return e.which === 75;
}, },
handler: function(player, options, e) { handler: function(player, options, e) {
if (player.paused()) { if (player.paused()) {
@ -118,7 +118,7 @@ var player = videojs('player', options, function() {
backward: { backward: {
key: function(e) { key: function(e) {
// Go backward 5 seconds // Go backward 5 seconds
return (e.which === 74); return e.which === 74;
}, },
handler: function(player, options, e) { handler: function(player, options, e) {
player.currentTime(player.currentTime() - 5); player.currentTime(player.currentTime() - 5);
@ -127,7 +127,7 @@ var player = videojs('player', options, function() {
forward: { forward: {
key: function(e) { key: function(e) {
// Go forward 5 seconds // Go forward 5 seconds
return (e.which === 76); return e.which === 76;
}, },
handler: function(player, options, e) { handler: function(player, options, e) {
player.currentTime(player.currentTime() + 5); player.currentTime(player.currentTime() + 5);
@ -142,20 +142,20 @@ player.share(shareOptions);
<% if video_start > 0 || video_end > 0 %> <% if video_start > 0 || video_end > 0 %>
player.markers({ player.markers({
onMarkerReached: function(marker) { onMarkerReached: function(marker) {
if (marker.text === 'End') { if (marker.text === "End") {
if (player.loop()) { if (player.loop()) {
player.markers.prev('Start'); player.markers.prev("Start");
} else { } else {
player.pause(); player.pause();
} }
} }
}, },
markers: [ markers: [
{time: <%= video_start %>, text: 'Start'}, { time: <%= video_start %>, text: "Start" },
<% if video_end < 0 %> <% if video_end < 0 %>
{time: <%= video.info["length_seconds"].to_f - 0.5 %>, text: 'End'} { time: <%= video.info["length_seconds"].to_f - 0.5 %>, text: "End" }
<% else %> <% else %>
{time: <%= video_end %>, text: 'End'} { time: <%= video_end %>, text: "End" }
<% end %> <% end %>
] ]
}); });
@ -166,7 +166,7 @@ player.currentTime(<%= video_start %>);
<% 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

@ -77,22 +77,22 @@
<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: { controlBar: {
children: [ children: [
'playToggle', "playToggle",
'volumePanel', "volumePanel",
'currentTimeDisplay', "currentTimeDisplay",
'timeDivider', "timeDivider",
'durationDisplay', "durationDisplay",
'progressControl', "progressControl",
'remainingTimeDisplay', "remainingTimeDisplay",
'captionsButton', "captionsButton",
'qualitySelector', "qualitySelector",
'playbackRateMenuButton', "playbackRateMenuButton",
'fullscreenToggle' "fullscreenToggle"
] ]
} }
}; };
@ -103,12 +103,12 @@ var shareOptions = {
url: "<%= host_url %>/<%= video.id %>?<%= host_params %>", url: "<%= host_url %>/<%= video.id %>?<%= host_params %>",
title: "<%= video.title.dump_unquoted %>", title: "<%= video.title.dump_unquoted %>",
description: "<%= description %>", description: "<%= description %>",
image: '<%= thumbnail %>', image: "<%= thumbnail %>",
embedCode: `<iframe id='ivplayer' type='text/html' width='640' height='360' embedCode: `<iframe id='ivplayer' type='text/html' width='640' height='360'
src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>` src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>`
}; };
var player = videojs('player', options, function() { var player = videojs("player", options, function() {
this.hotkeys({ this.hotkeys({
volumeStep: 0.1, volumeStep: 0.1,
seekStep: 5, seekStep: 5,
@ -117,7 +117,7 @@ var player = videojs('player', options, function() {
play: { play: {
key: function(e) { key: function(e) {
// Toggle play with K Key // Toggle play with K Key
return (e.which === 75); return e.which === 75;
}, },
handler: function(player, options, e) { handler: function(player, options, e) {
if (player.paused()) { if (player.paused()) {
@ -130,7 +130,7 @@ var player = videojs('player', options, function() {
backward: { backward: {
key: function(e) { key: function(e) {
// Go backward 5 seconds // Go backward 5 seconds
return (e.which === 74); return e.which === 74;
}, },
handler: function(player, options, e) { handler: function(player, options, e) {
player.currentTime(player.currentTime() - 5); player.currentTime(player.currentTime() - 5);
@ -139,7 +139,7 @@ var player = videojs('player', options, function() {
forward: { forward: {
key: function(e) { key: function(e) {
// Go forward 5 seconds // Go forward 5 seconds
return (e.which === 76); return e.which === 76;
}, },
handler: function(player, options, e) { handler: function(player, options, e) {
player.currentTime(player.currentTime() + 5); player.currentTime(player.currentTime() + 5);
@ -154,20 +154,20 @@ player.share(shareOptions);
<% if video_start > 0 || video_end > 0 %> <% if video_start > 0 || video_end > 0 %>
player.markers({ player.markers({
onMarkerReached: function(marker) { onMarkerReached: function(marker) {
if (marker.text === 'End') { if (marker.text === "End") {
if (player.loop()) { if (player.loop()) {
player.markers.prev('Start'); player.markers.prev("Start");
} else { } else {
player.pause(); player.pause();
} }
} }
}, },
markers: [ markers: [
{time: <%= video_start %>, text: 'Start'}, { time: <%= video_start %>, text: "Start" },
<% if video_end < 0 %> <% if video_end < 0 %>
{time: <%= video.info["length_seconds"].to_f - 0.5 %>, text: 'End'} { time: <%= video.info["length_seconds"].to_f - 0.5 %>, text: "End" }
<% else %> <% else %>
{time: <%= video_end %>, text: 'End'} { time: <%= video_end %>, text: "End" }
<% end %> <% end %>
] ]
}); });
@ -178,7 +178,7 @@ player.currentTime(<%= video_start %>);
<% 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--;
} }
@ -194,65 +194,69 @@ player.playbackRate(<%= preferences.speed %>);
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 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;
body.innerHTML = body.innerHTML =
'<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>'; '<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
var url = '/api/v1/comments/<%= video.id %>?format=html&continuation=' + continuation; var url =
"/api/v1/comments/<%= video.id %>?format=html&continuation=" + continuation;
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.responseType = 'json'; xhr.responseType = "json";
xhr.timeout = 10000; xhr.timeout = 10000;
xhr.open("GET", url, true); xhr.open("GET", url, true);
xhr.send(); xhr.send();
xhr.onreadystatechange = function() { xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) { if (xhr.readyState == 4) {
if (xhr.statusCode == 200) {
body.innerHTML = xhr.response.content_html; body.innerHTML = xhr.response.content_html;
} else { } else {
body.innerHTML = fallback; body.innerHTML = fallback;
} }
} }
};
xhr.ontimeout = function() { xhr.ontimeout = function() {
body.innerHTML = fallback; body.innerHTML = fallback;
} };
} }
function get_reddit_comments() { function get_reddit_comments() {
var url = '/api/v1/comments/<%= video.id %>?source=reddit'; var url = "/api/v1/comments/<%= video.id %>?source=reddit";
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.responseType = 'json'; xhr.responseType = "json";
xhr.timeout = 10000; xhr.timeout = 10000;
xhr.open("GET", url, true); xhr.open("GET", url, true);
xhr.send(); xhr.send();
xhr.onreadystatechange = function() { xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) { if (xhr.readyState == 4)
comments = document.getElementById('comments'); if (xhr.status == 200) {
comments = document.getElementById("comments");
comments.innerHTML = ` comments.innerHTML = `
<div> <div>
<h3> <h3>
@ -277,20 +281,21 @@ function get_reddit_comments() {
xhr.ontimeout = function() { xhr.ontimeout = function() {
get_reddit_comments(); get_reddit_comments();
} };
} }
function get_youtube_comments() { function get_youtube_comments() {
var url = '/api/v1/comments/<%= video.id %>?format=html'; var url = "/api/v1/comments/<%= video.id %>?format=html";
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.responseType = 'json'; xhr.responseType = "json";
xhr.timeout = 10000; xhr.timeout = 10000;
xhr.open("GET", url, true); xhr.open("GET", url, true);
xhr.send(); xhr.send();
xhr.onreadystatechange = function() { xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) { if (xhr.readyState == 4)
comments = document.getElementById('comments'); if (xhr.status == 200) {
comments = document.getElementById("comments");
comments.innerHTML = ` comments.innerHTML = `
<div> <div>
<h3> <h3>
@ -303,20 +308,20 @@ function get_youtube_comments() {
content_html: xhr.response.content_html content_html: xhr.response.content_html
}); });
} else { } else {
comments = document.getElementById('comments'); comments = document.getElementById("comments");
comments.innerHTML = ''; comments.innerHTML = "";
}
} }
};
xhr.ontimeout = function() { xhr.ontimeout = function() {
get_youtube_comments(); 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;
}); });
}; };