Ginger Wong
5 years ago
4 changed files with 73 additions and 294 deletions
@ -1,221 +1,85 @@ |
|||||||
<html> |
<!-- |
||||||
<head> |
todo |
||||||
<meta charset="UTF-8" /> |
- fix / consolidate responsive styles |
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> |
- standalone video.html |
||||||
|
|
||||||
<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"> |
|
||||||
|
|
||||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> |
--> |
||||||
<script src="//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script> |
|
||||||
|
|
||||||
<link href="//unpkg.com/video.js@7.9.2/dist/video-js.css" rel="stylesheet"> |
<html> |
||||||
<link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet" /> |
<head> |
||||||
<script src="//unpkg.com/video.js@7.9.2/dist/video.js"></script> |
<meta charset="UTF-8" /> |
||||||
<script src="//unpkg.com/showdown/dist/showdown.min.js"></script> |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> |
||||||
|
|
||||||
|
<link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png"> |
||||||
|
<link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png"> |
||||||
|
<link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-icon-72x72.png"> |
||||||
|
<link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-icon-76x76.png"> |
||||||
|
<link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-icon-114x114.png"> |
||||||
|
<link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-icon-120x120.png"> |
||||||
|
<link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-icon-144x144.png"> |
||||||
|
<link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-icon-152x152.png"> |
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-icon-180x180.png"> |
||||||
|
<link rel="icon" type="image/png" sizes="192x192" href="/img/favicon/android-icon-192x192.png"> |
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"> |
||||||
|
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96x96.png"> |
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png"> |
||||||
|
<link rel="manifest" href="/manifest.json"> |
||||||
|
<meta name="msapplication-TileColor" content="#ffffff"> |
||||||
|
<meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png"> |
||||||
|
<meta name="theme-color" content="#ffffff"> |
||||||
|
|
||||||
|
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> |
||||||
|
|
||||||
|
<link href="//unpkg.com/video.js@7.9.2/dist/video-js.css" rel="stylesheet"> |
||||||
|
<link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet" /> |
||||||
|
<script src="//unpkg.com/video.js@7.9.2/dist/video.js"></script> |
||||||
|
<script src="//unpkg.com/showdown/dist/showdown.min.js"></script> |
||||||
|
|
||||||
|
<link href="./styles/app.css" rel="stylesheet" /> |
||||||
|
<link href="./styles/video.css" rel="stylesheet" /> |
||||||
|
<link href="./styles/chat.css" rel="stylesheet" /> |
||||||
|
<link href="./styles/user-content.css" rel="stylesheet" /> |
||||||
|
|
||||||
|
</head> |
||||||
|
|
||||||
<link href="./styles/layout.css" rel="stylesheet" /> |
|
||||||
</head> |
|
||||||
|
|
||||||
<body class="bg-gray-300 text-gray-800"> |
<body class="bg-gray-300 text-gray-800"> |
||||||
|
<div id="app"></div> |
||||||
|
|
||||||
<div id="app-container" class="flex chat"> |
|
||||||
<div id="top-content"> |
|
||||||
<header class="flex border-b border-gray-900 border-solid shadow-md"> |
|
||||||
<h1 v-cloak class="flex text-gray-400"> |
|
||||||
<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"> |
|
||||||
</span> |
|
||||||
<span class="instance-title">{{title}}</span> |
|
||||||
</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"> |
|
||||||
<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" |
|
||||||
/> |
|
||||||
<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> |
|
||||||
</div> |
|
||||||
<button type="button" id="chat-toggle" class="flex bg-gray-800 hover:bg-gray-700">💬</button> |
|
||||||
</div> |
|
||||||
|
|
||||||
</header> |
|
||||||
|
|
||||||
<main v-bind:class="{ online: playerOn }"> |
|
||||||
<div |
|
||||||
id="video-container" |
|
||||||
class="flex owncast-video-container bg-black" |
|
||||||
v-bind:style="{ backgroundImage: 'url(' + logoLarge + ')' }" |
|
||||||
> |
|
||||||
<video |
|
||||||
class="video-js vjs-big-play-centered" |
|
||||||
id="video" |
|
||||||
preload="auto" |
|
||||||
controls |
|
||||||
playsinline |
|
||||||
> |
|
||||||
</video> |
|
||||||
</div> |
|
||||||
|
|
||||||
|
|
||||||
<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"> |
|
||||||
<span>{{ streamStatus }}</span> |
|
||||||
<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> |
|
||||||
</section> |
|
||||||
</main> |
|
||||||
|
|
||||||
<section id="user-content" aria-label="User information"> |
|
||||||
<user-details |
|
||||||
v-bind:logo="logo" |
|
||||||
v-bind:platforms="socialHandles" |
|
||||||
v-bind:summary="summary" |
|
||||||
v-bind:tags="tags" |
|
||||||
>{{streamerName}}</user-details> |
|
||||||
|
|
||||||
<div v-html="extraUserContent" class="extra-user-content">{{extraUserContent}}</div> |
|
||||||
|
|
||||||
</section> |
|
||||||
|
|
||||||
<owncast-footer v-bind:app-version="appVersion"></owncast-footer> |
|
||||||
|
|
||||||
</div> |
|
||||||
|
|
||||||
<section id="chat-container-wrap" class="flex"> |
|
||||||
<div id="chat-container" class="bg-gray-800"> |
|
||||||
<div id="messages-container"> |
|
||||||
<div v-for="message in messages" v-cloak> |
|
||||||
<!-- Regular user chat message--> |
|
||||||
<div class="message flex" v-if="message.type === 'CHAT'"> |
|
||||||
<div class="message-avatar rounded-full flex items-center justify-center" v-bind:style="{ backgroundColor: message.userColor() }"> |
|
||||||
<img |
|
||||||
v-bind:src="message.image" |
|
||||||
/> |
|
||||||
</div> |
|
||||||
<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> |
|
||||||
</div> |
|
||||||
|
|
||||||
<!-- Username change message --> |
|
||||||
<div class="message flex" v-else-if="message.type === 'NAME_CHANGE'"> |
|
||||||
<img |
|
||||||
class="mr-2" |
|
||||||
width="30px" |
|
||||||
v-bind:src="message.image" |
|
||||||
/> |
|
||||||
<div class="text-white text-center"> |
|
||||||
<span class="font-bold">{{ message.oldName }}</span> is now known as <span class="font-bold">{{ message.newName }}</span>. |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
</div> |
|
||||||
</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"> |
|
||||||
|
|
||||||
<input type="hidden" name="inputAuthor" id="self-message-author" /> |
|
||||||
<div id="message-body-form" contenteditable="true" placeholder="" |
|
||||||
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" |
|
||||||
></div> |
|
||||||
<div id="emoji-button">😏</div> |
|
||||||
|
|
||||||
<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" |
|
||||||
> Chat |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
|
|
||||||
</div> |
|
||||||
|
|
||||||
<script src="js/usercolors.js"></script> |
|
||||||
<script src="js/utils.js?v=2"></script> |
|
||||||
<script type="module" src="js/message.js?v=2"></script> |
|
||||||
<script src="js/social.js"></script> |
|
||||||
<script src="js/components.js"></script> |
|
||||||
<script type="module"> |
<script type="module"> |
||||||
import Owncast from './js/app.js'; |
import { render, html } from "https://unpkg.com/htm/preact/index.mjs?module"; |
||||||
|
import App from './js/app2.js'; |
||||||
|
|
||||||
(function () { |
(function () { |
||||||
const app = new Owncast(); |
render(html`<${App} />`, document.getElementById("app")); |
||||||
app.init(); |
})(); |
||||||
})(); |
|
||||||
</script> |
</script> |
||||||
|
|
||||||
<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> |
|
||||||
|
|
||||||
<script type='module' src="/js/emoji.js"></script> |
<noscript> |
||||||
|
<style> |
||||||
|
.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> |
||||||
</body> |
</body> |
||||||
</html> |
</html> |
||||||
|
|||||||
@ -1,85 +0,0 @@ |
|||||||
<!-- |
|
||||||
todo |
|
||||||
- fix / consolidate responsive styles |
|
||||||
- standalone video.html |
|
||||||
|
|
||||||
--> |
|
||||||
|
|
||||||
<html> |
|
||||||
<head> |
|
||||||
<meta charset="UTF-8" /> |
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> |
|
||||||
|
|
||||||
<link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png"> |
|
||||||
<link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png"> |
|
||||||
<link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-icon-72x72.png"> |
|
||||||
<link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-icon-76x76.png"> |
|
||||||
<link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-icon-114x114.png"> |
|
||||||
<link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-icon-120x120.png"> |
|
||||||
<link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-icon-144x144.png"> |
|
||||||
<link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-icon-152x152.png"> |
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-icon-180x180.png"> |
|
||||||
<link rel="icon" type="image/png" sizes="192x192" href="/img/favicon/android-icon-192x192.png"> |
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"> |
|
||||||
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96x96.png"> |
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png"> |
|
||||||
<link rel="manifest" href="/manifest.json"> |
|
||||||
<meta name="msapplication-TileColor" content="#ffffff"> |
|
||||||
<meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png"> |
|
||||||
<meta name="theme-color" content="#ffffff"> |
|
||||||
|
|
||||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> |
|
||||||
|
|
||||||
<link href="//unpkg.com/video.js@7.9.2/dist/video-js.css" rel="stylesheet"> |
|
||||||
<link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet" /> |
|
||||||
<script src="//unpkg.com/video.js@7.9.2/dist/video.js"></script> |
|
||||||
<script src="//unpkg.com/showdown/dist/showdown.min.js"></script> |
|
||||||
|
|
||||||
<link href="./styles/app.css" rel="stylesheet" /> |
|
||||||
<link href="./styles/video.css" rel="stylesheet" /> |
|
||||||
<link href="./styles/chat.css" rel="stylesheet" /> |
|
||||||
<link href="./styles/user-content.css" rel="stylesheet" /> |
|
||||||
|
|
||||||
</head> |
|
||||||
|
|
||||||
|
|
||||||
<body class="bg-gray-300 text-gray-800"> |
|
||||||
<div id="app"></div> |
|
||||||
|
|
||||||
<script type="module"> |
|
||||||
import { render, html } from "https://unpkg.com/htm/preact/index.mjs?module"; |
|
||||||
import App from './js/app2.js'; |
|
||||||
|
|
||||||
(function () { |
|
||||||
render(html`<${App} />`, document.getElementById("app")); |
|
||||||
})(); |
|
||||||
</script> |
|
||||||
|
|
||||||
|
|
||||||
<noscript> |
|
||||||
<style> |
|
||||||
.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> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
Loading…
Reference in new issue