@social-mail/social-mail-client 1.2.3 → 1.2.5

package/src/common/controls/audio/WebRTCService.ts

@@ -0,0 +1,61 @@
+import { CancelToken } from "@web-atoms/core/dist/core/types";
+import DISingleton from "@web-atoms/core/dist/di/DISingleton";
+import TimeSpan from "@web-atoms/date-time/dist/TimeSpan";
+
+export interface IRecordingOptions {
+    progress: (time: TimeSpan) => void;
+    segments?: number
+}
+
+export class WebRecordingSession {
+
+    public duration: TimeSpan;
+
+    private recorder: MediaRecorder;
+
+    constructor(stream: MediaStream) {
+        this.duration = TimeSpan.fromSeconds(0);
+        this.recorder = new MediaRecorder(stream);
+    }
+
+    public start(segments?: number): Promise<Blob> {
+        const buffer = [];
+        return new Promise<Blob>((resolve, reject) => {
+            this.recorder.ondataavailable = (be) => {
+                buffer.push(be.data);
+            };
+            const start = Date.now();
+            const id = setInterval(() => {
+                const seconds = Math.ceil((Date.now() - start) / 1000);
+                this.duration = TimeSpan.fromSeconds(seconds);
+            }, 1000);
+            this.recorder.onerror = (me: ErrorEvent) => {
+                clearInterval(id);
+                reject(me.error);
+            };
+            this.recorder.onstop = () => {
+                clearInterval(id);
+                resolve(new Blob(buffer, { type: this.recorder.mimeType}));
+            };
+            this.recorder.start(segments);
+        });
+    }
+
+    public stop() {
+        this.recorder.stop();
+    }
+}
+
+export default class WebRTCService {
+
+    public static async startAudioSession() {
+        return new WebRecordingSession(await navigator.mediaDevices.getUserMedia({ audio: true }));
+        // return new Promise<WebRecordingSession>((resolve, reject) => {
+        //     navigator.mediaDevices.getUserMedia({
+        //         audio: true
+        //     }, (stream) => resolve(new WebRecordingSession(stream)),
+        //     (error) => reject(new Error(`${error.message}`)));
+        // });
+    }
+
+}

package/src/common/controls/buttons/RoundButton.tsx

@@ -0,0 +1,38 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import styled from "@web-atoms/core/dist/style/styled";
+import IElement from "@web-atoms/web-controls/dist/basic/IElement";
+
+    styled.css `    
+    border-radius: 9999px;
+    height: 70px;
+    width: 70px;
+    min-height: 70px;
+    text-align: center;
+    align-self: center;
+    border: none;
+    background-color: var(--accent-color);
+    color: var(--accent-text-color);
+    font-weight: bold;
+    flex-basis: auto;
+    margin-left: auto;
+    margin-right: auto;
+    `.installGlobal("button[data-round-button=round-button]");
+
+export interface IRoundButton extends IElement {
+    icon?: string;
+}
+
+export default function RoundButton({
+        icon,
+        ... a
+    }: IRoundButton, ... nodes: XNode[]) {
+    if (icon) {
+        return <button data-color="white" data-round-button="round-button" {... a} >
+            <i class={`${icon} white`}/>
+            { ... nodes}
+        </button>;
+    }
+    return <button data-color="white" data-round-button="round-button" {... a} >
+        { ... nodes}
+    </button>;
+}

package/src/services/files/LocalFileService.tsx

@@ -31,7 +31,7 @@ export type UploadedFiles = CustomEvent<{ files: IUploadedFile[], extra: any}>;
 
     styled.css `
         display: inline-grid;
-        grid-template-rows: auto auto;
+        grid-template-rows: auto auto auto;
 
         & > [data-element=file-name] {
             grid-row: 1;
@@ -40,15 +40,20 @@ export type UploadedFiles = CustomEvent<{ files: IUploadedFile[], extra: any}>;
             text-overflow: ellipsis;
         }
 
-        & > [data-element=progress] {
+        & > progress {
             grid-row: 2;
             width: 100%;
         }
+        & > [data-element=error] {
+            grid-row: 3;
+            width: 100%;
+        }
 
     `.installGlobal("[data-attachment-file]");
 
 export interface IFileUpload {
     name: string;
+    error?: string;
     progress?: number;
     promise?: Promise<{ appFileID }>
 }
@@ -164,23 +169,38 @@ export default class LocalFileService extends TaskManager {
         const upload = {
             total: 0,
             tasks,
-            progress:0
+            progress:0,
+            error: "",
         };
         for (const file of files) {
             upload.total += file.size;
             const uploadFile: IFileUpload = {
                 name: file.name,
+                error: "",
                 progress: 0
             };
             uploadFile.promise = this.run(async () => {
-                uploadFile.progress = 0.01;
-
-                // we will check if file exists and has same sha256?
-
-                const r = await this.uploadFile(file, extra, ct, (n) => uploadFile.progress = n);
-                upload.progress += r.file.size;
-                setTimeout(() => tasks.remove(uploadFile), 500);
-                return r;
+                let lastError: string;
+                for(let i=0; i<3; i++) {
+                    try {
+                        uploadFile.progress = 0.01;
+
+                        // we will check if file exists and has same sha256?
+
+                        const r = await this.uploadFile(file, extra, ct, (n) => uploadFile.progress = n);
+                        upload.progress += r.file.size;
+                        setTimeout(() => tasks.remove(uploadFile), 500);
+                        upload.error = "";
+                        lastError = null;
+                        return r;
+                    } catch (error) {
+                        lastError = `${file.webkitRelativePath ?? ""}/${file.name} failed to upload.\n${error.stack ?? error}`;
+                        uploadFile.error = lastError;
+                    }
+                }
+                if (lastError) {
+                    upload.error += "\n" + lastError;
+                }
             });
             tasks.push(uploadFile);
         }
@@ -231,6 +251,10 @@ class FileUploadWindow extends PopupWindow {
                             min={0}
                             max={1}
                             value={Bind.source(file, (x) => x.source.progress)}/>
+                        <div
+                            data-element="error"
+                            data-color="red"
+                            text={Bind.source(file, (x) => x.source.error)}/>
                     </div>}
                 />
         </div>);

package/src/style/GlobalStyle.ts

@@ -61,23 +61,24 @@ html, body {
 }
 
 * {
-    scrollbar-width: 5px;
+    scrollbar-width: thin;
     scrollbar-color: var(--accent-color) white;
+}
 
-    &::-webkit-scrollbar {
-        width: 5px;
-    }
-    &::-webkit-scrollbar-track {
+
+::-webkit-scrollbar {
+    width: 5px;
+}
+::-webkit-scrollbar-track {
     background: white;
-    }
-    &::-webkit-scrollbar-thumb {
-        background-color: white;
-        border-radius: 20px;
-        border: 3px solid var(--accent-color);
-    }
+    border-radius: 20px;
+}
+::-webkit-scrollbar-thumb {
+    background: var(--accent-color);
+    border-radius: 20px;
 }
 
-body {
+    body {
     font-family: trebuchet ms, "Source Sans Pro";
     font-size: 16px;
     justify-content: stretch;

package/src/web/page/mails/ConversationPage.tsx

@@ -81,6 +81,8 @@ export default class ConversationPage extends ContentPage {
 
     private mails: IMailboxContactEmail[] = [];
 
+    private draft: IEmail = null;
+
     private search: string = "";
     private version = 1;
 
@@ -191,7 +193,11 @@ export default class ConversationPage extends ContentPage {
             </div>
         </PopupActionButton>;
 
-        this.footerRenderer = () => <MiniComposeBox/>;
+        this.draft = await this.conversationService.getDraft(this.parameters);
+
+        this.footerRenderer = () => <MiniComposeBox
+            mailboxContact={this.parameters}
+            draft={this.draft} />;
     }
 
     @Action({ onEvent: "click"})
@@ -256,6 +262,11 @@ export default class ConversationPage extends ContentPage {
                     icon="fa-regular fa-clock-rotate-left"
                     label="Logs"
                     />
+                { thread.email?.status === "draft" && <MenuItem
+                    data-click-event="delete-draft"
+                    icon="fa-regular fa-clock-rotate-left"
+                    label="Delete Draft"
+                    />}
         </div>);
     }
 

package/src/web/page/mails/MiniComposeBox.tsx

@@ -1,8 +1,16 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
 import styled from "@web-atoms/core/dist/style/styled";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
-import { IMailbox } from "../../../model/model";
+import { AppFile, Email, EmailRecipient, IAppFile, IEmail, IMailbox, IMailboxContact, MailboxEmail } from "../../../model/model";
 import Bind from "@web-atoms/core/dist/core/Bind";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import AudioRecorder from "../../../common/controls/audio/AudioRecorder";
+import { Inject } from "@web-atoms/core/dist/di/Inject";
+import ConversationService from "./service/ConversationService";
+import { IUploadedFile } from "../../../services/files/LocalFileService";
+import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import { AtomBinder } from "@web-atoms/core/dist/core/AtomBinder";
 
 const css = styled.css `
     display: grid;
@@ -25,9 +33,14 @@ const css = styled.css `
 
 export default class MiniComposeBox extends AtomControl {
 
-    public mailbox: IMailbox = null;
+    public mailboxContact: IMailboxContact = null;
 
-    public message: string = "";
+    public draft: IEmail = null;
+
+    public typedMessage: string = "";
+
+    @InjectProperty
+    private conversationService: ConversationService;
 
     constructor(app, e) {
         super(app, e);
@@ -39,11 +52,67 @@ export default class MiniComposeBox extends AtomControl {
         this.render(<div>
             <textarea
                 data-element="editor"
-                value={Bind.twoWaysImmediate(() => this.message)}/>
-            <button
+                value={Bind.twoWaysImmediate(() => this.typedMessage)}/>
+            <i
                 data-element="send"
-                class="fas fa-send"/>
+                class="fa-solid fa-microphone-lines mic"
+                event-click={() => this.sendAudioMessage()}
+                style-display={Bind.oneWay(() => !this.typedMessage)} />
+            <i
+                data-element="send"
+                class="fa-solid fa-angle-double-right send"
+                style-display={Bind.oneWay(() => !!this.typedMessage)}
+                event-click={() => this.sendMessage()}
+            />
+            <AtomRepeater
+                items={Bind.oneWay(() => this.draft?.attachments)}
+                data-layout="flex-wrap-padding"
+                itemRenderer={(item: IAppFile) => <div data-layout="row"><label text={item.name}/></div>}
+                />
         </div>);
     }
 
+    @Action({ onEvent: "input", defer: 500, blockMultipleExecution: true })
+    async onChanged() {
+        if (!this.typedMessage) {
+            return;
+        }
+        this.draft ??= Email.create({
+            attachments: []
+        });
+        this.draft.mdBody = this.typedMessage;
+        await this.save();
+    }
+
+    sendMessage(): any {
+        throw new Error("Method not implemented.");
+    }
+
+    @Action({})
+    private async sendAudioMessage() {
+        const uploadedFile = await AudioRecorder.show<IUploadedFile>();
+        this.draft ??= Email.create({
+            attachments: []
+        });
+        this.draft.mdBody = this.typedMessage;
+        this.addFile(uploadedFile);
+        await this.save();
+    }
+
+    private addFile({ appFileID, url, file }: IUploadedFile) {
+        this.draft.attachments ??= [];
+        AtomBinder.refreshValue(this, "draft");
+        this.draft.attachments.add(AppFile.create({
+            appFileID,
+            contentType: file.type,
+            name: file.name,
+            contentID: appFileID.toString(36),
+            url
+        }));
+    }
+
+    private async save() {
+        this.draft = await this.conversationService.draft({ ... this.mailboxContact, email: this.draft }, true);
+    }
+
 }

package/src/web/page/mails/service/ConversationService.tsx

@@ -2,7 +2,7 @@
 import DISingleton from "@web-atoms/core/dist/di/DISingleton";
 import { Inject } from "@web-atoms/core/dist/di/Inject";
 import EntityService from "../../../../services/EntityService";
-import { Email, EmailEngagement, IEmail, IMailboxContact, IMailboxContactEmail, MailboxContactEmail } from "../../../../model/model";
+import { Email, EmailEngagement, EmailRecipient, IEmail, IMailboxContact, IMailboxContactEmail, MailboxContactEmail, MailboxEmail } from "../../../../model/model";
 import { Sql } from "../../../../common/Sql";
 import DomToString from "@web-atoms/email-dom/dist/DomToString";
 import XNode from "@web-atoms/core/dist/core/XNode";
@@ -102,6 +102,56 @@ export default class ConversationService {
     @Inject
     private entityService: EntityService;
 
+    public async getDraft({ mailboxID, emailAddressID, email }: IMailboxContactEmail) {
+        const draft = "draft";
+        return await this.entityService.query(MailboxContactEmail)
+            .where({ mailboxID, emailAddressID, draft }, (p) =>
+                (x) => x.mailboxID === p.mailboxID
+                    && x.emailAddressID === p.emailAddressID
+                    && x.email.status === p.draft)
+            .orderByDescending((x) => x.emailID)
+            .include((x) => [x.email.recipients, x.email.attachments])
+            .firstOrDefault();
+    }
+
+    public async draft({ mailboxID, emailAddressID, email }: IMailboxContactEmail, create = false) {
+        if (email?.emailID) {
+            // save..
+            if (!email.textBody) {
+                email.textBody = email.mdBody;
+            }
+            if (!email.subject) {
+                email.subject = email.textBody.substring(0, 80);
+            }
+            const cloner = this.entityService.cloner(email)
+                .include((x) => x.attachments)
+                .include((x) => x.recipients);
+            await this.entityService.save(cloner.copy);
+            return email;
+        }
+        if (create && email) {
+            email.recipients ??= [];
+            email.mailboxes ??= [];
+            if (!email.mailboxes.some((m) => m.mailboxID === mailboxID)) {
+                email.mailboxes.push(MailboxEmail.create({
+                    mailboxID
+                }));
+            }
+            if(!email.recipients.some((r) => r.emailAddressID === emailAddressID)) {
+                email.recipients.push(EmailRecipient.create({
+                    emailAddressID
+                }));
+            }
+            const mce = MailboxContactEmail.create({
+                mailboxID,
+                emailAddressID,
+                email
+            });
+            await this.entityService.save(mce);
+        }
+        return email;
+    }
+
     public async list({
         search = "",
         mailboxID,
@@ -143,6 +193,8 @@ export default class ConversationService {
                 // }
 
                 // load recent engagements
+                email.htmlBody ??= "";
+                email.textBody ??= "";
                 tasks.push(downloadEmailContent(this.entityService, email));
             }
             await Promise.all(tasks);