LogalDeveloper/owncast
0
Fork 0
Code Activity

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
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> </script>
<body class="bg-gray-300 text-gray-800"> <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"> <div id="top-content">
<header class="flex border-b border-gray-900 border-solid shadow-md"> <header class="flex border-b border-gray-900 border-solid shadow-md">
<h1 class="text-gray-400"> <h1 v-cloak class="flex text-gray-400">
😈 {{title}} <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> </h1>
<div id="user-options-container" class="flex"> <div id="user-options-container" class="flex">
@@ -61,49 +64,59 @@ GW TODO:
</header> </header>
<main>
<div id="video-container" class="flex owncast-video-container bg-black"> <div id="video-container" class="flex owncast-video-container bg-black">
<video <video
class="video-js" class="video-js"
id="video" id="video"
preload="auto" preload="auto"
controls controls
autoplay autoplay
playsinline playsinline
muted muted
poster="/thumbnail.png" poster="/thumbnail.png"
data-setup='{"vhs": { "enableLowInitialPlaylist": true, "smoothQualityChange": true, "handlePartialData": true }}' data-setup='{"vhs": { "enableLowInitialPlaylist": true, "smoothQualityChange": true, "handlePartialData": true }}'
> >
<source src="hls/stream.m3u8" type="application/x-mpegURL"/> <source src="hls/stream.m3u8" type="application/x-mpegURL"/>
</video> </video>
</div> </div>
<div id="stream-info" class="flex font-mono bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid"> <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>{{ streamStatus }}</span>
<span>{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span> <span>{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
<span>Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span> <span>Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
<span>{{ overallMaxViewerCount }} overall.</span> <span>{{ overallMaxViewerCount }} overall.</span>
</div> </div>
</main>
<div id="user-content" class="user-content"> <section id="user-content" class="user-content">
<!-- USER CONTENT... --> <!-- USER CONTENT... -->
<div v-html="description"></div> <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>
<div id="chat-container-wrap" class="flex"> <section id="chat-container-wrap" class="flex">
<div id="user-content-touch" class="user-content"> <div id="user-content-touch" class="user-content">
<!-- USER CONTENT... --> <!-- USER CONTENT... -->
<div v-html="description"></div> <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>
<div id="chat-container" class="bg-gray-800"> <div id="chat-container" class="bg-gray-800">
<div id="messages-container"> <div id="messages-container">
<div v-for="message in messages"> <div v-for="message in messages">
<div class="message flex"> <div class="message flex">
@@ -148,8 +161,8 @@ GW TODO:
</div> </section>
</main> </div>
<script src="js/status.js"></script> <script src="js/status.js"></script>
<script src="js/usercolors.js"></script> <script src="js/usercolors.js"></script>

8
webroot/js/app.js
View File

@@ -1,11 +1,5 @@
async function setupApp() { async function setupApp() {
Vue.filter('plural', function (string, count) { Vue.filter('plural', pluralize);
if (count === 1) {
return string;
} else {
return string + "s";
}
})
window.app = new Vue({ 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 />'); 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. // Trying to determine if browser is mobile/tablet.
// Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent // Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
function hasTouchScreen() { function hasTouchScreen() {

22
webroot/styles/layout.css
View File

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