@social-mail/social-mail-client 1.2.737 → 1.2.739

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.2.737",
+  "version": "1.2.739",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/public/channel/PostSummary.tsx

@@ -29,6 +29,7 @@ declare global {
         grid-template-rows: auto auto 1fr auto;
 
         padding-bottom: 10px;
+        padding-right: 20px;
 
         border-bottom: solid 1px lightgray;
 

package/src/public/channel/PostView.tsx

@@ -6,15 +6,99 @@ import { DateFormats } from "../../common/date/DateFormats";
 import { UMD } from "@web-atoms/core/dist/core/types";
 import { renderMail } from "../../web/page/mails/service/ConversationService";
 import MediaCarousel from "./controls/MediaCarousel";
+import styled from "@web-atoms/core/dist/style/styled";
 
 declare global {
     namespace JSX {
         interface IntrinsicElements {
             "share-button": any;
+            "post-view": any;
         }
     }
 }
 
+    styled.css `
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto 1fr auto auto auto;
+
+    padding-top: 10px;
+    padding-bottom: 10px;
+
+    row-gap: 10px;
+
+    & > [data-element=author] {
+        grid-row: 1;
+        grid-column: 1;
+        margin: 0;
+        font-weight: normal;
+        font-size: 0.8rem;
+        line-height: 1;
+        letter-spacing: 0.05rem;
+    }
+
+    & > [data-element=date] {
+        grid-row: 1;
+        grid-column: 2;
+        margin: 0;
+        font-weight: normal;
+        font-size: 0.8rem;
+        line-height: 1;
+        letter-spacing: 0.05rem;
+    }
+
+    & > [data-element=title] {
+        grid-row: 2;
+        grid-column: 1 / span 2;
+        margin: 0;
+        font-weight: normal;
+        font-size: 1.65rem;
+        line-height: 1.2;
+    }
+
+    & > [data-element=media] {
+        grid-row: 3;
+        grid-column: 1/ span 2;
+        display: grid;
+        background-color: #343a400d;
+        border-radius: 20px;
+        overflow: hidden;
+        & img, & video {
+            max-height: 70vh;
+        }
+        & [data-element=preview] {
+            display: grid;
+            width: 100%;
+            & > * {
+                place-self: center;
+                max-width: 100%;
+            }
+        }
+        & > carousel-slider {
+            place-self: stretch;
+        }
+    }
+
+    &[has-poster] > [data-element=media] {
+        grid-row: 5;
+        grid-column: 1 / span 3;
+    }
+
+    & > [data-element=content] {
+        grid-row: 4;
+        grid-column: 1 / span 2;
+    }
+
+    & > footer {
+        grid-row: 6;
+    }
+
+    & > [data-element=comments] {
+        grid-row: 7;
+    }
+
+    `.installGlobal("post-view");
+
 const commentIcon = "💬";
 
 export default function PostView ({
@@ -26,7 +110,7 @@ export default function PostView ({
 
     const isComment = email.parentID !== null;
 
-    return <section
+    return <post-view
         data-element="blog-item"
         data-comment={isComment}
         data-item-path={itemPath}
@@ -36,7 +120,7 @@ export default function PostView ({
             <label text={ isComment ? email.senderName : email.subject}/>
         </h4>
         <h6 data-element="date" text={DateFormats.relative.short(email.dateSent)}/>
-        {!isComment && <h5 text={email.senderName}/> }
+        {!isComment && <h5 data-element="author" text={email.senderName}/> }
         <section
             data-element="content">
             { !email.parentID
@@ -82,5 +166,5 @@ export default function PostView ({
             {  ... (email.children ?? []).map((c, i) => <PostView itemPath={ `${ itemPath ? itemPath : "$" }.children.${i}` } email={c} />) }
         </section>
 
-    </section>;
+    </post-view>;
 }

package/src/public/channel/controls/MediaCarousel.tsx

@@ -22,22 +22,28 @@ export default function MediaCarousel({ email = void 0 as IEmail}) {
         }
     }
 
-    const children = [] as XNode[];
+    let children = [] as XNode[];
 
     for (const element of email.attachments) {
         if (/video/i.test(element.contentType)) {
-            children.push(<video controls="true" src={element.url} />);
+            children.push(<div data-element="preview"><video controls="true" src={element.url} /></div>);
             continue;
         }
         if (/image/i.test(element.contentType)) {
-            children.push(<img src={element.url} />);
+            children.push(<div data-element="preview"><img src={element.url} /></div>);
             continue;
         }
     }
 
     if (children.length) {
-        return XNode.create("carousel-slider", {}, ... children);
+        if (children.length > 1) {
+            children = [XNode.create("carousel-slider", {
+                "data-element": "media"
+            }, ... children)];
+        }
+        return <div data-element="media">{children[0]}</div>;
     }
 
-    return <div/>;
+    return <div data-element="media"/>;
+
 }