From a439f454df31093157aaa773e549f5bacc5584c1 Mon Sep 17 00:00:00 2001 From: MaZderMind Date: Sun, 20 Dec 2015 15:29:09 +0100 Subject: implement new subtitles L2S2 interface --- assets/js/lustige-subtitles.js | 117 +++++++++++++++++++++++++++++++ assets/js/lustiges-script.js | 154 ++--------------------------------------- 2 files changed, 124 insertions(+), 147 deletions(-) create mode 100644 assets/js/lustige-subtitles.js (limited to 'assets/js') 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 = $([ + '', + '
', + '', + '
', + '
', + '', + '
', + '' + ].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 = $([ + '
', + '
', + '
' + ].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 = $('
').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; +} diff --git a/assets/js/lustiges-script.js b/assets/js/lustiges-script.js index 3b3ab6d..52ac9b9 100644 --- a/assets/js/lustiges-script.js +++ b/assets/js/lustiges-script.js @@ -1,148 +1,3 @@ -$.fn.pulseSubsLine = function(klass) { - var e = this; - e - .find('.text') - .hide() - .end() - .addClass(klass) - .css({display: 'block'}) - .animate({opacity: 1, duration: .75}, function() { - setTimeout(function() { - e.animate({opacity: 0, duration: .5}, function() { - e.css({display: 'none'}).removeClass(klass); - }) - }, 5000); - }); -} - -$.fn.autoScale = function() { - if(!this.data('autoScaleOriginal')) { - this.data('autoScaleOriginal', parseInt(this.css('font-size'))); - } - - var - maxSize = this.data('autoScaleOriginal'); - maxH = this.parent().innerHeight(), - thisH = this.css('font-size', maxSize).outerHeight(); - - while(thisH > maxH && maxSize > 0) { - thisH = this.css('font-size', --maxSize).outerHeight(); - } - - return this; -} - -// mediaelement subtitles button -MediaElementPlayer.prototype.buildsubs = function(player, controls, layers, media) { - var - host = 'http://subtitles.c3voc.de/', - room = $('.room.video').data('room'), - isLoaded = false, - t = 200, - $btn = $([ - '
', - '', - '
' - ].join('')), - $line = $([ - '
', - '
', - '
', - '(silence)', - '
', - 'Maybe no-one is currently writing Live-Subtitles', - '
', - '
', - 'Sorry, an Error occured.', - '
', - '
' - ].join('')), - $text = $line.find('.text'), - $silence = $line.find('.silence'), - $error = $line.find('.error'); - - - - $btn - .appendTo(controls) - .click(function() { - $.ajax({ - url: host+'status/'+encodeURIComponent(room), - //dataType: $.support.cors ? 'json' : 'jsonp', - dataType: 'jsonp', - success: function(status) { - if(!status) - return $line.pulseSubsLine('silence'); - - if(!isLoaded) { - isLoaded = true; - return loadAndOpenSocket(); - } - - $line.fadeToggle(t); - }, - error: function() { - $line.pulseSubsLine('error'); - } - }); - }); - - function loadAndOpenSocket() { - if(window.io) - return openSocket(); - - $.getScript(host+'socket.io/socket.io.js', openSocket); - } - - function silence() { - $text.hide(); - $silence.show().animate({opacity: 1, duration: .75}); - } - - function openSocket() { - var hideTimeout, silenceTimeout, silenceWait = 15*1000; - var socket = io(host); - - socket.on('connect', function() { - $line.show().animate({opacity: 1}, t); - socket.emit('join', room); - }); - - silenceTimeout = setTimeout(silence, silenceWait); - - socket.on('line', function(stamp, line, duration) { - if(hideTimeout) - clearTimeout(hideTimeout); - - hideTimeout = setTimeout(function() { - $text.animate({opacity: 0}, t) - clearTimeout(hideTimeout); - hideTimeout = null; - }, duration*1000); - - - if(silenceTimeout) - clearTimeout(silenceTimeout); - - silenceTimeout = setTimeout(silence, silenceWait); - - - $text.animate({ - opacity: 0 - }, { - duration: t, - complete: function() { - $text.show().text(line).autoScale().animate({ - opacity: 1 - }); - } - }); - }); - } - - $line.appendTo(layers); -} - // mediaelement-player $(function() { (function(strings) { @@ -151,10 +6,15 @@ $(function() { } })(mejs.i18n.locale.strings); + var feat = ['playpause', 'volume', 'fullscreen']; + if($('.video-wrap').hasClass('has-subtitles')) + feat.push('subtitles'); + $('body.room video, body.embed video').mediaelementplayer({ - features: ['playpause', 'volume', 'fullscreen'], + features: feat, enableAutosize: true }); + $('body.room audio, body.embed audio').mediaelementplayer({ features: ['playpause', 'volume', 'current'] }); @@ -207,7 +67,7 @@ $(function() { updateTimer = 500, /* offset to the browsers realtime (for simulation) */ - offset = $('.js-settings').data('scheduleoffset'); + offset = $('.js-schedule-settings').data('scheduleoffset'); $schedule.on('mouseenter mouseleave touchstart touchend', function(e) { if(e.type == 'mouseleave' || e.type == 'touchend') { -- cgit v1.2.3