irc in a tab

assets/css/lustige-styles.css

@@ -5427,31 +5427,34 @@ h1 + .news-item {
     color: white;
     background-color: #333333; }
 
+.player-wrap {
+  background-color: #333333; }
+
 .tab-content {
   background-color: #333333; }
   .tab-content .mejs-container {
     margin: auto; }
-  .tab-content .switcher {
+  .tab-content #switcher {
     padding: 16px; }
-    .tab-content .switcher h3 {
+    .tab-content #switcher h3 {
       color: #777777; }
-      .tab-content .switcher h3:first-child {
+      .tab-content #switcher h3:first-child {
         margin-top: 0; }
-    .tab-content .switcher ul {
+    .tab-content #switcher ul {
       list-style-type: none;
       padding: 0; }
-      .tab-content .switcher ul li {
+      .tab-content #switcher ul li {
         min-width: 49%;
         display: inline-block; }
-      .tab-content .switcher ul a {
+      .tab-content #switcher ul a {
         margin: 0 5px; }
-    .tab-content .switcher .filetype {
+    .tab-content #switcher .filetype {
       text-transform: uppercase;
       margin-right: 10px;
       color: #000;
       background-color: #fff;
       min-width: 4em; }
-    .tab-content .switcher a:hover, .tab-content .switcher a:focus, .tab-content .switcher a:active {
+    .tab-content #switcher a:hover, .tab-content #switcher a:focus, .tab-content #switcher a:active {
       text-decoration: none; }
 
 ul.metadata {
@@ -5548,10 +5551,27 @@ a.inverted {
     .rooms .room-group li:nth-child(2n+1) {
       margin-right: 1%; }
 
-.room.lq .tab-content {
-  padding-top: 32px; }
-.room.audio .tab-content {
-  padding-top: 32px; }
+.room.lq .player-wrap {
+  padding: 32px 0; }
+.room.audio .player-wrap {
+  padding: 64px 32px; }
+.room .click-to-irc {
+  background-image: url(../img/irc-soft.png);
+  height: 376px;
+  line-height: 376px;
+  border: 2px solid #333333;
+  text-align: center;
+  cursor: pointer; }
+  .room .click-to-irc span {
+    font-size: 60px; }
+  .room .click-to-irc iframe {
+    display: none; }
+  .room .click-to-irc.active {
+    background-image: none; }
+    .room .click-to-irc.active span {
+      display: none; }
+    .room .click-to-irc.active iframe {
+      display: block; }
 
 /* extra large mejs controls on tablet & phone */
 @media only screen and (max-device-width: 768px) {

assets/css/src/lustige-styles.scss

@@ -168,6 +168,10 @@ h1 + .news-item {
   }
 }
 
+.player-wrap {
+  background-color: $gray-dark;
+}
+
 .tab-content {
   background-color: $gray-dark;
 
@@ -175,7 +179,7 @@ h1 + .news-item {
     margin: auto;
   }
 
-  .switcher {
+  #switcher {
     padding: $padding-large-horizontal;
 
     h3 {
@@ -335,12 +339,32 @@ a.inverted {
 
 .room {
 
-  &.lq .tab-content {
-    padding-top: 32px;
+  &.lq .player-wrap {
+    padding: 32px 0;
   }
 
-  &.audio .tab-content {
-    padding-top: 32px;
+  &.audio .player-wrap {
+    padding: 64px 32px;
+  }
+
+  .click-to-irc {
+    background-image: url(../img/irc-soft.png);
+    height: 376px;
+    line-height: 376px;
+    border: 2px solid $gray-dark;
+
+    text-align: center;
+    cursor: pointer;
+
+    span { font-size: 60px; }
+    iframe { display: none; }
+
+    &.active {
+      background-image: none;
+      span { display: none; }
+      iframe { display: block; }
+    }
+
   }
 
 }

assets/js/lustiges-script.js

@@ -10,7 +10,6 @@ $(function() {
 	});
 	$('audio').mediaelementplayer();
 
-/*
 	// activate tab via hash and default to video
 	function setTabToHash() {
 		var activeTab = $('.nav-tabs a[href=' + window.location.hash + ']').tab('show');
@@ -19,8 +18,6 @@ $(function() {
 			window.location.hash = '#video';
 		}
 	}
-	setTabToHash();
-
 
 	// change hash on tab change
 	$('.nav-tabs').on('shown.bs.tab', 'a', function (e) {
@@ -28,6 +25,15 @@ $(function() {
 	});
 
 	// adjust tabs when hash changes
-	$(window).on('hashchange', setTabToHash);
-*/
+	$(window).on('hashchange', setTabToHash).trigger('hashchange');
+
+	$('.click-to-irc').one('click', function() {
+		var
+			$irc = $(this),
+			$iframe = $(this).find('iframe');
+
+		$iframe.on('load', function() {
+			$irc.addClass('active');
+		}).attr('src', $iframe.data('src'));
+	});
 });

template/assemblies/irc.phtml

@@ -0,0 +1,4 @@
+<div class="click-to-irc">
+	<span>Click to Activate</span>
+	<iframe data-src="https://kthx.de:9090/?channels=voc-<?=h($room)?>&uio=d4" width="1020" height="372" border="0"></iframe>
+</div>

template/room.phtml

@@ -13,11 +13,31 @@
 		<? endforeach ?>
 	</ul>
 
+	<div class="player-wrap">
+		<? include("assemblies/player/$type.phtml") ?>
+	</div>
+
+	<ul class="nav nav-tabs nav-justified" role="tablist">
+		<li class="active">
+			<a href="#switcher" role="tab" data-toggle="tab">Formats</a>
+		</li>
+		<li>
+			<a href="#irc" role="tab" data-toggle="tab">IRC</a>
+		</li>
+		<li>
+			<a href="#program" role="tab" data-toggle="tab">Program</a>
+		</li>
+	</ul>
 
 	<div class="tab-content">
-		<? include("assemblies/player/$type.phtml") ?>
-		<div class="switcher">
+		<div class="tab-pane active switcher" id="switcher">
 			<? include("assemblies/switcher/$type.phtml") ?>
 		</div>
+		<div class="tab-pane irc" id="irc">
+			<? include("assemblies/irc.phtml") ?>
+		</div>
+		<div class="tab-pane program" id="program">
+			Program
+		</div>
 	</div>
 </div>