knotteye
/
satyr
1
0
Fork 0
Code Issues 3 Pull Requests Releases 5 Wiki Activity
Browse Source

Big commit. Implement handlers for everything that's currently rendered server side in the client-side frontend. 

Add compiled templates file to .gitignore, will work out a system for making sure templates are compiled later.
Fix a couple bugs in the API and templates.

TODO for client-side rendering:
Make sure templates get compiled before running the server.
Add a config option to switch between server-side and client-side rendering
Fancy SPA stuff like intercepting links to render changes without a page-reload
merge-requests/27/head
knotteye 11 months ago
parent
57d0b0f856
commit
988e3473a7
8 changed files with 177 additions and 31 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .gitignore
  2. 7
      package-lock.json
  3. 2
      package.json
  4. 40
      site/index.html
  5. 141
      site/index.js
  6. 4
      src/api.ts
  7. 11
      src/http.ts
  8. 2
      templates/managevods.njk

1
.gitignore
View File

@ -4,3 +4,4 @@ config/**/*
!config/.gitkeep
install/db_setup.sql
build/**
site/templates.js

7
package-lock.json
View File

@ -1,6 +1,6 @@
{
"name": "satyr",
"version": "0.9.3",
"version": "0.9.4",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -963,6 +963,11 @@
"asn1.js": "^5.2.0"
}
},
"jwt-decode": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.0.0.tgz",
"integrity": "sha512-RBQv2MTm3FNKQkdzhEyQwh5MbdNgMa+FyIJIK5RMWEn6hRgRHr7j55cRxGhRe6vGJDElyi6f6u/yfkP7AoXddA=="
},
"lodash": {
"version": "4.17.20",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",

2
package.json
View File

@ -10,7 +10,7 @@
"setup": "sh install/setup.sh",
"migrate": "ts-node src/migrate.ts",
"invite": "ts-node src/cli.ts --invite",
"make-templates": "cp node_modules/nunjucks/browser/nunjucks-slim.js site &&nunjucks-precompile -i [\"\\.html$\",\"\\.njk$\"] templates > site/templates.js"
"make-templates": "nunjucks-precompile -i [\"\\.html$\",\"\\.njk$\"] templates > site/templates.js"
},
"repository": {
"type": "git",

40
site/index.html
View File

@ -1,37 +1,23 @@
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="/styles.css">
<link rel="stylesheet" type="text/css" href="/local.css">
<link rel="icon" type="image/svg" href="/logo.svg">
<script src="/nunjucks-slim.js"></script>
<script src="/templates.js"></script>
<script>
nunjucks.configure({ autoescape: true });
</script>
<script>
//should check for and refresh login tokens on pageload..
if(document.cookie.match(/^(.*;)?\s*X-Auth-As\s*=\s*[^;]+(.*)?$/) !== null) {
var xhr = new XMLHttpRequest();
xhr.open("POST", "/api/login", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("");
}
</script>
</head>
<body onload="render()">
<script>
function render(){
switch(window.location.pathname){
case "/about.html":
document.body.innerHTML = nunjucks.render('about.html');
break;
case "/tos.html":
document.body.innerHTML = nunjucks.render('tos.html');
break;
default:
document.body.innerHTML = nunjucks.render('404.njk');
}
}
function getContext(){
var conf = {
sitename: "",
domain: "",
email: "",
version: "",
registration: false
}
var info = new XMLHttpRequest();
info.onload = () => {
if(xhr.status === 200)
}
}
</script>
<script src="/index.js"></script>
</body>

141
site/index.js
View File

@ -0,0 +1,141 @@
async function render(){
var context = await getContext();
switch(window.location.pathname){
//nothing but context
case (window.location.pathname.match(/^\/about\/?$/) || {}).input:
document.body.innerHTML = nunjucks.render('about.njk', context);
break;
case (window.location.pathname.match(/^\/login\/?$/) || {}).input:
document.body.innerHTML = nunjucks.render('login.njk', context);
break;
case (window.location.pathname.match(/^\/register\/?$/) || {}).input:
if(!context.registration) window.location = '/';
document.body.innerHTML = nunjucks.render('registration.njk', context);
break;
case (window.location.pathname.match(/^\/changepwd\/?$/) || {}).input:
document.body.innerHTML = nunjucks.render('changepwd.njk', context);
break;
case (window.location.pathname.match(/^\/chat\/?$/) || {}).input:
document.body.innerHTML = nunjucks.render('chat.html', context);
break;
case (window.location.pathname.match(/^\/help\/?$/) || {}).input:
document.body.innerHTML = nunjucks.render('help.njk', context);
break;
//need to hit the API
case (window.location.pathname.match(/^\/users\/live\/?$/) || {}).input:
var list = JSON.parse(await makeRequest("POST", "/api/users/live", JSON.stringify({num: 50})));
document.body.innerHTML = nunjucks.render('live.njk', Object.assign({list: list.users}, context));
break;
case (window.location.pathname.match(/^\/users\/?$/) || {}).input:
var list = JSON.parse(await makeRequest("POST", "/api/users/all", JSON.stringify({num: 50})));
document.body.innerHTML = nunjucks.render('list.njk', Object.assign({list: list.users}, context));
break;
case (window.location.pathname.match(/^\/profile\/chat\/?$/) || {}).input:
if(!context.auth.name) window.location = '/login';
var config = JSON.parse(await makeRequest("GET", '/api/'+context.auth.name+'/config'));
config = {
integ: {
twitch: config.twitch,
xmpp: config.xmpp,
irc: config.irc,
discord: config.discord
}
};
document.body.innerHTML = nunjucks.render('chat_integ.njk', Object.assign(config, context));
break;
case (window.location.pathname.match(/^\/profile\/?$/) || {}).input:
if(!context.auth.name) window.location = '/login';
var config = JSON.parse(await makeRequest("GET", '/api/'+context.auth.name+'/config'));
config = {
meta: {
title: config.title,
about: config.about
},
rflag: {record_flag: config.record_flag},
twitch: config.twitch_mirror
};
document.body.innerHTML = nunjucks.render('profile.njk', Object.assign(config, context));
break;
//parsing slugs
case (window.location.pathname.match(/^\/invite\//) || {}).input: // /invite/:code
document.body.innerHTML = nunjucks.render('invite.njk', Object.assign({icode: window.location.pathname.substring(8)}, context));
break;
//slugs and API
case (window.location.pathname.match(/^\/users\/.+\/?$/) || {}).input: // /users/:user
if(window.location.pathname.substring(window.location.pathname.length - 1).indexOf('/') !== -1)
var usr = window.location.pathname.substring(7, window.location.pathname.length - 1);
else var usr = window.location.pathname.substring(7);
var config = JSON.parse(await makeRequest("GET", '/api/'+usr+'/config'));
if(!config.title){document.body.innerHTML = nunjucks.render('404.njk', context); break;}
document.body.innerHTML = nunjucks.render('user.njk', Object.assign({about: config.about, title: config.title, username: config.username}, context));
break;
case (window.location.pathname.match(/^\/vods\/.+\/manage\/?$/) || {}).input: // /vods/:user/manage
var usr = window.location.pathname.substring(6, (window.location.pathname.length - 7));
if(context.auth.name !== usr) window.location = '/vods/'+usr;
var vods = JSON.parse(await makeRequest("GET", '/api/'+usr+'/vods'));
document.body.innerHTML = nunjucks.render('managevods.njk', Object.assign({user: usr, list: vods.vods.filter(fn => fn.name.endsWith('.mp4'))}, context));
break;
case (window.location.pathname.match(/^\/vods\/.+\/?$/) || {}).input: // /vods/:user
if(window.location.pathname.substring(window.location.pathname.length - 1).indexOf('/') !== -1)
var usr = window.location.pathname.substring(6, window.location.pathname.length - 1);
else var usr = window.location.pathname.substring(6);
var vods = JSON.parse(await makeRequest("GET", '/api/'+usr+'/vods'));
document.body.innerHTML = nunjucks.render('vods.njk', Object.assign({user: usr, list: vods.vods.filter(fn => fn.name.endsWith('.mp4'))}, context));
break;
//root
case "/":
window.location = '/users/live';
break;
case "":
window.location = '/users/live';
break;
//404
default:
document.body.innerHTML = nunjucks.render('404.njk', context);
}
}
async function getContext(){
var info = JSON.parse(await makeRequest('GET', '/api/instance/info'));
info.sitename = info.name;
info.name = null;
info.auth = {
is: document.cookie.match(/^(.*;)?\s*X-Auth-As\s*=\s*[^;]+(.*)?$/) !== null,
name: parseCookie(document.cookie)['X-Auth-As']
}
return info;
}
function makeRequest(method, url, payload) {
return new Promise(function (resolve, reject) {
let xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
resolve(xhr.response);
} else {
reject({
status: this.status,
statusText: xhr.statusText
});
}
};
xhr.onerror = function () {
reject({
status: this.status,
statusText: xhr.statusText
});
};
!payload ? xhr.send() : xhr.send(payload);
});
}
function parseCookie(c){
if(typeof(c) !== 'string' || !c.includes('=')) return {};
return Object.assign({[c.split('=')[0].trim()]:c.split('=')[1].split(';')[0].trim()}, parseCookie(c.split(/;(.+)/)[1]));
}
function handleLoad() {
var r = JSON.parse(document.getElementById('responseFrame').contentDocument.documentElement.textContent).success
if (typeof(r) !== 'undefined') window.location.href = '/profile'
}

4
src/api.ts
View File

@ -87,9 +87,11 @@ async function getConfig(username: string, all?: boolean): Promise<object>{
let users = await db.query('SELECT stream_key,record_flag FROM users WHERE username='+db.raw.escape(username));
if(users[0]) Object.assign(t, users[0]);
let usermeta = await db.query('SELECT title,about FROM user_meta WHERE username='+db.raw.escape(username));
if(usermeta[0]) Object.assign(t, users[0]);
if(usermeta[0]) Object.assign(t, usermeta[0]);
let ci = await db.query('SELECT irc,xmpp,twitch,discord FROM chat_integration WHERE username='+db.raw.escape(username));
if(ci[0]) Object.assign(t, ci[0]);
let tw = await db.query('SELECT enabled,twitch_key FROM twitch_mirror WHERE username='+db.raw.escape(username));
if(tw[0]) t['twitch_mirror'] = Object.assign({}, tw[0]);
}
else {
let um = await db.query('SELECT title,about FROM user_meta WHERE username='+db.raw.escape(username));

11
src/http.ts
View File

@ -75,6 +75,15 @@ async function init(){
}
async function initFE(){
app.get('/', (req, res) => {
res.redirect(config['satyr']['rootredirect']);
});
app.get('/nunjucks-slim.js', (req, res) => {
res.sendFile(process.cwd()+'/node_modules/nunjucks/browser/nunjucks-slim.js');
});
app.get('/chat', (req, res) => {
res.sendFile(process.cwd()+'/templates/chat.html');
});
app.get('*', (req, res) => {
res.sendFile(process.cwd()+'/'+config['http']['directory']+'/index.html');
});
@ -368,6 +377,7 @@ async function initAPI() {
if(req.cookies.Authorization) validToken(req.cookies.Authorization).then((t) => {
if(t) {
if(t['exp'] - 86400 < Math.floor(Date.now() / 1000)){
res.cookie('X-Auth-As', t['username'], {maxAge: 604800000, httpOnly: false, sameSite: 'Lax'});
return genToken(t['username']).then((t) => {
res.cookie('Authorization', t, {maxAge: 604800000, httpOnly: true, sameSite: 'Lax'});
res.json({success:""});
@ -389,6 +399,7 @@ async function initAPI() {
if(!result){
genToken(req.body.username).then((t) => {
res.cookie('Authorization', t, {maxAge: 604800000, httpOnly: true, sameSite: 'Lax'});
res.cookie('X-Auth-As', req.body.username, {maxAge: 604800000, httpOnly: false, sameSite: 'Lax'});
res.json({success:""});
})
}

2
templates/managevods.njk
View File

@ -8,7 +8,7 @@
{% else %}
No recordings found!
{% endeach %}
<input type="submit" value="Delete">
</br><input type="submit" value="Delete">
</form>
<iframe name="responseFrame" border="0" frameborder="0" style="display: inline;"></iframe>
{% endblock %}
Write Preview
Loading…
Cancel
Save