You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
163 lines
5.7 KiB
163 lines
5.7 KiB
<html> |
|
<head> |
|
<meta charset="UTF-8" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> |
|
|
|
<title>Owncast Demo Server</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> |
|
|
|
<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> |
|
<script> |
|
/* |
|
GW TODO: |
|
- off line/ video done mode. |
|
- remove listeners on unload? |
|
- config customizations |
|
|
|
- expand user name change text box on focus.chat |
|
- accessilbity |
|
|
|
|
|
*/ |
|
</script> |
|
<body class="bg-gray-300 text-gray-800"> |
|
<main id="app-container" class="flex no-chat"> |
|
|
|
<div id="top-content"> |
|
<header class="flex border-b border-gray-900 border-solid shadow-md"> |
|
<h1 class="text-gray-400"> |
|
😈 {{title}} |
|
</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 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> |
|
|
|
|
|
<div id="video-container" class="flex owncast-video-container bg-black"> |
|
<video |
|
class="video-js" |
|
id="video" |
|
preload="auto" |
|
controls |
|
autoplay |
|
playsinline |
|
muted |
|
poster="/thumbnail.png" |
|
data-setup='{"vhs": { "enableLowInitialPlaylist": true, "smoothQualityChange": true, "handlePartialData": true }}' |
|
> |
|
<source src="hls/stream.m3u8" type="application/x-mpegURL"/> |
|
</video> |
|
</div> |
|
|
|
|
|
<div id="stream-info" 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> |
|
</div> |
|
|
|
<div id="user-content" class="user-content"> |
|
<!-- USER CONTENT... --> |
|
<div v-html="description"></div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="chat-container-wrap" class="flex"> |
|
|
|
|
|
|
|
<div id="user-content-touch" class="user-content"> |
|
<!-- USER CONTENT... --> |
|
<div v-html="description"></div> |
|
</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> |
|
|
|
|
|
|
|
</div> |
|
</main> |
|
|
|
<script src="js/status.js"></script> |
|
<script src="js/usercolors.js"></script> |
|
<script src="js/config.js"></script> |
|
<script src="js/utils.js"></script> |
|
<script src="js/message.js"></script> |
|
<script src="js/app.js"></script> |
|
<script src="js/player/airplay.js"></script> |
|
<script src="js/player/player.js"></script> |
|
</body> |
|
</html> |