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.
115 lines
3.5 KiB
115 lines
3.5 KiB
<head> |
|
<meta charset="UTF-8" /> |
|
<title>Live stream test</title> |
|
|
|
<link |
|
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" |
|
rel="stylesheet" |
|
/> |
|
|
|
<!-- 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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
|
|
|
<script src="//vjs.zencdn.net/7.8.2/video.min.js"></script> |
|
|
|
<!-- Used for animating the scrolling of the chat div. Can that be done other ways? --> |
|
<script src="vendor/jquery-2.1.4.min.js"></script> |
|
|
|
<script src="vendor/autolink.js"></script> |
|
</head> |
|
|
|
<div> |
|
<div class="flex"> |
|
<div class="w-4/6"> |
|
<video |
|
id="video" |
|
class="video-js vjs-theme-fantasy" |
|
preload="auto" |
|
poster="/thumbnail.png" |
|
autoplay |
|
controls |
|
style="width: 100%; height: 600px;" |
|
data-setup='{}' |
|
> |
|
<source src="hls/stream.m3u8" type="application/x-mpegURL"/> |
|
</video> |
|
<div id="app"> |
|
{{ streamStatus }} {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}. |
|
</div> |
|
</div> |
|
|
|
<div class="w-2/6"> |
|
<div |
|
id="messages-container" |
|
class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" |
|
style="height: 60vh; overflow-y: scroll;" |
|
> |
|
<div v-for="(message, index) in messages"> |
|
<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"> |
|
<div class="flex items-center"> |
|
<img |
|
v-bind:src="message.image" |
|
class="w-10 h-10 rounded-full mr-4 border-black-500" |
|
style="padding: 5px; background-color: #ececec;" |
|
/> |
|
|
|
<div class="text-sm"> |
|
<p class="text-700">{{ message.author }}</p> |
|
<p class="text-gray-600"v-html="message.linkedText()"></p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<form |
|
id="chatForm" |
|
@submit="submitChatForm" |
|
class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" |
|
> |
|
<!-- 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" |
|
/> |
|
|
|
<!-- Body --> |
|
<div> |
|
<label class="control-label" for="inputBody">Message</label> |
|
<div class="controls"> |
|
<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-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" |
|
> |
|
</textarea> |
|
</div> |
|
</div> |
|
|
|
<div class="control-group"> |
|
<div class="controls"> |
|
<button |
|
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" |
|
> |
|
Send |
|
</button> |
|
</div> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script src="js/message.js"></script> |
|
<script src="js/app.js"></script>
|
|
|