fatchan
/
stream
mirror of https://gitgud.io/fatchan/stream.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

IRC frame, layout and style improvement. mobile goes vertical.

Browse Source 
ircd conf changed to allow @* channel names, and the iframe url gets adjusted accordingly, just like the stream links.
master
Thomas Lynch 2 years ago
parent 4982da053a
commit 73fafa6b66
No known key found for this signature in database
GPG Key ID: FBAB081F9B6E14B2
2 changed files with 48 additions and 14 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 31
      nginx/www/stream/dash.html
  2. 31
      nginx/www/stream/hls.html

31
nginx/www/stream/dash.html
Unescape View File

@ -7,13 +7,23 @@
<link href="/css/video-js.min.css" rel="stylesheet">
<script src="/js/video.min.js"></script>
<style>
:root{--text-color:#c5c8c6;--bg-color:#1d1f21}
@media (prefers-color-scheme:light){:root{--text-color:#333;--bg-color:#EEE}}
body{display:flex;flex-direction:column;background-color:var(--bg-color);color:var(--text-color);font-family:Arial,Helvetica,sans-serif;text-align:center;height: calc(100vh - 20px);margin: 0;padding: 10px;}
.main{width:100%;height:100%;display:flex;align-items:center;max-height:90vh;}
#footer{margin-top:auto;padding-top:10px;}
:root{--text-color:#c5c8c6;--bg-color:black}
body{overflow: hidden;display:flex;flex-direction:column;background-color:var(--bg-color);color:var(--text-color);font-family:Arial,Helvetica,sans-serif;text-align:center;height: 100vh;margin: 0;padding: 0;}
body::before{ position: absolute; width: 100%; height: 100%; content: ""; z-index:-1; background: radial-gradient(circle at center,#1bd459 0,rgba(27,212,89,.88) 58%,rgba(21,235,92,.57) 80%,rgba(19,94,29,.27) 93%,rgba(10,23,12,0) 100%); opacity:.2;}
body::after{ position: absolute; width: 100%; height: 100%; content: ""; z-index:-1; background: linear-gradient(180deg,hsla(0,0%,100%,0),hsla(0,0%,100%,0) 50%,rgba(0,0,0,.2) 70%,rgba(0,0,0,.6)); background-size: 100% .3rem; opacity:.5;}
.main{width:100%;height:100%;display:flex;align-items:center;max-height: calc(100vh - 100px);}
#footer{margin-top:auto;padding:10px;width: calc(100vw - 400px);}
video{max-width:100%;max-height:100%;display:flex;margin:0 auto;}
a,a:visited {color:unset;}
#chat{width: 400px;height: 100vh;align-self: start;}
@media only screen and (max-width:600px) {
#chat{width: 100%;max-width: 100%;}
.main{flex-direction: column;}
#video{width: 100%;height: 40vh;max-height: 40vh!important;}
body::before{width: calc(100% - 20px); height: calc(100% - 20px);}
body::after{width: calc(100% - 20px); height: calc(100% - 20px);}
#footer{width: 100%}
}
</style>
</head>
<body>
@ -26,6 +36,11 @@ a,a:visited {color:unset;}
style="max-width:100%;max-height:100%;display: flex;margin: 0 auto;"
data-setup='{}'>
</video>
<iframe id="chat"
title="irc"
frameBorder="0"
src="https://irc.fatpeople.lol/#stream">
</iframe>
</div>
<div id="footer">
<div>
@ -51,6 +66,8 @@ document
a.search = source;
}
});
const chat = document.getElementById('chat');
chat.src = chat.src.replace('@tom', `@${source}`);
window.HELP_IMPROVE_VIDEOJS = false;
const player = videojs('video', {
html5: {
@ -61,8 +78,8 @@ const player = videojs('video', {
autoplay: 'any',
});
player.src({
src: `http://stream.loki/dash/${source}.mpd`,
type: 'application/dash+xml',
src: `http://stream.loki/dash/${source}.m3u8`,
type: 'application/',
});
player.play();
setInterval(() => {

31
nginx/www/stream/hls.html
Unescape View File

@ -7,13 +7,23 @@
<link href="/css/video-js.min.css" rel="stylesheet">
<script src="/js/video.min.js"></script>
<style>
:root{--text-color:#c5c8c6;--bg-color:#1d1f21}
@media (prefers-color-scheme:light){:root{--text-color:#333;--bg-color:#EEE}}
body{display:flex;flex-direction:column;background-color:var(--bg-color);color:var(--text-color);font-family:Arial,Helvetica,sans-serif;text-align:center;height: calc(100vh - 20px);margin: 0;padding: 10px;}
.main{width:100%;height:100%;display:flex;align-items:center;max-height:90vh;}
#footer{margin-top:auto;padding-top:10px;}
:root{--text-color:#c5c8c6;--bg-color:black}
body{overflow: hidden;display:flex;flex-direction:column;background-color:var(--bg-color);color:var(--text-color);font-family:Arial,Helvetica,sans-serif;text-align:center;height: 100vh;margin: 0;padding: 0;}
body::before{ position: absolute; width: 100%; height: 100%; content: ""; z-index:-1; background: radial-gradient(circle at center,#1bd459 0,rgba(27,212,89,.88) 58%,rgba(21,235,92,.57) 80%,rgba(19,94,29,.27) 93%,rgba(10,23,12,0) 100%); opacity:.2;}
body::after{ position: absolute; width: 100%; height: 100%; content: ""; z-index:-1; background: linear-gradient(180deg,hsla(0,0%,100%,0),hsla(0,0%,100%,0) 50%,rgba(0,0,0,.2) 70%,rgba(0,0,0,.6)); background-size: 100% .3rem; opacity:.5;}
.main{width:100%;height:100%;display:flex;align-items:center;max-height: calc(100vh - 100px);}
#footer{margin-top:auto;padding:10px;width: calc(100vw - 400px);}
video{max-width:100%;max-height:100%;display:flex;margin:0 auto;}
a,a:visited {color:unset;}
#chat{width: 400px;height: 100vh;align-self: start;}
@media only screen and (max-width:600px) {
#chat{width: 100%;max-width: 100%;}
.main{flex-direction: column;}
#video{width: 100%;height: 40vh;max-height: 40vh!important;}
body::before{width: calc(100% - 20px); height: calc(100% - 20px);}
body::after{width: calc(100% - 20px); height: calc(100% - 20px);}
#footer{width: 100%}
}
</style>
</head>
<body>
@ -26,6 +36,11 @@ a,a:visited {color:unset;}
style="max-width:100%;max-height:100%;display: flex;margin: 0 auto;"
data-setup='{}'>
</video>
<iframe id="chat"
title="irc"
frameBorder="0"
src="https://irc.fatpeople.lol/#@tom">
</iframe>
</div>
<div id="footer">
<div>
@ -51,6 +66,8 @@ document
a.search = source;
}
});
const chat = document.getElementById('chat');
chat.src = chat.src.replace('@tom', `@${source}`);
window.HELP_IMPROVE_VIDEOJS = false;
const player = videojs('video', {
html5: {
@ -61,8 +78,8 @@ const player = videojs('video', {
autoplay: 'any',
});
player.src({
src: `http://stream.loki/dash/${source}.mpd`,
type: 'application/dash+xml',
src: `http://stream.loki/hls/${source}.m3u8`,
type: 'application/vnd.apple.mpegurl',
});
player.play();
setInterval(() => {

Write Preview
Loading…
Cancel
Save