Frontend Improvements (#11)

* add OBS setup helper page * add rtmp and http url to player page as these aren't accessible from the main page for unlisted streams it might be helpful to have them listed on the player page for users which want to use external media players * add player URLs to setup_helper * change url display; add copy to clipboard function; css changes * use different sample password * make example config work ootb with docker-compose.default.yml
zom-bi · Dec 6, 2021 · 55f5799 · 55f5799
1 parent 698cae4
commit 55f5799
Show file tree

Hide file tree

Showing 7 changed files with 309 additions and 15 deletions.
diff --git a/config/frontend/config.example.yml b/config/frontend/config.example.yml
@@ -1,12 +1,12 @@
 # This is the title and Subtitle displayed on the Head of the Page
 pagetitle: Zomstream
-subtitle: v0.4
+subtitle: v0.5
 # the footer
 footer: "&copy; 2021 by the zom.bi Team"
 # the ip or hostname used to generate rtmp URLs
-rtmp_base: stream.zom.bi
+rtmp_base: 127.0.0.1
 # this is the base url used to generate internal links
-base_url: 127.0.0.1:5001
+base_url: 127.0.0.1:8080
 
 # the url to the nginx servers status page.
 # this is used for discovering the running streams

diff --git a/docker-compose.default.yml b/docker-compose.default.yml
@@ -15,7 +15,7 @@ services:
       - "./auth:/code"
     # set the PSK Password for the Auth Daemon here
     environment:
-      - password=ex4mple_p4ssw0rd!
+      - password=P4ssW0rD
 
   nginx-rtmp: # nginx rtmp server
     build: ./docker-nginx-rtmp/.

diff --git a/frontend/app/frontend.py b/frontend/app/frontend.py
@@ -31,3 +31,12 @@ def show_player(appname, streamname):
         configuration=zomstream.configuration
         )
     return page
+
+@frontend.route("/setup_helper")
+def setup_helper():
+    template = '%s/setup_helper.html.j2' % zomstream.configuration['template_folder']
+    page = flask.render_template(
+        template,
+        configuration=zomstream.configuration
+        )
+    return page
diff --git a/frontend/app/static/style.default.css b/frontend/app/static/style.default.css
@@ -32,6 +32,11 @@ header h2 {
 	margin: 2px;
 }
 
+header h2 a {
+	font-style: normal;
+	color: #555;
+}
+
 main {
 	clear: both;
 	margin-left: auto;
@@ -54,6 +59,30 @@ article {
 	padding: 0px;
 }
 
+form {
+	margin: 4px;
+}
+
+article p {
+	margin: 4px;
+}
+
+form label {
+	display: block;
+	margin-top: 8px;
+}
+
+input, select {
+	width: 100%;
+	border: 1px solid #888;
+	border-radius: 3px;
+	box-sizing: border-box;
+}
+
+input:focus {
+	border: 1px solid #88f;
+}
+
 article h1 {
 	font-size: 13pt;
 	font-weight: normal;
@@ -84,7 +113,7 @@ article table td {
 	border-bottom: 1px solid #eee;
 }
 
-article table td em.url {
+article table td em.url, input.url {
 	font-style: normal;
 	font-family: monospace;
 	background: #eee;
@@ -100,7 +129,17 @@ article table th.btn {
 	text-align: right;
 }
 
-a.btn {
+form button.btn-large {
+	border: none;
+}
+
+td.btn button.btn {
+	border: none;
+	width: 100%;
+	height: 100%;
+}
+
+a.btn, button.btn {
 	color: #eee;
 	display: block;
 	border-radius: 5px;
@@ -111,15 +150,15 @@ a.btn {
 	text-align: center;
 }
 
-a.btn-green {
+a.btn-green, button.btn, button.btn-large {
 	background-color: rgb(44, 57, 75);
 	/*background: linear-gradient(#4caf50, #2b622d);*/
 }
-a.btn-green:hover {
+a.btn-green:hover, button.btn:hover {
 	background-color: rgb(60, 78, 104);
 	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
 }
-a.btn-large {
+a.btn-large, button.btn-large {
 	color: #eee;
 	font-size: 16pt;
 	display: block;
@@ -191,6 +230,9 @@ video#player {
     header h2 {
         color: #777;
     }
+	header h2 a {
+		color: #999;
+	}
     footer {
         color: #999;
     }
@@ -208,7 +250,7 @@ video#player {
     article table td {
     	border-bottom: 1px solid #333;
     }
-    article table td em.url {
+    article table td em.url, input.url {
         color: #eee;
         background: #121212;
     }

diff --git a/frontend/app/templates/default/main.html.j2 b/frontend/app/templates/default/main.html.j2
@@ -8,7 +8,7 @@
 <body>
 <header>
 	<h1>{{ configuration["pagetitle"] }}</h1>
-	<h2>{{ configuration["subtitle"] }}</h2>
+	<h2><a href="{{ url_for('frontend.setup_helper') }}">Setup Helper</a> | {{ configuration["subtitle"] }}</h2>
 </header>
 <main>
 {% if items == [] %}
@@ -25,16 +25,45 @@
         <th>Protocol</th>
         <th>URL</th>
         <th></th>
+        <th></th>
       </tr>
       <tr>
         <td>RTMP</td>
-        <td><em class="url">rtmp://{{ configuration["rtmp_base"] }}/{{ item[0] }}/{{ item[1] }}</em></td>
-        <td class="btn"><a href="rtmp://{{ configuration["rtmp_base"] }}/{{ item[0] }}/{{ item[1] }}" class="btn btn-green">&#9654;<br/>RTMP</a></td>
+        <td>
+          <input 
+            type="text" class="url" 
+            id="rtmp_{{ item [0] }}_{{ item [1] }}" 
+            value="rtmp://{{ configuration["rtmp_base"] }}/{{ item[0] }}/{{ item[1] }}"
+            readonly>
+        </td>
+        <td class="btn">
+          <button class="btn" onclick="copy_to_clipboard('rtmp_{{ item [0] }}_{{ item [1] }}')">Copy</button>
+        </td>
+        <td class="btn">
+          <a
+            style="width: 80px;"
+            href="rtmp://{{ configuration["rtmp_base"] }}/{{ item[0] }}/{{ item[1] }}"
+            class="btn btn-green">&#9654; RTMP</a>
+        </td>
       </tr>
       <tr>
         <td>HTTP-FLV</td>
-	<td><em class="url">{{ configuration["web_proto"] }}://{{ configuration["base_url"] }}/flv?app={{ item[0] }}&stream={{ item[1] }}</em></td>
-	<td class="btn"><a href="{{ configuration["web_proto"] }}://{{ configuration["base_url"] }}/flv?app={{ item[0] }}&stream={{ item[1] }}" class="btn btn-green">&#9654;<br/>HTTP-FLV</a></td>
+	      <td>
+          <input 
+            type="text" class="url" 
+            id="flv_{{ item [0] }}_{{ item [1] }}" 
+            value="{{ configuration["web_proto"] }}://{{ configuration["base_url"] }}/flv?app={{ item[0] }}&stream={{ item[1] }}"
+            readonly>
+        </td>
+        <td class="btn">
+          <button class="btn" onclick="copy_to_clipboard('flv_{{ item [0] }}_{{ item [1] }}')">Copy</button>
+        </td>
+	      <td class="btn">
+          <a 
+            style="width: 80px;"
+            href="{{ configuration["web_proto"] }}://{{ configuration["base_url"] }}/flv?app={{ item[0] }}&stream={{ item[1] }}"
+            class="btn btn-green">&#9654; FLV</a>
+        </td>
       </tr>
     </tbody>
   </table>
@@ -48,5 +77,12 @@
 <footer>
 {{ configuration["footer"] }}
 </footer>
+<script type="text/javascript">
+    function copy_to_clipboard(elem) {
+      textfield = document.getElementById(elem)
+      textfield.select()
+      navigator.clipboard.writeText(textfield.value)
+    }
+</script>
 </body>
 </html>
diff --git a/frontend/app/templates/default/player.html.j2 b/frontend/app/templates/default/player.html.j2
@@ -15,6 +15,61 @@
     <video id="player" controls>
     </video>
 </div>
+<main>
+    <article>
+        <h1>URLs</h1>
+        <table>
+        <tbody>
+            <tr>
+                <th>Protocol</th>
+                <th>URL</th>
+                <th></th>
+                <th></th>
+            </tr>
+            <tr>
+                <td>RTMP</td>
+                <td>
+                    <input 
+                        type="text" class="url" 
+                        id="rtmp" 
+                        value="rtmp://{{ configuration["rtmp_base"] }}/{{ appname }}/{{ streamname }}">
+                </td>
+                <td class="btn">
+                    <button class="btn" onclick="copy_to_clipboard('rtmp')">Copy</button>
+                </td>
+                <td class="btn">
+                    <a 
+                        style="width: 80px;"
+                        href="rtmp://{{ configuration["rtmp_base"] }}/{{ appname }}/{{ streamname }}" 
+                        class="btn btn-green">
+                            &#9654; RTMP
+                    </a>
+                </td>
+            </tr>
+            <tr>
+                <td>HTTP-FLV</td>
+                <td>
+                    <input 
+                        type="text" class="url" 
+                        id="flv"
+                        value="{{ configuration["web_proto"] }}://{{ configuration["base_url"] }}/flv?app={{ appname }}&stream={{ streamname }}">
+                </td>
+                <td class="btn">
+                    <button class="btn" onclick="copy_to_clipboard('flv')">Copy</button>
+                </td>
+                <td class="btn">
+                    <a 
+                        style="width: 80px;"
+                        href="{{ configuration["web_proto"] }}://{{ configuration["base_url"] }}/flv?app={{ appname }}&stream={{ streamname }}"
+                        class="btn btn-green">
+                            &#9654; HTTP-FLV
+                    </a>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    </article>
+</main>
 <script src="{{ url_for('static', filename='flv.min.js') }}"></script>
 <script type="application/javascript">
     if (flvjs.isSupported()) {
@@ -27,6 +82,12 @@
         flvPlayer.load();
         flvPlayer.play();
     }
+    
+    function copy_to_clipboard(elem) {
+      textfield = document.getElementById(elem)
+      textfield.select()
+      navigator.clipboard.writeText(textfield.value)
+    }
 </script>
 </body>
 </html>