mirror of
https://github.com/thelounge/thelounge
synced 2024-11-26 22:10:22 +00:00
109 lines
3.1 KiB
Vue
109 lines
3.1 KiB
Vue
<template>
|
|
<div
|
|
:id="'msg-' + message.id"
|
|
:class="['msg', message.type, {self: message.self, highlight: message.highlight}]"
|
|
:data-from="message.from && message.from.nick"
|
|
>
|
|
<span :aria-label="message.time | localetime" class="time tooltipped tooltipped-e"
|
|
>{{ messageTime }}
|
|
</span>
|
|
<template v-if="message.type === 'unhandled'">
|
|
<span class="from">[{{ message.command }}]</span>
|
|
<span class="content">
|
|
<span v-for="(param, id) in message.params" :key="id">{{ param }} </span>
|
|
</span>
|
|
</template>
|
|
<template v-else-if="isAction()">
|
|
<span class="from"><span class="only-copy">*** </span></span>
|
|
<Component :is="messageComponent" :network="network" :message="message" />
|
|
</template>
|
|
<template v-else-if="message.type === 'action'">
|
|
<span class="from"><span class="only-copy">* </span></span>
|
|
<span class="content" dir="auto">
|
|
<Username :user="message.from" dir="auto" /> <ParsedMessage
|
|
:network="network"
|
|
:message="message"
|
|
/>
|
|
<LinkPreview
|
|
v-for="preview in message.previews"
|
|
:key="preview.link"
|
|
:keep-scroll-position="keepScrollPosition"
|
|
:link="preview"
|
|
/>
|
|
</span>
|
|
</template>
|
|
<template v-else>
|
|
<span v-if="message.type === 'message'" class="from">
|
|
<template v-if="message.from && message.from.nick">
|
|
<span class="only-copy"><</span>
|
|
<Username :user="message.from" />
|
|
<span class="only-copy">> </span>
|
|
</template>
|
|
</span>
|
|
<span v-else-if="message.type === 'plugin'" class="from">
|
|
<template v-if="message.from && message.from.nick">
|
|
<span class="only-copy">[</span>
|
|
{{ message.from.nick }}
|
|
<span class="only-copy">] </span>
|
|
</template>
|
|
</span>
|
|
<span v-else class="from">
|
|
<template v-if="message.from && message.from.nick">
|
|
<span class="only-copy">-</span>
|
|
<Username :user="message.from" />
|
|
<span class="only-copy">- </span>
|
|
</template>
|
|
</span>
|
|
<span class="content" dir="auto">
|
|
<ParsedMessage :network="network" :message="message" />
|
|
<LinkPreview
|
|
v-for="preview in message.previews"
|
|
:key="preview.link"
|
|
:keep-scroll-position="keepScrollPosition"
|
|
:link="preview"
|
|
/>
|
|
</span>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Username from "./Username.vue";
|
|
import LinkPreview from "./LinkPreview.vue";
|
|
import ParsedMessage from "./ParsedMessage.vue";
|
|
import MessageTypes from "./MessageTypes";
|
|
|
|
const moment = require("moment");
|
|
const constants = require("../js/constants");
|
|
|
|
MessageTypes.ParsedMessage = ParsedMessage;
|
|
MessageTypes.LinkPreview = LinkPreview;
|
|
MessageTypes.Username = Username;
|
|
|
|
export default {
|
|
name: "Message",
|
|
components: MessageTypes,
|
|
props: {
|
|
message: Object,
|
|
network: Object,
|
|
keepScrollPosition: Function,
|
|
},
|
|
computed: {
|
|
messageTime() {
|
|
const format = this.$store.state.settings.showSeconds
|
|
? constants.timeFormats.msgWithSeconds
|
|
: constants.timeFormats.msgDefault;
|
|
|
|
return moment(this.message.time).format(format);
|
|
},
|
|
messageComponent() {
|
|
return "message-" + this.message.type;
|
|
},
|
|
},
|
|
methods: {
|
|
isAction() {
|
|
return typeof MessageTypes["message-" + this.message.type] !== "undefined";
|
|
},
|
|
},
|
|
};
|
|
</script>
|