128 行
7.6 KiB
HTML
128 行
7.6 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- https://unpkg.com/video.js@7.12.1/dist/video-js.min.css -->
|
|
<link href="/static/external/video-js.min.css" rel="stylesheet">
|
|
<link href="/static/external/pure-min.css" rel="stylesheet">
|
|
<link href="/static/external/grids-responsive-min.css" rel="stylesheet">
|
|
<link href="/static/platform.css" rel="stylesheet">
|
|
<!-- https://unpkg.com/video.js@7.12.1/dist/video.min.js -->
|
|
<script src="/static/external/video.min.js"></script>
|
|
<!-- https://unpkg.com/@videojs/http-streaming@2.7.1/dist/videojs-http-streaming.min.js -->
|
|
<script src="/static/external/videojs-http-streaming.min.js"></script>
|
|
<noscript>
|
|
<style>
|
|
#videojs {
|
|
display: none;
|
|
}
|
|
#users-container {
|
|
display: none;
|
|
}
|
|
#users-toggle:checked ~ #chat-window #users-container {
|
|
display: revert;
|
|
}
|
|
#users-toggle:checked ~ #chat-window #chat-container {
|
|
display: none;
|
|
}
|
|
#users-toggle:checked + .banner form[target="chat"] {
|
|
display: none;
|
|
}
|
|
#users-toggle:checked + .banner form[target="users"] {
|
|
display: revert;
|
|
}
|
|
/* noscript acting weird with svg */
|
|
#svg-container {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</noscript>
|
|
</head>
|
|
<body class="dark-theme">
|
|
<div class=pure-g>
|
|
<!-- TODO: get rid of PureCSS dependency here; the noscript block on top of the video is too large because the PureCSS files take longer to load -->
|
|
<div class="pure-u-1 pure-u-md-2-3">
|
|
<!-- TODO: choose which elements get borders more cleverly -->
|
|
<div id="stream" class="border">
|
|
<!-- https://stackoverflow.com/questions/41014197/how-can-i-play-a-m3u8-file-video-using-the-html5-video-element -->
|
|
<video id="videojs" style="width: 100%;height: 100%;" class="video-js vjs-default-skin vjs-big-play-centered" data-setup='{"controls": true, "autoplay": true }'>
|
|
<source src="{{ url_for('playlist', token=token) }}" type="application/x-mpegURL">
|
|
</video>
|
|
<noscript>
|
|
<video style="width: 100%;height: 100%;" controls autoplay src="{{ url_for('segments', token=token) }}">
|
|
</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>
|
|
<div class="pure-u-1 pure-u-md-1-3">
|
|
<div class="border">
|
|
<!-- TODO: mobile tooltip -->
|
|
<input id="users-toggle" type="checkbox" style="display: none;">
|
|
<div class="banner">
|
|
<div class="chat-banner-left">
|
|
<label for="users-toggle" title="Users in chat">
|
|
<div id="svg-container">
|
|
<svg class="users-logo" version="1.1" viewBox="0 0 20 20" x="0px" y="0px"><g><path fill-rule="evenodd" d="M7 2a4 4 0 00-1.015 7.87c-.098.64-.651 1.13-1.318 1.13A2.667 2.667 0 002 13.667V18h2v-4.333c0-.368.298-.667.667-.667.908 0 1.732-.363 2.333-.953.601.59 1.425.953 2.333.953.369 0 .667.299.667.667V18h2v-4.333A2.667 2.667 0 009.333 11c-.667 0-1.22-.49-1.318-1.13A4.002 4.002 0 007 2zM5 6a2 2 0 104 0 2 2 0 00-4 0z" clip-rule="evenodd"></path><path d="M14 11.83V18h4v-3.75c0-.69-.56-1.25-1.25-1.25a.75.75 0 01-.75-.75v-.42a3.001 3.001 0 10-2 0z"></path></g>
|
|
</svg>
|
|
</div>
|
|
<noscript><div class="users-logo"><img src="/static/external/users.png"></div></noscript>
|
|
</label>
|
|
</div>
|
|
<span>Stream chat</span>
|
|
<form target="chat" action="/chat" method="get" style="float: right;margin: 0;width: 1em;">
|
|
<input id="token" type="hidden" name="token" value="{{ token }}">
|
|
<input type="checkbox" style="display:none;" name="debug">
|
|
<button class="hue-rotate" title="Refresh chat window" style="font-weight: bold;background: none;border: none;margin: 0;padding: 0;cursor: pointer;" type="submit" class="">🔄</button>
|
|
</form>
|
|
<form target="users" action="/users" method="get" style="float: right;margin: 0;width: 1em;">
|
|
<input id="token" type="hidden" name="token" value="{{ token }}">
|
|
<input type="checkbox" style="display:none;" name="debug">
|
|
<button title="Refresh chat window" style="font-weight: bold;background: none;border: none;margin: 0;padding: 0;cursor: pointer;" type="submit" class="">🔄</button>
|
|
</form>
|
|
</div>
|
|
<div id="chat-window">
|
|
<div id="chat-container"><noscript><iframe id="chat" name="chat" src="{{ url_for('chat_iframe', token=token) }}"></iframe></noscript></div>
|
|
<div id="users-container"><noscript><iframe name="users" src="{{ url_for('users', token=token) }}"></iframe></noscript></div>
|
|
</div>
|
|
<iframe style="height:6em;border-top:1px solid #434343;padding-top:0.5em;" src="{{ url_for('comment_iframe', token=token) }}"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function replaceFrameURL(frameContainerId, newUrl, newId, newName) {
|
|
const frameContainer = document.getElementById(frameContainerId);
|
|
const oldFrame = frameContainer.querySelector("*");
|
|
const newFrame = document.createElement("iframe");
|
|
newFrame.id = newId;
|
|
newFrame.name = newName;
|
|
newFrame.src = newUrl;
|
|
frameContainer.replaceChild(newFrame, oldFrame);
|
|
}
|
|
replaceFrameURL("stream-info-container", "{{ url_for('stream_info', token=token) }}", "stream-info", "");
|
|
replaceFrameURL("chat-container", "{{ url_for('chat_iframe') }}?token={{ token }}&users=1", "chat", "chat");
|
|
|
|
const chat = document.getElementById("chat");
|
|
const usersToggle = document.getElementById("users-toggle");
|
|
usersToggle.onchange = function() {
|
|
const chatMessages = chat.contentDocument.getElementById("messages");
|
|
const chatUsers = chat.contentDocument.getElementById("users");
|
|
if ( chatUsers == null || chatMessages == null )
|
|
return;
|
|
if ( usersToggle.checked ) {
|
|
chatMessages.style.display = "none";
|
|
chatUsers.style.display = null;
|
|
chat.style.transform = "revert";
|
|
} else {
|
|
chatUsers.style.display = "none";
|
|
chatMessages.style.display = null;
|
|
chat.style.transform = null;
|
|
}
|
|
}
|
|
chat.addEventListener("load", usersToggle.onchange);
|
|
</script>
|
|
<script src="/static/platform.js"></script>
|
|
</body>
|
|
</html>
|