Setup Helper: Improve UX by making name mandatory (#13)

* Setup Helper: Improve UX by making name mandatory A user failed to generate a valid config, because they didn't specify a stream name. The behaviour of the setup helper is now changed, so that the obs configuration will not show, unless a name is given.
zom-bi · Jan 13, 2023 · c89140a · c89140a
1 parent 70968e4
commit c89140a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -27,7 +27,7 @@ this components provides the visible website containing an overview of the runni
 There is more information about the API in [API.md](API.md) 
 
 ## How to use this
-We tested this with OBS and ffmpeg but any steaming source supporting rtmp should work just fine.
+We tested this with OBS and ffmpeg but any streaming source supporting rtmp should work just fine.
 
 ### Setup instructions
 * clone the repository

diff --git a/frontend/app/templates/default/setup_helper.html.j2 b/frontend/app/templates/default/setup_helper.html.j2
@@ -28,7 +28,7 @@
         </select>
 
         <label for="streamname">name for the stream</label>
-        <input type="text" pattern="[a-z0-9_]+" name="streamname"
+        <input type="text" pattern="[a-z0-9_]+" required=true name="streamname"
           placeholder="example: stream_name_23"
           title="should only include lowercase letters, numbers and _ characters">
 
@@ -41,7 +41,7 @@
     </form>
     </article>
 
-    <article>
+    <article id="settings" >
         <h1>OBS Configuration</h1>
         <p>go to Settings -> Stream to set up these parameters in OBS</p>
         <table>
@@ -74,7 +74,7 @@
         </table>
     </article>
 
-    <article>
+    <article id="userurls">
         <h1>User URLs</h1>
         <p>these are the URLs where other people can access your stream</p>
         <table>
@@ -104,6 +104,8 @@
     </article>
 </main>
 <script type="text/javascript">
+    document.getElementById('settings').hidden = true;
+    document.getElementById('userurls').hidden = true;
 
     function copy_to_clipboard(elem) {
       textfield = document.getElementById(elem)
@@ -116,31 +118,31 @@
 
         if (!settingsform.checkValidity()){
           settingsform.reportValidity();
+          return;
         }
-        else {
-          application = settingsform.elements['application'].value
-          streamname = settingsform.elements['streamname'].value
-          streampass = settingsform.elements['password'].value
+        document.getElementById('settings').hidden = false;
+        document.getElementById('userurls').hidden = false;
+        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 = '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 = 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
-        }
+        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>
+</html>