88 lines
3.6 KiB
Plaintext
88 lines
3.6 KiB
Plaintext
{% extends "base.njk" %}
|
|
{% block head %}
|
|
<script src="/shaka-player.compiled.js"></script>
|
|
<script>
|
|
shakaPolyFilled = false;
|
|
var manifestUri = document.location.protocol+'//'+document.location.host+'/live/{{ username }}/index.mpd';
|
|
async function initPlayer() {
|
|
if(!shakaPolyFilled){
|
|
shaka.polyfill.installAll();
|
|
shakaPolyFilled = true;
|
|
}
|
|
var live = JSON.parse(await makeRequest("GET", "/api/{{ username }}/config")).live;
|
|
if(live){
|
|
// Create a Player instance.
|
|
const video = document.getElementById('video');
|
|
const player = new shaka.Player(video);
|
|
// Listen for error events.
|
|
player.addEventListener('error', onErrorEvent);
|
|
|
|
video.addEventListener('play', () => {
|
|
document.getElementById('playbtn').style.visibility = 'hidden';
|
|
});
|
|
video.addEventListener('pause', () => {
|
|
document.getElementById('playbtn').style.visibility = 'visible';
|
|
});
|
|
// Try to load a manifest.
|
|
// This is an asynchronous process.
|
|
try {
|
|
await player.load(manifestUri);
|
|
// This runs if the asynchronous load is successful.
|
|
console.log('The video has now been loaded!');
|
|
} catch (e) {
|
|
// onError is executed if the asynchronous load fails.
|
|
onError(e);
|
|
}
|
|
} else {
|
|
setTimeout(initPlayer, 5000);
|
|
}
|
|
}
|
|
|
|
function onErrorEvent(event) {
|
|
// Extract the shaka.util.Error object from the event.
|
|
onError(event.detail);
|
|
}
|
|
|
|
function onError(error) {
|
|
// Log the error.
|
|
console.error('Error code', error.code, 'object', error);
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', initPlayer);
|
|
</script>
|
|
{% endblock %}
|
|
{% block content %}
|
|
<script>
|
|
function newPopup(url) {
|
|
popupWindow = window.open(
|
|
url,'popUpWindow','height=700,width=450,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes')
|
|
}
|
|
async function updateViewers(){
|
|
let vc = document.getElementById('viewercount');
|
|
if(!vc) return false;
|
|
let path = window.location.pathname;
|
|
if(path.substring(path.length - 1).indexOf('/') !== -1)
|
|
var usr = path.substring(7, path.length - 1);
|
|
else var usr = path.substring(7);
|
|
let viewers = JSON.parse(await makeRequest("GET", "/api/"+usr+"/config")).viewers;
|
|
vc.innerHTML = "[Viewers: "+viewers+"]";
|
|
setTimeout(updateViewers, 2000);
|
|
}
|
|
</script>
|
|
</br>
|
|
<span style="float: left;font-size: large;"><a href="/live/{{ username }}/index.mpd">{{ username }}</a> | {{ title | escape }}<span id="viewercount" onload="updateViewers">[Viewers: {{viewers}}]</span>
|
|
<script>updateViewers()</script>
|
|
</b></span><span style="float: right;font-size: large;"> Links | <a href="rtmp://{{ domain }}/live/{{ username }}">Watch</a> <a href="JavaScript:newPopup('/chat?room={{ username }}');">Chat</a> <a href="/vods/{{ username }}">VODs</a></span>
|
|
<div id="jscontainer">
|
|
<div id="jschild" style="width: 70%;height: 100%;position: relative;">
|
|
<image id="playbtn" src="/play.svg" alt="Play Stream" style="width:100%;height:100%;height: 100%;position: absolute;" onclick="document.getElementById('video').paused ? document.getElementById('video').play() : document.getElementById('video') .pause();"></image>
|
|
<video id="video" style="width:100%;height:100%;width: 100%;height: 100%;background-color: rgb(0, 0, 0);" poster="/thumbnail.jpg" autoplay onclick="this.paused ? this.play() : this.pause();"></video>
|
|
</div>
|
|
<div id="jschild" class="webchat" style="width: 30%;height: 100%;">
|
|
<iframe src="/chat?room={{ username }}" frameborder="0" style="min-width: 100%;min-height: 100%;" allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</br>
|
|
<noscript>The webclients for the stream and the chat require javascript, but feel free to use the direct links above!</br></br></noscript>
|
|
{{ about | escape }}
|
|
{% endblock %} |