Skip to content

Commit

Permalink
Improve zero-width/overlay for twitch emotes
Browse files Browse the repository at this point in the history 
related to #242
  • Loading branch information
@fgl27
fgl27 committed Dec 19, 2024
1 parent 4be43a7 commit d0e5adf
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 27 deletions.
35 changes: 17 additions & 18 deletions app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1389,8 +1389,8 @@
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
will-change: transform;
/* on chrome do to the focus class side_panel_new_icons_text that uses background: linear-gradient
is needed to add a border here to prevent visual glitches right on the border of the element
border-right: 2px solid #000000;*/
is needed to add a border here to prevent visual glitches right on the border of the element
border-right: 2px solid #000000;*/
}

.side_panel_fix {
Expand Down Expand Up @@ -2352,15 +2352,14 @@
}

.zero-width-container {
display: inline-block;
position: relative;
display: inline-grid;
vertical-align: -0.35em;
}

.zero-width-emote {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
grid-column: 1;
grid-row: 1;
margin: auto;
}

.emoji {
Expand Down Expand Up @@ -2642,16 +2641,16 @@
}

/* Simple way to see center of screen
.center {
border: 2px solid blue;
margin: auto;
background: #F00;
position: relative;
text-align: center;
top: 50%;
width: 20%;
color: #FFF;
}*/
.center {
border: 2px solid blue;
margin: auto;
background: #F00;
position: relative;
text-align: center;
top: 50%;
width: 20%;
color: #FFF;
}*/
</style>
</head>

Expand Down
29 changes: 25 additions & 4 deletions app/specific/ChatLive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -671,6 +671,7 @@ function ChatLive_updateExtraEmotes(obj, chat_number) {
code: obj[property].code,
id: obj[property].id,
chat_div: obj[property].chat_div,
chat_div_zero: obj[property].chat_div_zero,
'4x': obj[property]['4x'],
srcset: obj[property].srcset
};
Expand Down Expand Up @@ -810,7 +811,7 @@ function ChatLive_loadEmotesseven_tv(data, chat_number, isGlobal) {
extraEmotesDone.seven_tv[ChatLive_selectedChannel_id[chat_number]] = {};
}

var url, srcset, chat_div, id, emoteUrls, baseEmoteUrl, emote;
var url, srcset, chat_div, chat_div_zero, id, emoteUrls, baseEmoteUrl, emote;

try {
emotes.forEach(function (seven_tv_emote) {
Expand All @@ -836,14 +837,16 @@ function ChatLive_loadEmotesseven_tv(data, chat_number, isGlobal) {
srcset = ChatLive_seven_tv_srcset(baseEmoteUrl, emoteUrls);
chat_div = emoteTemplate(url, srcset);
id = emote.name + emote.id;
chat_div_zero = emote.flags === 256 ? chat_div.replace('emoticon', 'emoticon zero-width-emote') : null;

extraEmotes[chat_number][emote.name] = {
code: emote.name,
id: id,
chat_div: chat_div,
chat_div_zero: chat_div_zero,

'4x': url,
srcset: srcset,
chat_div_zero: emote.flags === 256 ? chat_div.replace('emoticon', 'emoticon zero-width-emote') : null
srcset: srcset
};

//Don't copy to prevent shallow clone
Expand All @@ -852,6 +855,8 @@ function ChatLive_loadEmotesseven_tv(data, chat_number, isGlobal) {
code: emote.name,
id: id,
chat_div: chat_div,
chat_div_zero: chat_div_zero,

'4x': url,
srcset: srcset
};
Expand All @@ -860,6 +865,8 @@ function ChatLive_loadEmotesseven_tv(data, chat_number, isGlobal) {
code: emote.name,
id: id,
chat_div: chat_div,
chat_div_zero: chat_div_zero,

'4x': url,
srcset: srcset
};
Expand Down Expand Up @@ -1822,11 +1829,25 @@ function ChatLive_checkEmotes(tags) {
}

function ChatLive_extraMessageTokenize(tokenizedMessage, chat_number, tags) {
var wasArray = false;

for (var i = 0, len = tokenizedMessage.length; i < len; i++) {
if (!tokenizedMessage[i]) {
continue;
}

if (typeof tokenizedMessage[i] === 'string') {
tokenizedMessage[i] = extraMessageTokenize(tokenizedMessage[i], chat_number, tags);
if (i && wasArray) {
tokenizedMessage[i - 1] = extraMessageTokenize(tokenizedMessage[i], chat_number, tags, tokenizedMessage[i - 1]);
tokenizedMessage[i] = '';
} else {
tokenizedMessage[i] = extraMessageTokenize(tokenizedMessage[i], chat_number, tags);
}

wasArray = false;
} else {
tokenizedMessage[i] = tokenizedMessage[i][0];
wasArray = true;
}
}

Expand Down
15 changes: 10 additions & 5 deletions app/thirdparty/kapchat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,18 @@ function mescape(message) {
return message.replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

function extraMessageTokenize(message, chat_number, bits) {
function extraMessageTokenize(message, chat_number, bits, previewsEmote) {
var SplittedMessage = message.split(' '),
emote,
cheer,
i = 0,
len = SplittedMessage.length;
len = SplittedMessage.length,
skipEscape;

if (previewsEmote) {
SplittedMessage[0] = previewsEmote;
skipEscape = true;
}

for (i; i < len; i++) {
cheer = bits ? findCheerInToken(SplittedMessage[i], chat_number) : 0;
Expand All @@ -63,7 +69,7 @@ function extraMessageTokenize(message, chat_number, bits) {
SplittedMessage[i] = '';
SplittedMessage[i - 1] = zeroWidth(SplittedMessage[i - 1], emote.chat_div_zero);
} else {
SplittedMessage[i] = emote ? emote.chat_div : mescape(SplittedMessage[i]);
SplittedMessage[i] = emote ? emote.chat_div : !i && skipEscape ? SplittedMessage[i] : mescape(SplittedMessage[i]);
}
}
}
Expand All @@ -72,7 +78,7 @@ function extraMessageTokenize(message, chat_number, bits) {
}

function zeroWidth(parent, zero) {
return '<div class="zero-width-container" >' + parent + zero + '</div>';
return '<div class="zero-width-container" >' + parent.replace('emoticon', 'emoticon zero-width-emote') + zero + '</div>';
}

function findCheerInToken(message, chat_number) {
Expand Down Expand Up @@ -158,7 +164,6 @@ function emoticonize(message, emotes) {

// Unshift the remaining part of the message (that contains no emotes)
tokenizedMessage.unshift(punycode.ucs2.encode(message));

return tokenizedMessage;
}

Expand Down

0 comments on commit d0e5adf

Please sign in to comment.