Adding support for format selection for Stream theme / extension, as well as the ability to change CSS theme from stream page

2 files changed, 93 insertions, 20 deletions

diff --git a/templates/themes/stream/info.php b/templates/themes/stream/info.php
index 081b29ca..d522032d 100644
--- a/templates/themes/stream/info.php
+++ b/templates/themes/stream/info.php
@@ -34,19 +34,26 @@
               'title'   => 'OGV stream URL',
               'name'    => 'ogvurl',
               'type'    => 'text',
-              'default' => 'https://lainchan.org/radio_assets/lainstream.ogg'
+              'default' => 'https://lainchan.org/icecast/lainstream.ogg'
           );
     $theme['config'][] =  Array(
               'title'   => 'RTMP stream URL',
               'name'    => 'rtmpurl',
               'type'    => 'text',
-              'default' => 'rtmp://lainchan.org/live/stream'
+              'default' => 'rtmp://lainchan.org/show/stream'
           );
     $theme['config'][] =  Array(
               'title'   => 'RTMP  Video.JS stream URL',
               'name'    => 'rtmpvideojsurl',
               'type'    => 'text',
-              'default' => 'rtmp://lainchan.org/live/&stream'
+              'default' => 'rtmp://lainchan.org/show/&stream'
+          );
+    
+    $theme['config'][] =  Array(
+              'title'   => 'RTMP HLS stream URL',
+              'name'    => 'hlsurl',
+              'type'    => 'text',
+              'default' => 'https://lainchan.org:8080/hls/stream.m3u8'
           );
 
     $theme['config'][] =  Array(
@@ -68,6 +75,18 @@
               'type'    => 'text',
               'default' => '/live/subs?app=live&name=stream'
           );
+    $theme['config'][] =  Array(
+              'title'   => 'Formats',
+              'name'    => 'formats',
+              'type'    => 'text',
+              'default' => 'hls ogg rtmp'
+          );
+    $theme['config'][] =  Array(
+              'title'   => 'Default Format',
+              'name'    => 'defaultformat',
+              'type'    => 'text',
+              'default' => 'hls ogg rtmp'
+          );
 	
 	
 	// Unique function name for building everything
diff --git a/templates/themes/stream/stream.html b/templates/themes/stream/stream.html
index eb7b0c2b..2c6b66e3 100644
--- a/templates/themes/stream/stream.html
+++ b/templates/themes/stream/stream.html
@@ -1,4 +1,3 @@
-{% filter remove_whitespace %}
 <!doctype html>
 <html>
 <head>
@@ -7,17 +6,17 @@
 	<meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
 	<title>{{ settings.title }}</title>
-	{% if config.meta_keywords %}<meta name="keywords" content="{{ config.meta_keywords }}">{% endif %}
-	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
-	{% if config.url_favicon %}<link rel="shortcut icon" href="{{ config.url_favicon }}">{% endif %}
-	<link rel="stylesheet" media="screen" href="/stylesheets/dark.css">
-	<!--{% if config.default_stylesheet.1 != '' %}<link rel="stylesheet" type="text/css" id="stylesheet" href="{{ config.uri_stylesheets }}{{ config.default_stylesheet.1 }}">{% endif %}-->
-	{% if config.font_awesome %}<link rel="stylesheet" href="{{ config.root }}{{ config.font_awesome_css }}">{% endif %}
+<script type="text/javascript">
+var active_page = "stream";
+</script>
+	{% include 'header.html' %}
+
 <style>
 .video-js { width:100%!important; height: auto!important; }
 </style>
 <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
-
+<script src="https://vjs.zencdn.net/5.16.0/video.js"></script>
+<script src="js/videojs-contrib-hls.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
         check_status();
@@ -31,7 +30,8 @@ function check_status(){
 
   $.get("{{ settings.ogvstatus }}", function(data){    
 var el = $( '<div></div>' );   
-el.html(data);    
+el.html(data.getElementsByTagName('html')[0].innerHTML);   
+
 var sd = el.find(".streamdata");  
 
 if (typeof sd !== 'undefined') {
@@ -45,6 +45,35 @@ if (typeof sd !== 'undefined') {
 }
 });
 }
+function change_format(e) {
+      $(document).ready(function(){
+    let media  = document.getElementById("my-video_html5_api");
+    let paused = media.paused;
+
+     format = e.value;
+    
+     if (format === "hls"){
+	    media.src ="{{ settings.hlsurl }}";
+	    media.src.type = "application/x-mpegURL";
+     }
+     else if (format === "ogg"){
+	     media.src = "{{ settings.ogvurl }}";
+	     media.src.type = "video/ogg";
+     }
+     else if (format === "rtmp"){
+	     media.src = "{{ settings.rtmpvideojsurl }}";
+	     media.src.type = "rtmp/mp4";
+     }
+	
+    videojs('my-video');
+    media.load();
+    if(!paused) {
+        media.play();
+    }
+
+    check_status();
+    });
+} 
 
 </script>
 </head>
@@ -58,10 +87,19 @@ if (typeof sd !== 'undefined') {
 	</header>
 	
 	<div>
+        <!-- data-setup='{ "example_option": true,  "techOrder": ["html5","flash"],"fluid": true} -->
 	<div id="box" width="100%">
-	<video id="my-video" class="video-js vjs-big-play-centered vjs-default-skin" height="264" width="640"  controls preload="auto" poster="https://lainchan.org/static/lain_is_cute_datass_small.png" data-setup='{ "example_option": true,  "techOrder": ["html5","flash"],"fluid": true}'>
-        <source src='{{ settings.rtmpvideojsurl }}' type='rtmp/mp4'/>
-        <source src="{{ settings.ogvurl }}" type='video/ogv'>
+	<video id="my-video" class="video-js vjs-big-play-centered vjs-default-skin" height="264" width="640"  controls preload="auto" poster="https://lainchan.org/static/lain_is_cute_datass_small.png" data-setup='{ "example_option": true,  "techOrder": ["html5","flash"],"fluid": true}' >
+          {% set formatlist = settings.formats|split(' ') %}
+	  {% for format in formatlist %}
+	  {% if format == "hls" %}
+        <source id="hlssource" src="{{ settings.hlsurl }}" type="application/x-mpegURL"> 
+	  {% elseif format == "ogg" %}
+        <source id="oggsource" src="{{ settings.ogvurl }}" type="video/ogg"> 
+	 {% elseif format == "rtmp" %}
+        <source id="rtmpsource" src="{{ settings.rtmpvideojsurl }}" type="rtmp/mp4"> 
+	  {% endif %} 
+	  {% endfor %} 
     <p class="vjs-no-js">
       To view this video please enable JavaScript, and consider upgrading to a web browser that
       <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
@@ -69,12 +107,25 @@ if (typeof sd !== 'undefined') {
   	</video>
 	</div>
 	<br/>
+	<p class="inlineheading" style="text-align:center;" >FORMAT:
+        <select style="float:none;" id="format" onchange="change_format(this)">
+          {% set formatlist = settings.formats|split(' ') %}
+	  {% for format in formatlist %}
+	  {% if format == settings.defaultformat %}
+          <option value="{{ format }}" selected>{{ format }}</option>
+	  {% else %} 
+          <option value="{{ format }}">{{ format }}</option>
+	  {% endif %} 
+          {% endfor %}
+	</select> </p>
+	<br/>
 	<p>Now Streaming RTMP <span id="rtmpnowplaying">unknown</span></p>
 	<p>Now Streaming OGV <span id="ogvnowplaying">unknown</span></p>
 	<p>Current RTMP viewers: <span id="rtmpviewers">unknown</span></p>
 	<p>Current OGV viewers: <span id="ogvviewers">unknown</span></p>
 	<div>
-	<p>Raw stream URLs for Mplayer, mpv, VLC, etc:</p>
+	<p>Raw stream URLs for Mplayer, mpv, VLC, browser etc:</p>
+    <p> HLS: {{ settings.hlsurl }} </p>
     <p> RTMP : {{ settings.rtmpurl }} </p>
     <p> OGV :  {{ settings.ogvurl }} </p>
 	
@@ -83,8 +134,9 @@ if (typeof sd !== 'undefined') {
 	<p>For RTMP  </p>
 	<p>Use obs or ffmpeg to stream  </p>
 	<p>E.g. ffmpeg -re -i filename -c copy -f flv {{ settings.rtmpurl }}?key=KEYGOESHERE</p>
-	<p> obs url field: rtmp://lainchan.org/live/ </p>
-	<p> obs key field: stream?key=KEYGOESHERE</p>
+	<p> obs url field: rtmp://lainchan.org/show/ </p>
+	<p> obs key field: stream?user=<USER>&pass=<PASSWORD></p>
+	<p> For OGV Icecast cat filename | oggfwd -p lainchan.org 8000 <PASSWORD> /lainstream.ogg </p>
 	</div><br/>
 	</div>
 	
@@ -97,7 +149,9 @@ if (typeof sd !== 'undefined') {
                 <br><a href="http://tinyboard.org/">Tinyboard</a> Copyright &copy; 2010-2014 Tinyboard Development Group    
                 <br><a href="https://engine.vichan.net/">vichan</a> Copyright &copy; 2012-2015 vichan-devel</p>
         </footer>
-<script src="https://vjs.zencdn.net/5.16.0/video.js"></script>
+	<div class="pages"></div>
+	<script type="text/javascript">{% raw %}
+		ready();
+	{% endraw %}</script>
 </body>
 </html>
-{% endfilter %}