mirror of
https://github.com/owncast/owncast.git
synced 2024-11-21 20:28:15 +03: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 (
|
import (
|
||||||
"bytes"
|
"bytes"
|
||||||
"fmt"
|
|
||||||
"io"
|
"io"
|
||||||
"log"
|
"log"
|
||||||
"os"
|
"os"
|
||||||
|
|
@ -53,7 +52,6 @@ func (h *Handler) OnPublish(timestamp uint32, cmd *rtmpmsg.NetStreamPublish) err
|
||||||
|
|
||||||
// Record streams as FLV
|
// Record streams as FLV
|
||||||
p := getTempPipePath()
|
p := getTempPipePath()
|
||||||
fmt.Println(p)
|
|
||||||
syscall.Mkfifo(p, 0666)
|
syscall.Mkfifo(p, 0666)
|
||||||
f, err := os.OpenFile(p, os.O_RDWR, os.ModeNamedPipe)
|
f, err := os.OpenFile(p, os.O_RDWR, os.ModeNamedPipe)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@ package main
|
||||||
type Message struct {
|
type Message struct {
|
||||||
Author string `json:"author"`
|
Author string `json:"author"`
|
||||||
Body string `json:"body"`
|
Body string `json:"body"`
|
||||||
|
Image string `json:"image"`
|
||||||
}
|
}
|
||||||
|
|
||||||
func (self *Message) String() string {
|
func (self *Message) String() string {
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,98 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>Live stream test</title>
|
<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">
|
<link
|
||||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
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>
|
<script>
|
||||||
var video = document.getElementById('video');
|
var video = document.getElementById("video");
|
||||||
var videoSrc = 'hls/stream.m3u8';
|
var videoSrc = "hls/stream.m3u8";
|
||||||
if (Hls.isSupported()) {
|
if (Hls.isSupported()) {
|
||||||
var hls = new Hls();
|
var hls = new Hls();
|
||||||
hls.loadSource(videoSrc);
|
hls.loadSource(videoSrc);
|
||||||
hls.attachMedia(video);
|
hls.attachMedia(video);
|
||||||
hls.on(Hls.Events.MANIFEST_PARSED, function() {
|
hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
||||||
video.play();
|
video.play();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -42,61 +109,10 @@
|
||||||
// video.src URL must be on the user-driven white-list before a 'canplay'
|
// 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
|
// 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'.
|
// 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.src = videoSrc;
|
||||||
video.addEventListener('loadedmetadata', function() {
|
video.addEventListener("loadedmetadata", function () {
|
||||||
video.play();
|
video.play();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</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.author = ko.observable("Anonymous");
|
||||||
this.body = ko.observable("");
|
this.body = ko.observable("");
|
||||||
}
|
}
|
||||||
|
this.image = ko.observable("https://robohash.org/" + this.author() + "?set=set3&size=50x50")
|
||||||
|
|
||||||
|
|
||||||
this.toModel = function() {
|
this.toModel = function() {
|
||||||
return {
|
return {
|
||||||
author: this.author(),
|
author: this.author(),
|
||||||
body: this.body()
|
body: this.body(),
|
||||||
|
image: this.image()
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,16 +16,30 @@ define(
|
||||||
ws.send($.toJSON(model));
|
ws.send($.toJSON(model));
|
||||||
var message = new Message();
|
var message = new Message();
|
||||||
message.author(model.author);
|
message.author(model.author);
|
||||||
|
message.image("https://robohash.org/" + model.author);
|
||||||
|
console.log("https://robohash.org/" + model.author)
|
||||||
this.editingMessage(message);
|
this.editingMessage(message);
|
||||||
};
|
};
|
||||||
|
|
||||||
ws.onmessage = function(e) {
|
ws.onmessage = function (e) {
|
||||||
|
console.log("on message")
|
||||||
var model = $.evalJSON(e.data);
|
var model = $.evalJSON(e.data);
|
||||||
var msg = new Message(model);
|
var msg = new Message(model);
|
||||||
that.messages.push(msg);
|
that.messages.push(msg);
|
||||||
|
|
||||||
|
// Scroll DIV to the bottom
|
||||||
|
scrollSmoothToBottom("messages-container")
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
return MessageList;
|
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