diff --git a/frontend/components/SendBox/SendBox.vue b/frontend/components/SendBox/SendBox.vue index 79c14c9..019d461 100644 --- a/frontend/components/SendBox/SendBox.vue +++ b/frontend/components/SendBox/SendBox.vue @@ -15,27 +15,34 @@ type PendingAttachment = { // createRandomToken borrowed from sip.js, which does not export it :( // https://github.com/onsip/SIP.js/blob/main/src/core/messages/utils.ts#L85 function createRandomToken(size: number, base = 32): string { - let token = ""; - for (let i = 0; i < size; i++) { - const r: number = Math.floor(Math.random() * base); - token += r.toString(base); - } - return token; + let token = ""; + for (let i = 0; i < size; i++) { + const r: number = Math.floor(Math.random() * base); + token += r.toString(base); + } + return token; +} +const MAXFILESIZE = 500000; //<---500KB in bytes +function verifyFileSize(file: File) { + if (file.size < MAXFILESIZE) { + return true; + } + return false; } export default { data(): { - enteredText: string, - pendingAttachments: PendingAttachment[], - state: GlobalState, - } { + enteredText: string, + pendingAttachments: PendingAttachment[], + state: GlobalState, + } { return { enteredText: "", pendingAttachments: [], state: state, } }, - name:"SendBox", + name: "SendBox", props: { remoteNumber: { type: String, @@ -52,7 +59,7 @@ export default { keypress(e: KeyboardEvent) { if (e.key == "Enter" && !e.shiftKey) { e.preventDefault(); - if(state.connected) { + if (state.connected) { this.send(); } else { console.log("not connected, can't send message"); @@ -77,7 +84,7 @@ export default { return; } - while(this.pendingAttachments.length > 0) { + while (this.pendingAttachments.length > 0) { const attachment = this.pendingAttachments.shift(); await attachment.upload; @@ -122,20 +129,29 @@ export default { } }, onAttach(e: Event) { - console.log(e.target.files); + + //console.log(e.target.files); + const target = e.target as HTMLInputElement; - console.log(target); - for(const file of target.files) { - const a: PendingAttachment = { - file: file, - previewURL: URL.createObjectURL(file), - progress: 0, - upload: null, - uploadedURL: null, - }; - a.upload = this.uploadAttachment(a); - this.pendingAttachments.push(a); + //console.log(target); + for (const file of target.files) { + if (verifyFileSize(file)) { + const a: PendingAttachment = { + file: file, + previewURL: URL.createObjectURL(file), + progress: 0, + upload: null, + uploadedURL: null, + }; + a.upload = this.uploadAttachment(a); + this.pendingAttachments.push(a); + } + else { + alert(`The selected file is too large. We cannot send files bigger than ${MAXFILESIZE / 1000}kB.`); + } } + + }, removeAttachment(attachment: PendingAttachment) { let position = this.pendingAttachments.indexOf(attachment); @@ -164,32 +180,63 @@ export default { var items = (e.clipboardData || e.originalEvent.clipboardData).items; console.log(JSON.stringify(items)); // will give you the mime types for (const item of items) { - switch(item.type) { + switch (item.type) { case "image/png": + const filePng = item.getAsFile(); + if (verifyFileSize(filePng)) { + const aPng: PendingAttachment = { + file: filePng, + previewURL: URL.createObjectURL(filePng), + progress: 0, + upload: null, + uploadedURL: null, + }; + aPng.upload = this.uploadAttachment(aPng); + this.pendingAttachments.push(aPng); + break; + } + else { + alert(`The selected file is too large. We cannot send files bigger than ${MAXFILESIZE / 1000}kB.`); + break; + } case "image/jpg": const file = item.getAsFile(); - const a: PendingAttachment = { - file: file, - previewURL: URL.createObjectURL(file), - progress: 0, - upload: null, - uploadedURL: null, - }; - a.upload = this.uploadAttachment(a); - this.pendingAttachments.push(a); - break; + if (verifyFileSize(file)) { + const a: PendingAttachment = { + file: file, + previewURL: URL.createObjectURL(file), + progress: 0, + upload: null, + uploadedURL: null, + }; + a.upload = this.uploadAttachment(a); + this.pendingAttachments.push(a); + break; + } + else { + alert(`The selected file is too large. We cannot send files bigger than ${MAXFILESIZE / 1000}kB.`); + break; + } + case "image/jpeg": const fileJpeg = item.getAsFile(); - const aJpeg: PendingAttachment = { - file: file, - previewURL: URL.createObjectURL(file), - progress: 0, - upload: null, - uploadedURL: null, - }; - a.upload = this.uploadAttachment(a); - this.pendingAttachments.push(a); - break; + if (verifyFileSize(fileJpeg)) { + console.log(fileJpeg); + const aJpeg: PendingAttachment = { + file: file, + previewURL: URL.createObjectURL(file), + progress: 0, + upload: null, + uploadedURL: null, + }; + aJpeg.upload = this.uploadAttachment(a); + this.pendingAttachments.push(a); + break; + } + else { + alert(`The selected file is too large. We cannot send files bigger than ${MAXFILESIZE / 1000}kB.`); + break; + } case "text/plain": continue; default: @@ -203,24 +250,26 @@ export default { \ No newline at end of file + \ No newline at end of file diff --git a/frontend/components/conversation/Conversation.vue b/frontend/components/conversation/Conversation.vue index d40812c..bf27f1f 100644 --- a/frontend/components/conversation/Conversation.vue +++ b/frontend/components/conversation/Conversation.vue @@ -165,11 +165,11 @@ export default { mounted() { if (this.$route.query.number) { this.conversationKey = this.$route.query.number; - emitter.emit('backfill-requested', this.conversationKey); + //emitter.emit('backfill-requested', this.conversationKey); } else if (this.$route.query.group) { this.conversationKey = this.$route.query.group - emitter.emit('backfill-requested', this.conversationKey); + //emitter.emit('backfill-requested', this.conversationKey); const groupTag = document.getElementsByName("group"); groupTag[0].value = this.$route.query.group; @@ -187,7 +187,7 @@ export default { emitter.on('backfill-complete', () => { if (!this.backfillAvailable) { - //console.log('conversation fully backfilled, refusing to attempt to backfill more'); + console.log('conversation fully backfilled, refusing to attempt to backfill more'); return; } @@ -212,7 +212,7 @@ export default { }) emitter.on('thread-changed', (newDisplayName:String) => { - console.log(`thread changed new display name is ${newDisplayName}`); + //console.log(`thread changed new display name is ${newDisplayName}`); this.title = newDisplayName; }) //console.log(this.state.messages); @@ -231,9 +231,7 @@ export default { watch: { //this fires when we set remoteNumber to null or w/e remoteNumber: async function (rN) { - //this.title = rN; this.messages = []; - this.backfillAvailable = true; //console.log(rN); //console.log("remote number changed changing this.messages") @@ -253,7 +251,7 @@ export default { } this.conversationKey = rN; emitter.emit("backfill-requested", rN) - console.log("changed Rn " + rN); + //console.log("changed Rn " + rN); } else { @@ -275,7 +273,7 @@ export default { this.conversationKey = this.$route.query.group; this.backfillAvailable = true; emitter.emit("backfill-requested", this.$route.query.group) - console.log("changed gUUID " + this.$route.query.group); + //console.log("changed gUUID " + this.$route.query.group); } }, methods: { @@ -478,6 +476,13 @@ table { z-index: 5; grid-column-start: 1; grid-column-end: 1; + height:94vh; + } + .thread-container{ + height:90vh; + } + .messages{ + height:88vh; } } \ No newline at end of file diff --git a/frontend/components/message/Message.vue b/frontend/components/message/Message.vue index e3b6c2f..fa215a3 100644 --- a/frontend/components/message/Message.vue +++ b/frontend/components/message/Message.vue @@ -40,6 +40,7 @@ export default { } }, async mounted() { + //console.log(this.message); this.bumpTimestamp(); this.interval = setInterval(this.bumpTimestamp, 10000); if (this.message.cpim) { diff --git a/frontend/lib/CPIM.ts b/frontend/lib/CPIM.ts index 12e841b..552b56d 100644 --- a/frontend/lib/CPIM.ts +++ b/frontend/lib/CPIM.ts @@ -108,7 +108,6 @@ export class CPIM { if(this.fileContentType != "text/plain") { return null; } - let response = await fetch(this.fileURL) return await response.text() } diff --git a/frontend/lib/SIP.ts b/frontend/lib/SIP.ts index a19c325..31908fa 100644 --- a/frontend/lib/SIP.ts +++ b/frontend/lib/SIP.ts @@ -235,6 +235,7 @@ function RunSIPConnection(username: string, password: string, server: string, ow if(message.cpim) { message.body = message.cpim.serialize(); + console.log(`serialized cpim message ${message.body}`) message.contentType = 'message/cpim'; } diff --git a/frontend/lib/backfill.ts b/frontend/lib/backfill.ts index 6da6819..68440c2 100644 --- a/frontend/lib/backfill.ts +++ b/frontend/lib/backfill.ts @@ -89,7 +89,7 @@ export async function backfillMessages(extensionUUID: string, remoteNumber?: str else{ key = remoteNumber; } - //console.log(`cpim ${m}`); + //console.log(`cpim ${m.message}`); insertMessageInHistory(key,{ direction: m.direction, contentType: m.content_type, diff --git a/frontend/lib/upload.ts b/frontend/lib/upload.ts index 98d5bef..c820d96 100644 --- a/frontend/lib/upload.ts +++ b/frontend/lib/upload.ts @@ -1,3 +1,4 @@ +//TODO: file limit = 500kb = 5000000 async function uploadAttachment(file: File): Promise { const uploadTarget = await fetch("upload.php", { method: "POST", diff --git a/frontend/main.ts b/frontend/main.ts index 8479464..a25c453 100644 --- a/frontend/main.ts +++ b/frontend/main.ts @@ -59,8 +59,8 @@ export const initializeWebTextingContainer = function initializeWebTextingContai threads: opts.threads, threadPreviews: opts.$thread_preview_opts } - console.log(opts) - console.log("props", containerProps) + //console.log(opts) + //console.log("props", containerProps) const app = createApp(WebTextingContainer, containerProps); app.config.errorHandler = (err, instance, info) => { @@ -70,27 +70,23 @@ export const initializeWebTextingContainer = function initializeWebTextingContai app.use(router); app.mount("#TEST_DIV_FOR_TESTING_WEBTEXTING"); - //i think this is stuff that will have to get ported over to threads instead of messages - - //we'll have to backfill for each thread - //backfillMessages(opts.extensionUUID, opts.remoteNumber, opts.groupUUID); - //i think this needs to stay in conversation mode only but we're doing both - //that's because we are using webtextingcontainer to deliver both threadlist and conversation side by side - //so that means we need to mash all the options together and initialize all the components from there. - //this makse the data flow a little wierd because users will select from threadlist component - //we'll have to deliver the information to the container which dispatches the changes to conversation view RunSIPConnection(opts.username, opts.password, opts.server, opts.ownNumber, opts.remoteNumber, opts.groupUUID); emitter.on('backfill-requested', (key:string) => { - //console.log(`main.ts backfill key ${key}`) + console.log(`main.ts backfill key ${key}`) //key is either a uuid or phone number. uuid length is at least 16 - if(key.length<15){ - console.log(`backfill using remotenumber: ${key}`) - backfillMessages(opts.extensionUUID, key, null); + if(key){ + if(key.length<15){ + console.log(`backfill using remotenumber: ${key}`) + backfillMessages(opts.extensionUUID, key, null); + } + else{ + console.log(`backfill using group ${key}`) + backfillMessages(opts.extensionUUID, null, key); + } } else{ - console.log(`backfill using group ${key}`) - backfillMessages(opts.extensionUUID, null, key); + console.log("ignoring backfill request with no key"); } }) diff --git a/threadlist.php b/threadlist.php index 7d322ee..b439ea1 100644 --- a/threadlist.php +++ b/threadlist.php @@ -181,14 +181,7 @@ $thread_preview_opts[$z]['link'] = $link; //Thread preview area - $body_preview = $last_message['content_type'] == "text/plain" ? $last_message['message'] : "[media]"; - /* this is where we need to change stuff to see the removal of [media] as the default preview - if ($last_message['content_type'] == "text/plain" ) { - $body_preview = $last_message['message']; - } else { - $body_preview = s3 retrieve nonsense logic; - } - */ + $body_preview = $last_message['content_type'] == "text/plain" ? $last_message['message'] : "MMS message"; $thread_preview_opts[$z]['bodyPreview'] = $body_preview; $thread_preview_opts[$z]['ownNumber'] = $ownNumber; $thread_preview_opts[$z]['displayName']= $display_name;