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

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/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);