look cool when the stream is offline
このコミットが含まれているのは:
コミット
95b39b7bd8
|
@ -37,12 +37,14 @@ def index(token=None):
|
||||||
except KeyError:
|
except KeyError:
|
||||||
pass
|
pass
|
||||||
use_videojs = bool(request.args.get('videojs', default=int(VIDEOJS_ENABLED_BY_DEFAULT), type=int))
|
use_videojs = bool(request.args.get('videojs', default=int(VIDEOJS_ENABLED_BY_DEFAULT), type=int))
|
||||||
|
online = stream.is_online()
|
||||||
viewership.made_request(token)
|
viewership.made_request(token)
|
||||||
|
|
||||||
response = render_template('index.html',
|
response = render_template('index.html',
|
||||||
token=token,
|
token=token,
|
||||||
use_videojs=use_videojs,
|
use_videojs=use_videojs,
|
||||||
start_number=resolve_segment_offset() if stream.is_online() else 0,
|
online=online,
|
||||||
|
start_number=resolve_segment_offset() if online else 0,
|
||||||
hls_time=CONFIG['stream']['hls_time'])
|
hls_time=CONFIG['stream']['hls_time'])
|
||||||
response = Response(response) # TODO: add a view of the chat only, either as an arg here or another route
|
response = Response(response) # TODO: add a view of the chat only, either as an arg here or another route
|
||||||
response.set_cookie('token', token)
|
response.set_cookie('token', token)
|
||||||
|
|
|
@ -13,12 +13,38 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-bottom: calc(100% * 9 / 16);
|
padding-bottom: calc(100% * 9 / 16);
|
||||||
}
|
}
|
||||||
#stream video, #videojs {
|
#stream > video, #videojs, #offline {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
#offline > div:last-child {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(50% - 0.607em);
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 400%;
|
||||||
|
text-shadow: 0 0 8px #000,0 0 128px #000;
|
||||||
|
}
|
||||||
|
#offline > div:first-child {
|
||||||
|
background-image: url("/static/noise.png");
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
animation: noise-x 7s steps(14) infinite, noise-y 11s linear infinite;
|
||||||
|
background-size: cover;
|
||||||
|
filter: blur(2px) brightness(40%) contrast(70%);
|
||||||
|
}
|
||||||
|
@keyframes noise-x {
|
||||||
|
0% {background-position-x: 0%;}
|
||||||
|
100% {background-position-x: 100%;}
|
||||||
|
}
|
||||||
|
@keyframes noise-y {
|
||||||
|
0% {background-position-y: 0%;}
|
||||||
|
100% {background-position-y: 100%;}
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat-border {
|
#chat-border {
|
||||||
|
|
|
@ -12,7 +12,11 @@ const videojsEnabled = parseInt(document.getElementById("videojs-enabled").value
|
||||||
let firstSegment;
|
let firstSegment;
|
||||||
|
|
||||||
if ( !videojsEnabled ) {
|
if ( !videojsEnabled ) {
|
||||||
firstSegment = parseInt(/segment=(\d+)/.exec(video.src)[1]);
|
try {
|
||||||
|
firstSegment = parseInt(/segment=(\d+)/.exec(video.src)[1]);
|
||||||
|
} catch ( error ) {
|
||||||
|
firstSegment = null; // happens when the stream is offline
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let token, streamTitle, viewerCount, streamStatus, streamLight, refreshButton, radialLoader;
|
let token, streamTitle, viewerCount, streamStatus, streamLight, refreshButton, radialLoader;
|
||||||
|
|
|
@ -62,6 +62,7 @@
|
||||||
<div style="display:flex;flex-flow:row wrap;">
|
<div style="display:flex;flex-flow:row wrap;">
|
||||||
<div class="two-thirds">
|
<div class="two-thirds">
|
||||||
<div id="stream">
|
<div id="stream">
|
||||||
|
{% if online %}
|
||||||
{% if use_videojs %}
|
{% if use_videojs %}
|
||||||
<input id="videojs-enabled" type="hidden" value="1">
|
<input id="videojs-enabled" type="hidden" value="1">
|
||||||
<!-- https://stackoverflow.com/questions/41014197/how-can-i-play-a-m3u8-file-video-using-the-html5-video-element -->
|
<!-- https://stackoverflow.com/questions/41014197/how-can-i-play-a-m3u8-file-video-using-the-html5-video-element -->
|
||||||
|
@ -75,6 +76,11 @@
|
||||||
<input id="videojs-enabled" type="hidden" value="0">
|
<input id="videojs-enabled" type="hidden" value="0">
|
||||||
<video controls autoplay src="{{ url_for('segments', segment=start_number, token=token) }}"></video>
|
<video controls autoplay src="{{ url_for('segments', segment=start_number, token=token) }}"></video>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
{% else %}
|
||||||
|
<input id="videojs-enabled" type="hidden" value="{{ '1' if use_videojs else '0' }}">
|
||||||
|
<video controls autoplay></video>
|
||||||
|
<div id="offline"><div></div><div>OFFLINE</div></div>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
<div id="stream-info-container"><noscript><iframe id="stream-info" src="{{ url_for('stream_info', token=token, embed=1) }}"></iframe></noscript></div>
|
<div id="stream-info-container"><noscript><iframe id="stream-info" src="{{ url_for('stream_info', token=token, embed=1) }}"></iframe></noscript></div>
|
||||||
<div id="source" style="margin: -2.75em 0 1.5em 1.25em;"><a href="https://gitlab.com/ninya9k/onion-livestreaming" target="_blank">source code</a></div>
|
<div id="source" style="margin: -2.75em 0 1.5em 1.25em;"><a href="https://gitlab.com/ninya9k/onion-livestreaming" target="_blank">source code</a></div>
|
||||||
|
|
読み込み中…
新しいイシューから参照