leftypol
/
leftypol
4
5
Fork 2
Code Issues 54 Pull Requests 1 Projects Releases Wiki Activity
Browse Source

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

pull/40/head
Benjamin Southall 7 years ago
parent
9e2e08082b
commit
bb334124be
2 changed files with 93 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 25
      templates/themes/stream/info.php
  2. 88
      templates/themes/stream/stream.html

25
templates/themes/stream/info.php
View File

@ -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

88
templates/themes/stream/stream.html
View File

@ -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 %}

Write Preview
Loading…
Cancel
Save