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

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>