<template> <section class="composite-page"> <div v-if="!sharedMiscState.isElectron" class="close-button-container" @click="hideCompositeMessagePage"> <i class="icon-ion-close"></i> </div> <div v-if="!compositeMessage"> {{ "Null CompositeMessagePage" }} </div> <ul v-else> <li v-for="(message, index) in compositeMessage.messageContent.messages" :key="message.uid"> <div class="message-container"> <div class="portrait-container"> <img v-if="index === 0 || message.from !== compositeMessage.messageContent.messages[index - 1].from" alt="" :src="message._from.portrait" /> </div> <div class="name-time-content-container"> <div class="name-time-container"> <p class="name">{{ message._from._displayName }}</p> <p class="time">{{ message._timeStr }}</p> <!-- <p class="time"> 1223</p>--> </div> <div class="content"> <!--message content--> <TextMessageContentView :message="message" v-if="message.messageContent.type === 1" :style="{ '--out-arrow-color': '#a8bdff', '--in-arrow-color': 'white' }" v-bind:class="{ leftarrow: message.direction === 1, rightarrow: message.direction === 0 }" /> <!-- <AudioMessageContentView :message="message"--> <!-- v-else-if="message.messageContent.type === 2"/>--> <ImageMessageContentView :message="message" :is-in-composite-view="true" v-else-if="message.messageContent.type === 3" /> <!-- v-bind:class="{leftarrow:message.direction === 1, rightarrow: message.direction === 0}"/>--> <FileMessageContentView :message="message" v-else-if="message.messageContent.type === 5" v-bind:class="{ leftarrow: message.direction === 1, rightarrow: message.direction === 0 }" /> <VideoMessageContentView :message="message" :is-in-composite-view="true" v-else-if="message.messageContent.type === 6" /> <!-- v-bind:class="{leftarrow:message.direction === 1, rightarrow: message.direction === 0}"/>--> <StickerMessageContentView :message="message" v-else-if="message.messageContent.type === 7" /> <CompositeMessageContentView :message="message" v-else-if="message.messageContent.type === 11" /> <!-- <CallStartMessageContentView :message="message"--> <!-- v-else-if="message.messageContent.type === 400"/>--> <!-- <ConferenceInviteMessageContentView :message="message"--> <!-- v-else-if="message.messageContent.type === 408"/>--> <UnsupportMessageContentView :message="message" v-else-if="[2, 10, 400, 408].indexOf(message.messageContent.type) >= 0" /> <UnknowntMessageContentView :message="message" v-else v-bind:class="{ leftarrow: message.direction === 1, rightarrow: message.direction === 0 }" /> </div> </div> </div> </li> </ul> </section> </template> <script> import TextMessageContentView from "./conversation/message/content/TextMessageContentView"; import UnsupportMessageContentView from "./conversation/message/content/UnsupportMessageContentView"; import store from "@/store.js"; import CompositeMessageContentView from "./conversation/message/content/CompositeMessageContentView"; import ImageMessageContentView from "./conversation/message/content/ImageMessageContentView"; import VideoMessageContentView from "./conversation/message/content/VideoMessageContentView"; import FileMessageContentView from "./conversation/message/content/FileMessageContentView"; import StickerMessageContentView from "./conversation/message/content/StickerMessageContentView"; import UnknowntMessageContentView from "./conversation/message/content/UnknownMessageContentView"; import Message from "../../wfc/messages/message"; import { stringValue } from "../../wfc/util/longUtil"; import wfc from "../../wfc/client/wfc"; import FavItem from "../../wfc/model/favItem"; import Conversation from "../../wfc/model/conversation"; import axios from "axios"; import { isElectron } from "../../platform"; export default { name: "CompositeMessagePage", props: { message: { required: false, type: Message, default: null, }, }, data() { return { compositeMessage: null, sharedMiscState: store.state.misc, }; }, mounted() { if (this.message) { this.compositeMessage = this.message; this.loadMediaCompositeMessage(this.compositeMessage); return; } let hash = window.location.hash; if (hash.indexOf("messageUid=") >= 0) { let messageUid = hash.substring(hash.indexOf("=") + 1); this.compositeMessage = store.getMessageByUid(messageUid); } else { let faveItemData = hash.substring(hash.indexOf("=") + 1); let favItemRaw = JSON.parse(wfc.b64_to_utf8(wfc.unescape(faveItemData))); let favItem = Object.assign(new FavItem(), favItemRaw); favItem.conversation = new Conversation(favItem.convType, favItem.convTarget, favItem.convLine); favItem.favType = favItem.type; this.compositeMessage = favItem.toMessage(); } store._patchMessage(this.compositeMessage, 0); document.title = this.compositeMessage.messageContent.title; this.loadMediaCompositeMessage(this.compositeMessage); }, methods: { hideCompositeMessagePage() { this.$modal.hide("show-composite-message-modal" + "-" + stringValue(this.message.messageUid)); }, loadMediaCompositeMessage(msg) { let content = msg.messageContent; if (content.remotePath) { if (isElectron()) { if (content.localPath && require("fs").existsSync(content.localPath)) { return; } } else { // web 姣忔鍔犺浇 // do nothing } axios.get(content.remotePath, { responseType: "arraybuffer" }).then((value) => { content._decodeMessages(new TextDecoder("utf-8").decode(value.data)); store._patchMessage(this.compositeMessage, 0); content.loaded = true; }); } }, previewCompositeMessage(focusMessageUid) { store.previewCompositeMessage(this.compositeMessage, focusMessageUid); }, }, components: { UnknowntMessageContentView, // ConferenceInviteMessageContentView, CompositeMessageContentView, // AudioMessageContentView, // CallStartMessageContentView, UnsupportMessageContentView, TextMessageContentView, ImageMessageContentView, VideoMessageContentView, FileMessageContentView, StickerMessageContentView, }, }; </script> <style scoped> .composite-page { width: var(--composite-message-page-width); height: var(--composite-message-page-height); background: #f7f7f7; overflow: scroll; } .close-button-container { position: absolute; padding: 5px 10px 10px 5px; top: 0; right: 0; } .close-button-container:active { background: lightgrey; } .composite-page ul { width: 100%; height: 100%; padding: 20px 30px; list-style-position: inside; } .composite-page ul li { position: relative; padding: 10px 0; } .composite-page ul li:not(:last-child)::after { content: ""; width: calc(100% - 55px); position: absolute; margin-left: 55px; padding: 5px 0; border-bottom: 1px solid #f1f1f1; } .message-container { width: 100%; display: flex; } .name-time-content-container { width: 100%; } .name-time-container { width: 100%; padding: 5px 0; display: flex; justify-content: space-between; } .name-time-container p { font-size: 12px; color: #c2c2c2; } .name-time-content-container .content { display: inline-block; margin-left: -10px; } .portrait-container { width: 40px; height: 40px; overflow: hidden; margin: 10px; } .portrait-container img { width: 100%; height: 100%; border-radius: 3px; } >>> .text-message-container.out { background-color: #f7f7f7; } >>> .text-message-container { background-color: #f7f7f7; padding-left: 0; } >>> .rightarrow::before { display: none; } >>> .leftarrow::before { display: none; } </style>