split frontend template to show app, rtmp substreams and hls stream index

config/frontend/config.yml.dist

@@ -1,6 +1,6 @@
 # This is the title and Subtitle displayed on the Head of the Page
 pagetitle: vod-rtmp
-subtitle: v1
+subtitle: v0.69
 
 # the footer
 footer: "© 2021 by the zom.bi Team"

frontend/app/frontend.py

@@ -13,22 +13,48 @@ frontend = flask.Blueprint('frontend', __name__)
 @frontend.route("/")
 def start():
     mainTemplate = '%s/main.html.j2' % zomstream.configuration['template_folder']
-    streamList = zomstream.getStreamNames()
+    itemList = zomstream.getStreamNames()
+
+    applications = []
+    appnames = []
+    for item in itemList:
+        if item[0] not in appnames:
+            appnames.append(item[0])
+
+    for appname in appnames:
+        streamnames = []
+        for item in itemList:
+            streamitem=item[1].split('_')[0]
+            if streamitem not in streamnames and item[0] == appname:
+                streamnames.append(streamitem)
+
+        streams = []
+        for streamname in streamnames:
+            substreams = []
+            for item in itemList:
+               if item[0] == appname:
+                   if item[1].split('_')[0] == streamname:
+                       substreams.append(item[1])
+            stream = [streamname, substreams]
+            streams.append(stream)
+
+        app = [appname, streams]
+        applications.append(app)
+
     page = flask.render_template(
         mainTemplate,
-        items=streamList,
+        applications=applications,
         configuration=zomstream.configuration
     )
     return page
 
-@frontend.route("/player/<appname>/<streamname>")
+@frontend.route("/player/<appname>/<stream>")
-def show_player(appname, hlsindex):
+def show_player(appname, stream):
     playerTemplate = '%s/player.html.j2' % zomstream.configuration['template_folder']
-    hlsindex = streamname.split('_')[0]
     page = flask.render_template(
         playerTemplate, 
         appname=appname,
-        hlsindex=hlsindex,
+        stream=stream,
         configuration=zomstream.configuration
         )
     return page

frontend/app/templates/default/main.html.j2

@@ -11,34 +11,39 @@
 	<h2>{{ configuration["subtitle"] }}</h2>
 </header>
 <main>
-{% if items == [] %}
+{% if applications == [] %}
   <p style="margin-top: 20px; margin-bottom: 150px;">
     <span style="color: #888; font-size: 14pt;">There are currently no streams running</span>
   </p>
 {% endif %}
-{% for tem in items %}
+{% for application in applications %}
-<article>
+<h1>{{ application[0] }}</h1>
-  <h1>Stream {{ item[1] }}</h1>
+    {% for stream in application[1] %}
-  <table>
+    <article>
-    <tbody>
+      <h2> stream {{ stream[0] }}</h2>
-      <tr>
+      <table>
-        <th>Protocol</th>
+        <tbody>
-        <th>URL</th>
+          <tr>
-        <th></th>
+            <th>Protocol</th>
-      </tr>
+            <th>URL</th>
-      <tr>
+            <th></th>
-	<td>RTMP substream }}</td>
+          </tr>
-        <td><em class="url">rtmp://{{ configuration["rtmp_base"] }}/{{ item[0] }}/{{ item[2] }}</em></td>
+          {% for substream in stream[1] %}
-        <td class="btn"><a href="rtmp://{{ configuration['rtmp_base'] }}/{{ item[0] }}/{{ item[2] }}" class="btn btn-red">&#9654;<br/>RTMP</a></td>
+              <tr>
-      </tr>
+		<td>RTMP {{ substream }}</td>
-      <tr>
+		<td><em class="url">rtmp://{{ configuration["rtmp_base"] }}/{{ application[0] }}/{{ substream }}</em></td>
-        <td>HLS m3u8</td>
+		<td class="btn"><a href="rtmp://{{ configuration['rtmp_base'] }}/{{ application[0] }}/{{ substream }}" class="btn btn-red">&#9654;<br/>RTMP</a></td>
-	<td><em class="url">{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ item[1] }}/index.m3u8</em></td>
+              </tr>
-	<td class="btn"><a href="{{ url_for('frontend.show_player', appname=item[0], hlsindex=item[1]) }}" class="btn btn-green">&#9654;<br/>HLS.js</a></td>
+          {% endfor %}
-      </tr>
+          <tr>
-    </tbody>
+            <td>HLS m3u8</td>
-  </table>
+            <td><em class="url">{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ stream[0] }}.m3u8</em></td>
-</article>
+            <td class="btn"><a href="{{ url_for('frontend.show_player', appname=application[0], stream=stream[0]) }}" class="btn btn-green">&#9654;<br/>HLS.js</a></td>
+          </tr>
+        </tbody>
+      </table>
+    </article>
+{% endfor %}
 {% endfor %}
 </main>
 <footer>

frontend/app/templates/default/player.html.j2

@@ -2,7 +2,7 @@
 <html>
 <head>
 <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
-<title>{{ configuration['pagetitle'] }} - {{ appname }}: {{ streamname }}</title>
+<title>{{ configuration['pagetitle'] }} - {{ appname }}: {{ stream }}</title>
 <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.default.css') }}">
 </head>
 <body>
@@ -22,7 +22,7 @@
     var hls = new Hls({
       debug: true,
     });
-    hls.loadSource("{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ hlsindex }}.m3u8");
+    hls.loadSource("{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ stream }}.m3u8");
     hls.attachMedia(video);
     hls.on(Hls.Events.MEDIA_ATTACHED, function () {
       video.muted = true;
@@ -33,12 +33,11 @@
   // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
   // This is using the built-in support of the plain video element, without using hls.js.
   else if (video.canPlayType('application/vnd.apple.mpegurl')) {
-    video.src = "{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ hlsindex }}.m3u8";
+    video.src = "{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ stream }}.m3u8";
     video.addEventListener('canplay', function () {
       video.play();
     });
   }
-//url: '{{ configuration["web_proto"] }}://{{ configuration["base_url"] }}/flv?app={{ appname }}&stream={{ streamname }}'
 </script>
 </body>
 </html>

frontend/app/zomstream.py

@@ -41,7 +41,7 @@ class Zomstream:
                     name = stream.find('name')
                     rate = stream.find('bw_video')
                     if rate.text != "0":
-                        self.streamnames.append( [appname.text, streamname.text] )
+                        self.streamnames.append( [appname.text, name.text] )
     
         return self.streamnames