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 +--------
index.php | 2 +
model/Room.php | 10 +
model/Subtitles.php | 26 ++
template/assemblies/player/video.phtml | 6 +-
template/page.phtml | 14 +-
11 files changed, 766 insertions(+), 180 deletions(-)
create mode 100644 assets/css/_subtitles.less
create mode 100644 assets/img/subtitles-controls.svg
create mode 100644 assets/js/lustige-subtitles.js
create mode 100644 model/Subtitles.php
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 @@
+
+
\ 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 = $([
+ '
').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') {
diff --git a/index.php b/index.php
index 69feeae..b3f0b34 100644
--- a/index.php
+++ b/index.php
@@ -16,6 +16,7 @@ require_once('model/Conference.php');
require_once('model/GenericConference.php');
require_once('model/Feedback.php');
require_once('model/Schedule.php');
+require_once('model/Subtitles.php');
require_once('model/Overview.php');
require_once('model/Room.php');
require_once('model/RoomTab.php');
@@ -128,6 +129,7 @@ $tpl->set(array(
'conference' => $conference,
'feedback' => new Feedback(),
'schedule' => new Schedule(),
+ 'subtitles' => new Subtitles(),
));
ob_start();
diff --git a/model/Room.php b/model/Room.php
index 124d057..b4fc1d1 100644
--- a/model/Room.php
+++ b/model/Room.php
@@ -76,6 +76,16 @@ class Room extends ModelBase
return $this->get('ROOMS.'.$this->getSlug().'.SCHEDULE') && $this->has('SCHEDULE');
}
+ public function hasSubtitles() {
+ return
+ $this->get('ROOMS.'.$this->getSlug().'.SUBTITLES') &&
+ $this->has('ROOMS.'.$this->getSlug().'.SUBTITLES_ROOM_ID') &&
+ $this->has('SUBTITLES');
+ }
+ public function getSubtitlesRoomId() {
+ return $this->get('ROOMS.'.$this->getSlug().'.SUBTITLES_ROOM_ID');
+ }
+
public function hasFeedback() {
return $this->get('ROOMS.'.$this->getSlug().'.FEEDBACK') && $this->has('FEEDBACK');
}
diff --git a/model/Subtitles.php b/model/Subtitles.php
new file mode 100644
index 0000000..e1878f2
--- /dev/null
+++ b/model/Subtitles.php
@@ -0,0 +1,26 @@
+has('SUBTITLES');
+ }
+
+ public function getEnabledRooms($slug) {
+ $rooms = [];
+ foreach(Room::rooms() as $room)
+ {
+ if($room->hasSubtitles())
+ $rooms[] = $room;
+ }
+
+ return $rooms;
+ }
+
+ public function getPrimusURL() {
+ return $this->get('SUBTITLES.PRIMUS_URL');
+ }
+ public function getFrontendURL() {
+ return $this->get('SUBTITLES.FRONTEND_URL');
+ }
+}
diff --git a/template/assemblies/player/video.phtml b/template/assemblies/player/video.phtml
index 9149a4f..cbbf06b 100644
--- a/template/assemblies/player/video.phtml
+++ b/template/assemblies/player/video.phtml
@@ -1,4 +1,8 @@
-
+