diff --git a/public/index.html b/public/index.html
index a2e04952b03972a9423f6096fcb3455682d55f12..5a0b6790b18d935bac9bc6cb0743580ba9e3736b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,49 +1,134 @@
<html>
- <head>
- <link rel="stylesheet" href="bootstrap.min.css">
- <link rel="stylesheet" href="style.css">
- <script type="text/javascript" src="jquery-3.5.1.min.js"></script>
- <script type="text/javascript" src="bootstrap.min.js"></script>
- <script type="text/javascript" src="clappr.min.js"></script>
- <script type="text/javascript" src="level-selector.min.js"></script>
- </head>
- <body>
- <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
- <a class="navbar-brand" href="#">KIF 48,0 Livestream</a>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
-
- <div class="collapse navbar-collapse" id="navbarSupportedContent">
- <ul class="navbar-nav mr-auto">
- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- Mirror
- </a>
- <div class="dropdown-menu" aria-labelledby="navbarDropdown">
- <a class="dropdown-item" href="#">HLS1</a>
- <a class="dropdown-item" href="#">HLS2</a>
- </div>
- </li>
- </ul>
+<head>
+ <link rel="stylesheet" href="bootstrap.min.css">
+ <link rel="stylesheet" href="style.css">
+ <script type="text/javascript" src="jquery-3.5.1.min.js"></script>
+ <script type="text/javascript" src="bootstrap.min.js"></script>
+ <script type="text/javascript" src="clappr.min.js"></script>
+ <script type="text/javascript" src="level-selector.min.js"></script>
+ <title>KIF 48,0 Livestream</title>
+</head>
+<body>
+
+ <!-- Navbar -->
+ <nav class="navbar fixed-top navbar-dark bg-primary">
+ <a class="navbar-brand" href="#">KIF 48,0 Livestream</a>
+ <span class="navbar-text mr-auto" id="streamtitle"></span>
+ <button class="btn btn-secondary" type="button" data-toggle="modal" data-target="#infoModal">Ext. Player/Audio Only</button>
+ </nav>
+
+ <!-- The player will be in here -->
+ <div class="container-fluid fill">
+ <div id="player"></div>
+ </div>
+
+ <!-- Info Dialog -->
+ <div class="modal fade" id="infoModal" tabindex="-1" role="dialog">
+ <div class="modal-dialog modal-dialog-centered">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title">Externe Player und Nur-Audio-Stream</h5>
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ <div class="modal-body">
+ <h4>Videostream im externen Player</h4>
+ <p>Um diesen Stream in VLC zu öffnen, nutze die folgende Netzwerkadresse:</p>
+ <p><code id="urlStream">unset</code></p>
+ <h4>Nur-Audio-Stream</h4>
+ <audio controls>
+ <source src="https://hls1.stream.kif.rocks:8443/newname" type="audio/mpeg">
+ </audio>
+ <p>Um den Audiostream in VLC zu öffnen, nutze die folgende Netzwerkadresse:</p>
+ <p><code id="urlAudio">unset</code></p>
+ </div>
</div>
- </nav>
- <div class="container-fluid fill">
- <div id="player"></div>
</div>
- <script>
- var player = new Clappr.Player({
- source: "https://hls1.stream.kif.rocks/stream.m3u8",
- parentId: "#player",
- width: "100%",
- height: "100%",
- autoPlay: true,
- hlsMinimumDvrSize: 0,
- hlsjsConfig: {
- liveSyncDurationCount: 2
- },
- plugins: [LevelSelector]
+ </div>
+
+ <!-- Player and other script stuff -->
+ <script>
+ var urlParams = new URLSearchParams(window.location.search);
+ var streamName = urlParams.get('stream');
+ var availableMirrors = ['hls1', 'hls2'];
+
+ var mirror;
+ if(urlParams.get('mirror')){
+ mirror = urlParams.get('mirror')
+ }
+ else{
+ mirror = availableMirrors[Math.floor(Math.random() * availableMirrors.length)];
+ }
+
+ var targetPlayerElement = "#player";
+ var posterImage = "poster.png";
+ var offlineContent = "<div class='offlineImg'></div>";
+ var streamURL = 'https://' + mirror + '.stream.kif.rocks/' + streamName + '.m3u8';
+ var audioURL = 'https://' + mirror + '.stream.kif.rocks:8443/' + streamName;
+ var isLive = false;
+
+ $('#streamtitle').html('#' + streamName + ' (Mirror: ' + mirror + ')');
+ $('#urlStream').html(streamURL);
+ $('#urlAudio').html(audioURL);
+
+ function getClapprPlayer() {
+ return new Clappr.Player({
+ source: streamURL,
+ autoPlay: true,
+ mute: true,
+ parentId: targetPlayerElement,
+ width: "100%",
+ height: "100%",
+ poster: posterImage,
+ mediacontrol: {seekbar: "#4a7aac", buttons: "#4a7aac"},
+ hlsMinimumDvrSize: 0,
+ hlsjsConfig: {
+ liveSyncDurationCount: 2
+ },
+ plugins: [LevelSelector],
+ levelSelectorConfig: {
+ title: 'Quality',
+ labels: {
+ 1: 'High',
+ 0: 'Low',
+ }
+ }
});
- </script>
- </body>
+ }
+
+ function checkLive() {
+ var player;
+ console.log("Checking stream status...");
+ $.ajax({
+
+ url: streamURL, //stream url
+ success: function(data){
+ if(!isLive)
+ {
+ $(targetPlayerElement).empty();
+ isLive = true;
+ player = getClapprPlayer();
+ console.log("Stream is running; creating player");
+
+ }
+ },
+ error: function(data){
+ if(isLive)
+ {
+ isLive = false;
+ $(targetPlayerElement).empty();
+ $(targetPlayerElement).html(offlineContent);
+ }
+ if(!isLive)
+ $(targetPlayerElement).html(offlineContent);
+ },
+ })
+ setTimeout(checkLive, 10000);
+ }
+
+ checkLive();
+
+ </script>
+</body>
</html>
\ No newline at end of file
diff --git a/public/poster.png b/public/poster.png
new file mode 100644
index 0000000000000000000000000000000000000000..3b8366b059381a1486ff4ce7d3a31c5a81cd74c0
Binary files /dev/null and b/public/poster.png differ
diff --git a/public/poster_offline.png b/public/poster_offline.png
new file mode 100644
index 0000000000000000000000000000000000000000..37ec3dbb663b5f43965a58ca2109c4b6f1cbe166
Binary files /dev/null and b/public/poster_offline.png differ
diff --git a/public/style.css b/public/style.css
index d8df7a193d4243292c96dabcb953b80fc088381c..4f14f89e5e3d642cff68fadd1b776c4e61d6b46a 100644
--- a/public/style.css
+++ b/public/style.css
@@ -8,4 +8,13 @@ html, body {
padding-top: 70px;
min-height: 100%;
height: 100%;
+}
+
+.offlineImg {
+ height: 100%;
+ width: 100%;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-image: url("poster_offline.png");
+ background-color: #474747;
}
\ No newline at end of file