mirror of
https://github.com/owncast/owncast.git
synced 2024-11-22 12:49:37 +03:00
42b0b05d78
* 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>
183 lines
No EOL
6.7 KiB
HTML
183 lines
No EOL
6.7 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
|
|
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
|
|
<link href="//unpkg.com/video.js@7.8.3/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.8.3/dist/video.js"></script>
|
|
<script src="//unpkg.com/showdown/dist/showdown.min.js"></script>
|
|
<script src="vendor/autolink.js"></script>
|
|
|
|
<link href="./styles/layout.css" rel="stylesheet" />
|
|
</head>
|
|
|
|
<body class="bg-gray-300 text-gray-800">
|
|
|
|
<div id="app-container" class="flex no-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: isOnline }">
|
|
<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>{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
|
|
<span>Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
|
|
<span>{{ overallMaxViewerCount }} overall.</span>
|
|
</section>
|
|
</main>
|
|
|
|
<section id="user-content" v-if="layout === 'desktop'" 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-if="layout === 'desktop'" v-bind:app-version="appVersion"></owncast-footer>
|
|
|
|
</div>
|
|
|
|
<section id="chat-container-wrap" class="flex">
|
|
|
|
<div v-if="layout !== 'desktop'" id="user-content-touch">
|
|
<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>
|
|
|
|
<owncast-footer v-bind:app-version="appVersion"></owncast-footer>
|
|
|
|
</div>
|
|
|
|
<div id="chat-container" class="bg-gray-800">
|
|
<div id="messages-container">
|
|
<div v-for="message in messages">
|
|
<div class="message flex">
|
|
<img
|
|
v-bind:src="message.image"
|
|
class="message-avatar rounded-full bg-black bg-opacity-50"
|
|
v-bind:style="{ backgroundColor: message.userColor() }"
|
|
/>
|
|
<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>
|
|
</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" />
|
|
|
|
<textarea
|
|
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"
|
|
> Chat
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</section>
|
|
|
|
</div>
|
|
|
|
|
|
<script src="js/usercolors.js"></script>
|
|
<script src="js/utils.js"></script>
|
|
<script src="js/message.js"></script>
|
|
<script src="js/social.js"></script>
|
|
<script src="js/components.js"></script>
|
|
<script src="js/player.js"></script>
|
|
<script src="js/app.js"></script>
|
|
<script>
|
|
(function () {
|
|
const app = new Owncast();
|
|
app.init();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |