mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-08-10 08:10:52 +00:00
4.45.0
* Added: Emote cards are now at parity with vanilla Twitch emote cards when it comes to displaying Twitch emotes, including the ability to follow/subscribe to the source channel, view their other emotes, and report emotes. * Added: Emote cards for FFZ emotes now allow you to add an emote to any collection you can manage. * Added: Emote cards for other emotes now have an action to open the emote on the source service's webpage. * Fixed: Effect emotes not appearing when used incorrectly in chat. * Fixed: Rebuild the tab-completion emote array in a way more likely to cause Twitch's native input element to update when we change our emotes. * Changed: Use a higher contrast "New" pill when displaying new items in the FFZ Control Center. (Closes #1348) * Changed: Push the modular chat line rendering experiment to 100% roll-out.
This commit is contained in:
SirStendec
parent
53814e7024
commit
880e80388a
25 changed files with 1382 additions and 54 deletions
185
src/modules/emote_card/components/modifiers.vue
Normal file
185
src/modules/emote_card/components/modifiers.vue
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
<template>
|
||||
<section
|
||||
class="ffz-emote-card__modifiers"
|
||||
:class="{'tw-pd-b-05': expanded}"
|
||||
>
|
||||
<div
|
||||
class="tw-flex tw-align-items-center tw-c-background-alt-2 tw-pd-y-05 tw-pd-x-1 ffz--cursor"
|
||||
@click="toggle"
|
||||
>
|
||||
<div class="tw-flex-grow-1">
|
||||
<h4>{{ t('emote-card.modifiers', 'Modifiers') }}</h4>
|
||||
</div>
|
||||
|
||||
<figure
|
||||
:class="{
|
||||
'ffz-i-down-dir': expanded,
|
||||
'ffz-i-left-dir': ! expanded
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="expanded"
|
||||
v-for="(mod, idx) in modifiers"
|
||||
:key="idx"
|
||||
class="tw-pd-05 tw-flex tw-align-items-center tw-border-t"
|
||||
>
|
||||
<div class="tw-mg-l-05 tw-inline-flex">
|
||||
<figure
|
||||
v-if="mod.icon"
|
||||
class="ffz-avatar ffz-avatar--50"
|
||||
>
|
||||
<img
|
||||
:src="mod.icon"
|
||||
class="tw-block tw-image tw-image-avatar"
|
||||
>
|
||||
</figure>
|
||||
<figure
|
||||
v-else
|
||||
class="ffz-avatar"
|
||||
:style="mod.imageStyle"
|
||||
>
|
||||
<img
|
||||
v-if="mod.src"
|
||||
:src="mod.src"
|
||||
:srcset="mod.srcSet"
|
||||
class="tw-block tw-image tw-image-avatar"
|
||||
>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="tw-align-left tw-flex-grow-1 tw-ellipsis tw-mg-x-1">
|
||||
<h4 class="tw-inline" :title="mod.name">{{ mod.name }}</h4>
|
||||
<p
|
||||
v-if="mod.source"
|
||||
class="tw-c-text-alt-2 tw-font-size-6"
|
||||
:title="mod.source_i18n ? t(mod.source_i18n, mod.source) : mod.source"
|
||||
>
|
||||
{{ mod.source_i18n ? t(mod.source_i18n, mod.source) : mod.source }}
|
||||
</p>
|
||||
<p v-if="mod.owner" class="tw-c-text-alt-2 tw-font-size-6">
|
||||
<t-list
|
||||
phrase="emote-card.owner"
|
||||
default="Owner: {owner}"
|
||||
>
|
||||
<template #owner>
|
||||
<a
|
||||
v-if="mod.ownerLink"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
:href="mod.ownerLink"
|
||||
>{{ mod.owner }}</a>
|
||||
<span v-else>{{ mod.owner }}</span>
|
||||
</template>
|
||||
</t-list>
|
||||
</p>
|
||||
<p v-if="mod.artist" class="tw-c-text-alt-2 tw-font-size-6">
|
||||
<t-list
|
||||
phrase="emote-card.artist"
|
||||
default="Artist: {artist}"
|
||||
>
|
||||
<template #artist>
|
||||
<a
|
||||
v-if="mod.artistLink"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
:href="mod.artistLink"
|
||||
class="ffz-i-artist"
|
||||
>{{ mod.artist }}</a>
|
||||
<span v-else>{{ mod.artist }}</span>
|
||||
</template>
|
||||
</t-list>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
|
||||
props: [
|
||||
'raw_modifiers',
|
||||
'getFFZ'
|
||||
],
|
||||
|
||||
data() {
|
||||
const ffz = this.getFFZ(),
|
||||
settings = ffz.resolve('settings'),
|
||||
provider = settings.provider;
|
||||
|
||||
return {
|
||||
expanded: provider.get('emote-card.expand-mods', true)
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
modifiers() {
|
||||
const ffz = this.getFFZ(),
|
||||
emotes = ffz.resolve('chat.emotes');
|
||||
|
||||
const out = [];
|
||||
|
||||
for(const [set_id, emote_id] of this.raw_modifiers) {
|
||||
if ( set_id === 'info' ) {
|
||||
out.push({
|
||||
type: 'info',
|
||||
icon: emote_id?.icon,
|
||||
name: emote_id?.label
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
const emote_set = emotes.emote_sets[set_id],
|
||||
emote = emote_set?.emotes?.[emote_id];
|
||||
|
||||
if ( emote ) {
|
||||
const is_effect = emote.modifier_flags != 0;
|
||||
|
||||
out.push({
|
||||
type: 'emote',
|
||||
id: emote.id,
|
||||
src: emote.animSrc ?? emote.src,
|
||||
srcSet: emote.animSrcSet ?? emote.srcSet,
|
||||
width: emote.width,
|
||||
height: emote.height,
|
||||
name: emote.name,
|
||||
imageStyle: {
|
||||
width: `${Math.min(112, (emote.width ?? 28) * 1)}px`,
|
||||
height: `${(emote.height ?? 28) * 1}px`
|
||||
},
|
||||
source: emote_set.source_line || (`${emote_set.source || 'FFZ'} ${emote_set.title || 'Global Emotes'}`),
|
||||
owner: emote.owner && ! is_effect
|
||||
? (emote.owner.display_name || emote.owner.name)
|
||||
: null,
|
||||
ownerLink: emote.owner && ! is_effect && ! emote_set.source
|
||||
? `https://www.frankerfacez.com/${emote.owner.name}`
|
||||
: null,
|
||||
artist: emote.artist
|
||||
? (emote.artist.display_name || emote.artist.name)
|
||||
: null,
|
||||
artistLink: emote.artist && ! emote_set.source
|
||||
? `https://www.frankerfacez.com/${emote.artist.name}`
|
||||
: null,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return out;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggle() {
|
||||
const ffz = this.getFFZ(),
|
||||
settings = ffz.resolve('settings'),
|
||||
provider = settings.provider;
|
||||
|
||||
this.expanded = ! this.expanded
|
||||
provider.set('emote-card.expand-mods', this.expanded);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue