2020-06-02 09:50:32 +03:00
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<title>Live stream test</title>
|
|
|
|
|
|
|
|
|
|
<link
|
|
|
|
|
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
/>
|
2020-06-04 11:31:47 +03:00
|
|
|
<link href="./styles/layout.css" rel="stylesheet" />
|
2020-06-02 10:27:54 +03:00
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
2020-06-02 09:50:32 +03:00
|
|
|
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
|
|
|
|
|
2020-06-02 23:56:59 +03:00
|
|
|
<!-- Used for animating the scrolling of the chat div. Can that be done other ways? -->
|
2020-06-02 09:50:32 +03:00
|
|
|
<script src="vendor/jquery-2.1.4.min.js"></script>
|
2020-06-03 04:37:05 +03:00
|
|
|
|
2020-06-03 01:37:36 +03:00
|
|
|
<script src="vendor/autolink.js"></script>
|
2020-06-02 09:50:32 +03:00
|
|
|
</head>
|
|
|
|
|
|
2020-06-04 11:31:47 +03:00
|
|
|
<body>
|
2020-06-14 06:15:31 +03:00
|
|
|
<div id="app-container" class="flex no-chat">
|
2020-06-04 11:31:47 +03:00
|
|
|
<header class="flex">
|
|
|
|
|
<h1>
|
2020-06-14 06:15:31 +03:00
|
|
|
😈 Owncast
|
2020-06-04 11:31:47 +03:00
|
|
|
</h1>
|
2020-06-14 06:15:31 +03:00
|
|
|
|
|
|
|
|
<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="https://robohash.org/username123" id="username-avatar" class="rounded-full" />
|
|
|
|
|
<span id="username-display">Random Username 123</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" title="cancel">X</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-06-14 08:15:58 +03:00
|
|
|
<div id="chat-toggle" class="flex">💬</div>
|
2020-06-14 06:15:31 +03:00
|
|
|
</div>
|
2020-06-04 13:15:27 +03:00
|
|
|
|
2020-06-04 11:31:47 +03:00
|
|
|
</header>
|
2020-06-14 06:15:31 +03:00
|
|
|
<div id="main-content-container" class="flex">
|
2020-06-04 11:31:47 +03:00
|
|
|
<!-- LEFT CONTAINER SIDE-->
|
|
|
|
|
<div class="flex main-cols left-col">
|
2020-06-02 09:50:32 +03:00
|
|
|
|
2020-06-04 13:15:27 +03:00
|
|
|
<div id="video-container" class="flex shadow-md">
|
2020-06-04 11:31:47 +03:00
|
|
|
<video
|
|
|
|
|
id="video"
|
|
|
|
|
preload="auto"
|
|
|
|
|
controls
|
2020-06-14 08:15:58 +03:00
|
|
|
autoplay
|
|
|
|
|
muted
|
|
|
|
|
src="https://goth.land/hls/stream.m3u8"
|
2020-06-04 11:31:47 +03:00
|
|
|
></video>
|
2020-06-02 09:50:32 +03:00
|
|
|
</div>
|
2020-06-02 23:56:59 +03:00
|
|
|
|
2020-06-14 06:15:31 +03:00
|
|
|
<div id="stream-info">
|
2020-06-04 11:31:47 +03:00
|
|
|
{{ streamStatus }} {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.
|
2020-06-02 09:50:32 +03:00
|
|
|
</div>
|
2020-06-04 11:31:47 +03:00
|
|
|
</div>
|
2020-06-02 09:50:32 +03:00
|
|
|
|
2020-06-04 11:31:47 +03:00
|
|
|
<!-- RIGHT CONTAINER SIDE-->
|
|
|
|
|
<div class="flex main-cols right-col">
|
2020-06-04 13:15:27 +03:00
|
|
|
|
2020-06-04 11:31:47 +03:00
|
|
|
<div id="chat-container">
|
|
|
|
|
<div id="messages-container">
|
|
|
|
|
<div v-for="(message, index) in messages">
|
2020-06-10 00:12:50 +03:00
|
|
|
<div class="message flex">
|
2020-06-04 11:31:47 +03:00
|
|
|
<img
|
|
|
|
|
v-bind:src="message.image"
|
2020-06-10 00:12:50 +03:00
|
|
|
class="message-avatar rounded-full"
|
2020-06-04 11:31:47 +03:00
|
|
|
/>
|
2020-06-10 00:12:50 +03:00
|
|
|
<div class="message-content">
|
|
|
|
|
<p class="message-author">{{ message.author }}</p>
|
2020-06-14 08:15:58 +03:00
|
|
|
<p class="message-text"v-html="message.formatText()"></p>
|
2020-06-04 11:31:47 +03:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-06-02 10:27:54 +03:00
|
|
|
</div>
|
2020-06-04 11:31:47 +03:00
|
|
|
|
2020-06-14 06:15:31 +03:00
|
|
|
<div id="message-input-container" class="shadow-md">
|
|
|
|
|
<form id="message-form" class="flex" @submit="submitChatForm">
|
|
|
|
|
|
|
|
|
|
<input type="hidden" name="inputAuthor" id="self-message-author" v-model="message.author" />
|
2020-06-04 13:15:27 +03:00
|
|
|
|
|
|
|
|
<!-- Author -->
|
|
|
|
|
<!-- <label class="control-label" for="inputAuthor">Author</label>
|
|
|
|
|
<input
|
|
|
|
|
id="inputAuthor"
|
|
|
|
|
type="text"
|
|
|
|
|
class="appearance-none bg-gray-200 text-gray-700 border border-black-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
|
|
|
|
|
placeholder="Name"
|
|
|
|
|
v-model="message.author"
|
|
|
|
|
/> -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<textarea
|
|
|
|
|
id="inputBody"
|
|
|
|
|
placeholder="Message"
|
|
|
|
|
v-model="message.body"
|
|
|
|
|
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 leading-tight focus:bg-white"
|
2020-06-14 06:15:31 +03:00
|
|
|
></textarea>
|
2020-06-04 13:15:27 +03:00
|
|
|
|
2020-06-14 06:15:31 +03:00
|
|
|
<div id="message-form-actions" class="flex">
|
2020-06-14 08:15:58 +03:00
|
|
|
<span id="message-form-warning"></span>
|
2020-06-14 06:15:31 +03:00
|
|
|
<button
|
|
|
|
|
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
|
|
|
|
|
> Send
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
2020-06-04 13:15:27 +03:00
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
2020-06-02 09:50:32 +03:00
|
|
|
</div>
|
2020-06-04 11:31:47 +03:00
|
|
|
</div>
|
2020-06-02 10:27:54 +03:00
|
|
|
</div>
|
2020-06-04 11:31:47 +03:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2020-06-02 09:50:32 +03:00
|
|
|
</div>
|
2020-05-24 03:57:49 +03:00
|
|
|
|
2020-06-04 11:31:47 +03:00
|
|
|
<script src="js/message.js"></script>
|
|
|
|
|
<script src="js/app.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
