mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-08-20 13:00:53 +00:00
880e80388a
* 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.
124 lines
No EOL
2.6 KiB
Vue
124 lines
No EOL
2.6 KiB
Vue
<template>
|
|
<section
|
|
class="ffz-emote-card__management"
|
|
: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.manage', 'Manage My Collections') }}</h4>
|
|
</div>
|
|
|
|
<figure
|
|
:class="{
|
|
'ffz-i-down-dir': expanded,
|
|
'ffz-i-left-dir': ! expanded
|
|
}"
|
|
/>
|
|
</div>
|
|
<simplebar
|
|
v-if="expanded"
|
|
classes="ffz-mh-30"
|
|
>
|
|
<div v-if="loading" class="tw-align-center tw-pd-1">
|
|
<h1 class="tw-mg-5 ffz-i-zreknarf loading" />
|
|
</div>
|
|
<div v-else-if="error" class="tw-align-center tw-pd-1">
|
|
<div class="tw-mg-t-1 tw-mg-b-2">
|
|
<img
|
|
src="//cdn.frankerfacez.com/emoticon/26608/2"
|
|
srcSet="//cdn.frankerfacez.com/emoticon/26608/2 1x, //cdn.frankerfacez.com/emoticon/26608/4 2x"
|
|
>
|
|
</div>
|
|
{{ t('emote-card.error', 'There was an error loading data.') }}
|
|
</div>
|
|
<CollectionEntry
|
|
v-else
|
|
v-for="collection in collections"
|
|
:key="collection.id"
|
|
:collection="collection"
|
|
:emote="emote"
|
|
:getFFZ="getFFZ"
|
|
:initial="presence.includes(collection.id)"
|
|
/>
|
|
</simplebar>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import CollectionEntry from './manage-ffz-collection.vue'
|
|
|
|
export default {
|
|
|
|
components: {
|
|
CollectionEntry
|
|
},
|
|
|
|
props: [
|
|
'emote',
|
|
'getFFZ'
|
|
],
|
|
|
|
data() {
|
|
return {
|
|
expanded: false,
|
|
loading: false,
|
|
error: false,
|
|
presence: null,
|
|
collections: null
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
toggle() {
|
|
this.expanded = ! this.expanded;
|
|
if ( this.expanded && ! this.collections )
|
|
this.loadCollections();
|
|
},
|
|
|
|
loadCollections() {
|
|
if ( this.loading )
|
|
return;
|
|
|
|
this.loading = true;
|
|
|
|
this._loadCollections()
|
|
.then(() => {
|
|
this.loading = false;
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
this.error = true;
|
|
this.loading = false;
|
|
});
|
|
},
|
|
|
|
async _loadCollections() {
|
|
const socket = this.getFFZ().resolve('socket'),
|
|
token = socket && await socket.getBareAPIToken();
|
|
|
|
if ( ! token )
|
|
throw new Error('Unable to get API token. Are you logged in?');
|
|
|
|
const server = this.getFFZ().resolve('staging').api,
|
|
results = await fetch(`${server}/v2/emote/${this.emote.id}/collections/editable?include=collection`, {
|
|
headers: {
|
|
Authorization: `Bearer ${token}`
|
|
}
|
|
}).then(r => r.ok ? r.json() : null);
|
|
|
|
this.presence = results?.emote?.collections ?? [];
|
|
this.collections = results?.collections;
|
|
|
|
if ( this.collections != null && Object.keys(this.collections).length === 0 )
|
|
throw new Error('No collections returned');
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script> |