Skip to content

Commit

Permalink
Frontend Improvements (#11)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@z-bsod
z-bsod committed Dec 6, 2021
1 parent 698cae4 commit 55f5799
Show file tree
Hide file tree
Showing 7 changed files with 309 additions and 15 deletions.
6 changes: 3 additions & 3 deletions config/frontend/config.example.yml
View file
@@ -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: "© 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
Expand Down
2 changes: 1 addition & 1 deletion docker-compose.default.yml
View file
Expand Up @@ -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/.
Expand Down
9 changes: 9 additions & 0 deletions frontend/app/frontend.py
View file
Expand Up @@ -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
54 changes: 48 additions & 6 deletions frontend/app/static/style.default.css
View file
Expand Up @@ -32,6 +32,11 @@ header h2 {
margin: 2px;
}

header h2 a {
font-style: normal;
color: #555;
}

main {
clear: both;
margin-left: auto;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -191,6 +230,9 @@ video#player {
header h2 {
color: #777;
}
header h2 a {
color: #999;
}
footer {
color: #999;
}
Expand All @@ -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;
}
Expand Down
46 changes: 41 additions & 5 deletions frontend/app/templates/default/main.html.j2
View file
Expand Up @@ -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 == [] %}
Expand All @@ -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>
Expand All @@ -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>
61 changes: 61 additions & 0 deletions frontend/app/templates/default/player.html.j2
View file
Expand Up @@ -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()) {
Expand All @@ -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>

0 comments on commit 55f5799

Please sign in to comment.