ninya9k
/
anonstream
1
1
フォーク 0
コード イシュー プルリクエスト プロジェクト リリース アクティビティ

only necessary css borders

このコミットが含まれているのは:
n9k 2021-04-16 17:42:03 +00:00
親 93abd7dbf6
コミット e6177d4666
2個のファイルの変更、27行の追加、13行の削除
統計情報を表示 Patchファイルをダウンロード Diffファイルをダウンロード すべてのファイルを展開 すべてのファイルを折り畳む

29
website/static/platform.css
ファイルの表示

@ -5,15 +5,29 @@
border-bottom:1px solid gray;
font-size:125%;
}
.border {
border: 1px solid #434343;
}
.hue-rotate {
filter: hue-rotate(144deg);
}
#stream {
height: calc(100vw * 9 / 16);
position: relative;
padding-bottom: calc(100% * 9 / 16);
}
#stream video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#chat-border {
border-top: 1px solid #434343;
}
#stream-info-container {
border-top: 1px solid #434343;
}
#chat-window iframe {
height: calc(100vh - (100vw * 9 / 16 + 20.5em));
margin-bottom: 0.5em;
@ -72,12 +86,13 @@ form[target="users"] {
filter: revert;
}
@media screen and (min-width:48em) {
#chat-border {
border-top: none;
border-left: 1px solid #434343;
}
#chat-window iframe {
height: calc(100vh - 1px - 10.5em);
}
#stream {
height: calc(100vw * 2 / 3 * 9 / 16); /* 16:9 video taking up 2/3 of the page horizontally */
}
#noscript {
margin-top: calc(-100vw * 2 / 3 * 9 / 16 / 2 - 1ex);
}

11
website/templates/index.html
ファイルの表示

@ -49,27 +49,26 @@
<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">
<div id="stream">
{% if use_videojs %}
<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 -->
<video id="videojs" style="width: 100%;height: 100%;" class="video-js vjs-default-skin vjs-big-play-centered" data-setup='{"controls": true, "autoplay": true }'>
<video id="videojs" 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') }}?segment={{ start_number }}&token={{ token }}">
<video controls autoplay src="{{ url_for('segments') }}?segment={{ start_number }}&token={{ token }}">
</noscript>
{% else %}
<input id="videojs-enabled" type="hidden" value="0">
<video style="width: 100%;height: 100%;" controls autoplay src="{{ url_for('segments') }}?segment={{ start_number }}&token={{ token }}">
<video controls autoplay src="{{ url_for('segments') }}?segment={{ start_number }}&token={{ token }}">
{% endif %}
</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">
<div id="chat-border">
<!-- TODO: mobile tooltip -->
<input id="users-toggle" type="checkbox" style="display: none;">
<div class="banner">