From 9122f8acee758794f168989c9da5234bd4c6e688 Mon Sep 17 00:00:00 2001 From: Omar Roth Date: Sat, 8 Jun 2019 10:52:47 -0500 Subject: [PATCH] Add title overlay to embedded videos --- assets/css/default.css | 6 ++++++ assets/css/videojs-overlay.css | 1 + assets/js/player.js | 16 ++++++++++++++++ assets/js/videojs-overlay.min.js | 2 ++ src/invidious/views/embed.ecr | 2 ++ src/invidious/views/licenses.ecr | 14 ++++++++++++++ 6 files changed, 41 insertions(+) create mode 100644 assets/css/videojs-overlay.css create mode 100644 assets/js/videojs-overlay.min.js diff --git a/assets/css/default.css b/assets/css/default.css index bdb3e18e..0727cfdd 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -351,6 +351,12 @@ span > select { background-color: rgba(0, 182, 240, 1); } +/* Overlay */ +.video-js .vjs-overlay { + background-color: rgba(35, 35, 35, 0.5); + color: rgba(255, 255, 255, 1); +} + /* ProgressBar marker */ .vjs-marker { background-color: rgba(255, 255, 255, 1); diff --git a/assets/css/videojs-overlay.css b/assets/css/videojs-overlay.css new file mode 100644 index 00000000..3ba5a574 --- /dev/null +++ b/assets/css/videojs-overlay.css @@ -0,0 +1 @@ +.video-js .vjs-overlay{color:#fff;position:absolute;text-align:center}.video-js .vjs-overlay-no-background{max-width:33%}.video-js .vjs-overlay-background{background-color:#646464;background-color:rgba(255,255,255,0.4);border-radius:3px;padding:10px;width:33%}.video-js .vjs-overlay-top-left{top:5px;left:5px}.video-js .vjs-overlay-top{left:50%;margin-left:-16.5%;top:5px}.video-js .vjs-overlay-top-right{right:5px;top:5px}.video-js .vjs-overlay-right{right:5px;top:50%;transform:translateY(-50%)}.video-js .vjs-overlay-bottom-right{bottom:3.5em;right:5px}.video-js .vjs-overlay-bottom{bottom:3.5em;left:50%;margin-left:-16.5%}.video-js .vjs-overlay-bottom-left{bottom:3.5em;left:5px}.video-js .vjs-overlay-left{left:5px;top:50%;transform:translateY(-50%)}.video-js .vjs-overlay-center{left:50%;margin-left:-16.5%;top:50%;transform:translateY(-50%)}.video-js .vjs-no-flex .vjs-overlay-left,.video-js .vjs-no-flex .vjs-overlay-center,.video-js .vjs-no-flex .vjs-overlay-right{margin-top:-15px} diff --git a/assets/js/player.js b/assets/js/player.js index 8854d859..ae9a8b25 100644 --- a/assets/js/player.js +++ b/assets/js/player.js @@ -102,6 +102,22 @@ var player = videojs('player', options, function () { }); }); +if (location.pathname.startsWith('/embed/')) { + player.overlay({ + overlays: [{ + start: 'loadstart', + content: '

' + player_data.title + '

', + end: 'playing', + align: 'top' + }, { + start: 'pause', + content: '

' + player_data.title + '

', + end: 'playing', + align: 'top' + }] + }); +} + player.on('error', function (event) { if (player.error().code === 2 || player.error().code === 4) { setInterval(setTimeout(function (event) { diff --git a/assets/js/videojs-overlay.min.js b/assets/js/videojs-overlay.min.js new file mode 100644 index 00000000..8182c26c --- /dev/null +++ b/assets/js/videojs-overlay.min.js @@ -0,0 +1,2 @@ +/*! @name videojs-overlay @version 2.1.4 @license Apache-2.0 */ +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("video.js"),require("global/window")):"function"==typeof define&&define.amd?define(["video.js","global/window"],e):t.videojsOverlay=e(t.videojs,t.window)}(this,function(t,e){"use strict";function n(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}t=t&&t.hasOwnProperty("default")?t.default:t,e=e&&e.hasOwnProperty("default")?e.default:e;var r={align:"top-left",class:"",content:"This overlay will show up while the video is playing",debug:!1,showBackground:!0,attachToControlBar:!1,overlays:[{start:"playing",end:"paused"}]},i=t.getComponent("Component"),o=t.dom||t,s=t.registerPlugin||t.plugin,a=function(t){return"number"==typeof t&&t==t},h=function(t){return"string"==typeof t&&/^\S+$/.test(t)},d=function(r){var i,s;function d(t,e){var i;return i=r.call(this,t,e)||this,["start","end"].forEach(function(t){var e=i.options_[t];if(a(e))i[t+"Event_"]="timeupdate";else if(h(e))i[t+"Event_"]=e;else if("start"===t)throw new Error('invalid "start" option; expected number or string')}),["endListener_","rewindListener_","startListener_"].forEach(function(t){i[t]=function(e){return d.prototype[t].call(n(n(i)),e)}}),"timeupdate"===i.startEvent_&&i.on(t,"timeupdate",i.rewindListener_),i.debug('created, listening to "'+i.startEvent_+'" for "start" and "'+(i.endEvent_||"nothing")+'" for "end"'),i.hide(),i}s=r,(i=d).prototype=Object.create(s.prototype),i.prototype.constructor=i,i.__proto__=s;var l=d.prototype;return l.createEl=function(){var t=this.options_,n=t.content,r=t.showBackground?"vjs-overlay-background":"vjs-overlay-no-background",i=o.createEl("div",{className:"\n vjs-overlay\n vjs-overlay-"+t.align+"\n "+t.class+"\n "+r+"\n vjs-hidden\n "});return"string"==typeof n?i.innerHTML=n:n instanceof e.DocumentFragment?i.appendChild(n):o.appendContent(i,n),i},l.debug=function(){if(this.options_.debug){for(var e=t.log,n=e,r=arguments.length,i=new Array(r),o=0;o=n:n===e},l.show=function(){return r.prototype.show.call(this),this.off(this.player(),this.startEvent_,this.startListener_),this.debug("shown"),this.debug('unbound `startListener_` from "'+this.startEvent_+'"'),this.endEvent_&&(this.debug('bound `endListener_` to "'+this.endEvent_+'"'),this.on(this.player(),this.endEvent_,this.endListener_)),this},l.shouldShow_=function(t,e){var n=this.options_.start,r=this.options_.end;return a(n)?a(r)?t>=n&&t=n):n===e},l.startListener_=function(t){var e=this.player().currentTime();this.shouldShow_(e,t.type)&&this.show()},l.endListener_=function(t){var e=this.player().currentTime();this.shouldHide_(e,t.type)&&this.hide()},l.rewindListener_=function(t){var e=this.player().currentTime(),n=this.previousTime_,r=this.options_.start,i=this.options_.end;e <%= rendered "components/player_sources" %> + + <%= HTML.escape(video.title) %> - Invidious