Merge branch 'master' of https://github.com/zom-bi/zomstream

zom-bi · Dec 6, 2021 · a1439fd · a1439fd
2 parents f0d7a2e + 55f5799
commit a1439fd
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>