Skip to content

Commit d1fa269

Browse files
author
Tin Nguyen
committed
Styling a bit
1 parent b9c2053 commit d1fa269

File tree

4 files changed

+120
-35
lines changed

4 files changed

+120
-35
lines changed

‎web/static/css/app.css

Lines changed: 31 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/static/js/app.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,4 @@ import "phoenix_html"
77
//
88
import socket from "./socket"
99
import Gossip from "./gossip"
10-
Gossip.init(socket)
10+
window.Gossip = Gossip

‎web/static/js/gossip.js

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
import socket from "./socket"
2+
13
class Gossip {
24

3-
static init(socket){
5+
static init(){
46
var $status = $("#status")
57
var $messages = $("#messages")
68
var $input = $("#message-input")
@@ -10,7 +12,8 @@ class Gossip {
1012
socket.onError( ev => console.log("ERROR", ev) )
1113
socket.onClose( e => console.log("CLOSE", e) )
1214

13-
var chan = socket.channel("rooms:lobby", {})
15+
var chan = socket.channel("rooms:lobby", {user:$username.val()})
16+
console.log($username.val())
1417
chan.join()
1518
.receive("ignore", () => console.log("auth error"))
1619
.receive("ok", () => console.log("join ok"))
@@ -20,22 +23,25 @@ class Gossip {
2023

2124
$input.off("keypress").on("keypress", e => {
2225
if (e.keyCode == 13) {
23-
chan.push("new:msg", {user: $username.val(), body: $input.val()}, 10000)
26+
e.preventDefault();
27+
if ($input.val().trim() == "") {
2428
$input.val("")
25-
29+
return
30+
}
31+
chan.push("new:msg", {user: $username.val(), body: $input.val()}, 10000)
32+
$input.val("")
2633
}
2734

2835
})
2936

3037
chan.on("new:msg", msg => {
3138
$messages.append(this.messageTemplate(msg))
32-
scrollTo(0, document.body.scrollHeight)
33-
39+
$("#messages").scrollTop($("#messages")[0].scrollHeight)
3440
})
3541

3642
chan.on("user:entered", msg => {
3743
var username = this.sanitize(msg.user || "anonymous")
38-
$messages.append(`<br/><i>[${username} entered]</i>`)
44+
$messages.append(`<i>[Welcome @${username} to the stream]</i><br/>`)
3945

4046
})
4147

@@ -47,7 +53,7 @@ class Gossip {
4753
let username = this.sanitize(msg.user || "anonymous")
4854
let body = this.sanitize(msg.body)
4955

50-
return(`<p><a href='#'>[${username}]</a>&nbsp; ${body}</p>`)
56+
return(`<div class="user-msg"><a href='#'>${username}: </a>&nbsp; ${body}</div>`)
5157

5258
}
5359

‎web/templates/layout/app.html.eex

Lines changed: 74 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,86 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html>
33
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<meta name="description" content="">
8-
<meta name="author" content="">
9-
<title>My Chat App</title>
4+
<link href="https://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet">
105
<link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
6+
<script src="https://vjs.zencdn.net/5.8.8/video.js"></script>
7+
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/3.6.12/videojs-contrib-hls.js"></script>
8+
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
119
</head>
1210
<body>
13-
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
14-
<div class="container">
15-
<div class="navbar-header">
16-
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
17-
<span class="sr-only">Toggle navigation</span>
18-
<span class="icon-bar"></span>
19-
<span class="icon-bar"></span>
20-
<span class="icon-bar"></span>
21-
</button>
22-
<a class="navbar-brand" href="#">My Chat App</a>
11+
<div class="col-md-12" style="margin-top:30px;">
12+
<div class="col-md-9">
13+
<video id="video-player" style="width:100%;height:641px;" class="video-js vjs-default-skin" controls>
14+
<source src="http://live.laptrinhviendeptrai.xyz/hls/live/laptrinhstream.m3u8" type="application/x-mpegURL">
15+
</video>
16+
</div>
17+
<!-- Modal -->
18+
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="username-modal-label" aria-hidden="true" id="username-modal">
19+
<div class="modal-dialog modal-sm">
20+
<div class="modal-content">
21+
<div class="modal-header">
22+
<h5 class="modal-title">Welcome to the stream</h5>
23+
</div>
24+
<div class="modal-body">
25+
<form id="username-form">
26+
<div class="form-group">
27+
<label for="recipient-name" class="col-form-label">What should I call you?</label>
28+
<input type="text" required class="form-control" id="recipient-name" autofocus>
29+
</div>
30+
</form>
31+
</div>
32+
<div class="modal-footer">
33+
<button type="button" class="btn btn-primary">Let's go</button>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
39+
<div class="col-md-3">
40+
<div id="messages" class="pre-scrollable" style="max-height:567px;overflow-y:auto;height:567px;color:#ff6b6b;margin-bottom:10px;">
41+
</div>
42+
<div>
43+
<input id="username" type="hidden" class="form-control" placeholder="username">
44+
<textarea style="resize: none;" placeholder="say something I'm giving up on you..." id="message-input" class="form-control"></textarea>
2345
</div>
2446
</div>
2547
</div>
48+
</div>
2649

27-
<%= render @view_module, @view_template, assigns %>
2850

29-
<script src="<%= static_path(@conn, "/js/app.js") %>"></script>
3051
</body>
52+
53+
54+
<script src="<%= static_path(@conn, "/js/app.js") %>"></script>
55+
56+
<script>
57+
$(document).ready(function(){
58+
// init video player
59+
var player = videojs('video-player');
60+
player.play();
61+
62+
// show modal
63+
$("#username-modal").modal('show');
64+
$('.modal-backdrop').remove();
65+
66+
67+
$('#username-form').on('submit', function(e){
68+
e.preventDefault()
69+
$("#username").val($("#recipient-name").val())
70+
$("#username-modal").modal('hide');
71+
Gossip.init()
72+
})
73+
$('.btn.btn-primary').on('click', function(e){
74+
e.preventDefault()
75+
$("#username").val($("#recipient-name").val())
76+
$("#username-modal").modal('hide');
77+
Gossip.init()
78+
})
79+
80+
});
81+
82+
83+
</script>
84+
85+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
3186
</html>

0 commit comments

Comments
 (0)