Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Frontend Improvements #11

Merged
merged 6 commits into from
Dec 6, 2021
Merged

Frontend Improvements #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8e41f00
add OBS setup helper page
z-bsod Dec 5, 2021
2181f78
add rtmp and http url to player page
z-bsod Dec 5, 2021
d1931bb
add player URLs to setup_helper
z-bsod Dec 5, 2021
bb75416
change url display; add copy to clipboard function; css changes
z-bsod Dec 6, 2021
4a57a4d
use different sample password
z-bsod Dec 6, 2021
7fa201e
make example config work ootb with docker-compose.default.yml
z-bsod Dec 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions config/frontend/config.example.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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>
Loading