pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Some basic positioning of HTML

pull/5/head
Gabe Kangas 5 years ago
parent
216c15547d
commit
020ace7ddd
14 changed files with 111 additions and 103 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      handler.go
  2. 1
      message.go
  3. 166
      webroot/index.html
  4. 5
      webroot/js/Message.js
  5. 16
      webroot/js/MessageList.js
  6. 9
      webroot/vender/bootstrap/css/bootstrap-responsive.min.css
  7. 9
      webroot/vender/bootstrap/css/bootstrap.min.css
  8. BIN
      webroot/vender/bootstrap/img/glyphicons-halflings-white.png
  9. BIN
      webroot/vender/bootstrap/img/glyphicons-halflings.png
  10. 6
      webroot/vender/bootstrap/js/bootstrap.min.js
  11. 0
      webroot/vendor/jquery-2.1.4.min.js
  12. 0
      webroot/vendor/jquery.json-2.5.1.min.js
  13. 0
      webroot/vendor/knockout-3.4.0.js
  14. 0
      webroot/vendor/require.js

2
handler.go
Unescape View File

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

1
message.go
Unescape View File

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

166
webroot/index.html
Unescape View File

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

5
webroot/js/Message.js
Unescape View File

@ -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
webroot/js/MessageList.js
Unescape View File

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

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
Unescape View File

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

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

0
webroot/vender/require.js → webroot/vendor/require.js vendored
Unescape View File

Write Preview
Loading…
Cancel
Save