diff options
-rw-r--r-- | assets/css/_mejs_hacks.less | 30 | ||||
-rw-r--r-- | assets/css/_structure.less | 1 | ||||
-rw-r--r-- | assets/css/_subtitles.less | 36 | ||||
-rw-r--r-- | assets/img/subtitles-controls.svg | 550 | ||||
-rw-r--r-- | assets/js/lustige-subtitles.js | 117 | ||||
-rw-r--r-- | assets/js/lustiges-script.js | 154 | ||||
-rw-r--r-- | index.php | 2 | ||||
-rw-r--r-- | model/Room.php | 10 | ||||
-rw-r--r-- | model/Subtitles.php | 26 | ||||
-rw-r--r-- | template/assemblies/player/video.phtml | 6 | ||||
-rw-r--r-- | template/page.phtml | 14 |
11 files changed, 766 insertions, 180 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') { @@ -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 @@ +<?php + +class Subtitles extends ModelBase +{ + public function isEnabled() { + return $this->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 @@ -<div style="max-width: <?=h($stream->getVideoWidth())?>px; max-height: <?=h($stream->getVideoHeight())?>px;" class="video-wrap"> +<div + style="max-width: <?=h($stream->getVideoWidth())?>px; max-height: <?=h($stream->getVideoHeight())?>px;" + class="video-wrap <? if($room->hasSubtitles()): ?>has-subtitles<? endif ?>" + data-subtitles-room-id="<?=h($room->getSubtitlesRoomId())?>" +> <video <? if(!isset($autoplay) || $autoplay == true): ?> autoplay="autoplay" diff --git a/template/page.phtml b/template/page.phtml index ae797c0..a358a27 100644 --- a/template/page.phtml +++ b/template/page.phtml @@ -42,6 +42,10 @@ <script type="text/javascript" src="<?=h($assets)?>mejs/mediaelement-and-player.min.js"></script> <script type="text/javascript" src="<?=h($assets)?>js/lustiges-script.js"></script> + + <? if(isset($subtitles) && $subtitles->isEnabled()): ?> + <script type="text/javascript" src="<?=h($assets)?>js/lustige-subtitles.js"></script> + <? endif ?> </head> <body class="<?=h(is_numeric($page[0]) ? 'e'.$page : $page)?>"> <? if(!@$naked): ?> @@ -54,10 +58,16 @@ <? include("$assemblies/footer.phtml") ?> <? endif ?> - <? if(isset($schedule)): ?> - <span class="js-settings" + <? if(isset($schedule) && $schedule->isEnabled()): ?> + <span class="js-schedule-settings" data-scheduleoffset="<?=h($schedule->getSimulationOffset())?>" ></span> <? endif ?> + <? if(isset($subtitles) && $subtitles->isEnabled()): ?> + <span class="js-subtitles-settings" + data-primus-url="<?=h($subtitles->getPrimusURL())?>" + data-frontend-url="<?=h($subtitles->getFrontendURL())?>" + ></span> + <? endif ?> </body> </html> |