provide hlsindex for the api

frontend/app/frontend.py

@@ -21,12 +21,12 @@ def start():
     )
     return page
 
-@frontend.route("/player/<appname>/<streamname>")
+@frontend.route("/player/<appname>/<hlsindex>")
-def show_player(appname, streamname):
+def show_player(appname, hlsindex):
     playerTemplate = '%s/player.html.j2' % zomstream.configuration['template_folder']
     page = flask.render_template(
         playerTemplate, 
-        streamname=streamname,
+        hlsindex=hlsindex,
         appname=appname,
         configuration=zomstream.configuration
         )

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

@@ -18,7 +18,7 @@
 {% endif %}
 {% for item in items %}
 <article>
-  <h1>{{ item[1] }}</h1>
+  <h1>Stream {{ item[1] }}</h1>
   <table>
     <tbody>
       <tr>
@@ -27,20 +27,26 @@
         <th></th>
       </tr>
       <tr>
-        <td>RTMP url</td>
+	<td>RTMP substream {{ item[2] }}</td>
-        <td><em class="url">rtmp://{{ configuration["rtmp_base"] }}/{{ item[0] }}/{{ item[1] }}</em></td>
+        <td><em class="url">rtmp://{{ configuration["rtmp_base"] }}/{{ item[0] }}/{{ item[2] }}</em></td>
-        <td class="btn"><a href="rtmp://{{ configuration['rtmp_base'] }}/{{ item[0] }}/{{ item[1] }}" class="btn btn-red">&#9654;<br/>RTMP</a></td>
+        <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>HLS m3u8</td>
 	<td><em class="url">{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ item[1] }}/index.m3u8</em></td>
 <!--	<td class="btn"><a href="{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/player/{{ item[1] }}" class="btn btn-green">&#9654;<br/>HLS.js</a></td> -->
-	<td class="btn"><a href="{{ url_for('frontend.show_player', streamname=item[1], appname=item[0]) }}" class="btn btn-green">&#9654;<br/>HLS.js</a></td>
+	<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>
       </tr>
     </tbody>
   </table>
 </article>
 {% endfor %}
+
+  <a href="{{ url_for('frontend.show_player', streamname=item[1], appname=item[0]) }}"
+    class="btn-large btn-green">
+      &#9655; Web Player
+    </a>
+
 </main>
 <footer>
 {{ configuration["footer"] }}

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

@@ -22,7 +22,7 @@
     var hls = new Hls({
       debug: true,
     });
-    hls.loadSource("{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ streamname }}/index.m3u8");
+    hls.loadSource("{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ hlsindex }}.m3u8");
     hls.attachMedia(video);
     hls.on(Hls.Events.MEDIA_ATTACHED, function () {
       video.muted = true;
@@ -33,7 +33,7 @@
   // 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/{{ streamname }}/index.m3u8";
+    video.src = "{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ hlsindex }}.m3u8";
     video.addEventListener('canplay', function () {
       video.play();
     });

frontend/app/zomstream.py

@@ -40,8 +40,10 @@ class Zomstream:
                 for stream in streams:
                     name = stream.find('name')
                     rate = stream.find('bw_video')
+                    streamname = name.text
+                    hlsindex = streamname.split('_'[0]
                     if rate.text != "0":
-                        self.streamnames.append( [appname.text, name.text] )
+                        self.streamnames.append( [appname.text, hlsindex, streamname] )
     
         return self.streamnames