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/css/_mejs_hacks.less | 30 --- assets/css/_structure.less | 1 + assets/css/_subtitles.less | 36 +++ assets/img/subtitles-controls.svg | 550 ++++++++++++++++++++++++++++++++++++++ assets/js/lustige-subtitles.js | 117 ++++++++ assets/js/lustiges-script.js | 154 +---------- 6 files changed, 711 insertions(+), 177 deletions(-) create mode 100644 assets/css/_subtitles.less create mode 100644 assets/img/subtitles-controls.svg create mode 100644 assets/js/lustige-subtitles.js (limited to 'assets') diff --git a/assets/css/_mejs_hacks.less b/assets/css/_mejs_hacks.less index 5a58c58..b89ee96 100644 --- a/assets/css/_mejs_hacks.less +++ b/assets/css/_mejs_hacks.less @@ -1,34 +1,4 @@ .mejs-container { - .mejs-subs-line { - position: absolute; - bottom: 50px; - height: 85px; - width: 100%; - background-color: fade(white, 85%); - color: black; - font-size: 65px; - text-align: center; - opacity: 0; - display: none; - padding: 5px 0; - overflow: hidden; - - .silence { - font-size: 49%; - opacity: 0; - display: none; - color: #555; - } - &.silence .silence { opacity: 1; display: block; } - - .error { - color: red; - opacity: 0; - display: none; - } - &.error .error { opacity: 1; display: block; } - } - &.mejs-video .mejs-controls { @factor: 1.5; diff --git a/assets/css/_structure.less b/assets/css/_structure.less index d6e4257..422bfab 100644 --- a/assets/css/_structure.less +++ b/assets/css/_structure.less @@ -89,3 +89,4 @@ body { @import "_embed.less"; @import "_feedback.less"; @import "_allconferences.less"; +@import "_subtitles.less"; diff --git a/assets/css/_subtitles.less b/assets/css/_subtitles.less new file mode 100644 index 0000000..81c776e --- /dev/null +++ b/assets/css/_subtitles.less @@ -0,0 +1,36 @@ +.mejs-container.mejs-video .mejs-controls .mejs-button.mejs-subtitles { + button { + background-image: url(../img/subtitles-controls.svg); + background-size: 240px 48px !important; + } + + &.mejs-subtitles-button button { + background-position: -174px -24px; + } + &.mejs-subtitles-popup-button button { + background-position: -202px -24px; + } +} + +.mejs-container.mejs-video { + .mejs-subtitles-lines { + position: absolute; + bottom: 40px; + height: 182px !important; + width: 100%; + background-color: fade(white, 85%); + color: black; + font-size: 42px; + text-align: center; + padding: 5px 0; + overflow: hidden; + + display: none; + + .mejs-subtitles-lines-inner { + position: absolute; + bottom: 0; + width: 100%; + } + } +} diff --git a/assets/img/subtitles-controls.svg b/assets/img/subtitles-controls.svg new file mode 100644 index 0000000..1b714cd --- /dev/null +++ b/assets/img/subtitles-controls.svg @@ -0,0 +1,550 @@ + +image/svg+xml + \ No newline at end of file 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