LogalDeveloper/owncast
0
Fork 0
Code Activity

Some basic positioning of HTML

Browse Source
This commit is contained in:
Gabe Kangas
2020-06-01 23:50:32 -07:00
parent 216c15547d
commit 020ace7ddd
14 changed files with 111 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
webroot/index.html
View File

@@ -1,31 +1,98 @@
<head>
<meta charset="UTF-8" />
<title>Live stream test</title>
<link rel="stylesheet" href="vender/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="vender/bootstrap/css/bootstrap-responsive.min.css">
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<head>
<meta charset="UTF-8" />
<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/hls.js@latest"></script>
<script src="vendor/jquery-2.1.4.min.js"></script>
<script src="vendor/knockout-3.4.0.js"></script>
<script src="vendor/jquery.json-2.5.1.min.js"></script>
<script data-main="js/main" src="vendor/require.js"></script>
</head>
<div
class="flex"
>
<div class="w-4/6">
<video id="video" controls style="width: 100%;"></video>
</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 data-bind="foreach: messages">
<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<div class="flex items-center">
<img data-bind="attr:{src: 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" data-bind="text:author"></p>
<p class="text-gray-600" data-bind="text:body"></p>
</div>
</div>
</div>
</div>
</div>
<form
class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
data-bind="with: editingMessage"
>
<!-- Author -->
<label class="control-label" for="inputAuthor">Author</label>
<input
id="inputAuthor"
type="text"
data-bind="value: author"
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"
/>
<!-- Body -->
<div>
<label class="control-label" for="inputBody">Message</label>
<div class="controls">
<textarea
id="inputBody"
data-bind="value: body"
placeholder="Message"
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">
<a
href="#"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
data-bind="click: $parent.send.bind($parent)"
>Send</a
>
</div>
</div>
</form>
</div>
</div>
<script src="vender/jquery-2.1.4.min.js"></script>
<script src="vender/bootstrap/js/bootstrap.min.js"></script>
<script src="vender/knockout-3.4.0.js">
</script>
<script src="vender/jquery.json-2.5.1.min.js">
</script>
<script data-main="js/main" src="vender/require.js">
</script>
</head>
<!-- Or if you want a more recent canary version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
<video id="video" controls></video>
<script>
var video = document.getElementById('video');
var videoSrc = 'hls/stream.m3u8';
var video = document.getElementById("video");
var videoSrc = "hls/stream.m3u8";
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play();
});
}
@@ -42,61 +109,10 @@
// video.src URL must be on the user-driven white-list before a 'canplay'
// event will be emitted; the last video event that can be reliably
// listened-for when the URL is not on the white-list is 'loadedmetadata'.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
else if (video.canPlayType("application/vnd.apple.mpegurl")) {
video.src = videoSrc;
video.addEventListener('loadedmetadata', function() {
video.addEventListener("loadedmetadata", function () {
video.play();
});
}
</script>
<div class="grid-row">
<div class="span3">
</div>
<div class="span6">
<h1>Input</h1>
<form class="well form-horizontal" data-bind="with: editingMessage">
<!-- Author -->
<div class="control-group">
<label class="control-label" for="inputAuthor">Author :</label>
<div class="controls">
<input id="inputAuthor" type="text" data-bind="value: author"/>
</div>
</div>
<!-- Body -->
<div class="control-group">
<label class="control-label" for="inputBody">Message :</label>
<div class="controls">
<textarea id="inputBody" data-bind="value: body">
</textarea>
</div>
</div>
<div class="control-group">
<div class="controls">
<a href="#" class="btn pull-right" data-bind="click: $parent.send.bind($parent)">Send</a>
</div>
</div>
</form>
<h1>Messages</h1>
<div data-bind="foreach: messages">
<div>
<h3>
<!-- ko text: author --><!-- /ko -->
says :
</h3>
<pre data-bind="text:body">
</pre>
</div>
</div>
</div>
<div class="span3">
</div>