Skip to content

Commit 8514798

Browse files
chrisspieglchrisspiegl
committed
Cleaned up & improved styling & added transitions support.
1 parent 9272920 commit 8514798

File tree

1 file changed

+201
-145
lines changed

1 file changed

+201
-145
lines changed

‎tools/chat-overlay.html

+201-145
Original file line numberDiff line numberDiff line change
@@ -15,114 +15,146 @@
1515
<script src="https://cdnjs.cloudflare.com/ajax/libs/textfit/2.4.0/textFit.min.js" integrity="sha512-vLs5rAqfvmv/IpN7JustROkGAvjK/L+vgVDFe7KpdtLztqF8mZDfleK2MZj/xuOrWjma0pW+lPCMcBbPKJVC7g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
1616
<style>
1717
:root {
18-
/* basic colors */
19-
--keyer-bg-color: #000; /* change for a chroma key if you want, beware profile avatars may key out */
20-
--comment-color: #fff;
21-
--comment-bg-color: #222; /* needs to be slightly above black to not get keyed out */
22-
--comment-border-radius: 0px;
23-
--comment-font-size: 40px;
24-
--author-color: #222;
25-
--author-bg-color: #ffa500;
26-
--author-avatar-border-color: #ffa500;
27-
--author-border-radius: 0px;
28-
--author-avatar-border-size: 3px;
29-
--author-avatar-size: 128px;
30-
--author-font-size: 30px;
31-
32-
/* donation/superchat specific */
33-
--donation-color: #5a4211;
34-
--donation-bg-color: #fff;
35-
--donation-gradient-stop0: #BF953F;
36-
--donation-gradient-stop1: #ede599;
37-
--donation-gradient-stop2: #B38728;
38-
--donation-label-color: #fff;
39-
--donation-label-text: 'SUPERCHAT';
40-
--donation-shadow-color: #fff;
41-
42-
--shown-comment-bg-color: #555555;
43-
--highlighted-comment-bg-color: #f0f07d;
44-
45-
/*
46-
LAYOUT
47-
*/
48-
--comment-width: auto; /* go 100% for a full screen lower third style*/
49-
--comment-padding: 20px 40px 20px 140px;
50-
--comment-area-height: 30vh;
51-
--comment-scale: 1;
52-
--comment-area-size-offset: 0;
53-
--comment-area-bottom: 10px;
54-
/*
55-
STYLE
56-
*/
57-
--font-family: Avenir Next, Helvetica, Geneva, Verdana, Arial, sans-serif;
58-
--highlight-chat-font-weight: 600;
59-
--author-font-weight: 700;
60-
--comment-font-weight: 600;
18+
/* basic colors */
19+
--keyer-bg-color: #000; /* change for a chroma key if you want, beware profile avatars may key out */
20+
--comment-color: #fff;
21+
--comment-bg-color: #222; /* needs to be slightly above black to not get keyed out */
22+
--comment-border-radius: 0px;
23+
--comment-font-size: 40px;
24+
--author-color: #222;
25+
--author-bg-color: #ffa500;
26+
--author-avatar-border-color: #ffa500;
27+
--author-border-radius: 0px;
28+
--author-avatar-border-size: 3px;
29+
--author-avatar-size: 128px;
30+
--author-font-size: 30px;
31+
32+
/* donation/superchat specific */
33+
--donation-color: #5a4211;
34+
--donation-bg-color: #fff;
35+
--donation-gradient-stop0: #BF953F;
36+
--donation-gradient-stop1: #ede599;
37+
--donation-gradient-stop2: #B38728;
38+
--donation-label-color: #fff;
39+
--donation-label-text: 'SUPERCHAT';
40+
--donation-shadow-color: #fff;
41+
42+
--shown-comment-bg-color: #555555;
43+
--highlighted-comment-bg-color: #f0f07d;
44+
45+
/*
46+
LAYOUT
47+
*/
48+
--comment-width: auto; /* go 100% for a full screen lower third style*/
49+
--comment-padding: 20px 40px 20px 140px;
50+
--comment-area-height: 30vh;
51+
--comment-scale: 1;
52+
--comment-area-size-offset: 0;
53+
--comment-area-bottom: 10px;
54+
/*
55+
STYLE
56+
*/
57+
--font-family: Avenir Next, Helvetica, Geneva, Verdana, Arial, sans-serif;
58+
--highlight-chat-font-weight: 600;
59+
--author-font-weight: 700;
60+
--comment-font-weight: 600;
6161
}
6262

6363
/****** SPIEGLIO OVERRIDES BEGIN */
6464
:root {
65-
/* basic colors */
66-
--keyer-bg-color: #000; /* change for a chroma key if you want, beware profile avatars may key out */
67-
--comment-color: #fff;
68-
--comment-bg-color: #222830; /* needs to be slightly above black to not get keyed out */
69-
--comment-border-radius: 0px;
70-
--comment-font-size: 40px;
71-
--author-color: #ffffff;
72-
--author-bg-color: #cc5630;
73-
--author-avatar-border-color: #cc5630;
74-
--author-border-radius: 0px;
75-
--author-avatar-border-size: 3px;
76-
--author-avatar-size: 128px;
77-
--author-font-size: 30px;
78-
79-
/* donation/superchat specific */
80-
--donation-color: #5a4211;
81-
--donation-bg-color: #fff;
82-
--donation-gradient-stop0: #BF953F;
83-
--donation-gradient-stop1: #ede599;
84-
--donation-gradient-stop2: #B38728;
85-
--donation-label-color: #fff;
86-
--donation-label-text: 'SUPERCHAT';
87-
--donation-shadow-color: #fff;
88-
89-
--shown-comment-bg-color: #555555;
90-
--highlighted-comment-bg-color: #f0f07d;
91-
92-
/* LAYOUT */
93-
--comment-width: auto; /* go 100% for a full screen lower third style*/
94-
--comment-text-max-height: 120px;
95-
--comment-padding: 25px 20px 10px 130px;
96-
--comment-area-height: 30vh;
97-
--comment-scale: 1;
98-
--comment-area-size-offset: 0;
99-
--comment-area-bottom: 10px;
100-
101-
/* STYLE */
102-
--font-family: Avenir Next, Helvetica, Geneva, Verdana, Arial, sans-serif;
103-
--highlight-chat-font-weight: 600;
104-
--author-font-weight: 700;
105-
--comment-font-weight: 600;
65+
/* basic colors */
66+
--keyer-bg-color: #000; /* change for a chroma key if you want, beware profile avatars may key out */
67+
--comment-color: #fff;
68+
--comment-bg-color: #222830; /* needs to be slightly above black to not get keyed out */
69+
--comment-border-radius: 0px;
70+
--comment-font-size: 40px;
71+
--author-color: #ffffff;
72+
--author-bg-color: #cc5630;
73+
--author-avatar-border-color: #cc5630;
74+
--author-border-radius: 0px;
75+
--author-avatar-border-size: 3px;
76+
--author-avatar-size: 128px;
77+
--author-font-size: 30px;
78+
79+
/* donation/superchat specific */
80+
--donation-color: #5a4211;
81+
--donation-bg-color: #fff;
82+
--donation-gradient-stop0: #BF953F;
83+
--donation-gradient-stop1: #ede599;
84+
--donation-gradient-stop2: #B38728;
85+
--donation-label-color: #fff;
86+
--donation-label-text: 'SUPERCHAT';
87+
--donation-shadow-color: #fff;
88+
89+
--shown-comment-bg-color: #555555;
90+
--highlighted-comment-bg-color: #f0f07d;
91+
92+
/* LAYOUT */
93+
--comment-width: auto; /* go 100% for a full screen lower third style*/
94+
--comment-text-max-height: 120px;
95+
--comment-padding: 25px 20px 10px 130px;
96+
--comment-area-height: 30vh;
97+
--comment-scale: 1;
98+
--comment-area-size-offset: 0;
99+
--comment-area-bottom: 10px;
100+
101+
/* STYLE */
102+
--font-family: Avenir Next, Helvetica, Geneva, Verdana, Arial, sans-serif;
103+
--highlight-chat-font-weight: 600;
104+
--author-font-weight: 700;
105+
--comment-font-weight: 600;
106106
}
107107
/****** SPIEGLIO OVERRIDES END */
108108

109109
body {
110-
background-color: #0000;
110+
background-color: #0000;
111111
position: relative;
112-
left: 0px;
112+
left: 0px;
113113
background-color: rgba(0, 0, 0, 0);
114114
margin: 0px auto;
115115
overflow: hidden;
116116
}
117117

118118
#output {
119119
transform: translateY(30px);
120-
transition: .4s all cubic-bezier(0.250, 0.250, 0.105, 1.2);
120+
transform: translatex(10px);
121121
margin: 0 0 0 8px;
122+
transition: .5s all cubic-bezier(0.250, 0.250, 0.105, 1.2);
122123
}
124+
123125
.fadeout {
126+
animation: fadeout .5s;
127+
opacity: 0 !important;
128+
}
129+
.fadein {
130+
animation: fadein .5s;
131+
opacity: 1 !important;
132+
}
133+
134+
@keyframes fadein {
135+
from { opacity: 0; }
136+
to { opacity: 1; }
137+
}
138+
139+
@keyframes fadeout {
140+
from { opacity: 1; }
141+
to { opacity: 0; }
142+
}
143+
144+
.slidedown {
124145
transform: translateY(340px) !important;
125146
}
147+
.slideup {
148+
transform: translateY(0px) !important;
149+
}
150+
151+
.slideoutleft {
152+
transform: translatex(-100vw) !important;
153+
}
154+
.slideinleft {
155+
transform: translatex(10px) !important;
156+
}
157+
126158
yt-live-chat-app {
127159
margin-bottom: var(--comment-area-height);
128160
height: calc(100vh - var(--comment-area-height)) !important;
@@ -348,83 +380,107 @@
348380
</head>
349381
<body>
350382

351-
<div id="output" class="output"></div>
352-
<script>
383+
<div id="output" class="output"></div>
353384

385+
<script>
354386
(function (w) {
355387
w.URLSearchParams = w.URLSearchParams || function (searchString) {
356-
var self = this;
357-
self.searchString = searchString;
388+
const self = this
389+
self.searchString = searchString
358390
self.get = function (name) {
359-
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(self.searchString);
391+
const results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(self.searchString)
360392
if (results == null) {
361-
return null;
393+
return null
362394
}
363395
else {
364-
return decodeURI(results[1]) || 0;
396+
return decodeURI(results[1]) || 0
365397
}
366-
};
367-
};
368-
369-
})(window);
370-
var urlParams = new URLSearchParams(window.location.search);
398+
}
399+
}
371400

401+
})(window)
402+
403+
const urlParams = new URLSearchParams(window.location.search)
404+
405+
const transitionStyles = {
406+
slideup: {
407+
in: 'slideup',
408+
out: 'slidedown',
409+
},
410+
slideleft: {
411+
in: 'slideinleft',
412+
out: 'slideoutleft',
413+
},
414+
fadein: {
415+
in: 'fadein',
416+
out: 'fadeout',
417+
}
418+
}
372419

373-
var nextComment = null;
374-
var roomID = "test";
420+
let transition = transitionStyles.fadein
375421

376-
if (urlParams.has("session")){
377-
roomID = urlParams.get("session");
378-
} else if (urlParams.has("s")){
379-
roomID = urlParams.get("s");
380-
} else {
381-
window.location.href = "https://github.com/steveseguin/live-chat-overlay#readme";
422+
if (urlParams.has("style")) {
423+
transition = transitionStyles[urlParams.get("style")] || transition
382424
}
383425

426+
console.log(`transition:`, transition)
427+
428+
let nextComment = null
429+
let roomID = "test"
384430

385-
//var counter=0;
386-
var idle = null;
431+
if (urlParams.has("session")) {
432+
roomID = urlParams.get("session")
433+
} else if (urlParams.has("s")) {
434+
roomID = urlParams.get("s")
435+
} else {
436+
window.location.href = "https://github.com/steveseguin/live-chat-overlay#readme"
437+
}
387438

388-
var socket = new WebSocket("wss://api.action.wtf:666");
439+
const socket = new WebSocket("wss://api.action.wtf:666")
389440

390-
socket.onclose = function (){
391-
setTimeout(function(){window.location.reload(true);},100);
392-
};
441+
socket.onclose = function () {
442+
setTimeout(function() {
443+
window.location.reload(true)
444+
}, 100)
445+
}
393446

394-
socket.onopen = function (){
395-
socket.send(JSON.stringify({"join":roomID}));
447+
socket.onopen = function () {
448+
socket.send(JSON.stringify({ "join": roomID }))
396449
}
397450

451+
const outputElement = document.getElementById("output")
452+
outputElement.classList.add(transition.out)
453+
398454
socket.addEventListener('message', function (event) {
399-
if (event.data){
400-
var data = JSON.parse(event.data);
401-
if (data.contents){
402-
data = data.contents;
403-
document.getElementById("output").classList.add("fadeout");
404-
clearInterval(nextComment);
405-
nextComment = setTimeout(function(){
406-
document.getElementById("output").innerHTML = '<div class="hl-c-cont highlight-chat">'
407-
+ '<div class="hl-name">' + data.chatname
408-
+ '<div class="hl-badges">' + data.chatbadges + '</div>'
409-
+ '</div>'
410-
+ '<div class="hl-message" style="'+ data.backgroundColor +' '+ data.textColor +'">' + data.chatmessage + '</div>'
411-
+ '<div class="hl-img"><img src="' + data.chatimg + '" onerror="this.style.display=\'none\'"></div>'
412-
+ data.hasDonation + data.hasMembership +'</div>';
413-
document.getElementById("output").classList.remove("fadeout");
414-
textFit(document.getElementsByClassName('hl-name'), { multiLine: false })
415-
textFit(document.getElementsByClassName('hl-message'))
416-
},500);
417-
} else {
418-
document.getElementById("output").classList.add("fadeout");
419-
clearInterval(nextComment);
420-
}
455+
if (!event.data) return
456+
const eventData = JSON.parse(event.data)
457+
if (!eventData.contents) {
458+
// Fade out Clearing
459+
console.log(`Clearing`)
460+
outputElement.classList.add(transition.out)
461+
outputElement.classList.remove(transition.in)
462+
return clearInterval(nextComment)
421463
}
422-
});
423-
424-
socket.onclose = function (){
425-
setTimeout(function(){window.location.reload(true);},100);
426-
};
427-
428-
</script>
429-
</body>
464+
const data = eventData.contents
465+
outputElement.classList.add(transition.out)
466+
outputElement.classList.remove(transition.in)
467+
clearInterval(nextComment)
468+
nextComment = setTimeout(function() {
469+
outputElement.innerHTML = `<div class="hl-c-cont highlight-chat">
470+
<div class="hl-name">${data.chatname}
471+
<div class="hl-badges">${data.chatbadges}</div>
472+
</div>
473+
<div class="hl-message" style="${data.backgroundColor} ${data.textColor}">${data.chatmessage}</div>
474+
<div class="hl-img"><img src="${data.chatimg}" onerror="this.style.display='none'"></div>
475+
${data.hasDonation}
476+
${data.hasMembership}
477+
</div>`
478+
textFit(document.getElementsByClassName('hl-name'), { multiLine: false })
479+
textFit(document.getElementsByClassName('hl-message'))
480+
outputElement.classList.remove(transition.out)
481+
outputElement.classList.add(transition.in)
482+
}, 700)
483+
})
484+
</script>
485+
</body>
430486
</html>

0 commit comments

Comments
 (0)