oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-08-07 14:50:56 +00:00
Code Wiki Activity

Add support for custom moderator badge images.

Browse source
This commit is contained in:
SirStendec 2018-03-15 03:31:30 -04:00
parent 96b03290c8
commit 41e80fd94c
5 changed files with 85 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

6
changelog.html
View file

@ -1,3 +1,9 @@
<div class="list-header">4.0.0-beta1.6<span>@3402c0380be5b35d7f16</span> <time datetime="2018-03-15">(2018-03-15)</time></div>
<ul class="chat-menu-content menu-side-padding">
<li>Added: Support for custom moderator badge images.</li>
<li>Fixed: Some badges appearing incorrectly with the Circular, Small badge style.</li>
</ul>
<div class="list-header">4.0.0-beta1.6<span>@b26925b82613bdc459b5</span> <time datetime="2018-03-14">(2018-03-14)</time></div>
<ul class="chat-menu-content menu-side-padding">
<li>Fixed: Minimal Navigation causing the navigation bar to render over theater mode.</li>

35
src/modules/chat/badges.js
View file

@ -214,6 +214,15 @@ export default class Badges extends Module {
}
});
this.settings.add('chat.badges.custom-mod', {
default: true,
ui: {
path: 'Chat > Badges >> tabs ~> Appearance',
title: 'Use custom moderator badges where available.',
component: 'setting-check-box'
}
})
this.settings.add('chat.badges.style', {
default: 0,
ui: {
@ -235,6 +244,7 @@ export default class Badges extends Module {
onEnable() {
this.parent.context.on('changed:chat.badges.custom-mod', this.rebuildAllCSS, this);
this.parent.context.on('changed:chat.badges.style', this.rebuildAllCSS, this);
this.parent.context.on('changed:theme.is-dark', this.rebuildAllCSS, this);
this.parent.context.on('changed:theme.tooltips-dark', this.rebuildAllCSS, this);
@ -289,7 +299,8 @@ export default class Badges extends Module {
render(msg, e) { // eslint-disable-line class-methods-use-this
const hidden_badges = this.parent.context.get('chat.badges.hidden') || [],
badge_style = this.parent.context.get('chat.badges.style'),
is_mask = badge_style >= 5,
custom_mod = this.parent.context.get('chat.badges.custom-mod'),
is_mask = badge_style > 5,
is_colored = badge_style !== 5,
has_image = badge_style !== 3 && badge_style !== 4,
@ -303,6 +314,7 @@ export default class Badges extends Module {
room_id = msg.roomID,
room_login = msg.roomLogin,
room = this.parent.getRoom(room_id, room_login, true),
badges = this.getBadges(user_id, user_login, room_id, room_login);
let last_slot = 50, slot;
@ -320,11 +332,24 @@ export default class Badges extends Module {
else
slot = last_slot++;
const badges = [{
const urls = badge_id === 'moderator' && custom_mod && room && room.data && room.data.mod_urls,
badges = [];
if ( urls ) {
const bd = this.getTwitchBadge(badge_id, version, room_id, room_login);
badges.push({
provider: 'ffz',
image: urls[4] || urls[2] || urls[1],
color: '#34ae0a',
title: bd ? bd.title : 'Moderator'
});
} else
badges.push({
provider: 'twitch',
badge: badge_id,
version
}];
});
slotted[slot] = {
id: badge_id,
@ -426,8 +451,10 @@ export default class Badges extends Module {
rebuildAllCSS() {
for(const room of this.parent.iterateRooms())
for(const room of this.parent.iterateRooms()) {
room.buildBadgeCSS();
room.buildModBadgeCSS();
}
this.buildBadgeCSS();
this.buildTwitchBadgeCSS();

10
src/modules/chat/index.js
View file

@ -237,15 +237,13 @@ export default class Chat extends Module {
});
this.context.on('changed:theme.is-dark', () => {
for(const key in this.rooms)
if ( this.rooms[key] )
this.rooms[key].buildBitsCSS();
for(const room of this.iterateRooms())
room.buildBitsCSS();
});
this.context.on('changed:chat.bits.animated', () => {
for(const key in this.rooms)
if ( this.rooms[key] )
this.rooms[key].buildBitsCSS();
for(const room of this.iterateRooms())
room.buildBitsCSS();
});
}

42
src/modules/chat/room.js
View file

@ -216,8 +216,20 @@ export default class Room {
this.manager.emotes.loadSetData(set_id, data.sets[set_id]);
// TODO: User data.
// TODO: Generate CSS.
const badges = data.user_badges;
if ( badges )
for(const badge_id in badges)
if ( has(badges, badge_id) )
for(const user of badges[badge_id])
this.getUser(undefined, user).addBadge('ffz', badge_id);
if ( data.css )
this.style.set('css', data.css);
else
this.style.delete('css');
this.buildModBadgeCSS();
return true;
}
@ -284,6 +296,30 @@ export default class Room {
this.buildBadgeCSS();
}
buildModBadgeCSS() {
if ( ! this.data || ! this.data.mod_urls || ! this.manager.context.get('chat.badges.custom-mod') )
return this.style.delete('mod-badge');
const style = this.manager.context.get('chat.badges.style'),
masked = style > 5 ? `${WEBKIT}mask` : 'background',
has_image = style !== 3 && style !== 4;
if ( ! has_image )
return this.style.delete('mod-badge');
const urls = this.data.mod_urls,
image = `url("${urls[1]}")`;
let image_set;
if ( urls[2] || urls[4] )
image_set = `${WEBKIT}image-set(${image} 1x${urls[2] ? `, url("${urls[2]}") 2x` : ''}${urls[4] ? `, url("${urls[4]}") 4x` : ''})`
this.style.set('mod-badge', `[data-room-id="${this.id}"] .ffz-badge[data-badge="moderator"] {
${masked}-image: ${image};
${image_set ? `${masked}-image: ${image_set};` : ''}
}`);
}
buildBadgeCSS() {
if ( ! this.badges )
return this.style.delete('badges');
@ -303,6 +339,8 @@ export default class Room {
background-color: transparent;
filter: none;
${WEBKIT}mask-image: none;
height: 1.8rem;
width: 1.8rem;
background-size: 1.8rem;
background-image: url("${data.image1x}");
background-image: ${WEBKIT}image-set(

1
src/sites/twitch-twilight/modules/chat/line.js
View file

@ -40,6 +40,7 @@ export default class ChatLine extends Module {
onEnable() {
this.chat.context.on('changed:chat.bits.stack', this.updateLines, this);
this.chat.context.on('changed:chat.badges.style', this.updateLines, this);
this.chat.context.on('changed:chat.badges.custom-mod', this.updateLines, this);
this.chat.context.on('changed:chat.rituals.show', this.updateLines, this);
const t = this,