2020-09-21 15:29:50 +00:00
|
|
|
{{define "viewer"}}
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="col-video">
|
|
|
|
|
<!-- Video -->
|
|
|
|
|
<video id="player"></video>
|
|
|
|
|
|
|
|
|
|
<!-- Links under video -->
|
|
|
|
|
<p>
|
|
|
|
|
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-box-arrow-up-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
<path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 0 0 3 14.5h8a1.5 1.5 0 0 0 1.5-1.5V9a.5.5 0 0 0-1 0v4a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 0 0-1H3A1.5 1.5 0 0 0 1.5 5v8zm7-11a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V2.5H9a.5.5 0 0 1-.5-.5z"/>
|
|
|
|
|
<path fill-rule="evenodd" d="M14.354 1.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"/>
|
|
|
|
|
</svg>
|
2020-09-22 09:42:57 +00:00
|
|
|
<code>rtmps://{{.Cfg.Hostname}}:1935/play/{{.Path}}</code>
|
2020-09-21 15:29:50 +00:00
|
|
|
<a href="#" id="chatToggle" title="Cacher/Afficher le chat">»</a>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Chat -->
|
|
|
|
|
<div class="col-chat" id="chatCol">
|
2020-09-21 18:38:21 +00:00
|
|
|
<iframe src="https://irc.crans.org/web/?join=stream_{{.Path}}&nick=viewer&password=&realname=Viewer" title="Chat"></iframe>
|
2020-09-21 15:29:50 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="/static/ovenplayer/ovenplayer.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
// Toggle chat
|
|
|
|
|
const chatToggle = document.getElementById("chatToggle")
|
|
|
|
|
chatToggle.addEventListener("click", function () {
|
|
|
|
|
const chatCol = document.getElementById("chatCol")
|
|
|
|
|
if (chatCol.style.display === "none") {
|
|
|
|
|
chatCol.style.display = "block"
|
|
|
|
|
chatToggle.textContent = "»"
|
|
|
|
|
} else {
|
|
|
|
|
chatCol.style.display = "none"
|
|
|
|
|
chatToggle.textContent = "«"
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// Create player
|
|
|
|
|
player = OvenPlayer.create("player", {
|
|
|
|
|
autoStart: true,
|
|
|
|
|
mute: true,
|
|
|
|
|
expandFullScreenUI: true,
|
|
|
|
|
sources: [
|
|
|
|
|
{
|
2020-09-22 09:42:57 +00:00
|
|
|
"file": "wss://{{.Cfg.Hostname}}/play/{{.Path}}",
|
2020-09-21 15:29:50 +00:00
|
|
|
"type": "webrtc",
|
|
|
|
|
"label": "WebRTC Source"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
});
|
|
|
|
|
player.on("error", function(error){
|
|
|
|
|
if (error.code === 501) {
|
|
|
|
|
// Change message
|
|
|
|
|
const errorMsg = document.getElementsByClassName("op-message-text")[0]
|
|
|
|
|
errorMsg.textContent = "Le stream semble inactif. Cette page se rafraîchit toutes les 30 secondes."
|
|
|
|
|
|
|
|
|
|
// Reload in 5s
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
player.load()
|
|
|
|
|
}, 30000)
|
|
|
|
|
} else {
|
|
|
|
|
console.log(error);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
{{end}}
|
