mirror of
https://github.com/owncast/owncast.git
synced 2024-10-28 10:09:39 +01:00
Some basic positioning of HTML
This commit is contained in:
Gabe Kangas
parent
216c15547d
commit
020ace7ddd
14 changed files with 111 additions and 103 deletions
|
|
@ -2,7 +2,6 @@ package main
|
|||
|
||||
import (
|
||||
"bytes"
|
||||
"fmt"
|
||||
"io"
|
||||
"log"
|
||||
"os"
|
||||
|
|
@ -53,7 +52,6 @@ func (h *Handler) OnPublish(timestamp uint32, cmd *rtmpmsg.NetStreamPublish) err
|
|||
|
||||
// Record streams as FLV
|
||||
p := getTempPipePath()
|
||||
fmt.Println(p)
|
||||
syscall.Mkfifo(p, 0666)
|
||||
f, err := os.OpenFile(p, os.O_RDWR, os.ModeNamedPipe)
|
||||
if err != nil {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ package main
|
|||
type Message struct {
|
||||
Author string `json:"author"`
|
||||
Body string `json:"body"`
|
||||
Image string `json:"image"`
|
||||
}
|
||||
|
||||
func (self *Message) String() string {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -11,11 +11,14 @@ define(
|
|||
this.author = ko.observable("Anonymous");
|
||||
this.body = ko.observable("");
|
||||
}
|
||||
this.image = ko.observable("https://robohash.org/" + this.author() + "?set=set3&size=50x50")
|
||||
|
||||
|
||||
this.toModel = function() {
|
||||
return {
|
||||
author: this.author(),
|
||||
body: this.body()
|
||||
body: this.body(),
|
||||
image: this.image()
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,16 +16,30 @@ define(
|
|||
ws.send($.toJSON(model));
|
||||
var message = new Message();
|
||||
message.author(model.author);
|
||||
message.image("https://robohash.org/" + model.author);
|
||||
console.log("https://robohash.org/" + model.author)
|
||||
this.editingMessage(message);
|
||||
};
|
||||
|
||||
ws.onmessage = function(e) {
|
||||
ws.onmessage = function (e) {
|
||||
console.log("on message")
|
||||
var model = $.evalJSON(e.data);
|
||||
var msg = new Message(model);
|
||||
that.messages.push(msg);
|
||||
|
||||
// Scroll DIV to the bottom
|
||||
scrollSmoothToBottom("messages-container")
|
||||
};
|
||||
}
|
||||
|
||||
return MessageList;
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
function scrollSmoothToBottom(id) {
|
||||
var div = document.getElementById(id);
|
||||
$('#' + id).animate({
|
||||
scrollTop: div.scrollHeight - div.clientHeight
|
||||
}, 500);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
6
webroot/vender/bootstrap/js/bootstrap.min.js
vendored
6
webroot/vender/bootstrap/js/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue