Migrate to a good Content Security Policy (#1023)

So attacks such as XSS (see [0]) will no longer be of an issue.

[0]: https://github.com/omarroth/invidious/issues/1022

assets/css/embed.css

@@ -0,0 +1,10 @@
+#player {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  min-width: 100%;
+  min-height: 100%;
+  width: auto;
+  height: auto;
+  z-index: -100;
+}

assets/js/community.js

@@ -1,3 +1,5 @@
+var community_data = JSON.parse(document.getElementById('community_data').innerHTML);
+
 String.prototype.supplant = function (o) {
     return this.replace(/{([^{}]*)}/g, function (a, b) {
         var r = o[b];

assets/js/embed.js

@@ -1,3 +1,5 @@
+var video_data = JSON.parse(document.getElementById('video_data').innerHTML);
+
 function get_playlist(plid, retries) {
     if (retries == undefined) retries = 5;
 

assets/js/global.js

@@ -0,0 +1,3 @@
+// Disable Web Workers. Fixes Video.js CSP violation (created by `new Worker(objURL)`):
+// Refused to create a worker from 'blob:http://host/id' because it violates the following Content Security Policy directive: "worker-src 'self'".
+window.Worker = undefined;

assets/js/handlers.js

@@ -0,0 +1,141 @@
+'use strict';
+
+(function() {
+    var n2a = function(n) { return Array.prototype.slice.call(n); };
+
+    var video_player = document.getElementById('player');
+    if (video_player) {
+        video_player.onmouseenter = function() { video_player['data-title'] = video_player['title']; video_player['title'] = ''; };
+        video_player.onmouseleave = function() { video_player['title'] = video_player['data-title']; video_player['data-title'] = ''; };
+        video_player.oncontextmenu = function() { video_player['title'] = video_player['data-title']; };
+    }
+
+    // For dynamically inserted elements
+    document.addEventListener('click', function(e) {
+        if (!e || !e.target) { return; }
+        e = e.target;
+        var handler_name = e.getAttribute('data-onclick');
+        switch (handler_name) {
+        case 'jump_to_time':
+            var time = e.getAttribute('data-jump-time');
+            player.currentTime(time);
+            break;
+        case 'get_youtube_replies':
+            var load_more = e.getAttribute('data-load-more') !== null;
+            get_youtube_replies(e, load_more);
+            break;
+        default:
+            break;
+        }
+    });
+
+    n2a(document.querySelectorAll('[data-mouse="switch_classes"]')).forEach(function(e) {
+        var classes = e.getAttribute('data-switch-classes').split(',');
+        var ec = classes[0];
+        var lc = classes[1];
+        var onoff = function(on, off) {
+            var cs = e.getAttribute('class');
+            cs = cs.split(off).join(on);
+            e.setAttribute('class', cs);
+        };
+        e.onmouseenter = function() { onoff(ec, lc); };
+        e.onmouseleave = function() { onoff(lc, ec); };
+    });
+
+    n2a(document.querySelectorAll('[data-onsubmit="return_false"]')).forEach(function(e) {
+        e.onsubmit = function() { return false; };
+    });
+
+    n2a(document.querySelectorAll('[data-onclick="toggle_parent"]')).forEach(function(e) {
+        e.onclick = function() { toggle_parent(e); };
+    });
+    n2a(document.querySelectorAll('[data-onclick="mark_watched"]')).forEach(function(e) {
+        e.onclick = function() { mark_watched(e); };
+    });
+    n2a(document.querySelectorAll('[data-onclick="mark_unwatched"]')).forEach(function(e) {
+        e.onclick = function() { mark_unwatched(e); };
+    });
+    n2a(document.querySelectorAll('[data-onclick="add_playlist_item"]')).forEach(function(e) {
+        e.onclick = function() { add_playlist_item(e); };
+    });
+    n2a(document.querySelectorAll('[data-onclick="remove_playlist_item"]')).forEach(function(e) {
+        e.onclick = function() { remove_playlist_item(e); };
+    });
+    n2a(document.querySelectorAll('[data-onclick="revoke_token"]')).forEach(function(e) {
+        e.onclick = function() { revoke_token(e); };
+    });
+    n2a(document.querySelectorAll('[data-onclick="remove_subscription"]')).forEach(function(e) {
+        e.onclick = function() { remove_subscription(e); };
+    });
+    n2a(document.querySelectorAll('[data-onclick="notification_requestPermission"]')).forEach(function(e) {
+        e.onclick = function() { Notification.requestPermission(); };
+    });
+
+    n2a(document.querySelectorAll('[data-onrange="update_volume_value"]')).forEach(function(e) {
+        var cb = function() { update_volume_value(e); }
+        e.oninput = cb;
+        e.onchange = cb;
+    });
+
+    function update_volume_value(element) {
+        document.getElementById('volume-value').innerText = element.value;
+    }
+
+    function revoke_token(target) {
+        var row = target.parentNode.parentNode.parentNode.parentNode.parentNode;
+        row.style.display = 'none';
+        var count = document.getElementById('count');
+        count.innerText = count.innerText - 1;
+
+        var referer = window.encodeURIComponent(document.location.href);
+        var url = '/token_ajax?action_revoke_token=1&redirect=false' +
+            '&referer=' + referer +
+            '&session=' + target.getAttribute('data-session');
+        var xhr = new XMLHttpRequest();
+        xhr.responseType = 'json';
+        xhr.timeout = 10000;
+        xhr.open('POST', url, true);
+        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState == 4) {
+                if (xhr.status != 200) {
+                    count.innerText = parseInt(count.innerText) + 1;
+                    row.style.display = '';
+                }
+            }
+        }
+
+        var csrf_token = target.parentNode.querySelector('input[name="csrf_token"]').value;
+        xhr.send('csrf_token=' + csrf_token);
+    }
+
+    function remove_subscription(target) {
+        var row = target.parentNode.parentNode.parentNode.parentNode.parentNode;
+        row.style.display = 'none';
+        var count = document.getElementById('count');
+        count.innerText = count.innerText - 1;
+
+        var referer = window.encodeURIComponent(document.location.href);
+        var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' +
+            '&referer=' + referer +
+            '&c=' + target.getAttribute('data-ucid');
+        var xhr = new XMLHttpRequest();
+        xhr.responseType = 'json';
+        xhr.timeout = 10000;
+        xhr.open('POST', url, true);
+        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState == 4) {
+                if (xhr.status != 200) {
+                    count.innerText = parseInt(count.innerText) + 1;
+                    row.style.display = '';
+                }
+            }
+        }
+
+        var csrf_token = target.parentNode.querySelector('input[name="csrf_token"]').value;
+        xhr.send('csrf_token=' + csrf_token);
+    }
+})();

assets/js/notifications.js

@@ -1,3 +1,5 @@
+var notification_data = JSON.parse(document.getElementById('notification_data').innerHTML);
+
 var notifications, delivered;
 
 function get_subscriptions(callback, retries) {

assets/js/player.js

@@ -1,3 +1,6 @@
+var player_data = JSON.parse(document.getElementById('player_data').innerHTML);
+var video_data = JSON.parse(document.getElementById('video_data').innerHTML);
+
 var options = {
     preload: 'auto',
     liveui: true,

assets/js/playlist_widget.js

@@ -1,3 +1,5 @@
+var playlist_data = JSON.parse(document.getElementById('playlist_data').innerHTML);
+
 function add_playlist_item(target) {
     var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
     tile.style.display = 'none';

assets/js/silvermine-videojs-quality-selector.min.js

@@ -1,3 +1,4 @@
-/*! @silvermine/videojs-quality-selector 2019-09-26 v1.2.2-4-gc134430-dirty */
+/*! @silvermine/videojs-quality-selector 2020-03-02 v1.1.2-36-g64d620a-dirty */
 
-!function u(o,c,a){function l(e,n){if(!c[e]){if(!o[e]){var t="function"==typeof require&&require;if(!n&&t)return t(e,!0);if(s)return s(e,!0);var r=new Error("Cannot find module '"+e+"'");throw r.code="MODULE_NOT_FOUND",r}var i=c[e]={exports:{}};o[e][0].call(i.exports,function(n){return l(o[e][1][n]||n)},i,i.exports,u,o,c,a)}return c[e].exports}for(var s="function"==typeof require&&require,n=0;n<a.length;n++)l(a[n]);return l}({1:[function(n,e,t){!function(){var c=!1,a=/xyz/.test(function(){xyz})?/\b_super\b/:/.*/;this.Class=function(){},Class.extend=function(n,e){null==e&&(e=n,n="Class");var i=this.prototype;c=!0;var t=new this;for(var r in c=!1,e)t[r]="function"==typeof e[r]&&"function"==typeof i[r]&&a.test(e[r])?function(t,r){return function(){var n=this._super;this._super=i[t];var e=r.apply(this,arguments);return this._super=n,e}}(r,e[r]):e[r];function u(){!c&&this.init&&this.init.apply(this,arguments)}u.prototype=t;var o=new Function("return function "+n+"(){ }")();return u.prototype.constructor=o,u.extend=arguments.callee,u},e.exports=Class}()},{}],2:[function(n,G,H){(function($){!function(){function t(){}var n="object"==typeof self&&self.self===self&&self||"object"==typeof $&&$.global===$&&$||this||{},e=n._,r=Array.prototype,o=Object.prototype,f="undefined"!=typeof Symbol?Symbol.prototype:null,i=r.push,a=r.slice,p=o.toString,u=o.hasOwnProperty,c=Array.isArray,l=Object.keys,s=Object.create,h=function(n){return n instanceof h?n:this instanceof h?void(this._wrapped=n):new h(n)};void 0===H||H.nodeType?n._=h:(void 0!==G&&!G.nodeType&&G.exports&&(H=G.exports=h),H._=h),h.VERSION="1.9.1";function v(i,u,n){if(void 0===u)return i;switch(null==n?3:n){case 1:return function(n){return i.call(u,n)};case 3:return function(n,e,t){return i.call(u,n,e,t)};case 4:return function(n,e,t,r){return i.call(u,n,e,t,r)}}return function(){return i.apply(u,arguments)}}function y(n,e,t){return h.iteratee!==d?h.iteratee(n,e):null==n?h.identity:h.isFunction(n)?v(n,e,t):h.isObject(n)&&!h.isArray(n)?h.matcher(n):h.property(n)}var d;h.iteratee=d=function(n,e){return y(n,e,1/0)};function g(i,u){return u=null==u?i.length-1:+u,function(){for(var n=Math.max(arguments.length-u,0),e=Array(n),t=0;t<n;t++)e[t]=arguments[t+u];switch(u){case 0:return i.call(this,e);case 1:return i.call(this,arguments[0],e);case 2:return i.call(this,arguments[0],arguments[1],e)}var r=Array(u+1);for(t=0;t<u;t++)r[t]=arguments[t];return r[u]=e,i.apply(this,r)}}function m(n){if(!h.isObject(n))return{};if(s)return s(n);t.prototype=n;var e=new t;return t.prototype=null,e}function S(e){return function(n){return null==n?void 0:n[e]}}function b(n,e){return null!=n&&u.call(n,e)}function _(n,e){for(var t=e.length,r=0;r<t;r++){if(null==n)return;n=n[e[r]]}return t?n:void 0}function x(n){var e=j(n);return"number"==typeof e&&0<=e&&e<=k}var k=Math.pow(2,53)-1,j=S("length");h.each=h.forEach=function(n,e,t){var r,i;if(e=v(e,t),x(n))for(r=0,i=n.length;r<i;r++)e(n[r],r,n);else{var u=h.keys(n);for(r=0,i=u.length;r<i;r++)e(n[u[r]],u[r],n)}return n},h.map=h.collect=function(n,e,t){e=y(e,t);for(var r=!x(n)&&h.keys(n),i=(r||n).length,u=Array(i),o=0;o<i;o++){var c=r?r[o]:o;u[o]=e(n[c],c,n)}return u};function w(a){return function(n,e,t,r){var i=3<=arguments.length;return function(n,e,t,r){var i=!x(n)&&h.keys(n),u=(i||n).length,o=0<a?0:u-1;for(r||(t=n[i?i[o]:o],o+=a);0<=o&&o<u;o+=a){var c=i?i[o]:o;t=e(t,n[c],c,n)}return t}(n,v(e,r,4),t,i)}}h.reduce=h.foldl=h.inject=w(1),h.reduceRight=h.foldr=w(-1),h.find=h.detect=function(n,e,t){var r=(x(n)?h.findIndex:h.findKey)(n,e,t);if(void 0!==r&&-1!==r)return n[r]},h.filter=h.select=function(n,r,e){var i=[];return r=y(r,e),h.each(n,function(n,e,t){r(n,e,t)&&i.push(n)}),i},h.reject=function(n,e,t){return h.filter(n,h.negate(y(e)),t)},h.every=h.all=function(n,e,t){e=y(e,t);for(var r=!x(n)&&h.keys(n),i=(r||n).length,u=0;u<i;u++){var o=r?r[u]:u;if(!e(n[o],o,n))return!1}return!0},h.some=h.any=function(n,e,t){e=y(e,t);for(var r=!x(n)&&h.keys(n),i=(r||n).length,u=0;u<i;u++){var o=r?r[u]:u;if(e(n[o],o,n))return!0}return!1},h.contains=h.includes=h.include=function(n,e,t,r){return x(n)||(n=h.values(n)),"number"==typeof t&&!r||(t=0),0<=h.indexOf(n,e,t)},h.invoke=g(function(n,t,r){var i,u;return h.isFunction(t)?u=t:h.isArray(t)&&(i=t.slice(0,-1),t=t[t.length-1]),h.map(n,function(n){var e=u;if(!e){if(i&&i.length&&(n=_(n,i)),null==n)return;e=n[t]}return null==e?e:e.apply(n,r)})}),h.pluck=function(n,e){return h.map(n,h.property(e))},h.where=function(n,e){return h.filter(n,h.matcher(e))},h.findWhere=function(n,e){return h.find(n,h.matcher(e))},h.max=function(n,r,e){var t,i,u=-1/0,o=-1/0;if(null==r||"number"==typeof r&&"object"!=typeof n[0]&&null!=n)for(var c=0,a=(n=x(n)?n:h.values(n)).length;c<a;c++)null!=(t=n[c])&&u<t&&(u=t);else r=y(r,e),h.each(n,function(n,e,t){i=r(n,e,t),(o<i||i===-1/0&&u===-1/0)&&(u=n,o=i)});return u},h.min=function(n,r,e){var t,i,u=1/0,o=1/0;if(null==r||"number"==typeof r&&"object"!=typeof n[0]&&null!=n)for(var c=0,a=(n=x(n)?n:h.values(n)).leLine truncated
+!function u(o,c,a){function l(e,n){if(!c[e]){if(!o[e]){var t="function"==typeof require&&require;if(!n&&t)return t(e,!0);if(s)return s(e,!0);var r=new Error("Cannot find module '"+e+"'");throw r.code="MODULE_NOT_FOUND",r}var i=c[e]={exports:{}};o[e][0].call(i.exports,function(n){return l(o[e][1][n]||n)},i,i.exports,u,o,c,a)}return c[e].exports}for(var s="function"==typeof require&&require,n=0;n<a.length;n++)l(a[n]);return l}({1:[function(n,e,t){!function(){var u=!1,o=/xyz/.test(function(){xyz})?/\b_super\b/:/.*/;this.Class=function(){},Class.extend=function(n){var i=this.prototype;u=!0;var e=new this;for(var t in u=!1,n)e[t]="function"==typeof n[t]&&"function"==typeof i[t]&&o.test(n[t])?function(t,r){return function(){var n=this._super;this._super=i[t];var e=r.apply(this,arguments);return this._super=n,e}}(t,n[t]):n[t];function r(){!u&&this.init&&this.init.apply(this,arguments)}return((r.prototype=e).constructor=r).extend=arguments.callee,r},e.exports=Class}()},{}],2:[function(n,J,$){(function(V){!function(){function t(){}var n="object"==typeof self&&self.self===self&&self||"object"==typeof V&&V.global===V&&V||this||{},e=n._,r=Array.prototype,o=Object.prototype,f="undefined"!=typeof Symbol?Symbol.prototype:null,i=r.push,a=r.slice,p=o.toString,u=o.hasOwnProperty,c=Array.isArray,l=Object.keys,s=Object.create,h=function(n){return n instanceof h?n:this instanceof h?void(this._wrapped=n):new h(n)};void 0===$||$.nodeType?n._=h:(void 0!==J&&!J.nodeType&&J.exports&&($=J.exports=h),$._=h),h.VERSION="1.9.1";function d(i,u,n){if(void 0===u)return i;switch(null==n?3:n){case 1:return function(n){return i.call(u,n)};case 3:return function(n,e,t){return i.call(u,n,e,t)};case 4:return function(n,e,t,r){return i.call(u,n,e,t,r)}}return function(){return i.apply(u,arguments)}}function v(n,e,t){return h.iteratee!==y?h.iteratee(n,e):null==n?h.identity:h.isFunction(n)?d(n,e,t):h.isObject(n)&&!h.isArray(n)?h.matcher(n):h.property(n)}var y;h.iteratee=y=function(n,e){return v(n,e,1/0)};function g(i,u){return u=null==u?i.length-1:+u,function(){for(var n=Math.max(arguments.length-u,0),e=Array(n),t=0;t<n;t++)e[t]=arguments[t+u];switch(u){case 0:return i.call(this,e);case 1:return i.call(this,arguments[0],e);case 2:return i.call(this,arguments[0],arguments[1],e)}var r=Array(u+1);for(t=0;t<u;t++)r[t]=arguments[t];return r[u]=e,i.apply(this,r)}}function S(n){if(!h.isObject(n))return{};if(s)return s(n);t.prototype=n;var e=new t;return t.prototype=null,e}function m(e){return function(n){return null==n?void 0:n[e]}}function _(n,e){return null!=n&&u.call(n,e)}function b(n,e){for(var t=e.length,r=0;r<t;r++){if(null==n)return;n=n[e[r]]}return t?n:void 0}function x(n){var e=j(n);return"number"==typeof e&&0<=e&&e<=k}var k=Math.pow(2,53)-1,j=m("length");h.each=h.forEach=function(n,e,t){var r,i;if(e=d(e,t),x(n))for(r=0,i=n.length;r<i;r++)e(n[r],r,n);else{var u=h.keys(n);for(r=0,i=u.length;r<i;r++)e(n[u[r]],u[r],n)}return n},h.map=h.collect=function(n,e,t){e=v(e,t);for(var r=!x(n)&&h.keys(n),i=(r||n).length,u=Array(i),o=0;o<i;o++){var c=r?r[o]:o;u[o]=e(n[c],c,n)}return u};function E(a){return function(n,e,t,r){var i=3<=arguments.length;return function(n,e,t,r){var i=!x(n)&&h.keys(n),u=(i||n).length,o=0<a?0:u-1;for(r||(t=n[i?i[o]:o],o+=a);0<=o&&o<u;o+=a){var c=i?i[o]:o;t=e(t,n[c],c,n)}return t}(n,d(e,r,4),t,i)}}h.reduce=h.foldl=h.inject=E(1),h.reduceRight=h.foldr=E(-1),h.find=h.detect=function(n,e,t){var r=(x(n)?h.findIndex:h.findKey)(n,e,t);if(void 0!==r&&-1!==r)return n[r]},h.filter=h.select=function(n,r,e){var i=[];return r=v(r,e),h.each(n,function(n,e,t){r(n,e,t)&&i.push(n)}),i},h.reject=function(n,e,t){return h.filter(n,h.negate(v(e)),t)},h.every=h.all=function(n,e,t){e=v(e,t);for(var r=!x(n)&&h.keys(n),i=(r||n).length,u=0;u<i;u++){var o=r?r[u]:u;if(!e(n[o],o,n))return!1}return!0},h.some=h.any=function(n,e,t){e=v(e,t);for(var r=!x(n)&&h.keys(n),i=(r||n).length,u=0;u<i;u++){var o=r?r[u]:u;if(e(n[o],o,n))return!0}return!1},h.contains=h.includes=h.include=function(n,e,t,r){return x(n)||(n=h.values(n)),"number"==typeof t&&!r||(t=0),0<=h.indexOf(n,e,t)},h.invoke=g(function(n,t,r){var i,u;return h.isFunction(t)?u=t:h.isArray(t)&&(i=t.slice(0,-1),t=t[t.length-1]),h.map(n,function(n){var e=u;if(!e){if(i&&i.length&&(n=b(n,i)),null==n)return;e=n[t]}return null==e?e:e.apply(n,r)})}),h.pluck=function(n,e){return h.map(n,h.property(e))},h.where=function(n,e){return h.filter(n,h.matcher(e))},h.findWhere=function(n,e){return h.find(n,h.matcher(e))},h.max=function(n,r,e){var t,i,u=-1/0,o=-1/0;if(null==r||"number"==typeof r&&"object"!=typeof n[0]&&null!=n)for(var c=0,a=(n=x(n)?n:h.values(n)).length;c<a;c++)null!=(t=n[c])&&u<t&&(u=t);else r=v(r,e),h.each(n,function(n,e,t){i=r(n,e,t),(o<i||i===-1/0&&u===-1/0)&&(u=n,o=i)});return u},h.min=function(n,r,e){var t,i,u=1/0,o=1/0;if(null==r||"number"==typeof r&&"object"!=typeof n[0]&&null!=n)for(var c=0,a=(n=x(n)?n:h.values(n)).length;c<a;c++)null!=(t=n[c])&&t<u&&(u=t);else r=v(r,e),h.each(n,function(n,e,t){((i=r(n,e,Line truncated
+//# sourceMappingURL=silvermine-videojs-quality-selector.min.js.map

assets/js/subscribe_widget.js

@@ -1,3 +1,5 @@
+var subscribe_data = JSON.parse(document.getElementById('subscribe_data').innerHTML);
+
 var subscribe_button = document.getElementById('subscribe');
 subscribe_button.parentNode['action'] = 'javascript:void(0)';
 

assets/js/watch.js

@@ -1,3 +1,5 @@
+var video_data = JSON.parse(document.getElementById('video_data').innerHTML);
+
 String.prototype.supplant = function (o) {
     return this.replace(/{([^{}]*)}/g, function (a, b) {
         var r = o[b];

assets/js/watched_widget.js

@@ -1,3 +1,5 @@
+var watched_data = JSON.parse(document.getElementById('watched_data').innerHTML);
+
 function mark_watched(target) {
     var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
     tile.style.display = 'none';

src/invidious.cr

@@ -248,10 +248,20 @@ spawn do
 end
 
 before_all do |env|
-  host_url = make_host_url(config, Kemal.config)
+  begin
+    preferences = Preferences.from_json(env.request.cookies["PREFS"]?.try &.value || "{}")
+  rescue
+    preferences = Preferences.from_json("{}")
+  end
+
   env.response.headers["X-XSS-Protection"] = "1; mode=block"
   env.response.headers["X-Content-Type-Options"] = "nosniff"
-  env.response.headers["Content-Security-Policy"] = "default-src blob: data: 'self' #{host_url} 'unsafe-inline' 'unsafe-eval'; media-src blob: 'self' #{host_url} https://*.googlevideo.com:443"
+  extra_media_csp = ""
+  if CONFIG.disabled?("local") || !preferences.local
+    extra_media_csp += " https://*.googlevideo.com:443"
+  end
+  # TODO: Remove style-src's 'unsafe-inline', requires to remove all inline styles (<style> [..] </style>, style=" [..] ")
+  env.response.headers["Content-Security-Policy"] = "default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; media-src 'self' blob:#{extra_media_csp}"
   env.response.headers["Referrer-Policy"] = "same-origin"
 
   if (Kemal.config.ssl || config.https_only) && config.hsts
@@ -269,12 +279,6 @@ before_all do |env|
             "/latest_version",
           }.any? { |r| env.request.resource.starts_with? r }
 
-  begin
-    preferences = Preferences.from_json(env.request.cookies["PREFS"]?.try &.value || "{}")
-  rescue
-    preferences = Preferences.from_json("{}")
-  end
-
   if env.request.cookies.has_key? "SID"
     sid = env.request.cookies["SID"].value
 

src/invidious/comments.cr

@@ -294,7 +294,7 @@ def template_youtube_comments(comments, locale, thin_mode)
           <div class="pure-u-23-24">
             <p>
               <a href="javascript:void(0)" data-continuation="#{child["replies"]["continuation"]}"
-                onclick="get_youtube_replies(this)">#{translate(locale, "View `x` replies", number_with_separator(child["replies"]["replyCount"]))}</a>
+                data-onclick="get_youtube_replies">#{translate(locale, "View `x` replies", number_with_separator(child["replies"]["replyCount"]))}</a>
             </p>
           </div>
         </div>
@@ -413,7 +413,7 @@ def template_youtube_comments(comments, locale, thin_mode)
         <div class="pure-u-1">
           <p>
             <a href="javascript:void(0)" data-continuation="#{comments["continuation"]}"
-              onclick="get_youtube_replies(this, true)">#{translate(locale, "Load more")}</a>
+              data-onclick="get_youtube_replies" data-load-more>#{translate(locale, "Load more")}</a>
           </p>
         </div>
       </div>
@@ -451,7 +451,7 @@ def template_reddit_comments(root, locale)
 
         html << <<-END_HTML
         <p>
-          <a href="javascript:void(0)" onclick="toggle_parent(this)">[ - ]</a>
+          <a href="javascript:void(0)" data-onclick="toggle_parent">[ - ]</a>
           <b><a href="https://www.reddit.com/user/#{child.author}">#{child.author}</a></b>
           #{translate(locale, "`x` points", number_with_separator(child.score))}
           <span title="#{child.created_utc.to_s(translate(locale, "%a %B %-d %T %Y UTC"))}">#{translate(locale, "`x` ago", recode_date(child.created_utc, locale))}</span>
@@ -556,7 +556,7 @@ def content_to_comment_html(content)
         video_id = watch_endpoint["videoId"].as_s
 
         if length_seconds
-          text = %(<a href="javascript:void(0)" onclick="player.currentTime(#{length_seconds})">#{text}</a>)
+          text = %(<a href="javascript:void(0)" data-onclick="jump_to_time" data-jump-time="#{length_seconds}">#{text}</a>)
         else
           text = %(<a href="/watch?v=#{video_id}">#{text}</a>)
         end

src/invidious/views/add_playlist_items.ecr

@@ -20,9 +20,9 @@
     <div class="pure-u-1 pure-u-lg-1-5"></div>
 </div>
 
-<script>
-var playlist_data = {
-    csrf_token: '<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>',
+<script id="playlist_data" type="application/json">
+{
+    "csrf_token": "<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>"
 }
 </script>
 <script src="/js/playlist_widget.js"></script>

src/invidious/views/community.ecr

@@ -71,14 +71,14 @@
     </div>
 <% end %>
 
-<script>
-var community_data = {
-    ucid: '<%= channel.ucid %>',
-    youtube_comments_text: '<%= HTML.escape(translate(locale, "View YouTube comments")) %>',
-    comments_text: '<%= HTML.escape(translate(locale, "View `x` comments", "{commentCount}")) %>',
-    hide_replies_text: '<%= HTML.escape(translate(locale, "Hide replies")) %>',
-    show_replies_text: '<%= HTML.escape(translate(locale, "Show replies")) %>',
-    preferences: <%= env.get("preferences").as(Preferences).to_json %>,
+<script id="community_data" type="application/json">
+{
+    "ucid": "<%= channel.ucid %>",
+    "youtube_comments_text": "<%= HTML.escape(translate(locale, "View YouTube comments")) %>",
+    "comments_text": "<%= HTML.escape(translate(locale, "View `x` comments", "{commentCount}")) %>",
+    "hide_replies_text": "<%= HTML.escape(translate(locale, "Hide replies")) %>",
+    "show_replies_text": "<%= HTML.escape(translate(locale, "Show replies")) %>",
+    "preferences": <%= env.get("preferences").as(Preferences).to_json %>
 }
 </script>
 <script src="/js/community.js?v=<%= ASSET_COMMIT %>"></script>

src/invidious/views/components/item.ecr

@@ -57,10 +57,10 @@
                     <div class="thumbnail">
                         <img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
                         <% if plid = env.get?("remove_playlist_items") %>
-                            <form onsubmit="return false" action="/playlist_ajax?action_remove_video=1&set_video_id=<%= item.index %>&playlist_id=<%= plid %>&referer=<%= env.get("current_page") %>" method="post">
+                            <form data-onsubmit="return_false" action="/playlist_ajax?action_remove_video=1&set_video_id=<%= item.index %>&playlist_id=<%= plid %>&referer=<%= env.get("current_page") %>" method="post">
                                 <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
                                 <p class="watched">
-                                    <a onclick="remove_playlist_item(this)" data-index="<%= item.index %>" data-plid="<%= plid %>" href="javascript:void(0)">
+                                    <a data-onclick="remove_playlist_item" data-index="<%= item.index %>" data-plid="<%= plid %>" href="javascript:void(0)">
                                         <button type="submit" style="all:unset">
                                             <i class="icon ion-md-trash"></i>
                                         </button>
@@ -103,13 +103,12 @@
                     <div class="thumbnail">
                         <img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
                         <% if env.get? "show_watched" %>
-                            <form onsubmit="return false" action="/watch_ajax?action_mark_watched=1&id=<%= item.id %>&referer=<%= env.get("current_page") %>" method="post">
+                            <form data-onsubmit="return_false" action="/watch_ajax?action_mark_watched=1&id=<%= item.id %>&referer=<%= env.get("current_page") %>" method="post">
                                 <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
                                 <p class="watched">
-                                    <a onclick="mark_watched(this)" data-id="<%= item.id %>" href="javascript:void(0)">
+                                    <a data-onclick="mark_watched" data-id="<%= item.id %>" href="javascript:void(0)">
                                         <button type="submit" style="all:unset">
-                                            <i onmouseenter='this.setAttribute("class", "icon ion-ios-eye-off")'
-                                                onmouseleave='this.setAttribute("class", "icon ion-ios-eye")'
+                                            <i data-mouse="switch_classes" data-switch-classes="ion-ios-eye-off,ion-ios-eye"
                                                 class="icon ion-ios-eye">
                                             </i>
                                         </button>
@@ -117,10 +116,10 @@
                                 </p>
                             </form>
                         <% elsif plid = env.get? "add_playlist_items" %>
-                            <form onsubmit="return false" action="/playlist_ajax?action_add_video=1&video_id=<%= item.id %>&playlist_id=<%= plid %>&referer=<%= env.get("current_page") %>" method="post">
+                            <form data-onsubmit="return_false" action="/playlist_ajax?action_add_video=1&video_id=<%= item.id %>&playlist_id=<%= plid %>&referer=<%= env.get("current_page") %>" method="post">
                                 <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
                                 <p class="watched">
-                                    <a onclick="add_playlist_item(this)" data-id="<%= item.id %>" data-plid="<%= plid %>" href="javascript:void(0)">
+                                    <a data-onclick="add_playlist_item" data-id="<%= item.id %>" data-plid="<%= plid %>" href="javascript:void(0)">
                                         <button type="submit" style="all:unset">
                                             <i class="icon ion-md-add"></i>
                                         </button>

src/invidious/views/components/player.ecr

@@ -1,8 +1,5 @@
 <video style="outline:none;width:100%;background-color:#000" playsinline poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>"
-    id="player" class="video-js player-style-<%= params.player_style %>"
-    onmouseenter='this["data-title"]=this["title"];this["title"]=""'
-    onmouseleave='this["title"]=this["data-title"];this["data-title"]=""'
-    oncontextmenu='this["title"]=this["data-title"]'
+    id="player" class="on-video_player video-js player-style-<%= params.player_style %>"
     <% if params.autoplay %>autoplay<% end %>
     <% if params.video_loop %>loop<% end %>
     <% if params.controls %>controls<% end %>>
@@ -39,12 +36,12 @@
     <% end %>
 </video>
 
-<script>
-var player_data = {
-    aspect_ratio: '<%= aspect_ratio %>',
-    title: "<%= video.title.dump_unquoted %>",
-    description: "<%= HTML.escape(video.short_description) %>",
-    thumbnail: "<%= thumbnail %>"
+<script id="player_data" type="application/json">
+{
+    "aspect_ratio": "<%= aspect_ratio %>",
+    "title": "<%= video.title.dump_unquoted %>",
+    "description": "<%= HTML.escape(video.short_description) %>",
+    "thumbnail": "<%= thumbnail %>"
 }
 </script>
 <script src="/js/player.js?v=<%= ASSET_COMMIT %>"></script>

src/invidious/views/components/player_sources.ecr

@@ -3,6 +3,7 @@
 <link rel="stylesheet" href="/css/videojs.markers.min.css?v=<%= ASSET_COMMIT %>">
 <link rel="stylesheet" href="/css/videojs-share.css?v=<%= ASSET_COMMIT %>">
 <link rel="stylesheet" href="/css/videojs-vtt-thumbnails.css?v=<%= ASSET_COMMIT %>">
+<script src="/js/global.js?v=<%= ASSET_COMMIT %>"></script>
 <script src="/js/video.min.js?v=<%= ASSET_COMMIT %>"></script>
 <script src="/js/videojs-contrib-quality-levels.min.js?v=<%= ASSET_COMMIT %>"></script>
 <script src="/js/videojs-http-source-selector.min.js?v=<%= ASSET_COMMIT %>"></script>

src/invidious/views/components/subscribe_widget.ecr

@@ -19,14 +19,14 @@
         </p>
     <% end %>
 
-    <script>
-    var subscribe_data = {
-        ucid: '<%= ucid %>',
-        author: '<%= HTML.escape(author) %>',
-        sub_count_text: '<%= HTML.escape(sub_count_text) %>',
-        csrf_token: '<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>',
-        subscribe_text: '<%= HTML.escape(translate(locale, "Subscribe")) %>',
-        unsubscribe_text: '<%= HTML.escape(translate(locale, "Unsubscribe")) %>'
+    <script id="subscribe_data" type="application/json">
+    {
+        "ucid": "<%= ucid %>",
+        "author": "<%= HTML.escape(author) %>",
+        "sub_count_text": "<%= HTML.escape(sub_count_text) %>",
+        "csrf_token": "<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>",
+        "subscribe_text": "<%= HTML.escape(translate(locale, "Subscribe")) %>",
+        "unsubscribe_text": "<%= HTML.escape(translate(locale, "Unsubscribe")) %>"
     }
     </script>
     <script src="/js/subscribe_widget.js?v=<%= ASSET_COMMIT %>"></script>

src/invidious/views/embed.ecr

@@ -10,32 +10,21 @@
     <script src="/js/videojs-overlay.min.js?v=<%= ASSET_COMMIT %>"></script>
     <link rel="stylesheet" href="/css/default.css?v=<%= ASSET_COMMIT %>">
     <link rel="stylesheet" href="/css/darktheme.css?v=<%= ASSET_COMMIT %>">
+    <link rel="stylesheet" href="/css/embed.css?v=<%= ASSET_COMMIT %>">
     <title><%= HTML.escape(video.title) %> - Invidious</title>
-    <style>
-    #player {
-        position: fixed;
-        right: 0;
-        bottom: 0;
-        min-width: 100%;
-        min-height: 100%;
-        width: auto;
-        height: auto;
-        z-index: -100;
-    }
-    </style>
 </head>
 
 <body>
-<script>
-var video_data = {
-    id: '<%= video.id %>',
-    index: '<%= continuation %>',
-    plid: '<%= plid %>',
-    length_seconds: '<%= video.length_seconds.to_f %>',
-    video_series: <%= video_series.to_json %>,
-    params: <%= params.to_json %>,
-    preferences: <%= preferences.to_json %>,
-    premiere_timestamp: <%= video.premiere_timestamp.try &.to_unix || "null" %>
+<script id="video_data" type="application/json">
+{
+    "id": "<%= video.id %>",
+    "index": "<%= continuation %>",
+    "plid": "<%= plid %>",
+    "length_seconds": "<%= video.length_seconds.to_f %>",
+    "video_series": <%= video_series.to_json %>,
+    "params": <%= params.to_json %>,
+    "preferences": <%= preferences.to_json %>,
+    "premiere_timestamp": <%= video.premiere_timestamp.try &.to_unix || "null" %>
 }
 </script>
 

src/invidious/views/history.ecr

@@ -18,9 +18,9 @@
     </div>
 </div>
 
-<script>
-var watched_data = {
-    csrf_token: '<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>',
+<script id="watched_data" type="application/json">
+{
+    "csrf_token": "<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>"
 }
 </script>
 <script src="/js/watched_widget.js"></script>
@@ -34,10 +34,10 @@ var watched_data = {
                             <% if !env.get("preferences").as(Preferences).thin_mode %>
                                 <div class="thumbnail">
                                     <img class="thumbnail" src="/vi/<%= item %>/mqdefault.jpg"/>
-                                    <form onsubmit="return false" action="/watch_ajax?action_mark_unwatched=1&id=<%= item %>&referer=<%= env.get("current_page") %>" method="post">
+                                    <form data-onsubmit="return_false" action="/watch_ajax?action_mark_unwatched=1&id=<%= item %>&referer=<%= env.get("current_page") %>" method="post">
                                         <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
                                         <p class="watched">
-                                            <a onclick="mark_unwatched(this)" data-id="<%= item %>" href="javascript:void(0)">
+                                            <a data-onclick="mark_unwatched" data-id="<%= item %>" href="javascript:void(0)">
                                                 <button type="submit" style="all:unset">
                                                     <i class="icon ion-md-trash"></i>
                                                 </button>

src/invidious/views/playlist.ecr

@@ -69,9 +69,9 @@
 </div>
 
 <% if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email %>
-<script>
-var playlist_data = {
-    csrf_token: '<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>',
+<script id="playlist_data" type="application/json">
+{
+    "csrf_token": "<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>"
 }
 </script>
 <script src="/js/playlist_widget.js"></script>

src/invidious/views/preferences.ecr

@@ -2,12 +2,6 @@
 <title><%= translate(locale, "Preferences") %> - Invidious</title>
 <% end %>
 
-<script>
-function update_value(element) {
-    document.getElementById('volume-value').innerText = element.value;
-}
-</script>
-
 <div class="h-box">
     <form class="pure-form pure-form-aligned" action="/preferences?referer=<%= URI.encode_www_form(referer) %>" method="post">
         <fieldset>
@@ -65,7 +59,7 @@ function update_value(element) {
 
             <div class="pure-control-group">
                 <label for="volume"><%= translate(locale, "Player volume: ") %></label>
-                <input name="volume" id="volume" oninput="update_value(this);" type="range" min="0" max="100" step="5" value="<%= preferences.volume %>">
+                <input name="volume" id="volume" data-onrange="update_volume_value" type="range" min="0" max="100" step="5" value="<%= preferences.volume %>">
                 <span class="pure-form-message-inline" id="volume-value"><%= preferences.volume %></span>
             </div>
 
@@ -205,7 +199,7 @@ function update_value(element) {
                 <% # Web notifications are only supported over HTTPS %>
                 <% if Kemal.config.ssl || config.https_only %>
                     <div class="pure-control-group">
-                        <a href="#" onclick="Notification.requestPermission()"><%= translate(locale, "Enable web notifications") %></a>
+                        <a href="#" data-onclick="notification_requestPermission"><%= translate(locale, "Enable web notifications") %></a>
                     </div>
                 <% end %>
             <% end %>

src/invidious/views/subscription_manager.ecr

@@ -37,9 +37,9 @@
             <div class="pure-u-2-5"></div>
             <div class="pure-u-1-5" style="text-align:right">
                 <h3 style="padding-right:0.5em">
-                    <form onsubmit="return false" action="/subscription_ajax?action_remove_subscriptions=1&c=<%= channel.id %>&referer=<%= env.get("current_page") %>" method="post">
+                    <form data-onsubmit="return_false" action="/subscription_ajax?action_remove_subscriptions=1&c=<%= channel.id %>&referer=<%= env.get("current_page") %>" method="post">
                         <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
-                        <a onclick="remove_subscription(this)" data-ucid="<%= channel.id %>" href="#">
+                        <a data-onclick="remove_subscription" data-ucid="<%= channel.id %>" href="#">
                             <input style="all:unset" type="submit" value="<%= translate(locale, "unsubscribe") %>">
                         </a>
                     </form>
@@ -52,32 +52,3 @@
         <% end %>
     </div>
 <% end %>
-
-<script>
-function remove_subscription(target) {
-    var row = target.parentNode.parentNode.parentNode.parentNode.parentNode;
-    row.style.display = 'none';
-    var count = document.getElementById('count');
-    count.innerText = count.innerText - 1;
-
-    var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' +
-        '&referer=<%= env.get("current_page") %>' +
-        '&c=' + target.getAttribute('data-ucid');
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 10000;
-    xhr.open('POST', url, true);
-    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
-    xhr.onreadystatechange = function() {
-        if (xhr.readyState == 4) {
-            if (xhr.status != 200) {
-                count.innerText = parseInt(count.innerText) + 1;
-                row.style.display = '';
-            }
-        }
-    }
-
-    xhr.send('csrf_token=<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>');
-}
-</script>

src/invidious/views/subscriptions.ecr

@@ -45,9 +45,9 @@
     <hr>
 </div>
 
-<script>
-var watched_data = {
-    csrf_token: '<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>',
+<script id="watched_data" type="application/json">
+{
+    "csrf_token": "<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>"
 }
 </script>
 <script src="/js/watched_widget.js"></script>

src/invidious/views/template.ecr

@@ -147,13 +147,14 @@
         </div>
         <div class="pure-u-1 pure-u-md-2-24"></div>
     </div>
+    <script src="/js/handlers.js?v=<%= ASSET_COMMIT %>"></script>
     <script src="/js/themes.js?v=<%= ASSET_COMMIT %>"></script>
     <% if env.get? "user" %>
         <script src="/js/sse.js?v=<%= ASSET_COMMIT %>"></script>
-        <script>
-            var notification_data = {
-                upload_text: '<%= HTML.escape(translate(locale, "`x` uploaded a video")) %>',
-                live_upload_text: '<%= HTML.escape(translate(locale, "`x` is live")) %>',
+        <script id="notification_data" type="application/json">
+            {
+                "upload_text": "<%= HTML.escape(translate(locale, "`x` uploaded a video")) %>",
+                "live_upload_text": "<%= HTML.escape(translate(locale, "`x` is live")) %>"
             }
         </script>
         <script src="/js/notifications.js?v=<%= ASSET_COMMIT %>"></script>

src/invidious/views/token_manager.ecr

@@ -29,9 +29,9 @@
         </div>
         <div class="pure-u-1-5" style="text-align:right">
             <h3 style="padding-right:0.5em">
-                <form onsubmit="return false" action="/token_ajax?action_revoke_token=1&session=<%= token[:session] %>&referer=<%= env.get("current_page") %>" method="post">
+                <form data-onsubmit="return_false" action="/token_ajax?action_revoke_token=1&session=<%= token[:session] %>&referer=<%= env.get("current_page") %>" method="post">
                     <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
-                    <a onclick="revoke_token(this)" data-session="<%= token[:session] %>" href="#">
+                    <a data-onclick="revoke_token" data-session="<%= token[:session] %>" href="#">
                         <input style="all:unset" type="submit" value="<%= translate(locale, "revoke") %>">
                     </a>
                 </form>
@@ -44,32 +44,3 @@
     <% end %>
 </div>
 <% end %>
-
-<script>
-function revoke_token(target) {
-    var row = target.parentNode.parentNode.parentNode.parentNode.parentNode;
-    row.style.display = 'none';
-    var count = document.getElementById('count');
-    count.innerText = count.innerText - 1;
-
-    var url = '/token_ajax?action_revoke_token=1&redirect=false' +
-        '&referer=<%= env.get("current_page") %>' +
-        '&session=' + target.getAttribute('data-session');
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 10000;
-    xhr.open('POST', url, true);
-    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
-    xhr.onreadystatechange = function() {
-        if (xhr.readyState == 4) {
-            if (xhr.status != 200) {
-                count.innerText = parseInt(count.innerText) + 1;
-                row.style.display = '';
-            }
-        }
-    }
-
-    xhr.send('csrf_token=<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>');
-}
-</script>

src/invidious/views/watch.ecr

@@ -26,23 +26,23 @@
 <title><%= HTML.escape(video.title) %> - Invidious</title>
 <% end %>
 
-<script>
-var video_data = {
-    id: '<%= video.id %>',
-    index: '<%= continuation %>',
-    plid: '<%= plid %>',
-    length_seconds: <%= video.length_seconds.to_f %>,
-    play_next: <%= !rvs.empty? && !plid && params.continue %>,
-    next_video: '<%= rvs.select { |rv| rv["id"]? }[0]?.try &.["id"] %>',
-    youtube_comments_text: '<%= HTML.escape(translate(locale, "View YouTube comments")) %>',
-    reddit_comments_text: '<%= HTML.escape(translate(locale, "View Reddit comments")) %>',
-    reddit_permalink_text: '<%= HTML.escape(translate(locale, "View more comments on Reddit")) %>',
-    comments_text: '<%= HTML.escape(translate(locale, "View `x` comments", "{commentCount}")) %>',
-    hide_replies_text: '<%= HTML.escape(translate(locale, "Hide replies")) %>',
-    show_replies_text: '<%= HTML.escape(translate(locale, "Show replies")) %>',
-    params: <%= params.to_json %>,
-    preferences: <%= preferences.to_json %>,
-    premiere_timestamp: <%= video.premiere_timestamp.try &.to_unix || "null" %>
+<script id="video_data" type="application/json">
+{
+    "id": "<%= video.id %>",
+    "index": "<%= continuation %>",
+    "plid": "<%= plid %>",
+    "length_seconds": <%= video.length_seconds.to_f %>,
+    "play_next": <%= !rvs.empty? && !plid && params.continue %>,
+    "next_video": "<%= rvs.select { |rv| rv["id"]? }[0]?.try &.["id"] %>",
+    "youtube_comments_text": "<%= HTML.escape(translate(locale, "View YouTube comments")) %>",
+    "reddit_comments_text": "<%= HTML.escape(translate(locale, "View Reddit comments")) %>",
+    "reddit_permalink_text": "<%= HTML.escape(translate(locale, "View more comments on Reddit")) %>",
+    "comments_text": "<%= HTML.escape(translate(locale, "View `x` comments", "{commentCount}")) %>",
+    "hide_replies_text": "<%= HTML.escape(translate(locale, "Hide replies")) %>",
+    "show_replies_text": "<%= HTML.escape(translate(locale, "Show replies")) %>",
+    "params": <%= params.to_json %>,
+    "preferences": <%= preferences.to_json %>,
+    "premiere_timestamp": <%= video.premiere_timestamp.try &.to_unix || "null" %>
 }
 </script>