mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-21 20:28:15 +03:00
Code Issues Projects Releases Packages Wiki 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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
handler.go
View file

@ -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 {

1
message.go
View file

@ -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 {

152
webroot/index.html
View file

@ -1,26 +1,93 @@
<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">
<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="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>
<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>
<!-- 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>
<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>
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);
@ -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>

5
webroot/js/Message.js
View file

@ -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()
};
}
}

14
webroot/js/MessageList.js
View file

@ -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) {
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);
}

9
webroot/vender/bootstrap/css/bootstrap-responsive.min.css vendored
View file

File diff suppressed because one or more lines are too long

9
webroot/vender/bootstrap/css/bootstrap.min.css vendored
View file

File diff suppressed because one or more lines are too long

BIN
webroot/vender/bootstrap/img/glyphicons-halflings-white.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 8.6 KiB

BIN
webroot/vender/bootstrap/img/glyphicons-halflings.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

6
webroot/vender/bootstrap/js/bootstrap.min.js vendored
View file

File diff suppressed because one or more lines are too long

0
webroot/vender/jquery-2.1.4.min.js → webroot/vendor/jquery-2.1.4.min.js vendored
View file

0
webroot/vender/jquery.json-2.5.1.min.js → webroot/vendor/jquery.json-2.5.1.min.js vendored
View file

0
webroot/vender/knockout-3.4.0.js → webroot/vendor/knockout-3.4.0.js vendored
View file

0
webroot/vender/require.js → webroot/vendor/require.js vendored
View file