implement new subtitles L2S2 interface

2 files changed, 124 insertions, 147 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;
+}
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 = $([
-			'<div class="mejs-button mejs-subs-button">',
-				'<span class="fa fa-comments-o"></span>',
-			'</div>'
-		].join('')),
-		$line = $([
-			'<div class="mejs-subs-line">',
-				'<div class="text"></div>',
-				'<div class="silence">',
-					'<i>(silence)</i>',
-					'<br />',
-					'Maybe no-one is currently writing Live-Subtitles',
-				'</div>',
-				'<div class="error">',
-					'Sorry, an Error occured.',
-				'</div>',
-			'</div>'
-		].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') {