aboutsummaryrefslogtreecommitdiff
path: root/assets/js/lustige-subtitles.js
diff options
context:
space:
mode:
authorMaZderMind2015-12-20 15:29:09 +0100
committerMaZderMind2015-12-20 15:29:09 +0100
commita439f454df31093157aaa773e549f5bacc5584c1 (patch)
treefe533d042b76213d0029753a7054090a2a8c5494 /assets/js/lustige-subtitles.js
parent82fcef7c4cd257c0ee3b666899542e033269af32 (diff)
implement new subtitles L2S2 interface
Diffstat (limited to 'assets/js/lustige-subtitles.js')
-rw-r--r--assets/js/lustige-subtitles.js117
1 files changed, 117 insertions, 0 deletions
diff --git a/assets/js/lustige-subtitles.js b/assets/js/lustige-subtitles.js
new file mode 100644
index 0000000..c7aa1b4
--- /dev/null
+++ b/assets/js/lustige-subtitles.js
@@ -0,0 +1,117 @@
+MediaElementPlayer.prototype.buildsubtitles = function(player, controls, layers, media) {
+ var $btns = $([
+ '<span>',
+ '<div class="mejs-button mejs-subtitles mejs-subtitles-button">',
+ '<button type="button" title="Subtitles" aria-label="Subtitles"></button>',
+ '</div>',
+ '<div class="mejs-button mejs-subtitles mejs-subtitles-popup-button">',
+ '<button type="button" title="Subtitles in Popup" aria-label="Subtitles in Popup"></button>',
+ '</div>',
+ '</span>'
+ ].join(''));
+
+ $btns
+ .appendTo(controls)
+ .on('click', '.mejs-subtitles-button', function() {
+ connectToL2S2()
+ })
+ .on('click', '.mejs-subtitles-popup-button', function() {
+ var
+ frontend_url = $('.js-subtitles-settings').data('frontend-url'),
+ room = $('.video-wrap').data('subtitles-room-id');
+
+ window.open(frontend_url+''+room, 'subtitles-'+room, 'width=1000,height=560');
+ });
+
+
+ var $lines = $([
+ '<div class="mejs-subtitles-lines">',
+ '<div class="mejs-subtitles-lines-inner"></div>',
+ '</div>'
+ ].join(''));
+
+ $lines.appendTo(layers);
+};
+
+function connectToL2S2()
+{
+ var
+ baseurl = $('.js-subtitles-settings').data('primus-url');
+
+ if(window.io)
+ {
+ return openSocket();
+ }
+
+ $.getScript(baseurl+'primus/primus.js', openSocket);
+}
+
+function openSocket()
+{
+ var
+ baseurl = $('.js-subtitles-settings').data('primus-url'),
+ room = $('.video-wrap').data('subtitles-room-id'),
+ $lines = $('.mejs-subtitles-lines');
+
+ var primus = Primus.connect(baseurl);
+
+ primus.on('open', function()
+ {
+ primus.emit('join', room);
+ $lines.css({
+ display: 'block'
+ });
+ });
+
+ // primus.on('lineStart', function(roomId, userId, text)
+ // {
+ // console.log('lineStart', roomId, userId, text);
+ // });
+
+ primus.on('line', function(roomId, text, userId, color)
+ {
+ if (text && text.trim().length > 0 && roomId == room) {
+ console.log('line', roomId, userId, text, color);
+ appendLine(text);
+ }
+ });
+}
+
+function appendLine(line)
+{
+ var
+ $inner = $('.mejs-subtitles-lines .mejs-subtitles-lines-inner'),
+ $line = $('<div>').text(line),
+ cnt = 3;
+
+ $inner
+ .append($line)
+ .find('> div')
+ .slice(0, -cnt)
+ .remove()
+
+
+ $line.autoScale();
+}
+
+
+
+
+$.fn.autoScale = function() {
+ if(!this.data('autoScaleOriginal')) {
+ this.data('autoScaleOriginal', parseInt(this.css('font-size')));
+ }
+
+ var
+ maxSize = this.data('autoScaleOriginal');
+ maxH = this.closest('.mejs-subtitles-lines').innerHeight(),
+ thisH = this.css('font-size', maxSize).outerHeight();
+
+ console.log(thisH, maxH, maxSize);
+ while(thisH > maxH && maxSize > 0) {
+ console.log(thisH, maxH, maxSize);
+ thisH = this.css('font-size', --maxSize).outerHeight();
+ }
+
+ return this;
+}