mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-27 09:45:36 +03:00
Code Issues Projects Releases Packages Wiki Activity
owncast/webroot/index.html

209 lines
8.1 KiB
HTML
Raw Normal View History

calc resize on android on message field focus
2020-06-15 23:43:41 +03:00
<html>
Some basic positioning of HTML
2020-06-02 09:50:32 +03:00
<head>
<meta charset="UTF-8" />
misc
2020-06-15 04:20:04 +03:00
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
Add favicon(s). Closes #75
2020-07-20 08:27:42 +03:00
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
set up localstorage-able items
2020-06-14 09:38:09 +03:00
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
Point to production build of vue
2020-07-21 08:03:02 +03:00
<script src="//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
Update videojs
2020-07-21 07:58:40 +03:00
<link href="//unpkg.com/video.js@7.9.2/dist/video-js.css" rel="stylesheet">
set up localstorage-able items
2020-06-14 09:38:09 +03:00
<link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet" />
Update videojs
2020-07-21 07:58:40 +03:00
<script src="//unpkg.com/video.js@7.9.2/dist/video.js"></script>
Add ability to populate the content area in the page with a markdown file
2020-06-18 06:20:28 +03:00
<script src="//unpkg.com/showdown/dist/showdown.min.js"></script>
Support links and embeds in the chat
2020-06-03 01:37:36 +03:00
<script src="vendor/autolink.js"></script>
set up components and icons for optional creator's social pages; add airplay icon
2020-06-21 09:41:13 +03:00
set up localstorage-able items
2020-06-14 09:38:09 +03:00
<link href="./styles/layout.css" rel="stylesheet" />
Some basic positioning of HTML
2020-06-02 09:50:32 +03:00
</head>
mobile hackery
2020-06-16 01:45:55 +03:00
update colors using tailwind styles
2020-06-15 09:12:58 +03:00
<body class="bg-gray-300 text-gray-800">
Show chat by default. Closes #72. Show placeholder text that no registration is needed. Closes #73
2020-07-20 01:14:51 +03:00
<div id="app-container" class="flex chat">
integrate desktop styles. clean up later
2020-06-16 12:09:29 +03:00
<div id="top-content">
markup and styles for simple mobile only
2020-06-16 09:32:26 +03:00
<header class="flex border-b border-gray-900 border-solid shadow-md">
updates towards more customization
2020-06-18 20:24:54 +03:00
<h1 v-cloak class="flex text-gray-400">
header adjustments for small screens; adjust to new config structure;
2020-06-30 12:36:10 +03:00
<span
id="logo-container"
class="rounded-full bg-white px-1 py-1"
v-bind:style="{ backgroundImage: 'url(' + logo + ')' }"
>
<img class="logo visually-hidden" v-bind:src="logo">
updates towards more customization
2020-06-18 20:24:54 +03:00
</span>
header adjustments for small screens; adjust to new config structure;
2020-06-30 12:36:10 +03:00
<span class="instance-title">{{title}}</span>
markup and styles for simple mobile only
2020-06-16 09:32:26 +03:00
</h1>
<div id="user-options-container" class="flex">
<div id="user-info">
<div id="user-info-display" title="Click to update user name" class="flex">
generate avatar img with util
2020-07-05 08:34:00 +03:00
<img
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
alt=""
id="username-avatar"
class="rounded-full bg-black bg-opacity-50 border border-solid border-gray-700"
/>
markup and styles for simple mobile only
2020-06-16 09:32:26 +03:00
<span id="username-display" class="text-indigo-600"></span>
</div>
<div id="user-info-change">
<input type="text"
id="username-change-input"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight focus:bg-white"
value="Random Username 123"
maxlength="100"
placeholder="Update username"
>
<button id="button-update-username" class="bg-blue-500 hover:bg-blue-700 text-white py-1 px-1 rounded user-btn">Update</button>
<button id="button-cancel-change" class="bg-gray-900 hover:bg-gray-800 py-1 px-2 rounded user-btn text-white text-opacity-50" title="cancel">X</button>
</div>
progress. implement chat toggling
2020-06-14 06:15:31 +03:00
</div>
markup and styles for simple mobile only
2020-06-16 09:32:26 +03:00
<button type="button" id="chat-toggle" class="flex bg-gray-800 hover:bg-gray-700">💬</button>
progress. implement chat toggling
2020-06-14 06:15:31 +03:00
</div>
markup and styles for simple mobile only
2020-06-16 09:32:26 +03:00
</header>
update offline flow an stream status timer flow
2020-07-20 02:06:55 +03:00
<main v-bind:class="{ online: playerOn }">
App Javascript refactor (#56) * objectify app away from window. wip * fix messaging obj binding; put logo behind video; fix /null issue with temp logo image * first pass at js refactor * remove unused files that had been consolidated during refactor * set up vue before getting config * add a few comments * dont use big arrow function, just bind, for safari * add airplay after instantiating video; check if input exists before disabling it;: * only set poster on pause during playback, and onEnded; take out sample videoJS tech options * disable chat after 5mins after going offline * move 'online' class to video container as it conflicts with dynamically change classnames from non-vue sources * disable chat based on lastdisconnecttime * fix typo; do offline mode onEnded instead of status offline * move offline ui display things to offline mode function; move poster setting on pause to main app to keep player obj cleaner; use opacity to hide video element on offline as sometimes control bars may still linger with vis:hidden * fixes' * don't autoplay. just show play button when stream is online so that it's easier to start playign without looking for the unmute button * clean up console logs Co-authored-by: Gabe Kangas <gabek@real-ity.com>
2020-07-16 22:17:05 +03:00
<div
id="video-container"
class="flex owncast-video-container bg-black"
v-bind:style="{ backgroundImage: 'url(' + logoLarge + ')' }"
>
updates towards more customization
2020-06-18 20:24:54 +03:00
<video
App Javascript refactor (#56) * objectify app away from window. wip * fix messaging obj binding; put logo behind video; fix /null issue with temp logo image * first pass at js refactor * remove unused files that had been consolidated during refactor * set up vue before getting config * add a few comments * dont use big arrow function, just bind, for safari * add airplay after instantiating video; check if input exists before disabling it;: * only set poster on pause during playback, and onEnded; take out sample videoJS tech options * disable chat after 5mins after going offline * move 'online' class to video container as it conflicts with dynamically change classnames from non-vue sources * disable chat based on lastdisconnecttime * fix typo; do offline mode onEnded instead of status offline * move offline ui display things to offline mode function; move poster setting on pause to main app to keep player obj cleaner; use opacity to hide video element on offline as sometimes control bars may still linger with vis:hidden * fixes' * don't autoplay. just show play button when stream is online so that it's easier to start playign without looking for the unmute button * clean up console logs Co-authored-by: Gabe Kangas <gabek@real-ity.com>
2020-07-16 22:17:05 +03:00
class="video-js vjs-big-play-centered"
updates towards more customization
2020-06-18 20:24:54 +03:00
id="video"
preload="auto"
controls
playsinline
>
</video>
</div>
initial chat form layout
2020-06-04 13:15:27 +03:00
Use Vuejs for web UI
2020-06-02 23:56:59 +03:00
componentize user info
2020-06-29 03:15:53 +03:00
<section id="stream-info" aria-label="Stream status" v-cloak class="flex font-mono bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid">
updates towards more customization
2020-06-18 20:24:54 +03:00
<span>{{ streamStatus }}</span>
Hide viewer stats when in offline mode. Closes #66
2020-07-20 03:28:48 +03:00
<span v-if="isOnline">{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
<span v-if="isOnline">Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
<span v-if="isOnline">{{ overallMaxViewerCount }} overall.</span>
componentize user info
2020-06-29 03:15:53 +03:00
</section>
updates towards more customization
2020-06-18 20:24:54 +03:00
</main>
initial chat form layout
2020-06-04 13:15:27 +03:00
simplified layout updates based on only media queries
2020-07-19 03:15:52 +03:00
<section id="user-content" aria-label="User information">
componentize user info
2020-06-29 03:15:53 +03:00
<user-details
v-bind:logo="logo"
v-bind:platforms="socialHandles"
v-bind:summary="summary"
v-bind:tags="tags"
>{{streamerName}}</user-details>
header adjustments for small screens; adjust to new config structure;
2020-06-30 12:36:10 +03:00
low hanging cleanup for extrauser content
2020-07-05 11:29:48 +03:00
<div v-html="extraUserContent" class="extra-user-content">{{extraUserContent}}</div>
header adjustments for small screens; adjust to new config structure;
2020-06-30 12:36:10 +03:00
updates towards more customization
2020-06-18 20:24:54 +03:00
</section>
header adjustments for small screens; adjust to new config structure;
2020-06-30 12:36:10 +03:00
simplified layout updates based on only media queries
2020-07-19 03:15:52 +03:00
<owncast-footer v-bind:app-version="appVersion"></owncast-footer>
user content general layout
2020-06-21 11:31:08 +03:00
updates towards more customization
2020-06-18 20:24:54 +03:00
</div>
videojs video sizing hacks, other css
2020-06-15 02:32:39 +03:00
updates towards more customization
2020-06-18 20:24:54 +03:00
<section id="chat-container-wrap" class="flex">
<div id="chat-container" class="bg-gray-800">
markup and styles for simple mobile only
2020-06-16 09:32:26 +03:00
<div id="messages-container">
update offline flow an stream status timer flow
2020-07-20 02:06:55 +03:00
<div v-for="message in messages" v-cloak>
markup and styles for simple mobile only
2020-06-16 09:32:26 +03:00
<div class="message flex">
Create padding around chat avatars and the colored container
2020-07-20 08:57:42 +03:00
<div class="message-avatar rounded-full flex items-center justify-center" v-bind:style="{ backgroundColor: message.userColor() }">
<img
v-bind:src="message.image"
/>
</div>
markup and styles for simple mobile only
2020-06-16 09:32:26 +03:00
<div class="message-content">
<p class="message-author text-white font-bold">{{ message.author }}</p>
<p class="message-text text-gray-400 font-thin " v-html="message.formatText()"></p>
</div>
initial layout
2020-06-04 11:31:47 +03:00
</div>
Add endpoint for returning stream status
2020-06-02 10:27:54 +03:00
</div>
markup and styles for simple mobile only
2020-06-16 09:32:26 +03:00
</div>
<div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid">
<form id="message-form" class="flex">
Make the entire web page wrapped in a vue object
2020-06-17 04:36:11 +03:00
<input type="hidden" name="inputAuthor" id="self-message-author" />
- fix chrome mobile form focus bug by specifying class. when form focuses media query widths change and may think portrait is in landcape and therefore hide the form. - cleanup now unused methods - jump to bottom from vue prop listener
2020-06-18 10:06:10 +03:00
markup and styles for simple mobile only
2020-06-16 09:32:26 +03:00
<textarea
Disable text input by default
2020-07-20 03:20:26 +03:00
disabled
markup and styles for simple mobile only
2020-06-16 09:32:26 +03:00
id="message-body-form"
placeholder="Message"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white"
></textarea>
<div id="message-form-actions" class="flex">
<span id="message-form-warning" class="text-red-600 text-xs"></span>
<button
id="button-submit-message"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
take out unused event listeners; layout fixes
2020-06-17 20:39:13 +03:00
> Chat
markup and styles for simple mobile only
2020-06-16 09:32:26 +03:00
</button>
</div>
</form>
Some basic positioning of HTML
2020-06-02 09:50:32 +03:00
</div>
initial layout
2020-06-04 11:31:47 +03:00
</div>
updates towards more customization
2020-06-18 20:24:54 +03:00
</section>
App Javascript refactor (#56) * objectify app away from window. wip * fix messaging obj binding; put logo behind video; fix /null issue with temp logo image * first pass at js refactor * remove unused files that had been consolidated during refactor * set up vue before getting config * add a few comments * dont use big arrow function, just bind, for safari * add airplay after instantiating video; check if input exists before disabling it;: * only set poster on pause during playback, and onEnded; take out sample videoJS tech options * disable chat after 5mins after going offline * move 'online' class to video container as it conflicts with dynamically change classnames from non-vue sources * disable chat based on lastdisconnecttime * fix typo; do offline mode onEnded instead of status offline * move offline ui display things to offline mode function; move poster setting on pause to main app to keep player obj cleaner; use opacity to hide video element on offline as sometimes control bars may still linger with vis:hidden * fixes' * don't autoplay. just show play button when stream is online so that it's easier to start playign without looking for the unmute button * clean up console logs Co-authored-by: Gabe Kangas <gabek@real-ity.com>
2020-07-16 22:17:05 +03:00
updates towards more customization
2020-06-18 20:24:54 +03:00
</div>
WIP
2020-05-24 03:57:49 +03:00
Add color hash for user avatar backgrounds
2020-06-15 23:41:37 +03:00
<script src="js/usercolors.js"></script>
set up localstorage-able items
2020-06-14 09:38:09 +03:00
<script src="js/utils.js"></script>
initial layout
2020-06-04 11:31:47 +03:00
<script src="js/message.js"></script>
clean up social code
2020-06-21 10:07:57 +03:00
<script src="js/social.js"></script>
header adjustments for small screens; adjust to new config structure;
2020-06-30 12:36:10 +03:00
<script src="js/components.js"></script>
App Javascript refactor (#56) * objectify app away from window. wip * fix messaging obj binding; put logo behind video; fix /null issue with temp logo image * first pass at js refactor * remove unused files that had been consolidated during refactor * set up vue before getting config * add a few comments * dont use big arrow function, just bind, for safari * add airplay after instantiating video; check if input exists before disabling it;: * only set poster on pause during playback, and onEnded; take out sample videoJS tech options * disable chat after 5mins after going offline * move 'online' class to video container as it conflicts with dynamically change classnames from non-vue sources * disable chat based on lastdisconnecttime * fix typo; do offline mode onEnded instead of status offline * move offline ui display things to offline mode function; move poster setting on pause to main app to keep player obj cleaner; use opacity to hide video element on offline as sometimes control bars may still linger with vis:hidden * fixes' * don't autoplay. just show play button when stream is online so that it's easier to start playign without looking for the unmute button * clean up console logs Co-authored-by: Gabe Kangas <gabek@real-ity.com>
2020-07-16 22:17:05 +03:00
<script src="js/player.js"></script>
initial layout
2020-06-04 11:31:47 +03:00
<script src="js/app.js"></script>
App Javascript refactor (#56) * objectify app away from window. wip * fix messaging obj binding; put logo behind video; fix /null issue with temp logo image * first pass at js refactor * remove unused files that had been consolidated during refactor * set up vue before getting config * add a few comments * dont use big arrow function, just bind, for safari * add airplay after instantiating video; check if input exists before disabling it;: * only set poster on pause during playback, and onEnded; take out sample videoJS tech options * disable chat after 5mins after going offline * move 'online' class to video container as it conflicts with dynamically change classnames from non-vue sources * disable chat based on lastdisconnecttime * fix typo; do offline mode onEnded instead of status offline * move offline ui display things to offline mode function; move poster setting on pause to main app to keep player obj cleaner; use opacity to hide video element on offline as sometimes control bars may still linger with vis:hidden * fixes' * don't autoplay. just show play button when stream is online so that it's easier to start playign without looking for the unmute button * clean up console logs Co-authored-by: Gabe Kangas <gabek@real-ity.com>
2020-07-16 22:17:05 +03:00
<script>
(function () {
const app = new Owncast();
app.init();
})();
</script>
barebones noscript layout
2020-07-19 03:44:18 +03:00
<noscript>
<style>
[v-cloak] { display: none; }
.noscript {
text-align: center;
padding: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.noscript a {
display: inline;
color: blue;
text-decoration: underline;
}
</style>
<div class="noscript">
<img src="https://github.com/gabek/owncast/raw/master/doc/logo.png">
<br/>
<p>
This <a href="https://github.com/gabek/owncast" target="_blank">Owncast</a> stream requires Javascript to play.
</p>
</div>
</noscript>
initial layout
2020-06-04 11:31:47 +03:00
</body>
</html>
Reference in a new issue Copy permalink