@rtsee/ngx 0.0.76 → 0.0.77

package/dist/ngx/index.d.ts

@@ -13,7 +13,7 @@ import { RTSee, INavigationConfig, IRouteConfig } from '@rtsee/factory';
 import { RTSeePresentation, RTSeeStory, RTSeePresentationSettings, RTSeeStorySlide } from '@rtsee/presentation';
 import * as i43 from '@angular/forms';
 import { FormArray, FormGroup, FormControl, FormBuilder } from '@angular/forms';
-import { IRTSeeChat, IMessageThumbnail, RTSeeChatTypes } from '@rtsee/common';
+import { IRTSeeChat, RTSeeChatTypes, IMessageThumbnail } from '@rtsee/common';
 import * as i42 from '@angular/common';
 import { ViewportScroller } from '@angular/common';
 import * as i44 from 'ngx-autosize';
@@ -131,13 +131,18 @@ declare class RtseeEventsDashboardComponent {
 
 declare class RTSeeContainerComponent implements OnInit {
     private authService;
+    private router;
+    isSidenavExpanded: boolean;
+    isSidenavContent: boolean;
+    isSidenavFullScreen: boolean;
+    private routeSubscription;
     rtsee: RTSee;
     navigationConfig: INavigationConfig<IRouteConfig>;
     auth: RTSeeAuth<any>;
-    constructor(authService: RTSeeAuthService);
-    isSidenavExpanded: boolean;
-    onSidenavToggleClicked(): void;
+    constructor(authService: RTSeeAuthService, router: Router);
     ngOnInit(): void;
+    onSidenavToggleClicked(): void;
+    defineSideNavState(url: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RTSeeContainerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<RTSeeContainerComponent, "rtsee-container", never, { "rtsee": { "alias": "rtsee"; "required": false; }; "navigationConfig": { "alias": "navigationConfig"; "required": false; }; "auth": { "alias": "auth"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
@@ -441,14 +446,26 @@ declare class MessageComponent implements AfterViewInit {
     static ɵcmp: i0.ɵɵComponentDeclaration<MessageComponent, "rtsee-message", never, { "chat": { "alias": "chat"; "required": false; }; "message": { "alias": "message"; "required": false; }; "member": { "alias": "member"; "required": false; }; "messenger": { "alias": "messenger"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+interface IRTSeeMessageGroup {
+    id: string;
+    sender: RTSeeChatMember;
+    senderVisible: boolean;
+    messages: RTSeeMessage[];
+}
 declare class MessagesListComponent implements AfterViewInit, OnDestroy, OnInit {
     private timeFormatService;
     private scroller;
+    private document;
     bindScrollFunction: () => void;
+    bindedGroupFunction: () => void;
+    messagesGroups: IRTSeeMessageGroup[];
+    firstGroupedMessage: RTSeeMessage | null;
+    lastGroupedMessage: RTSeeMessage | null;
     chat: RTSeeChat;
     messenger: RTSeeMessenger;
     scrollContainer: ElementRef<HTMLDivElement>;
-    constructor(timeFormatService: TimeFormatHelperService, scroller: ViewportScroller);
+    constructor(timeFormatService: TimeFormatHelperService, scroller: ViewportScroller, document: Document);
+    onWindowScroll(event: Event): void;
     ngOnInit(): void;
     ngAfterViewInit(): void;
     onMessageSent(): void;
@@ -457,6 +474,14 @@ declare class MessagesListComponent implements AfterViewInit, OnDestroy, OnInit
     onScroll(): void;
     scrollToBottom(): void;
     formatDate(message: RTSeeMessage): string;
+    private groupMessages;
+    private performGrouping;
+    private stitchGroups;
+    private areForwardMessagesAdded;
+    private areBackwardMessagesAdded;
+    private saveFirstAndLastGroupedMessages;
+    private getFirstAndLastMessage;
+    protected readonly RTSeeChatTypes: typeof RTSeeChatTypes;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessagesListComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MessagesListComponent, "rtsee-messages-list", never, { "chat": { "alias": "chat"; "required": false; }; "messenger": { "alias": "messenger"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -475,6 +500,7 @@ declare class ChatThumbnailComponent {
         customDateFormatDaysJs: string;
         customDateTimeFormat: string;
         defaultProfileImgUrl: string;
+        mobileBreakpoint: number;
     };
     static ɵfac: i0.ɵɵFactoryDeclaration<ChatThumbnailComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ChatThumbnailComponent, "rtsee-chat-thumbnail", never, { "chat": { "alias": "chat"; "required": false; }; "messenger": { "alias": "messenger"; "required": false; }; }, {}, never, never, true, never>;

package/dist/ngx/src/lib/theme/containers/shell.scss

@@ -38,6 +38,12 @@
     @media screen and (min-width: $rts-break-md) {
       padding-top: 0;
 
+      .rtsee-presentation-settings {
+        top: 0;
+        right: $video-container-width;
+        width: auto;
+      }
+
       .rtsee-shell-panel {
         padding-top: $video-container-height;
       }
@@ -152,12 +158,15 @@
   }
 
   @media screen and (min-width: $rts-break-md) {
+    $rts-divider-style: 2px solid rgba(0, 0, 0, 0.2);
+
     .rtsee-nav-block {
       position: fixed;
       height: 100%;
       bottom: 0;
       left: 0;
       width: $rts-sidebar-width;
+      border-right: $rts-divider-style;
     }
 
     .rtsee-content {
@@ -174,13 +183,12 @@
       position: fixed;
       right: 0;
       top: 0;
-      padding-bottom: 0;
-      padding-top: $video-container-height;
+      padding: 0;
 
-      .rtsee-shell-panel-inner {
-        overflow: auto;
-        height: 100%;
-      }
+      //.rtsee-shell-panel-inner {
+      //  overflow: auto;
+      //  height: 100%;
+      //}
     }
 
     .rtsee-conference-container {
@@ -189,10 +197,6 @@
       top: 0;
     }
 
-    .rtsee-shell-panel {
-      padding: 0;
-    }
-
     &.rtsee-shell-side-nav-expanded {
       .rtsee-content {
         overflow: hidden;
@@ -234,5 +238,60 @@
         display: block;
       }
     }
+
+    &.rtsee-shell-side-nav-is-content {
+      padding: 0 0 0 $rts-sidebar-width;
+
+      .rtsee-shell-panel {
+        position: static;
+        width: auto;
+
+        padding-right: $video-container-width;
+      }
+
+      .rtsee-messenger-container {
+        display: block;
+        position: fixed;
+        top: 0;
+        right: 0;
+        width: $video-container-width;
+        border-left: $rts-divider-style;
+      }
+
+      .rtsee-content {
+        display: none;
+      }
+
+      &.rtsee-shell-conference-mode {
+        padding: 0 0 0 $rts-sidebar-width;
+
+        .rtsee-shell-panel {
+          padding-top: 0;
+        }
+
+        .rtsee-messenger-container {
+          top: $video-container-height;
+          bottom: 0;
+          height: auto;
+
+          .rtsee-messenger {
+            .rtsee-messenger-header-container {
+              top: 0;
+            }
+          }
+        }
+
+        .rtsee-conference-container {
+          position: fixed;
+          width: $video-container-width;;
+          top: 0;
+          right: 0;
+          left: auto;
+          border-left: $rts-divider-style;
+        }
+      }
+
+      //width: calc(100% - $video-container-width);
+    }
   }
 }

package/dist/ngx/src/lib/theme/messenger/chat.scss

@@ -7,11 +7,28 @@
   background: $rts-new-secondary-bg-color-light;
 
   &.rtsee-chat-standalone {
+    .rtsee-messenger-messages-list {
+      overflow: visible;
+    }
+
+    .rtsee-chat-footer-container {
+      display: none;
+    }
+
     &.rtsee-chat-in-viewport {
       .rtsee-chat-footer-container {
+        display: block;
         position: fixed;
         bottom: $rts-bottom-nav-height;
       }
+
+      @media screen and (min-width: $rts-break-md) {
+        .rtsee-chat-footer-container {
+          bottom: 0;
+          left: $rts-sidebar-width;
+          width: calc(100% - ($rts-sidebar-width + $video-container-width));
+        }
+      }
     }
   }
 
@@ -22,9 +39,10 @@
   .rtsee-chat-footer-container {
     position: absolute;
     padding: $rts-new-offset-xsm;
-    bottom: $rts-new-offset-xsm;
+    bottom: 0;
     background-color: $rts-secondary-bg-color-light;
     width: 100%;
+    z-index: 1;
 
     .rtsee-chat-footer-container-inner {
       background: $rts-main-bg-color-light;

package/dist/ngx/src/lib/theme/messenger/message.scss

@@ -1,8 +1,18 @@
 @import "../common-variables";
 
+.rtsee-messenger-message-wrapper-with-sender {
+  .rtsee-messenger-message-container {
+    &.rtsee-message-from-me {
+      .rtsee-messenger-message {
+        float: left;
+      }
+    }
+  }
+}
+
+
 .rtsee-messenger-message-container {
   width: 100%;
-  padding: 0 $rts-offset-sm;
   position: relative;
   overflow: hidden;
 
@@ -18,12 +28,6 @@
       background-color: $rts-new-primary-color;
       color: $rts-font-color-dbg-light;
     }
-
-    .message-tail {
-      left: unset;
-      right: -2px;
-      border-bottom: 10px solid $rts-new-primary-color;
-    }
   }
 
   .rtsee-messenger-message {
@@ -32,6 +36,7 @@
     border-radius: $rts-new-border-radius-rounded;
     padding: $rts-new-offset-xsm $rts-new-offset-sm $rts-new-offset-sm $rts-new-offset-sm;
     font-size: 14px;
+    margin-bottom: $rts-offset-sm * 0.5;
 
 
     overflow-wrap: break-word;
@@ -50,16 +55,4 @@
       float: right;
     }
   }
-
-  .message-tail {
-    position: absolute;
-    bottom: 0;
-    left: -2px;
-
-    width: 0;
-    height: 0;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-bottom: 10px solid #fff;
-  }
 }

package/dist/ngx/src/lib/theme/messenger/messages-list.scss

@@ -2,17 +2,115 @@
 
 $messenger-date-background-color: #FFFFFF7F;
 
+.rtsee-shell-conference-mode {
+  .rtsee-chat {
+    .rtsee-messenger-messages-list {
+      .rtsee-messenger-message-wrapper {
+        &.rtsee-messenger-message-wrapper-with-sender {
+          .rtsee-messenger-message-inset {
+            .rtsee-messenger-message-sender-image {
+              top: $rts-messenger-header-height + $rts-offset-sm + $video-container-height;
+
+              @media screen and (min-width: $rts-break-md) {
+                top: $rts-offset-sm;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &.rtsee-chat-standalone {
+      .rtsee-messenger-messages-list {
+        .rtsee-messenger-message-wrapper {
+          &.rtsee-messenger-message-wrapper-with-sender {
+            .rtsee-messenger-message-inset {
+              .rtsee-messenger-message-sender-image {
+                top: $rts-offset-sm + $video-container-height;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.rtsee-chat {
+  height: 100%;
+  background: $rts-new-secondary-bg-color-light;
+  padding: 0 $rts-offset-sm;
+
+  &.rtsee-chat-standalone {
+    .rtsee-messenger-messages-list {
+      .rtsee-messenger-message-wrapper {
+        &:last-child {
+          margin-bottom: 0; // here
+        }
+        &.rtsee-messenger-message-wrapper-with-sender {
+          .rtsee-messenger-message-inset {
+            .rtsee-messenger-message-sender-image {
+              top: $rts-offset-sm;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 .rtsee-messenger-messages-list {
   height: 100%;
-  overflow: auto;
   background-color: $rts-new-secondary-bg-color-light;
-  padding-top: $rts-offset-sm;
+  border-top: 1px solid transparent;
 
   .rtsee-messenger-message-wrapper {
-    margin-bottom: $rts-offset-md;
+    margin-bottom: $rts-offset-sm;
+    position: relative;
+    padding-left: 0;
+
+    &:first-child {
+      margin-top: $rts-offset-sm;
+    }
+
+    &.rtsee-messenger-message-wrapper-with-sender {
+      padding-left: $rts-new-user-avatar-d-sm + $rts-offset-sm;
 
-    &.rtsee-messenger-message-wrapper-consecutive {
-      margin-bottom: 4px;
+      .rtsee-messenger-message-sender-name {
+        display: block;
+      }
+
+      .rtsee-messenger-message-inset {
+        display: block;
+      }
+    }
+
+    .rtsee-messenger-message-sender-name {
+      display: none;
+      font-size: 13px;
+      padding-left: $rts-offset-sm;
+      color: $rts-font-color-light;
+
+      p {
+        margin: 0;
+      }
+    }
+
+    .rtsee-messenger-message-inset {
+      display: none;
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+
+      .rtsee-messenger-message-sender-image {
+        position: sticky;
+        left: 0;
+        top: $rts-messenger-header-height + $rts-offset-sm;
+        bottom: 0;
+        width: $rts-new-user-avatar-d-sm;
+        height: $rts-new-user-avatar-d-sm;
+        border-radius: 50%;
+      }
     }
 
     &:last-child {
@@ -37,10 +135,20 @@ $messenger-date-background-color: #FFFFFF7F;
   }
 
   @media screen and (min-width: $rts-break-md) {
+    overflow: auto;
+    overscroll-behavior-y: contain;
+
     .rtsee-messenger-message-wrapper {
       &:last-child {
         margin-bottom: 0;
       }
+
+
+      .rtsee-messenger-message-inset {
+        .rtsee-messenger-message-sender-image {
+          top: $rts-offset-sm;
+        }
+      }
     }
   }
 }

package/dist/ngx/src/lib/theme/messenger/messenger.scss

@@ -12,7 +12,6 @@ $control-icon-size: 18px;
   padding-top: $rts-messenger-header-height;
   color: $rts-font-color-dark;
   position: relative;
-  overflow: hidden;
   background-color: $rts-main-bg-color-light;
 
   &.rtsee-messenger-header-expanded {
@@ -41,9 +40,15 @@ $control-icon-size: 18px;
 
   .rtsee-messenger-body-container {
     height: 100%;
-    overflow: auto;
     position: relative;
   }
 
+  @media screen and (min-width: $rts-break-md) {
+    overflow: hidden;
 
+    .rtsee-messenger-body-container {
+      overflow: auto;
+      overscroll-behavior-y: contain;
+    }
+  }
 }

package/dist/ngx/src/lib/theme/presentation/join-call.scss

@@ -14,7 +14,6 @@
       margin-bottom: $rts-offset-sm;
 
       .rtsee-share-call-explain-section-icon {
-        flex: 1;
         text-align: center;
 
         .rtsee-link-icon {

package/dist/ngx/src/lib/theme/presentation/presentation.scss

@@ -1,5 +1,13 @@
 @import "./variables";
 
+.rtsee-presentation {
+  padding-bottom: $rts-bottom-nav-height + $rts-offset-sm;
+
+  @media screen and (min-width: $rts-break-md) {
+    padding-bottom: 0;
+  }
+}
+
 .rtsee-presentation-header {
   transition: bottom 0.5s ease-in-out;
   background-color: #ffffff;

package/dist/ngx/src/lib/theme/presentation/settings.scss

@@ -3,7 +3,6 @@
 .rtsee-presentation-settings {
   position: fixed;
   width: 100%;
-  height: 100%;
   top: 0;
   left: 0;
   bottom: 0;

package/dist/ngx/src/lib/theme/presentation/slide.scss

@@ -29,5 +29,16 @@
   @media screen and (min-width: $rts-break-md) {
     height: $stories-player-height-wide-screen;
     height: $stories-player-height-wide-screen-dvh;
+
+    .rtsee-presentation-slide-default {
+      .rtsee-presentation-slide-image-container {
+        padding-bottom: 50%;
+        background-repeat: no-repeat;
+        background-size: contain;
+        max-width: 600px;
+        background-position: center;
+        margin: 0 auto;
+      }
+    }
   }
 }

package/dist/ngx/src/lib/theme/presentation/story-details.scss

@@ -1,10 +1,10 @@
 @import "./variables";
 
 .rtsee-story-details {
-
-
   .rtsee-story-details-image-container {
     position: relative;
+    line-height: 0;
+    text-align: center;
 
     .rtsee-story-details-image {
       width: 100%;
@@ -22,4 +22,52 @@
       left: $rts-offset-sm;
     }
   }
+
+  .rtsee-story-details-title-container {
+    padding: $rts-offset-sm;
+
+    .rtsee-story-details-title {
+      color: $rts-font-color-light;
+      margin: 0;
+    }
+  }
+
+  .rtsee-story-details-labels {
+    padding: 0 $rts-offset-sm;
+
+    .rtsee-story-details-label {
+      margin: 0 $rts-offset-sm $rts-offset-sm 0;
+    }
+  }
+
+  .rtsee-story-details-description-container {
+    .rtsee-story-details-description {
+      padding: $rts-offset-sm;
+      margin: 0;
+    }
+  }
+
+  .rtsee-story-details-votes {
+    .rtsee-story-details-comments-label {
+      margin: 0;
+      font-size: 21px;
+      padding: $rts-offset-sm;
+      font-weight: 600;
+      color: #333;
+    }
+  }
+
+  .rtsee-story-details-feedback {
+    padding: $rts-offset-sm;
+  }
+
+  @media screen and (min-width: $rts-break-md) {
+    .rtsee-story-details-image-container {
+      .rtsee-story-details-image {
+        max-width: 500px;
+      }
+    }
+
+  }
+
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.76",
+  "version": "0.0.77",
   "name": "@rtsee/ngx",
   "module": "./dist/ngx/fesm2022/rtsee-ngx.mjs",
   "types": "./dist/ngx/index.d.ts",
@@ -34,12 +34,12 @@
     "@angular/platform-browser-dynamic": "^20.1.2",
     "@angular/router": "^20.1.2",
     "@primeuix/themes": "^1.2.3",
-    "@rtsee/common": "^0.0.47",
-    "@rtsee/conference": "^0.0.48",
-    "@rtsee/core": "^0.0.91",
-    "@rtsee/events-dashboard": "^0.0.81",
-    "@rtsee/factory": "^0.0.90",
-    "@rtsee/messenger": "^0.0.81",
+    "@rtsee/common": "^0.0.48",
+    "@rtsee/conference": "^0.0.49",
+    "@rtsee/core": "^0.0.92",
+    "@rtsee/events-dashboard": "^0.0.82",
+    "@rtsee/factory": "^0.0.91",
+    "@rtsee/messenger": "^0.0.82",
     "@rtsee/signaling-client": "^0.0.66",
     "dayjs": "^1.11.9",
     "ngx-autosize": "^2.0.4",
@@ -66,5 +66,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3a0b2fe6c4ae5ec01805f35d2270f3604d111b59"
+  "gitHead": "f4f189990eda3209efea824ae633d577134d36b8"
 }