Browse Source

URL harveter html, js and css

master
vampirefrog 1 year ago
parent
commit
da78ccd63d
  1. 130
      static/tts.css
  2. 15
      static/urls.html
  3. 127
      static/urls.js

130
static/tts.css

@ -9,7 +9,7 @@ html, body { @@ -9,7 +9,7 @@ html, body {
}
.chatLog .chatMessage {
background: green;
background: #008000;
color: white;
margin: 4px;
padding: 8px;
@ -24,7 +24,7 @@ html, body { @@ -24,7 +24,7 @@ html, body {
max-height: 80px;
}
.chatLog > .chatMessage .chatEmote {
.chatLog > .chatMessage .emote {
max-width: 30px;
max-height: 30px;
vertical-align:middle;
@ -41,7 +41,7 @@ html, body { @@ -41,7 +41,7 @@ html, body {
filter: drop-shadow(0 0 10px white) brightness(1.7);
}
.chatLog > .chatMessage > .chatSticker {
.chatLog > .chatMessage > .sticker {
max-width: 80px;
max-height: 80px;
}
@ -49,3 +49,127 @@ html, body { @@ -49,3 +49,127 @@ html, body {
.clearfix {
clear: both;
}
div.url {
background: #008000;
color: white;
margin: 8px;
padding: 8px;
width: 500px;
max-width: 500px;
float: left;
border-radius: 8px;
}
div.url a {
color: white;
}
div.url a:visited {
color: #7ce068;
}
div.url .chat {
background: #006100;
font-size: 80%;
margin-top: 8px;
padding: 4px;
border-radius: 4px;
}
div.url .thumbnail {
float: left;
margin-right: 8px;
}
div.url .chat .source {
padding: 4px;
border-radius: 2px;
vertical-align: middle;
}
.col-3 {
float: left;
width: 33%;
}
div .url .chat .header {
background: #008000;
clear: both;
}
div .url .chat .content {
clear: both;
}
div .url .chat .donation {
text-align: center;
background: gold;
padding: 2px;
color: black;
white-space: nowrap;
font-size: 80%;
margin: 0 auto;
}
div .url .chat .donation.none {
background: #006d66;
color: #57a09c;
}
div .url .chat .donation .amount {
display: none;
}
div .url .chat .donation .amount:after {
content: ' x ';
display: inline-block;
}
div .url .chat .donation .type {
display: inline-block;
}
div .url .chat .donation .currency {
display: none;
}
div .url .chat .donation .value {
display: none;
}
div .url .chat .text {
padding: 4px 0;
}
div.url .platform {
font-size: 70%;
}
div.url .url {
margin: 0;
padding: 0;
}
div.url .timestamp {
font-size: 70%;
text-align: right;
}
div.url .thumbnail {
position: relative;
max-width: 168px;
}
div.url .thumbnail img {
max-width: 168px;
}
div.url .duration {
position: absolute;
margin-top: -25px;
right: 0;
bottom: 4px;
padding: 4px;
background: black;
}

15
static/urls.html

@ -0,0 +1,15 @@ @@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<title>Vampi's URL Harvester</title>
<link rel="icon" href="frog.ico">
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript" src="EventEmitter.js"></script>
<script type="text/javascript" src="urls.js"></script>
<link rel="stylesheet" href="tts.css">
</head>
<body>
<div id="urls" class="urls"></div>
</body>
</html>

127
static/urls.js

@ -0,0 +1,127 @@ @@ -0,0 +1,127 @@
function appendUrlChat(div, chat) {
console.log('appendUrlChat', div, chat);
var chatDiv = document.createElement('div');
chatDiv.className = 'chat';
var html = '';
html += '<div class="header">';
html += '<div class="col-3">';
html += '<div class="source">';
html += '<div class="username">' + util.escapeHtml(chat.user.displayName) + '</div>';
html += '<div class="platform">' + util.escapeHtml(chat.user.platform) + '</div>';
html += '</div>';
html += '</div>';
html += '<div class="col-3">';
if(chat.donation) {
html += '<div class="donation">';
html += '<div class="amount">' + util.escapeHtml(chat.amount&&chat.amount.toString()||'') + '</div>';
html += '<div class="type">' + util.escapeHtml(chat.donation||'') + '</div>';
html += '<div class="value">' + util.escapeHtml(chat.value&&chat.value.toString()||'') + '</div>';
html += '<div class="currency">' + util.escapeHtml(chat.currency||'') + '</div>';
html += '</div>';
} else {
html += '<div class="donation none">';
html += 'Scrub';
html += '</div>';
}
html += '</div>';
html += '<div class="col-3">';
html += '<div class="timestamp">' + util.escapeHtml(chat.timestamp||'') + '</div>';
html += '</div>';
html += '<div class="clearfix"></div>';
html += '</div>';
html += '<div class="content">';
html += '<div class="text">' + util.escapeHtml(chat.text||'') + '</div>';
html += '</div>';
chatDiv.innerHTML = html;
div.appendChild(chatDiv);
}
function appendUrl(data) {
var urlsDiv = document.getElementById('urls');
if(!urlsDiv) {
console.log('Could not find #urls div');
return;
}
let div = document.getElementById(data.info.url);
if(div && data.chat) {
appendUrlChat(div, data.chat);
return;
}
div = document.createElement('div');
div.className = 'url';
div.id = data.info.url;
console.log(data);
var html = '';
html += '<a class="thumbnail" target="_blank" href="' + util.escapeHtml(data.info.url) + '">';
html += '<img src="' + util.escapeHtml(data.info.thumbnail) + '" alt="">';
html += '<div class="duration">' + util.escapeHtml(util.secondsToTime(parseInt(data.info.duration))) + '</div>';
html += '</div>';
html += '<div class="title"><a target="_blank" href="' + util.escapeHtml(data.info.url) + '">' + util.escapeHtml(data.info.title) + '</a></div>';
html += '<div class="timestamp">' + util.escapeHtml(data.timestamp||'') + '</div>';
html += '<div class="clearfix"></div>';
if(!data.chats && data.chat) {
data.chats = [ data.chat ];
}
div.innerHTML = html;
for(let chat of data.chats) {
appendUrlChat(div, chat);
}
urlsDiv.appendChild(div);
}
function handleMessage(message) {
// we only monitor URLs in this section
if(message.type != 'url')
return;
var data = message.data;
console.log(data);
appendUrl(data);
}
var socket = null;
function initWebsocket() {
socket = new WebSocket(config.socketUrl);
socket.onopen = (evt) => {
console.log('Connected to websocket', config.socketUrl);
};
socket.onclose = (evt) => {
console.error('websocket closed', evt, socket.readyState);
socket.onopen = socket.onclose = socket.onerror = socket.onmessage = undefined;
socket = null;
setTimeout(() => { this.initWebsocket(); }, 1000);
};
socket.onerror = (evt) => {
console.error('websocket error', evt, socket.readyState);
socket.onopen = socket.onclose = socket.onerror = socket.onmessage = undefined;
socket = null;
setTimeout(() => { this.initWebsocket(); }, 1000);
};
socket.onmessage = (ev) => {
var data;
try {
data = JSON.parse(ev.data);
} catch(e) {
console.error('Could not parse JSON', ev.data, e);
}
if(data)
handleMessage(data);
};
}
initWebsocket();
fetch('/urls')
.then((response) => { return response.json(); })
.then(urls => { for(let u of urls) appendUrl(u); });
Loading…
Cancel
Save