@social-mail/social-mail-client 1.2.2 → 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/common/controls/html/InlineHtmlEditorWithToolbar.tsx

@@ -58,7 +58,7 @@ const onAttachInlineImage = async (ce: CustomEvent) => {
     reader.onload = () => {
         c.executeCommand("insertHTML", void 0, `<div><img
             data-content="data-url"
-            src="${reader.result}" style='max-height: 700px;'/>
+            src="${reader.result as any}" style='max-height: 700px;'/>
         </div>`);
     };
     reader.readAsDataURL(file);

package/src/services/files/LocalFileService.tsx

@@ -10,6 +10,8 @@ import XNode from "@web-atoms/core/dist/core/XNode";
 import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
 import Bind from "@web-atoms/core/dist/core/Bind";
 import PopupService from "@web-atoms/core/dist/web/services/PopupService";
+import { IAppFile } from "../../model/model";
+import TaskManager from "@web-atoms/entity/dist/models/TaskManager";
 
 export const acceptDocumentAndMedia = ".doc, .docx, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, video/*, application/pdf, .pdf, .txt, audio/*, image/*, .csv, text/csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain, text/html";
 
@@ -30,16 +32,9 @@ export type UploadedFiles = CustomEvent<{ files: IUploadedFile[], extra: any}>;
     styled.css `
         display: inline-grid;
         grid-template-rows: auto auto;
-        grid-template-columns: auto 1fr auto;
-
-        & > [data-element=preview] {
-            grid-row: 1 / span 2;
-            grid-column: 1;
-        }
 
         & > [data-element=file-name] {
             grid-row: 1;
-            grid-column: 2;
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
@@ -47,14 +42,9 @@ export type UploadedFiles = CustomEvent<{ files: IUploadedFile[], extra: any}>;
 
         & > [data-element=progress] {
             grid-row: 2;
-            grid-column: 2 / span 2;
             width: 100%;
         }
 
-        & > [data-element=delete] {
-            grid-row: 1;
-            grid-column: 3;
-        }
     `.installGlobal("[data-attachment-file]");
 
 export interface IFileUpload {
@@ -64,12 +54,13 @@ export interface IFileUpload {
 }
 
 @DISingleton()
-export default class LocalFileService {
+export default class LocalFileService extends TaskManager {
 
     @Inject
     private app: App;
 
     constructor() {
+        super();
         document.body.addEventListener("uploadRequested", (ce: CustomEvent) => {
             const { target, detail: { files, extra, uploadEvent } } = ce;
             ce.preventDefault();
@@ -165,14 +156,35 @@ export default class LocalFileService {
         });
     }
 
-    async upload(files: File[], extra: any, ct?: CancelToken) {
-        return files.map((file) => {
+    upload(files: File[], extra: any, ct?: CancelToken) {
+
+        const { parentID } = extra;
+
+        const tasks = [] as IFileUpload[];
+        const upload = {
+            total: 0,
+            tasks,
+            progress:0
+        };
+        for (const file of files) {
+            upload.total += file.size;
             const uploadFile: IFileUpload = {
-                name: file.name
+                name: file.name,
+                progress: 0
             };
-            uploadFile.promise = this.uploadFile(file, extra, ct, (n) => uploadFile.progress = n);
-            return uploadFile;
-        });
+            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;
+            });
+            tasks.push(uploadFile);
+        }
+        return upload;
     }
 
 }
@@ -197,17 +209,27 @@ class FileUploadWindow extends PopupWindow {
             await this.requestCancel();
         }, null, { capture: true });
 
-        this.files = await this.localFileService.upload(this.parameters.files, this.parameters.extra, this.cancelToken);
+        const task = this.localFileService.upload(this.parameters.files, this.parameters.extra, this.cancelToken);
+        this.files = task.tasks;
+
+        this.footerRenderer = () => <div data-layout="command-row">
+            <progress min={0} max={task.total} value={Bind.source(task, (x) => x.source.progress)}/>
+        </div>;
 
-        this.render(<div>
+        this.render(<div
+            data-overflow="auto"
+            style-max-height="500px"
+            style-max-width="400px">
             <AtomRepeater
+                data-layout="vertical-flex-stretch-items"
                 items={this.files}
                 itemRenderer={(file) =>
                     <div data-attachment-file="file">
                         <div data-element="file-name" text={file.name}/>
                         <progress
+                            style-display={Bind.source(file, (x) => x.source.progress > 0)}
                             min={0}
-                            max={100}
+                            max={1}
                             value={Bind.source(file, (x) => x.source.progress)}/>
                     </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);