matthew/satyr
1
0
Fork 0
mirror of https://git.waldn.net/git/knotteye/satyr.git synced 2025-09-05 09:35:57 +00:00
Code Issues Projects Releases Wiki Activity

Add working Socket.IO based chat

Browse Source 
Bump version I guess.
This commit is contained in:
knotteye
2019-10-20 16:09:28 -05:00
parent 1afe462c0b
commit eba441b624
7 changed files with 178 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/base.njk
View File

@ -8,7 +8,7 @@
<body>
<div id="wrapper">
<div id="header">
<span style="float:left;"><h4><a href="/">{{ sitename }}</a> | <a href="/users">Users</a> <a href="/users/live">Live</a> <a href="/about">About</a></h4></span><span style="float:right;"><h4>| <a href="/profile">Profile</a></h4></span>
<span style="float:left;"><h4><a href="/">{{ sitename }}</a> | <a href="/users">Users</a> <a href="/users/live">Live</a> <a href="/about">About</a></h4></span><span style="float:right;"><h4><a href="/chat">Chat</a> | <a href="/profile">Profile</a></h4></span>
</div>
<div id="content">
{% block content %}

79
templates/chat.html Normal file
View File

@ -0,0 +1,79 @@
<!doctype html>
<head>
<title>{{ sitename }} Webchat</title>
<link rel="stylesheet" type="text/css" href="/styles.css">
<link rel="stylesheet" type="text/css" href="/local.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
#wrapper {border: 3px solid black; display: inline-block; width: 100%; height: 100%;}
body { font: 13px; background: white; height: 100%; color: black; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; color: black; background: white; }
form button { width: 9%; background: #074115; border: none; padding: 10px; color: #074115;}
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
</style>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
var room;
function send(){
let m = document.getElementById('m').value;
if(m.startsWith('/nick')){
socket.emit('NICK', {
nick: m.split(' ')[1],
password: m.split(' ')[2]
});
}
else if(m.startsWith('/join')){
socket.emit('LEAVEROOM', room);
socket.emit('JOINROOM', m.split(' ')[1]);
room = m.split(' ')[1];
}
else if(m.startsWith('/kick')){
socket.emit('KICK', {nick: m.split(' ')[1], room: room});
}
else socket.emit('MSG', {room: room, msg: m});
document.getElementById('m').value = '';
}
socket.on('MSG', function(data){
document.getElementById('messages').innerHTML+='<li><b>'+data.nick+':</b> '+data.msg+'</span></li>';
window.scrollTo(0,document.body.scrollHeight);
});
socket.on('ALERT', function(data){
document.getElementById('messages').innerHTML+='<li><i>'+data+'</i></li>';
window.scrollTo(0,document.body.scrollHeight);
});
socket.on('JOINED', function(data){
document.getElementById('messages').innerHTML+='<li><i>'+data.nick+' has joined the chat</i></li>';
window.scrollTo(0,document.body.scrollHeight);
});
socket.on('LEFT', function(data){
document.getElementById('messages').innerHTML+='<li><i>'+data.nick+' has left the chat</i></li>';
window.scrollTo(0,document.body.scrollHeight);
});
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};
socket.once('connect', () => {
iname = getUrlParameter('nick');
iroom = getUrlParameter('room');
if(iname !== '') socket.emit('NICK', {nick: iname});
if(iroom !== '') {
socket.emit('JOINROOM', iroom);
room = iroom;
}
});
</script>
</head>
<body>
<div id="wrapper">
<ul id="messages"></ul><li>&nbsp;</li><li>&nbsp;</li>
</div>
<form id="f" action="" onSubmit="send(); return false">
<input id="m" autocomplete="off" /><button><img src="/send.png" alt="send" width="15px" style="display: inline-block;"></img></button>
</form>
</body>

12
templates/user.njk
View File

@ -1,13 +1,19 @@
{% extends "base.njk" %}
{% block content %}
<script>
function newPopup(url) {
popupWindow = window.open(
url,'popUpWindow','height=700,width=450,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes')
}
</script>
</br>
<span style="float: left;font-size: large;"><a href="rtmp://{{ domain }}/live{{ user }}">{{ user }}</a> | {{ streamtitle | escape }}</b></span><span style="float: right;font-size: large;"> Links | <a href="/vods/{{ user }}">VODs</a></span>
<span style="float: left;font-size: large;"><a href="/live/{{ user }}/index.m3u8">{{ user }}</a> | {{ streamtitle | escape }}</b></span><span style="float: right;font-size: large;"> Links | <a href="rtmp://{{ domain }}/live/{{ user }}">Watch</a> <a href="JavaScript:newPopup('/chat?room={{ user }}');">Chat</a> <a href="/vods/{{ user }}">VODs</a></span>
<div id="jscontainer">
<div id="jschild" style="width: 70%;height: 100%;">
<video controls poster="/thumbnail.jpg" class="video-js vjs-default-skin" id="live-video" style="width:100%;height:100%;"></video>
</div>
<div id="jschild" style="width: 30%;height: 100%;">
<img src="/chat.jpg" style="width: 100%;height: 100%" />
<div id="jschild" class="webchat" style="width: 30%;height: 100%;">
<iframe src="/chat?room={{ user }}" frameborder="0" style="width: 100%;height: 100%;"></iframe>
</div>
</div>
<script>window.HELP_IMPROVE_VIDEOJS = false;</script>