Audio & Video-Player Embeding

12 files changed, 155 insertions, 4 deletions

diff --git a/assets/css/_embed.less b/assets/css/_embed.less
new file mode 100644
index 0000000..76c0ecd
--- /dev/null
+++ b/assets/css/_embed.less
@@ -0,0 +1,8 @@
+body.embed {
+	padding: 0;
+	overflow: hidden;
+}
+
+.embed-form input[type=text] {
+	cursor: pointer !important;
+}
diff --git a/assets/css/_structure.less b/assets/css/_structure.less
index 5d8957c..c9b1e4b 100644
--- a/assets/css/_structure.less
+++ b/assets/css/_structure.less
@@ -83,3 +83,4 @@ body {
 @import "_relive.less";
 @import "_multiview.less";
 @import "_closed.less";
+@import "_embed.less";
diff --git a/assets/js/lustiges-script.js b/assets/js/lustiges-script.js
index 417b234..09d4ef1 100644
--- a/assets/js/lustiges-script.js
+++ b/assets/js/lustiges-script.js
@@ -151,12 +151,12 @@ $(function() {
 		}
 	})(mejs.i18n.locale.strings);
 
-	$('body.room video').mediaelementplayer({
+	$('body.room video, body.embed video').mediaelementplayer({
 		pluginPath: 'assets/mejs/',
 		features: ['playpause', 'volume', 'fullscreen'],
 		enableAutosize: true
 	});
-	$('body.room audio').mediaelementplayer({
+	$('body.room audio, body.embed audio').mediaelementplayer({
 		features: ['playpause', 'volume', 'current']
 	});
 
@@ -522,3 +522,21 @@ $(function() {
 				renderFrame();
 			});
 });
+
+// embed-form
+$(function() {
+	$('.embed-form #size').on('click', function() {
+		var
+			$size = $(this),
+			selected = $size.val().split(','),
+			$codefield = $('#embed-code')
+			$iframe = $( $codefield.val() ),
+			$iframe.attr({width: selected[0], height: selected[1]});
+
+		$codefield.val( $iframe.prop('outerHTML') );
+	}).trigger('click');
+
+	$('.embed-form').on('click', 'input[type=text]', function() {
+		$(this).select();
+	});
+});
diff --git a/config.php b/config.php
index 2488e11..d9ff52d 100644
--- a/config.php
+++ b/config.php
@@ -273,6 +273,20 @@ $GLOBALS['CONFIG']['ROOMS'] = array(
 		'SUBTITLES' => true,
 
 		/**
+		 * Embed-Form aktivieren (boolean)
+		 *
+		 * Ist dieses Feld auf true gesetzt, wird ein Embed-Tab unter dem Video
+		 * angezeigt. Darüber kann der Player als iframe eingebunden werden.
+		 *
+		 * Wenn diese Zeile auskommentiert oder auf false gesetzt ist,
+		 * wird kein Embed-Tab angeboten und die URL zum Einbetten existiert nicht.
+		 *
+		 * Ebenso können alle Embedding-Funktionialitäten durch auskommentieren
+		 * des globalen $GLOBALS['CONFIG']['EMBED']-Blocks deaktiviert werden
+		 */
+		'EMBED' => true,
+
+		/**
 		 * IRC-Link aktivieren (boolean)
 		 *
 		 * Solange Twitter oder IRC aktiviert ist, wird ein "Chat"-Tab mit den
@@ -347,6 +361,7 @@ $GLOBALS['CONFIG']['ROOMS'] = array(
 		'SCHEDULE_NAME' => 'Saal 2',
 		'FEEDBACK' => true,
 		'SUBTITLES' => true,
+		'EMBED' => true,
 		'IRC' => true,
 		'IRC_CONFIG' => array(
 			'DISPLAY' => '#31C3-hall-2 @ hackint',
@@ -376,6 +391,7 @@ $GLOBALS['CONFIG']['ROOMS'] = array(
 		'SCHEDULE_NAME' => 'Saal G',
 		'FEEDBACK' => true,
 		'SUBTITLES' => true,
+		'EMBED' => true,
 		'IRC' => true,
 		'IRC_CONFIG' => array(
 			'DISPLAY' => '#31C3-hall-g @ hackint',
@@ -405,6 +421,7 @@ $GLOBALS['CONFIG']['ROOMS'] = array(
 		'SCHEDULE_NAME' => 'Saal 6',
 		'FEEDBACK' => true,
 		'SUBTITLES' => true,
+		'EMBED' => true,
 		'IRC' => true,
 		'IRC_CONFIG' => array(
 			'DISPLAY' => '#31C3-hall-6 @ hackint',
@@ -421,10 +438,12 @@ $GLOBALS['CONFIG']['ROOMS'] = array(
 	'lounge' => array(
 		'DISPLAY' => 'Lounge',
 		'MUSIC' => true,
+		'EMBED' => true,
 	),
 	'ambient' => array(
 		'DISPLAY' => 'Ambient',
 		'MUSIC' => true,
+		'EMBED' => true,
 	),
 
 
@@ -440,6 +459,7 @@ $GLOBALS['CONFIG']['ROOMS'] = array(
 		'SCHEDULE' => true,
 		'FEEDBACK' => true,
 		'SUBTITLES' => false,
+		'EMBED' => true,
 		'IRC' => false,
 		'TWITTER' => false,
 	),
@@ -522,6 +542,14 @@ $GLOBALS['CONFIG']['FEEDBACK'] = array(
 );
 
 /**
+ * Globaler Schalter für die Embedding-Funktionalitäten
+ *
+ * Wird diese Zeile auskommentiert oder auf False gesetzt, werden alle
+ * Embedding-Funktionen deaktiviert.
+ */
+$GLOBALS['CONFIG']['EMBED'] = true;
+
+/**
  * Konfiguration des L2S2-Systems
  * https://github.com/c3subtitles/L2S2
  *
diff --git a/index.php b/index.php
index 673183c..cfe0340 100644
--- a/index.php
+++ b/index.php
@@ -132,6 +132,16 @@ try {
 		require('view/room.php');
 	}
 
+	else if(preg_match('@^embed/([^/]+)/(hd|sd|audio|slides)/(native|translated|stereo)$@', $route, $m))
+	{
+		$_GET = array(
+			'room' => $m[1],
+			'selection' => $m[2],
+			'language' => $m[3],
+		);
+		require('view/embed.php');
+	}
+
 	else
 	{
 		throw new NotFoundException();
diff --git a/model/Room.php b/model/Room.php
index 33beb9f..b3804f1 100644
--- a/model/Room.php
+++ b/model/Room.php
@@ -128,6 +128,11 @@ class Room extends ModelBase
 	}
 
 
+	public function hasEmbed() {
+		return $this->get('ROOMS.'.$this->getSlug().'.EMBED') && $this->get('EMBED');
+	}
+
+
 	public function hasSdVideo() {
 		return $this->get('ROOMS.'.$this->getSlug().'.SD_VIDEO');
 	}
diff --git a/model/Stream.php b/model/Stream.php
index 0d96a02..fe333ce 100644
--- a/model/Stream.php
+++ b/model/Stream.php
@@ -99,6 +99,16 @@ class Stream
 		return $display;
 	}
 
+	public function getEmbedUrl()
+	{
+		return
+			forceslash(baseurl()).
+			'embed/'.
+			rawurlencode($this->getRoom()->getSlug()).'/'.
+			rawurlencode($this->getSelection()).'/'.
+			rawurlencode($this->getLanguage()).'/';
+	}
+
 	public function getVideoUrl($proto)
 	{
 		switch($proto)
diff --git a/template/assemblies/embed-form.phtml b/template/assemblies/embed-form.phtml
new file mode 100644
index 0000000..7e545f8
--- /dev/null
+++ b/template/assemblies/embed-form.phtml
@@ -0,0 +1,37 @@
+<div class="embed-form">
+	<div class="col-xs-12">
+		<h3>Embedding <?=h($stream->getDisplay())?></h3>
+	</div>
+
+	<div class="col-sm-3 embed-form">
+
+		<div class="form-group">
+			<label for="size">Select Size</label>
+			<select id="size" class="form-control">
+				<option value="512,288">512×288</option>
+				<option value="800,450">800×450</option>
+				<option <? if($stream->getSelection() == 'sd'): ?>selected<? endif ?> value="1024,576">1024×576</option>
+
+				<? if($stream->getSelection() == 'hd'): ?>
+					<option value="1280,720">1280×720</option>
+					<option selected value="1920,1080">1920×1080</option>
+				<? endif ?>
+			</select>
+		</div>
+
+	</div>
+	<div class="col-sm-9 embed-form">
+
+		<div class="form-group">
+			<label for="embed-code">Embed Code</label>
+			<input type="text" id="embed-code" class="form-control" readonly value="<?=h(trim('
+				<iframe src="'.h($stream->getEmbedUrl()).'" width="1024" height="576" frameborder="none" allowfullscreen="allowfullscreen" seamless="seamless" scrolling="no"></iframe>
+			'))?>">
+		</div>
+
+		<div class="form-group">
+			<label for="url">Embed URL:</label>
+			<input type="text" id="url" class="form-control" readonly value="<?=h($stream->getEmbedUrl())?>">
+		</div>
+	</div>
+</div>
diff --git a/template/embed.phtml b/template/embed.phtml
new file mode 100644
index 0000000..dd8629a
--- /dev/null
+++ b/template/embed.phtml
@@ -0,0 +1 @@
+<? require('assemblies/player/'.$stream->getPlayerType().'.phtml') ?>
diff --git a/template/page.phtml b/template/page.phtml
index cad6997..c67392a 100644
--- a/template/page.phtml
+++ b/template/page.phtml
@@ -44,9 +44,15 @@
 		<script type="text/javascript" src="assets/js/lustiges-script.js"></script>
 	</head>
 	<body class="<?=h(is_numeric($page[0]) ? 'e'.$page : $page)?>">
-		<? include("$assemblies/header.phtml") ?>
+		<? if(!@$naked): ?>
+			<? include("$assemblies/header.phtml") ?>
+		<? endif ?>
+
 		<? include("$page.phtml") ?>
-		<? include("$assemblies/footer.phtml") ?>
+
+		<? if(!@$naked): ?>
+			<? include("$assemblies/footer.phtml") ?>
+		<? endif ?>
 
 		<span class="js-settings"
 			data-scheduleoffset="<?=h($schedule->getSimulationOffset())?>"
diff --git a/template/room.phtml b/template/room.phtml
index 32b7d6c..8ce8d81 100644
--- a/template/room.phtml
+++ b/template/room.phtml
@@ -42,6 +42,11 @@
 				<a href="#feedback" role="tab" data-toggle="tab">Feedback</a>
 			</li>
 		<? endif ?>
+		<? if($room->hasEmbed()): ?>
+			<li>
+				<a href="#embed" role="tab" data-toggle="tab">Embed</a>
+			</li>
+		<? endif ?>
 	</ul>
 
 	<div class="functions-wrap tab-content">
@@ -63,5 +68,10 @@
 				<? require("$assemblies/feedback.phtml") ?>
 			</div>
 		<? endif ?>
+		<? if($room->hasEmbed()): ?>
+			<div role="tabpanel" class="tab-pane" id="embed">
+				<? require("$assemblies/embed-form.phtml") ?>
+			</div>
+		<? endif ?>
 	</div>
 </div>
diff --git a/view/embed.php b/view/embed.php
new file mode 100644
index 0000000..b5bc49b
--- /dev/null
+++ b/view/embed.php
@@ -0,0 +1,17 @@
+<?php
+
+$room = new Room($_GET['room']);
+if(!$room->hasEmbed())
+	throw new NotFoundException('Embedding is not enabled in this room');
+
+$stream = $room->selectStream(
+	$_GET['selection'], $_GET['language']);
+
+echo $tpl->render(array(
+	'page' => 'embed',
+	'naked' => true, // no header/footer
+
+	'title' => $stream->getDisplay(),
+	'room' => $room,
+	'stream' => $stream,
+));