implement new subtitles L2S2 interface

6 files changed, 711 insertions, 177 deletions

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 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   height="32"
+   width="160"
+   y="0px"
+   x="0px"
+   xml:space="preserve"
+   version="1.1"
+   viewBox="0 0 160 32"
+   id="controls.fw-Page%201"><metadata
+     id="metadata4546"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs4341"><radialGradient
+       gradientUnits="userSpaceOnUse"
+       fy="9.4657277"
+       fx="74.373574"
+       gradientTransform="scale(1.183216,0.84515425)"
+       r="5.9160798"
+       cy="9.4657277"
+       cx="74.373574"
+       id="gradient1"><stop
+         id="stop4344"
+         offset="0%"
+         stop-opacity="1"
+         stop-color="#ffffff" /><stop
+         id="stop4346"
+         offset="100%"
+         stop-opacity="0.2"
+         stop-color="#f2f2f2" /></radialGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(1.0385816,0.96285167)"
+       y2="31.832523"
+       x2="69.32532"
+       y1="2.0771595"
+       x1="69.32532"
+       id="gradient2"><stop
+         id="stop4349"
+         offset="0%"
+         stop-opacity="1"
+         stop-color="#ffffff" /><stop
+         id="stop4351"
+         offset="100%"
+         stop-opacity="1"
+         stop-color="#c8c8c8" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       y2="13.9375"
+       x2="68.5"
+       y1="2"
+       x1="68.5"
+       id="gradient3"><stop
+         id="stop4354"
+         offset="0%"
+         stop-opacity="1"
+         stop-color="#ffffff" /><stop
+         id="stop4356"
+         offset="100%"
+         stop-opacity="1"
+         stop-color="#c8c8c8" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(1.0801234,0.9258201)"
+       y2="15.121728"
+       x2="51.845926"
+       y1="2.1602469"
+       x1="51.845926"
+       id="gradient4"><stop
+         id="stop4359"
+         offset="0%"
+         stop-opacity="1"
+         stop-color="#ffffff" /><stop
+         id="stop4361"
+         offset="100%"
+         stop-opacity="1"
+         stop-color="#c8c8c8" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(0.91287093,1.0954451)"
+       y2="12.8943"
+       x2="21.36118"
+       y1="2.7386145"
+       x1="21.36118"
+       id="gradient5"><stop
+         id="stop4364"
+         offset="0%"
+         stop-opacity="1"
+         stop-color="#ffffff" /><stop
+         id="stop4366"
+         offset="100%"
+         stop-opacity="1"
+         stop-color="#c8c8c8" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(0.57735027,1.7320508)"
+       y2="8.0829038"
+       x2="39.837169"
+       y1="1.1547005"
+       x1="39.837169"
+       id="gradient6"><stop
+         id="stop4369"
+         offset="0%"
+         stop-opacity="1"
+         stop-color="#ffffff" /><stop
+         id="stop4371"
+         offset="100%"
+         stop-opacity="1"
+         stop-color="#c8c8c8" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(0.91287093,1.0954451)"
+       y2="27.500235"
+       x2="21.36118"
+       y1="17.344549"
+       x1="21.36118"
+       id="gradient7"><stop
+         id="stop4374"
+         offset="0%"
+         stop-opacity="1"
+         stop-color="#ffffff" /><stop
+         id="stop4376"
+         offset="100%"
+         stop-opacity="1"
+         stop-color="#c8c8c8" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(0.57735027,1.7320508)"
+       y2="17.320508"
+       x2="39.837169"
+       y1="10.392305"
+       x1="39.837169"
+       id="gradient8"><stop
+         id="stop4379"
+         offset="0%"
+         stop-opacity="1"
+         stop-color="#ffffff" /><stop
+         id="stop4381"
+         offset="100%"
+         stop-opacity="1"
+         stop-color="#c8c8c8" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       y2="14"
+       x2="8.5"
+       y1="3"
+       x1="8.5"
+       id="gradient9"><stop
+         id="stop4384"
+         offset="0%"
+         stop-opacity="1"
+         stop-color="#ffffff" /><stop
+         id="stop4386"
+         offset="100%"
+         stop-opacity="1"
+         stop-color="#c8c8c8" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(0.5,2)"
+       y2="15"
+       x2="9"
+       y1="9"
+       x1="9"
+       id="gradient10"><stop
+         id="stop4389"
+         offset="0%"
+         stop-opacity="1"
+         stop-color="#ffffff" /><stop
+         id="stop4391"
+         offset="100%"
+         stop-opacity="1"
+         stop-color="#c8c8c8" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(0.5,2)"
+       y2="15"
+       x2="23"
+       y1="9"
+       x1="23"
+       id="gradient11"><stop
+         id="stop4394"
+         offset="0%"
+         stop-opacity="1"
+         stop-color="#ffffff" /><stop
+         id="stop4396"
+         offset="100%"
+         stop-opacity="1"
+         stop-color="#c8c8c8" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       y2="13.9375"
+       x2="36.5"
+       y1="2"
+       x1="36.5"
+       id="gradient12"><stop
+         id="stop4399"
+         offset="0%"
+         stop-opacity="1"
+         stop-color="#ffffff" /><stop
+         id="stop4401"
+         offset="100%"
+         stop-opacity="1"
+         stop-color="#c8c8c8" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       y2="13.9375"
+       x2="36"
+       y1="2.0000001"
+       x1="36"
+       id="gradient13"><stop
+         id="stop4404"
+         offset="0%"
+         stop-opacity="1"
+         stop-color="#ffffff" /><stop
+         id="stop4406"
+         offset="100%"
+         stop-opacity="1"
+         stop-color="#c8c8c8" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       y2="13.9375"
+       x2="43.5"
+       y1="2"
+       x1="43.5"
+       id="gradient14"><stop
+         id="stop4409"
+         offset="0%"
+         stop-opacity="1"
+         stop-color="#ffffff" /><stop
+         id="stop4411"
+         offset="100%"
+         stop-opacity="1"
+         stop-color="#c8c8c8" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       y2="13.9375"
+       x2="44"
+       y1="2.0000001"
+       x1="44"
+       id="gradient15"><stop
+         id="stop4414"
+         offset="0%"
+         stop-opacity="1"
+         stop-color="#ffffff" /><stop
+         id="stop4416"
+         offset="100%"
+         stop-opacity="1"
+         stop-color="#c8c8c8" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       y2="29.9375"
+       x2="44"
+       y1="18"
+       x1="44"
+       id="gradient16"><stop
+         id="stop4419"
+         offset="0%"
+         stop-opacity="1"
+         stop-color="#ffffff" /><stop
+         id="stop4421"
+         offset="100%"
+         stop-opacity="1"
+         stop-color="#c8c8c8" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       y2="27.55"
+       x2="36"
+       y1="18"
+       x1="36"
+       id="gradient17"><stop
+         id="stop4424"
+         offset="0%"
+         stop-opacity="1"
+         stop-color="#ffffff" /><stop
+         id="stop4426"
+         offset="100%"
+         stop-opacity="1"
+         stop-color="#c8c8c8" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       y2="30"
+       x2="36"
+       y1="18"
+       x1="36"
+       id="gradient18"><stop
+         id="stop4429"
+         offset="0%"
+         stop-opacity="1"
+         stop-color="#ffffff" /><stop
+         id="stop4431"
+         offset="100%"
+         stop-opacity="1"
+         stop-color="#c8c8c8" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       y2="30.4375"
+       x2="44"
+       y1="18"
+       x1="44"
+       id="gradient19"><stop
+         id="stop4434"
+         offset="0%"
+         stop-opacity="1"
+         stop-color="#ffffff" /><stop
+         id="stop4436"
+         offset="100%"
+         stop-opacity="1"
+         stop-color="#c8c8c8" /></linearGradient><linearGradient
+       y2="1"
+       x2="0.55000001"
+       y1="0"
+       x1="0.55000001"
+       id="gradient20"><stop
+         id="stop4439"
+         offset="0%"
+         stop-opacity="1"
+         stop-color="#ffffff" /><stop
+         id="stop4441"
+         offset="100%"
+         stop-opacity="1"
+         stop-color="#c8c8c8" /></linearGradient><linearGradient
+       y2="1"
+       x2="0.5"
+       y1="0"
+       x1="0.5"
+       id="gradient21"><stop
+         id="stop4444"
+         offset="0%"
+         stop-opacity="1"
+         stop-color="#ffffff" /><stop
+         id="stop4446"
+         offset="99.4444%"
+         stop-opacity="1"
+         stop-color="#c8c8c8" /></linearGradient><linearGradient
+       gradientUnits="userSpaceOnUse"
+       y2="1406.2863"
+       x2="1017.2181"
+       y1="-139.92293"
+       x1="1017.2181"
+       id="linearGradient4554"
+       xlink:href="#gradient21" /><linearGradient
+       y2="1285.141"
+       x2="980.77423"
+       y1="-285.6619"
+       x1="980.77423"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient4741"
+       xlink:href="#gradient20" /><linearGradient
+       gradientUnits="userSpaceOnUse"
+       y2="13"
+       x2="120.5"
+       y1="3"
+       x1="120.5"
+       id="linearGradient4743"
+       xlink:href="#gradient20" /><linearGradient
+       gradientUnits="userSpaceOnUse"
+       y2="14.5824"
+       x2="136"
+       y1="1.4176"
+       x1="136"
+       id="linearGradient4745"
+       xlink:href="#gradient21" /><linearGradient
+       gradientTransform="matrix(0.00837054,0,0,0.00837054,135,19.285709)"
+       y2="1285.141"
+       x2="980.77423"
+       y1="-285.6619"
+       x1="980.77423"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient4741-3"
+       xlink:href="#gradient20" /></defs><g
+     id="BG" /><g
+     id="controls"><path
+       style="fill:none;stroke:#ffffff;stroke-width:1"
+       d="m 98.5,7.5 11,0"
+       id="Line" /><path
+       style="fill:none;stroke:#ffffff;stroke-width:1"
+       d="m 98.5,3.5 11,0"
+       id="Line2" /><path
+       style="fill:none;stroke:#ffffff;stroke-width:1"
+       d="m 98.5,11.5 11,0"
+       id="Line3" /><path
+       style="fill:#ffffff"
+       d="m 108,11.5 c 0,-0.8284 0.4477,-1.5 1,-1.5 0.5523,0 1,0.6716 1,1.5 0,0.8284 -0.4477,1.5 -1,1.5 -0.5523,0 -1,-0.6716 -1,-1.5 z"
+       id="Ellipse" /><path
+       style="fill:#ffffff"
+       d="m 104,7.5 c 0,-0.8284 0.4477,-1.5 1,-1.5 0.5523,0 1,0.6716 1,1.5 0,0.8284 -0.4477,1.5 -1,1.5 -0.5523,0 -1,-0.6716 -1,-1.5 z"
+       id="Ellipse2" /><path
+       style="fill:#ffffff"
+       d="m 108,3.5 c 0,-0.8284 0.4477,-1.5 1,-1.5 0.5523,0 1,0.6716 1,1.5 0,0.8284 -0.4477,1.5 -1,1.5 -0.5523,0 -1,-0.6716 -1,-1.5 z"
+       id="Ellipse3" /></g><g
+     id="backlight"><g
+       id="off"><rect
+         style="fill:#333333;stroke:#ffffff;stroke-width:1"
+         id="rect4458"
+         height="6"
+         width="10"
+         y="21"
+         x="83" /></g><g
+       id="on"><path
+         style="fill:url(#gradient1)"
+         d="m 81,8 c 0,-2.7615 3.134,-5 7,-5 3.866,0 7,2.2385 7,5 0,2.7615 -3.134,5 -7,5 -3.866,0 -7,-2.2385 -7,-5 z"
+         id="Ellipse4" /><rect
+         style="fill:#333333;stroke:#ffffff;stroke-width:1"
+         id="rect4462"
+         height="6"
+         width="10"
+         y="5"
+         x="83" /></g></g><g
+     id="loop"><g
+       id="on2"><path
+         style="fill:url(#gradient2)"
+         id="path4466"
+         d="M 73.795,4.205 C 75.2155,4.8785 76.2,6.3234 76.2,8 c 0,2.3196 -1.8804,4.2 -4.2,4.2 -2.3196,0 -4.2,-1.8804 -4.2,-4.2 0,-1.6766 0.9845,-3.1215 2.405,-3.795 l -1.33,-1.33 C 67.1501,3.9289 66,5.8306 66,8 c 0,3.3138 2.6862,6 6,6 3.3138,0 6,-2.6862 6,-6 0,-2.1694 -1.1501,-4.0711 -2.875,-5.125 l -1.33,1.33 z" /><path
+         style="fill:url(#gradient3)"
+         id="path4468"
+         d="m 71,2 -5,0 5,5 0,-5 z" /></g><g
+       id="off2"><path
+         style="fill:#a8a8b7"
+         id="path4471"
+         d="m 73.795,20.205 c 1.4205,0.6735 2.405,2.1184 2.405,3.795 0,2.3196 -1.8804,4.2 -4.2,4.2 -2.3196,0 -4.2,-1.8804 -4.2,-4.2 0,-1.6766 0.9845,-3.1215 2.405,-3.795 l -1.33,-1.33 C 67.1501,19.9289 66,21.8306 66,24 c 0,3.3138 2.6862,6 6,6 3.3138,0 6,-2.6862 6,-6 0,-2.1694 -1.1501,-4.0711 -2.875,-5.125 l -1.33,1.33 z" /><path
+         style="fill:#a8a8b7"
+         id="path4473"
+         d="m 71,18 -5,0 5,5 0,-5 z" /></g></g><g
+     id="cc"><rect
+       style="visibility:hidden;fill:none;stroke:#b0b0b0;stroke-width:1"
+       id="rect4476"
+       height="12"
+       width="14"
+       y="2"
+       x="49"
+       visibility="hidden" /><text
+       id="text4478"
+       style="color:#ffffff;font-size:10px;font-family:Arial;text-align:center;visibility:hidden;fill:#ffffff"
+       width="14"
+       y="17"
+       x="49"
+       visibility="hidden"><tspan
+         id="tspan4480"><![CDATA[cc]]></tspan></text>
+<path
+       style="fill:none;stroke:#ffffff;stroke-width:1"
+       id="path4482"
+       d="m 55,7 c -4.7187,-3.2187 -4.937,5.9405 0,3" /><path
+       style="fill:none;stroke:#ffffff;stroke-width:1"
+       id="path4484"
+       d="m 60,7 c -4.7187,-3.2187 -4.937,5.9405 0,3" /><path
+       style="fill:url(#gradient4)"
+       id="path4486"
+       d="M 50,3 62,3 62,13 50,13 50,3 Z M 49,2 49,14 63,14 63,2 49,2 Z" /><rect
+       style="fill:none"
+       id="rect4488"
+       height="12"
+       width="14"
+       y="2"
+       x="49" /></g><g
+     id="volume"><g
+       id="no%20sound"><rect
+         style="fill:url(#gradient5)"
+         id="rect4492"
+         height="6"
+         width="5"
+         y="5"
+         x="17" /><path
+         style="fill:url(#gradient6)"
+         id="path4494"
+         d="M 21,5 25,2 25,14 21,11.0625 21,5 Z" /></g><g
+       id="sound%20bars"><rect
+         style="fill:url(#gradient7)"
+         id="rect4497"
+         height="6"
+         width="5"
+         y="21"
+         x="17" /><path
+         style="fill:url(#gradient8)"
+         id="path4499"
+         d="M 21,21 25,18 25,30 21,27.0625 21,21 Z" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:1"
+         id="path4501"
+         d="m 27,18 c 0,0 3.0625,-0.625 3,6 -0.0625,6.625 -3,6 -3,6" /><path
+         style="fill:none;stroke:#ffffff;stroke-width:1"
+         id="path4503"
+         d="m 26,21.0079 c 0,0 2.041,-0.3117 1.9994,2.9921 C 27.9577,27.3038 26,26.9921 26,26.9921" /></g></g><g
+     id="play/pause"><g
+       id="play"><path
+         style="fill:url(#gradient9)"
+         d="M 14,8.5 3,14 3,3 14,8.5 Z"
+         id="Polygon" /></g><g
+       id="pause"><rect
+         style="fill:url(#gradient10)"
+         id="rect4509"
+         height="12"
+         width="3"
+         y="18"
+         x="3" /><rect
+         style="fill:url(#gradient11)"
+         id="rect4511"
+         height="12"
+         width="3"
+         y="18"
+         x="10" /></g></g><g
+     id="fullscreen"><g
+       id="enter%201"><path
+         style="fill:url(#gradient12)"
+         id="path4515"
+         d="m 34,2 5,0 -5,5 0,-5 z" /><path
+         style="fill:url(#gradient13)"
+         id="path4517"
+         d="m 34,14 5,0 -5,-5 0,5 z" /><path
+         style="fill:url(#gradient14)"
+         id="path4519"
+         d="m 46,2 -5,0 5,5 0,-5 z" /><path
+         style="fill:url(#gradient15)"
+         id="path4521"
+         d="m 46,14 -5,0 5,-5 0,5 z" /></g><g
+       id="exit"><path
+         style="fill:url(#gradient16)"
+         id="path4524"
+         d="m 42,22 4,0 -4,-4 0,4 z" /><path
+         style="fill:url(#gradient17)"
+         id="path4526"
+         d="m 38,22 0,-4 -4,4 4,0 z" /><path
+         style="fill:url(#gradient18)"
+         id="path4528"
+         d="m 38,26 -4,0 4,4 0,-4 z" /><path
+         style="fill:url(#gradient19)"
+         id="path4530"
+         d="m 42,26 0,4 4,-4 -4,0 z" /></g></g><g
+     id="stop"><rect
+       style="fill:url(#linearGradient4743)"
+       id="rect4533"
+       height="10"
+       width="10"
+       y="3"
+       x="115" /></g><g
+     id="chooser"><path
+       style="fill:url(#linearGradient4745)"
+       id="path4536"
+       d="m 135.2346,6.1522 c 1.0205,-0.4227 2.1905,0.0619 2.6132,1.0824 0.4226,1.0205 -0.0619,2.1904 -1.0824,2.6132 -1.0205,0.4227 -2.1905,-0.0619 -2.6132,-1.0824 -0.4227,-1.0205 0.0619,-2.1905 1.0824,-2.6132 z M 133.2735,1.4176 136,4.0054 l 2.7265,-2.5878 0.0981,3.7578 3.7578,0.0981 -2.5878,2.7265 2.5878,2.7265 -3.7578,0.0981 -0.0981,3.7578 -2.7265,-2.5878 -2.7265,2.5878 -0.0981,-3.7578 -3.7578,-0.0981 2.5878,-2.7265 -2.5878,-2.7265 3.7578,-0.0981 0.0981,-3.7578 z" /></g><g
+     transform="matrix(0.00732422,0,0,0.00732422,98,19.687498)"
+     id="closed-caption"><path
+       style="fill:url(#linearGradient4554);fill-opacity:1"
+       id="path4539"
+       d="m 785,528 207,0 Q 978,370 893.5,279.5 809,189 679,189 517,189 424.5,305 332,421 332,621 q 0,194 93,311.5 93,117.5 233,117.5 148,0 232,-87 84,-87 97,-247 l -203,0 q -5,64 -35.5,99 Q 718,850 667,850 610,850 578.5,789.5 547,729 547,612 q 0,-48 5,-84 5,-36 18,-69.5 13,-33.5 40,-51.5 27,-18 66,-18 95,0 109,139 z m 712,0 206,0 Q 1689,370 1605,279.5 1521,189 1391,189 q -162,0 -254.5,116 -92.5,116 -92.5,316 0,194 93,311.5 93,117.5 233,117.5 148,0 232,-87 84,-87 97,-247 l -204,0 q -4,64 -35,99 -31,35 -81,35 -57,0 -88.5,-60.5 Q 1259,729 1259,612 q 0,-48 5,-84 5,-36 18,-69.5 13,-33.5 39.5,-51.5 26.5,-18 65.5,-18 49,0 76.5,38 27.5,38 33.5,101 z m 359,119 q 0,207 -15.5,307 -15.5,100 -60.5,161 -6,8 -13.5,14 -7.5,6 -21.5,15 -14,9 -16,11 -86,63 -697,63 -625,0 -710,-63 -5,-4 -17.5,-11.5 -12.5,-7.5 -21,-14 Q 275,1123 269,1115 224,1055 209,955.5 194,856 194,647 194,439 209,339.5 224,240 269,179 q 6,-8 15,-15 9,-7 20.5,-14 Q 316,143 322,138 366,105 561.5,89 757,73 1032,73 q 610,0 697,65 5,4 17,11 12,7 20.5,14 8.5,7 13.5,16 46,60 61,159 15,99 15,309 z m 192,761 0,-1536 -2048,0 0,1536 2048,0 z" /></g><g
+     transform="matrix(0.00837054,0,0,0.00837054,116,19.285709)"
+     id="commenting-1"><path
+       style="fill:url(#linearGradient4741);fill-opacity:1"
+       id="path4542-0"
+       d="M 640,640 Q 640,587 602.5,549.5 565,512 512,512 459,512 421.5,549.5 384,587 384,640 q 0,53 37.5,90.5 Q 459,768 512,768 565,768 602.5,730.5 640,693 640,640 Z m 384,0 q 0,-53 -37.5,-90.5 Q 949,512 896,512 843,512 805.5,549.5 768,587 768,640 q 0,53 37.5,90.5 Q 843,768 896,768 949,768 986.5,730.5 1024,693 1024,640 Z m 384,0 q 0,-53 -37.5,-90.5 Q 1333,512 1280,512 q -53,0 -90.5,37.5 -37.5,37.5 -37.5,90.5 0,53 37.5,90.5 37.5,37.5 90.5,37.5 53,0 90.5,-37.5 Q 1408,693 1408,640 Z M 896,1152 Q 692,1152 514.5,1082.5 337,1013 232.5,895 128,777 128,640 128,528 199.5,426.5 271,325 401,251 l 87,-50 -27,-96 Q 437,14 391,-67 543,-4 666,104 l 43,38 57,-6 q 69,-8 130,-8 204,0 381.5,69.5 177.5,69.5 282,187.5 104.5,118 104.5,255 0,137 -104.5,255 -104.5,118 -282,187.5 Q 1100,1152 896,1152 Z M 1792,640 Q 1792,466 1672,318.5 1552,171 1346,85.5 1140,0 896,0 826,0 751,8 553,-167 291,-234 242,-248 177,-256 l -5,0 q -15,0 -27,10.5 -12,10.5 -16,27.5 l 0,1 q -3,4 -0.5,12 2.5,8 2,10 -0.5,2 4.5,9.5 l 6,9 q 0,0 7,8.5 7,8.5 8,9 7,8 31,34.5 24,26.5 34.5,38 10.5,11.5 31,39.5 20.5,28 32.5,51 12,23 27,59 15,36 26,76 Q 181,228 90.5,359 0,490 0,640 0,770 71,888.5 142,1007 262,1093 q 120,86 286,136.5 166,50.5 348,50.5 182,0 348,-50.5 166,-50.5 286,-136.5 120,-86 191,-204.5 71,-118.5 71,-248.5 z" /></g><g
+     transform="matrix(0.00837054,0,0,0.00837054,135,19.285709)"
+     id="commenting-1-2"><path
+       id="path4542-0-4"
+       transform="matrix(119.46661,0,0,119.46661,-16127.992,-2303.9982)"
+       d="M 136.43945 17.142578 C 136.35575 17.142578 136.27985 17.171875 136.21289 17.230469 C 136.14593 17.289063 136.1024 17.366071 136.08008 17.460938 L 136.08008 17.46875 C 136.06334 17.491071 136.06222 17.52567 136.07617 17.570312 C 136.09012 17.614955 136.09459 17.643136 136.0918 17.654297 C 136.08901 17.665458 136.10296 17.690569 136.13086 17.732422 L 136.17969 17.808594 L 136.23828 17.878906 C 136.27734 17.926339 136.30106 17.952288 136.30664 17.955078 C 136.3457 17.999721 136.43052 18.096261 136.56445 18.244141 C 136.69838 18.39202 136.79492 18.498326 136.85352 18.5625 C 136.91211 18.626674 136.99888 18.736328 137.11328 18.892578 C 137.22768 19.048828 137.3178 19.190011 137.38477 19.318359 C 137.45173 19.446708 137.52762 19.611607 137.61133 19.8125 C 137.69503 20.013393 137.76869 20.226004 137.83008 20.449219 C 136.95396 20.945871 136.26284 21.559988 135.75781 22.291016 C 135.25279 23.022043 135 23.805524 135 24.642578 C 135 25.368025 135.19754 26.061384 135.59375 26.722656 C 135.98996 27.383929 136.52372 27.955636 137.19336 28.435547 C 137.863 28.915458 138.66155 29.296317 139.58789 29.578125 C 140.51423 29.859933 141.48437 30 142.5 30 C 143.51563 30 144.48577 29.859933 145.41211 29.578125 C 146.33845 29.296317 147.137 28.915458 147.80664 28.435547 C 148.47628 27.955636 149.01004 27.383929 149.40625 26.722656 C 149.80246 26.061384 150 25.368025 150 24.642578 C 150 23.671595 149.66574 22.774275 148.99609 21.951172 C 148.5982 21.4621 148.10443 21.042704 147.53711 20.675781 L 146.75195 21.460938 C 147.25893 21.761806 147.69914 22.106335 148.05469 22.507812 C 148.63784 23.166295 148.92773 23.878069 148.92773 24.642578 C 148.92773 25.407087 148.63784 26.118861 148.05469 26.777344 C 147.47154 27.435826 146.68387 27.959821 145.69336 28.347656 C 144.70285 28.735491 143.63839 28.927734 142.5 28.927734 C 141.36161 28.927734 140.29715 28.735491 139.30664 28.347656 C 138.31613 27.959821 137.52846 27.435826 136.94531 26.777344 C 136.36216 26.118861 136.07227 25.407087 136.07227 24.642578 C 136.07227 24.017578 136.27093 23.421875 136.66992 22.855469 C 137.06892 22.289062 137.63198 21.799665 138.35742 21.386719 L 139.08398 20.96875 L 138.85938 20.164062 C 138.72545 19.65625 138.53013 19.176619 138.27344 18.724609 C 139.12165 19.076172 139.88783 19.553571 140.57422 20.15625 L 140.93555 20.474609 L 141.41211 20.423828 C 141.79715 20.379185 142.1596 20.357422 142.5 20.357422 C 143.22279 20.357422 143.91299 20.443263 144.57617 20.599609 L 145.46094 19.714844 C 144.53658 19.43079 143.5506 19.285156 142.5 19.285156 C 142.10937 19.285156 141.70564 19.308873 141.28711 19.353516 C 140.1822 18.376953 138.8976 17.700056 137.43555 17.326172 C 137.16211 17.248047 136.84515 17.187221 136.48242 17.142578 L 136.43945 17.142578 z M 139.28516 23.572266 C 138.9894 23.572266 138.73661 23.675502 138.52734 23.884766 C 138.31808 24.094029 138.21484 24.346819 138.21484 24.642578 C 138.21484 24.938337 138.31808 25.191127 138.52734 25.400391 C 138.73661 25.609654 138.9894 25.714844 139.28516 25.714844 C 139.58092 25.714844 139.83371 25.609654 140.04297 25.400391 C 140.25223 25.191127 140.35742 24.938337 140.35742 24.642578 C 140.35742 24.346819 140.25223 24.094029 140.04297 23.884766 C 139.83371 23.675502 139.58092 23.572266 139.28516 23.572266 z M 142.5 23.572266 C 142.20424 23.572266 141.95145 23.675502 141.74219 23.884766 C 141.53292 24.094029 141.42773 24.346819 141.42773 24.642578 C 141.42773 24.938337 141.53292 25.191127 141.74219 25.400391 C 141.95145 25.609654 142.20424 25.714844 142.5 25.714844 C 142.79576 25.714844 143.04855 25.609654 143.25781 25.400391 C 143.46708 25.191127 143.57227 24.938337 143.57227 24.642578 C 143.57227 24.346819 143.46708 24.094029 143.25781 23.884766 C 143.04855 23.675502 142.79576 23.572266 142.5 23.572266 z M 145.71484 23.572266 C 145.41908 23.572266 145.16629 23.675502 144.95703 23.884766 C 144.74777 24.094029 144.64258 24.346819 144.64258 24.642578 C 144.64258 24.938337 144.74777 25.191127 144.95703 25.400391 C 145.16629 25.609654 145.41908 25.714844 145.71484 25.714844 C 146.0106 25.714844 146.26339 25.609654 146.47266 25.400391 C 146.68192 25.191127 146.78516 24.938337 146.78516 24.642578 C 146.78516 24.346819 146.68192 24.094029 146.47266 23.884766 C 146.26339 23.675502 146.0106 23.572266 145.71484 23.572266 z "
+       style="fill:url(#linearGradient4741-3);fill-opacity:1" /><g
+       transform="matrix(0.68889122,-0.72486474,0.72486474,0.68889122,546.54751,1586.6879)"
+       id="g5292"><path
+         transform="matrix(84.475647,84.475647,-84.475647,84.475647,-8871.9881,-14508.337)"
+         id="rect5260"
+         d="m 145.98928,19.80101 -3.19631,3.152115 -0.008,0.0059 c -0.16799,0.133409 -0.26582,0.336262 -0.26563,0.550782 -3.3e-4,0.388463 0.31467,0.703456 0.70313,0.703125 0.1717,-0.0011 0.33706,-0.065 0.46484,-0.179688 0.0258,-0.02167 0.0499,-0.04517 0.0723,-0.07031 l 0.006,-0.0078 3.20999,-3.165787 -0.98633,-0.988281 z"
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#dbdbde;fill-opacity:0.97058835;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" /><path
+         d="m 2275.4479,-391.72825 -422.378,-422.3783 0,844.756503 422.378,-422.378203 z"
+         id="path4473-0"
+         style="fill:#dbdbde;fill-opacity:0.97058835" /></g></g></svg>
\ 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 = $([
+		'<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') {