From 55f57996a1d741f54383a6a50095c5b9a705a71a Mon Sep 17 00:00:00 2001
From: Christoph <43646576+z-bsod@users.noreply.github.com>
Date: Mon, 6 Dec 2021 22:31:54 +0100
Subject: [PATCH] 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
---
 config/frontend/config.example.yml            |   6 +-
 docker-compose.default.yml                    |   2 +-
 frontend/app/frontend.py                      |   9 ++
 frontend/app/static/style.default.css         |  54 ++++++-
 frontend/app/templates/default/main.html.j2   |  46 +++++-
 frontend/app/templates/default/player.html.j2 |  61 ++++++++
 .../templates/default/setup_helper.html.j2    | 146 ++++++++++++++++++
 7 files changed, 309 insertions(+), 15 deletions(-)
 create mode 100644 frontend/app/templates/default/setup_helper.html.j2

diff --git a/config/frontend/config.example.yml b/config/frontend/config.example.yml
index 9586428..8fe7b18 100644
--- 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
index 9466e8f..dd069e9 100644
--- 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
index 22e40df..8338c18 100644
--- 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
\ No newline at end of file
diff --git a/frontend/app/static/style.default.css b/frontend/app/static/style.default.css
index 48c8803..a25ce24 100644
--- 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
index e9fb218..8b8720e 100644
--- 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
index 281e365..610c966 100644
--- 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>
diff --git a/frontend/app/templates/default/setup_helper.html.j2 b/frontend/app/templates/default/setup_helper.html.j2
new file mode 100644
index 0000000..047db4b
--- /dev/null
+++ b/frontend/app/templates/default/setup_helper.html.j2
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
+        <title>{{ configuration['pagetitle'] }} - Stream Overview</title>
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.default.css') }}">
+    </head>
+<body>
+<header>
+    <a href="{{ url_for('frontend.start') }}"><h1>{{ configuration["pagetitle"] }}</h1></a>
+	<h2>{{ configuration["subtitle"] }}</h2>
+</header>
+<main>
+    <article>
+    <h1>
+        Setup Helper
+    </h1>
+    <p>
+        This tool should help you with the setup of OBS for use with zomstream
+    </p>
+    <form id="settingsform">
+        <label for="application">selected application</label>
+        <select name="application" id="application">
+            <option value="live">Live - List stream on main page and don't record</option>
+            <option value="rec">Rec - List stream on main page and record it</option>
+            <option value="unlisted">Unlisted - Don't list stream on main page and don't record</option>
+            <option value="recunlisted">Recunlisted - Don't list stream on main page and record</option>
+        </select>
+
+        <label for="streamname">name for the stream</label>
+        <input type="text" pattern="[a-z0-9_]+" name="streamname"
+          placeholder="example: stream_name_23"
+          title="should only include lowercase letters, numbers and _ characters">
+
+        <label for="password">stream source password</label>
+        <input type="password" pattern="[A-Za-z0-9!]+" name="password"
+          placeholder="example: Passw0rd23"
+          title="should only include upper- and lowercase characters and numbers">
+
+        <button type="button" style="width: 100%; margin-left: 0px;" class="btn-large" onclick="show_configuration()" id="showconfig">show config</button>
+    </form>
+    </article>
+
+    <article>
+        <h1>OBS Configuration</h1>
+        <p>go to Settings -> Stream to set up these parameters in OBS</p>
+        <table>
+          <tbody>
+            <tr>
+              <th>Parameter</th>
+              <th>Setting</th>
+              <th class="btn"></th>
+            </tr>
+            <tr>
+              <td>Service</td>
+              <td><input type="text" class="url" value="Custom..." readonly></td>
+              <td class="btn"></td>
+            </tr>
+            <tr>
+              <td>Server</td>
+              <td><input type="text" class="url" id="server_url" readonly></em></td>
+              <td class="btn"><button class="btn" onclick="copy_to_clipboard('server_url')">Copy</button></td>
+            </tr>
+            <tr>
+              <td>Stream Key</td>
+              <td><input type="text" class="url" id="stream_key" readonly></em></td>
+              <td class="btn"><button class="btn" onclick="copy_to_clipboard('stream_key')">Copy</button></td>
+            </tr>
+            <tr>
+              <td>Use Authentication</td>
+              <td><input type="text" class="url" value="off" readonly></td>
+            </tr>
+          </tbody>
+        </table>
+    </article>
+
+    <article>
+        <h1>User URLs</h1>
+        <p>these are the URLs where other people can access your stream</p>
+        <table>
+          <tbody>
+            <tr>
+              <th>Type</th>
+              <th>URL</th>
+              <th class="btn"></th>
+            </tr>
+            <tr>
+                <td>Web Player</td>
+                <td><input type="text" class="url" id="play_web_url" readonly></td>
+                <td class="btn"><button class="btn" onclick="copy_to_clipboard('play_web_url')">Copy</button></td>
+            </tr>
+            <tr>
+              <td>FLV HTTP</td>
+              <td><input type="text" class="url" id="play_flv_url" readonly></td>
+              <td class="btn"><button class="btn" onclick="copy_to_clipboard('play_flv_url')">Copy</button></td>
+            </tr>
+            <tr>
+              <td>RTMP</td>
+              <td><input type="text" class="url" id="play_rtmp_url" readonly></td>
+              <td class="btn"><button class="btn" onclick="copy_to_clipboard('play_rtmp_url')">Copy</button></td>
+            </tr>
+          </tbody>
+        </table>
+    </article>
+</main>
+<script type="text/javascript">
+
+    function copy_to_clipboard(elem) {
+      textfield = document.getElementById(elem)
+      textfield.select()
+      navigator.clipboard.writeText(textfield.value)
+    }
+
+    function show_configuration() {
+        settingsform = document.getElementById('settingsform')
+
+        if (!settingsform.checkValidity()){
+          settingsform.reportValidity();
+        }
+        else {
+          application = settingsform.elements['application'].value
+          streamname = settingsform.elements['streamname'].value
+          streampass = settingsform.elements['password'].value
+
+          server = 'rtmp://{{ configuration["rtmp_base"] }}/' + application
+          streamkey = streamname + '?pass=' + streampass
+          webplayer_url = '{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/player/' + application + '/' + streamname
+          flv_url = '{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/flv?app=' + application + '&stream=' + streamname
+          rtmp_url = 'rtmp://{{ configuration['rtmp_base'] }}/' + application + '/' + streamname
+
+          server_url_output = document.getElementById('server_url')
+          stream_key_output = document.getElementById('stream_key')
+          webplayer_url_output = document.getElementById('play_web_url')
+          flv_url_output = document.getElementById('play_flv_url')
+          rtmp_url_output = document.getElementById('play_rtmp_url')
+
+          server_url_output.value = server
+          stream_key_output.value = streamkey
+          webplayer_url_output.value = webplayer_url
+          flv_url_output.value = flv_url
+          rtmp_url_output.value = rtmp_url
+        }
+    }
+</script>
+</body>
+</html>
\ No newline at end of file