adb
/
matrix-chat
2
3
Fork 1
Code Issues Pull Requests Releases Wiki Activity

add fileInput, refactor eventContent

Browse Source
dev
adb 3 years ago
parent fb707fcde3
commit cce7af2178
5 changed files with 198 additions and 101 deletions
Show Stats Download Patch File Download Diff File

1
public/sym/ic_attach_file_white.svg
Unescape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 409 B

58
src/components/event.vue
Unescape View File

@ -2,34 +2,7 @@
<div class="event">
<div v-if="event.type==='m.room.message'" :class="type==='send'?'messageSend':'messageReceive'" class="message">
<reply-event :event="replyEvent" v-if="replyEvent"/>
<div v-if="event.content.msgtype==='m.text'" v-html="parseMessage(event.content.body)"/>
<div v-else-if="event.content.msgtype==='m.notice'" class="notice" v-html="parseMessage(event.content.body)"/>
<div v-else-if="event.content.msgtype==='m.image'" class="image">
<img :src="getMediaUrl(event.content.url)" :alt="event.content.body"/><br>
{{event.content.body}}
</div>
<div v-else-if="event.content.msgtype==='m.file'" class="file">
file: <a :href="getMediaUrl(event.content.url)">
{{event.content.filename || getMediaUrl(event.content.url)}}
</a><br>{{event.content.body}}
</div>
<div v-else-if="event.content.msgtype==='m.audio'" class="audio">
<audio controls>
<source :src="getMediaUrl(event.content.url)" :type="event.content.mimetype">
your browser doesn't support audio
</audio><br>
{{event.content.body}}
</div>
<div v-else-if="event.content.msgtype==='m.video'" class="video">
<video controls>
<source :src="getMediaUrl(event.content.url)" :type="event.content.mimetype">
your browser doesn't support video
</video><br>
{{event.content.body}}
</div>
<div v-else class="italic">unsupported message type {{event.content.msgtype}}</div>
<event-content :content="event.content"/>
<div class="time">{{getTime(event.origin_server_ts)}}</div>
</div>
<div v-else class="info">
@ -47,10 +20,11 @@ import {parseMessage} from '@/lib/eventUtils';
import {getTime} from '@/lib/getTimeStrings';
import {getMediaUrl} from '@/lib/getMxc';
import ReplyEvent from '@/components/replyEvent';
import EventContent from '@/components/eventContent';
export default {
name: 'message',
components: {ReplyEvent},
components: {EventContent, ReplyEvent},
props: {
type: String,
event: Object,
@ -134,32 +108,6 @@ export default {
.notice{
font-style: italic;
}
.image{
width: 100%;
img{
max-width: 100%;
height: auto;
max-height: 35rem;
border-radius: 0.5rem;
}
}
.video{
width: 100%;
video{
max-width: 100%;
height: auto;
max-height: 35rem;
border-radius: 0.5rem;
}
}
.audio{
audio{
max-width: 100%;
}
}
.italic{
font-style: italic;
}
}
.messageReceive{
background-color: #424141;

91
src/components/eventContent.vue
Unescape View File

@ -0,0 +1,91 @@
<template>
<div v-if="content.msgtype==='m.text'" v-html="parseMessage(content.body)"/>
<div v-else-if="content.msgtype==='m.notice'" class="notice" v-html="parseMessage(content.body)"/>
<div v-else-if="content.msgtype==='m.image'" class="image">
<img :src="getSource(content.url)" :alt="content.body"/><br>
{{content.body}}
</div>
<div v-else-if="content.msgtype==='m.file'" class="file">
<icon
title="file"
ic="./sym/ic_attach_file_white.svg"
/>
<div class="text">
<a :href="getSource(content.url)">
{{content.filename || getSource(content.url)}}
</a><br>{{content.body}}
</div>
</div>
<div v-else-if="content.msgtype==='m.audio'" class="audio">
<audio controls>
<source :src="getSource(content.url)" :type="content.mimetype">
your browser doesn't support audio
</audio><br>
{{content.body}}
</div>
<div v-else-if="content.msgtype==='m.video'" class="video">
<video controls>
<source :src="getSource(content.url)" :type="content.mimetype">
your browser doesn't support video
</video><br>
{{content.body}}
</div>
<div v-else class="italic">unsupported message type {{content.msgtype}}</div>
</template>
<script>
import {getMediaUrl} from '@/lib/getMxc';
import {parseMessage} from '@/lib/eventUtils';
import Icon from '@/components/icon';
export default {
name: 'eventContent',
components: {Icon},
props: {
content: Object
},
methods: {
getSource(url){
return url.includes('mxc')?getMediaUrl(url):url;
},
parseMessage
}
}
</script>
<style scoped lang="scss">
.file{
.text{
position: relative;
left: 4rem;
top: 0;
width: 100%;
}
}
.image{
width: 100%;
img{
max-width: 100%;
height: auto;
max-height: 35rem;
border-radius: 0.5rem;
}
}
.video{
width: 100%;
video{
max-width: 100%;
height: auto;
max-height: 35rem;
border-radius: 0.5rem;
}
}
.audio{
audio{
max-width: 100%;
}
}
.italic{
font-style: italic;
}
</style>

145
src/components/newMessage.vue
Unescape View File

@ -1,57 +1,69 @@
<template>
<div class="newMessageBanner" ref="newMessageBanner">
<reply-event v-if="replyTo" :event="replyTo" @click.native="resetReplyTo()"/>
<form v-on:submit.prevent="sendMessage()">
<textarea
@keyup.enter.exact="sendMessage()"
@input="resizeMessageBanner(); sendTyping(2000);"
v-model="event.content.body"
ref="newMessageInput" class="newMessageInput"
rows="1" placeholder="type a message ..."
/>
<div class="newMessageBanner" ref="newMessageBanner">
<reply-event v-if="replyTo" :event="replyTo" @click.native="resetReplyTo()"/>
<event-content v-if="attachment" :content="attachment" class="attachment"/>
<form v-on:submit.prevent="sendMessage()">
<textarea
@keyup.enter.exact="sendMessage()"
@input="resizeMessageBanner(); sendTyping(2000);"
v-model="event.content.body"
ref="newMessageInput" class="newMessageInput"
rows="1" placeholder="type a message ..."
/>
<icon
v-if="event.content.body && !isRecording"
type="submit"
title="press enter to submit"
class="sendMessageBtn"
ic="./sym/ic_send_white.svg"
/>
<div v-else class="recorder">
<icon
v-if="event.content.body && !isRecording"
type="submit"
title="press enter to submit"
class="sendMessageBtn"
ic="./sym/ic_send_white.svg"
v-if="!isRecording"
title="record voice"
class="recordBtn start"
ic="./sym/ic_mic_white.svg"
@click.native="startRecording()"
ref="startRecord"
/>
<div v-else class="recorder">
<div v-else class="voiceMeterContainer">
<div class="voiceMeter" ref="voiceMeter"></div>
<icon
v-if="!isRecording"
title="record voice"
class="recordBtn start"
class="recordBtn stop"
ic="./sym/ic_mic_white.svg"
@click.native="startRecording()"
ref="startRecord"
@click.native="stopRecording()"
ref="stopRecord"
/>
<div v-else class="voiceMeterContainer">
<div class="voiceMeter" ref="voiceMeter"></div>
<icon
title="record voice"
class="recordBtn stop"
ic="./sym/ic_mic_white.svg"
@click.native="stopRecording()"
ref="stopRecord"
/>
</div>
</div>
</form>
</div>
</form>
<div class="mediaButtons">
<icon
title="toggle emoji"
class="emojiToggle"
class="leftBtn emojiToggle"
ic="./sym/ic_insert_emoticon_white.svg"
@click.native="toggleEmojiPicker()"
/>
<v-emoji-picker
v-if="showEmojiPicker"
class="emojiPicker"
@select="onSelectEmoji"
:dark="true"
:continuousList="true"
<icon
title="upload media"
class="leftBtn attachFile"
ic="./sym/ic_attach_file_white.svg"
@click.native="$refs.fileInput.click()"
/>
<input
type="file" id="fileInput" ref="fileInput"
@change="setAttachment($refs.fileInput.files[0])"
>
</div>
<v-emoji-picker
v-if="showEmojiPicker"
class="emojiPicker"
@select="onSelectEmoji"
:dark="true"
:continuousList="true"
/>
</div>
</template>
<script>
@ -62,11 +74,13 @@ import {calcUserName} from '@/lib/matrixUtils';
import ReplyEvent from '@/components/replyEvent';
import {VEmojiPicker} from 'v-emoji-picker';
import Recorder from 'recorder-js';
import EventContent from '@/components/eventContent';
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
export default {
name: 'newMessage',
components: {
EventContent,
ReplyEvent,
icon,
VEmojiPicker
@ -128,6 +142,26 @@ export default {
this.$refs.voiceMeter.style.height = `calc(3rem + ${value/4}px`;
this.$refs.voiceMeter.style.width = `calc(3rem + ${value/4}px`;
},
setAttachment(file){
let reader = new FileReader();
reader.onerror = console.error;
reader.onload = event => {
this.attachment = {
msgtype: this.getMsgType(file.type),
mimetype: file.type,
url: event.target.result
};
this.event.content.body = file.name;
}
reader.readAsDataURL(file);
},
getMsgType(fileType){
return {
'image': 'm.image',
'audio': 'm.audio',
'video': 'm.video'
}[fileType.split('/', 1)[0]] || 'm.file';
},
parseMessage,
calcUserName
},
@ -147,12 +181,16 @@ export default {
},
showEmojiPicker: false,
waitForSendTyping: false,
recorder: new Recorder(audioContext, {
recorder: new Recorder(audioContext, {
onAnalysed: data => this.setVoiceMeter(data.lineTo)
}),
isRecording: false,
recBlob: undefined
recBlob: undefined,
attachment: undefined
}
},
updated() {
this.resizeMessageBanner();
}
}
</script>
@ -173,10 +211,10 @@ export default {
margin-top: 1.25rem;
margin-bottom: 0.75rem;
padding: 0;
left: 3rem;
left: 5.5rem;
min-height: 1.5rem;
max-height: 10rem;
width: calc(100% - 7rem);
width: calc(100% - 10rem);
height: 1.25rem;
background-color: #fff0;
border: 0 solid #fff0;
@ -215,8 +253,15 @@ export default {
z-index: 10;
max-width: calc(100% - 0.5rem - 2px);
}
.emojiToggle{
.mediaButtons{
position: absolute;
left: 0;
bottom: 0;
height: fit-content;
width: fit-content;
}
.leftBtn{
position: relative;
left: 0.25rem;
bottom: 0.5rem;
background-color: unset;
@ -262,4 +307,16 @@ export default {
border-radius: 0 1rem 0 0;
overflow: hidden;
}
#fileInput{
display: none;
}
.attachment{
max-width: 5rem;
}
img{
max-width: 10rem;
height: auto;
max-height: 4rem;
border-radius: 0.5rem;
}
</style>

4
src/lib/NotificationHandler.js
Unescape View File

@ -1,4 +1,4 @@
import {getMxcFromUserId, getAvatarUrl} from '@/lib/getMxc';
import {getMxcFromUserId, getPreviewUrl} from '@/lib/getMxc';
import {calcUserName} from '@/lib/matrixUtils';
import {getRoom} from '@/lib/matrixUtils';
import {router} from '@/router';
@ -22,7 +22,7 @@ export class NotificationHandler{
let mxc = getMxcFromUserId(event.sender);
new Notification(`${calcUserName(event.sender)} in ${getRoom(event.room_id).name}`, {
body: event.content.body,
icon: mxc?getAvatarUrl(mxc):undefined
icon: mxc?getPreviewUrl(mxc):undefined
}).onclick = ()=>router.push(`/rooms/${event.room_id}`);
}
}
Write Preview
Loading…
Cancel
Save