mirror of
https://github.com/owncast/owncast.git
synced 2024-10-22 20:45:58 +03:00
updates towards more customization
This commit is contained in:
Ginger Wong
parent
d15080db11
commit
b39824b8c3
6 changed files with 78 additions and 44 deletions
BIN
webroot/img/logo128.png
Normal file
BIN
webroot/img/logo128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
BIN
webroot/img/logo256.png
Normal file
BIN
webroot/img/logo256.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue