Re-fetch player images if the imageUrl changes

This commit is contained in:
James Lyne 2022-02-06 13:04:04 +00:00
parent b75d1022b7
commit b144b817af
3 changed files with 7 additions and 1 deletions

View File

@ -55,6 +55,7 @@ export default defineComponent({
configurationHash = computed(() => store.state.configurationHash),
chatBoxEnabled = computed(() => store.state.components.chatBox),
chatVisible = computed(() => store.state.ui.visibleElements.has('chat')),
playerImageUrl = computed(() => store.state.components.players.imageUrl),
loggedIn = computed(() => store.state.loggedIn), //Whether the user is currently logged in
loginRequired = computed(() => store.state.loginRequired), //Whether logging is required to view the current server
@ -199,6 +200,9 @@ export default defineComponent({
store.commit(MutationTypes.HIDE_UI_MODAL, 'login');
}
});
watch(playerImageUrl, () => {
clearHeadCache();
});
handleUrl();
onResize();

View File

@ -40,6 +40,7 @@ export default defineComponent({
image = ref(defaultImage),
name = computed(() => typeof props.player === 'string' ? props.player : props.player.name),
imagesEnabled = computed(() => store.state.components.players.showImages),
imageUrl = computed(() => store.state.components.players.imageUrl),
updatePlayerImage = async () => {
image.value = defaultImage;
@ -54,6 +55,7 @@ export default defineComponent({
};
watch(name, () => updatePlayerImage());
watch(imageUrl, () => updatePlayerImage());
onMounted(() => updatePlayerImage());
return {

View File

@ -16,7 +16,7 @@
<template>
<li :class="`message message--${message.type}`">
<PlayerImage v-if="showFace" :player="message.playerAccount" width="16" height="16" class="message__face" />
<PlayerImage v-if="showFace && message.playerAccount" :player="message.playerAccount" width="16" height="16" class="message__face" />
<span v-if="messageChannel" class="message__channel" v-html="messageChannel"></span>
<span v-if="showSender" class="message__sender" v-html="message.playerName"></span>
<span class="message__content" v-html="messageContent"></span>