diff options
author | MaZderMind | 2015-12-20 15:29:09 +0100 |
---|---|---|
committer | MaZderMind | 2015-12-20 15:29:09 +0100 |
commit | a439f454df31093157aaa773e549f5bacc5584c1 (patch) | |
tree | fe533d042b76213d0029753a7054090a2a8c5494 /assets/js/lustige-subtitles.js | |
parent | 82fcef7c4cd257c0ee3b666899542e033269af32 (diff) |
implement new subtitles L2S2 interface
Diffstat (limited to '')
-rw-r--r-- | assets/js/lustige-subtitles.js | 117 |
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; +} |