150 lines
5.8 KiB
HTML
150 lines
5.8 KiB
HTML
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>Live stream test</title>
|
|
|
|
<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>
|
|
|
|
<!-- unpkg : use the latest version of Video.js -->
|
|
<link href="//unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
|
|
<link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet" />
|
|
<script src="//unpkg.com/video.js/dist/video.min.js"></script>
|
|
|
|
<script src="vendor/autolink.js"></script>
|
|
<link href="./styles/layout.css" rel="stylesheet" />
|
|
|
|
<link
|
|
href="https://unpkg.com/@videojs/themes@1/dist/sea/index.css"
|
|
rel="stylesheet"
|
|
/>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app-container" class="flex no-chat">
|
|
<header class="flex">
|
|
<h1>
|
|
😈 Owncast
|
|
</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="https://robohash.org/username123" id="username-avatar" class="rounded-full" />
|
|
<span id="username-display"></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>
|
|
<div id="chat-toggle" class="flex">💬</div>
|
|
</div>
|
|
|
|
</header>
|
|
<div id="main-content-container" class="flex">
|
|
<!-- LEFT CONTAINER SIDE-->
|
|
<div class="flex main-cols left-col">
|
|
|
|
<div id="video-container" class="flex shadow-md owncast-video-container">
|
|
<video
|
|
class="video-js vjs-theme-sea"
|
|
id="video"
|
|
preload="auto"
|
|
controls
|
|
autoplay
|
|
playsinline
|
|
muted
|
|
poster="https://goth.land/thumbnail.png"
|
|
data-setup='{}'
|
|
>
|
|
<source src="https://goth.land/hls/stream.m3u8" type="application/x-mpegURL"/>
|
|
</video>
|
|
</div>
|
|
|
|
<div id="stream-info" class="flex">
|
|
<span>{{ streamStatus }}</span>
|
|
<span>{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
|
|
<span>Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
|
|
<span>{{ overallMaxViewerCount }} overall.</span>
|
|
</div>
|
|
|
|
<div id="user-content">
|
|
|
|
<!-- USER CONTENT... -->
|
|
<div>
|
|
Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature.
|
|
|
|
|
|
</div>
|
|
<div>
|
|
Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature.
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT CONTAINER SIDE-->
|
|
<div class="flex main-cols right-col">
|
|
|
|
<div id="chat-container">
|
|
<div id="messages-container">
|
|
<div v-for="(message, index) in messages">
|
|
<div class="message flex">
|
|
<img
|
|
v-bind:src="message.image"
|
|
class="message-avatar rounded-full"
|
|
/>
|
|
<div class="message-content">
|
|
<p class="message-author">{{ message.author }}</p>
|
|
<p class="message-text" v-html="message.formatText()"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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" />
|
|
|
|
<textarea
|
|
id="message-body-form"
|
|
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 focus:bg-white"
|
|
></textarea>
|
|
|
|
<div id="message-form-actions" class="flex">
|
|
<span id="message-form-warning"></span>
|
|
<button
|
|
id="button-submit-message"
|
|
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
|
|
> Send
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/config.js"></script>
|
|
<script src="js/utils.js"></script>
|
|
<script src="js/message.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html> |