pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

updates towards more customization

pull/5/head
Ginger Wong 5 years ago
parent
d15080db11
commit
b39824b8c3
6 changed files with 78 additions and 44 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. BIN
      webroot/img/logo128.png
  2. BIN
      webroot/img/logo256.png
  3. 83
      webroot/index.html
  4. 8
      webroot/js/app.js
  5. 9
      webroot/js/utils.js
  6. 22
      webroot/styles/layout.css

BIN
webroot/img/logo128.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
webroot/img/logo256.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

83
webroot/index.html
Unescape View File

@ -29,12 +29,15 @@ GW TODO: @@ -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: @@ -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>
</div>
<div id="chat-container-wrap" class="flex">
<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>
<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: @@ -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
Unescape View File

@ -1,11 +1,5 @@ @@ -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
Unescape View File

@ -47,6 +47,15 @@ function addNewlines(str) { @@ -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
Unescape View File

@ -1,6 +1,6 @@ @@ -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 { @@ -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 { @@ -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 { @@ -64,6 +76,12 @@ header h1 {
align-items: center;
}
footer {
flex-direction: row;
justify-content: center;
font-size: .75em;
padding: 2em 0;
}
/* ************************************************8 */

Write Preview
Loading…
Cancel
Save