LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

updates towards more customization

Browse Source
This commit is contained in:
Ginger Wong 2020-06-18 10:24:54 -07:00
parent d15080db11
commit b39824b8c3
6 changed files with 78 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
webroot/img/logo128.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
webroot/img/logo256.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

83
webroot/index.html
View File

@ -29,12 +29,15 @@ GW TODO:
*/
</script>
<body class="bg-gray-300 text-gray-800">
<main id="app-container" class="flex no-chat">
<div id="app-container" v-cloak class="flex no-chat">
<div id="top-content">
<header class="flex border-b border-gray-900 border-solid shadow-md">
<h1 class="text-gray-400">
😈 {{title}}
<h1 v-cloak class="flex text-gray-400">
<span id="logo-container" class="rounded-full bg-white mx-2 px-1 py-1">
<img class="logo" src="./img/logo128.png">
</span>
<span>{{title}}</span>
</h1>
<div id="user-options-container" class="flex">
@ -61,49 +64,59 @@ GW TODO:
</header>
<div id="video-container" class="flex owncast-video-container bg-black">
<video
class="video-js"
id="video"
preload="auto"
controls
autoplay
playsinline
muted
poster="/thumbnail.png"
data-setup='{"vhs": { "enableLowInitialPlaylist": true, "smoothQualityChange": true, "handlePartialData": true }}'
>
<source src="hls/stream.m3u8" type="application/x-mpegURL"/>
</video>
</div>
<main>
<div id="video-container" class="flex owncast-video-container bg-black">
<video
class="video-js"
id="video"
preload="auto"
controls
autoplay
playsinline
muted
poster="/thumbnail.png"
data-setup='{"vhs": { "enableLowInitialPlaylist": true, "smoothQualityChange": true, "handlePartialData": true }}'
>
<source src="hls/stream.m3u8" type="application/x-mpegURL"/>
</video>
</div>
<div id="stream-info" class="flex font-mono bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid">
<span>{{ streamStatus }}</span>
<span>{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
<span>Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
<span>{{ overallMaxViewerCount }} overall.</span>
</div>
<div id="stream-info" v-cloak class="flex font-mono bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid">
<span>{{ streamStatus }}</span>
<span>{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
<span>Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
<span>{{ overallMaxViewerCount }} overall.</span>
</div>
</main>
<div id="user-content" class="user-content">
<section id="user-content" class="user-content">
<!-- USER CONTENT... -->
<div v-html="description"></div>
</div>
<footer class="flex border-t border-gray-500 border-solid">
<span>
<a href="https://github.com/gabek/owncast" target="_blank">About Owncast</a>
</span>
</footer>
</section>
</div>
<div id="chat-container-wrap" class="flex">
<section id="chat-container-wrap" class="flex">
<div id="user-content-touch" class="user-content">
<!-- USER CONTENT... -->
<div v-html="description"></div>
<!-- need a better way to duplicate footer, use VUE component-->
<footer class="flex border-t border-gray-500 border-solid">
<span>
<a href="https://github.com/gabek/owncast" target="_blank">About Owncast</a>
</span>
</footer>
</div>
<div id="chat-container" class="bg-gray-800">
<div id="chat-container" class="bg-gray-800">
<div id="messages-container">
<div v-for="message in messages">
<div class="message flex">
@ -148,8 +161,8 @@ GW TODO:
</div>
</main>
</section>
</div>
<script src="js/status.js"></script>
<script src="js/usercolors.js"></script>

8
webroot/js/app.js
View File

@ -1,11 +1,5 @@
async function setupApp() {
Vue.filter('plural', function (string, count) {
if (count === 1) {
return string;
} else {
return string + "s";
}
})
Vue.filter('plural', pluralize);
window.app = new Vue({

9
webroot/js/utils.js
View File

@ -47,6 +47,15 @@ function addNewlines(str) {
return str.replace(/(?:\r\n|\r|\n)/g, '<br />');
}
function pluralize(string, count) {
if (count === 1) {
return string;
} else {
return string + "s";
}
}
// Trying to determine if browser is mobile/tablet.
// Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
function hasTouchScreen() {

22
webroot/styles/layout.css
View File

@ -1,6 +1,6 @@
/* variables */
:root {
--header-height: 3em;
--header-height: 3.5em;
--right-col-width: 24em;
--video-container-height: 50vh;
--header-bg-color: rgba(20,0,40,1);
@ -19,6 +19,10 @@ ul {
list-style: unset;
}
a:hover {
text-decoration: underline;
}
[v-cloak] { visibility: hidden; }
::-webkit-scrollbar {
width: 0px;
@ -52,7 +56,15 @@ header h1 {
text-transform: uppercase;
padding: .5em;
white-space: nowrap;
width: 20em;
/* width: 20em; */
justify-content: flex-start;
align-items: center;
flex-direction: row;
}
img.logo {
height: 1.2em;
width: 1.2em;
display: inline-block;
}
#chat-toggle {
@ -64,6 +76,12 @@ header h1 {
align-items: center;
}
footer {
flex-direction: row;
justify-content: center;
font-size: .75em;
padding: 2em 0;
}
/* ************************************************8 */