@rtsee/ngx 0.0.115 → 0.0.117

package/dist/ngx/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnInit, AfterViewInit, ElementRef, EventEmitter, OnDestroy, ChangeDetectorRef, OutputEmitterRef, OnChanges, SimpleChanges, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
+import { OnInit, AfterViewInit, ElementRef, EventEmitter, OnDestroy, ChangeDetectorRef, OutputEmitterRef, OnChanges, SimpleChanges, ViewContainerRef, ComponentFactoryResolver, DoCheck } from '@angular/core';
 import { RTSeeConference, RTSeePeerConnection } from '@rtsee/conference';
 import { RTSeeMessenger, RTSeeMessengerSearch, RTSeeMessage, RTSeeChat, RTSeeChatMember, RTSeeMentionAutocomplete, RTSeeWorkflowAutocomplete, OzzyClientTask } from '@rtsee/messenger';
 import { IPeer, RTSeeTextLabelKeys, IRTSeeCall } from '@rtsee/core';
@@ -12,11 +12,12 @@ import { IRTSeePaymentProduct, IRTSeePaymentPriceItem, IRTSeeStorySlide, IRTSeeS
 import { RTSeeEventsDashboard, RTSeeDashboardClientSession, RTSeeDashboardEvent, RTSeeDashboardClient } from '@rtsee/events-dashboard';
 import { RTSee, INavigationConfig, IRouteConfig } from '@rtsee/factory';
 import { RTSeePresentation, RTSeeStory, RTSeeInteractiveStoryEditorVm, RTSeeStoryEditorSection, RTSeeIllustrator, RTSeeStoryElementsEditor, RTSeeStoryElementEntity, IRTSeeIllustratorAgentOption, RTSeePresentationSettings, RTSeeStorySlide } from '@rtsee/presentation';
-import { RTSeeTag, RTSeeManageTags, RTSeeTagGroup, RTSeeManageTagGroups, RTSeeEntityConfiguration, RTSeeManageEntityConfigurations, RTSeeEntity, RTSeeManageEntities, RTSeeRater, RTSeeForm } from '@rtsee/utilities-ui';
+import { RTSeeTag, RTSeeManageTags, RTSeeTagGroup, RTSeeManageTagGroups, RTSeeEntityConfiguration, RTSeeManageEntityConfigurations, RTSeeEntity, RTSeeManageEntities, RTSeeRater, RTSeeForm, RTSeeTranslationsPanel, IRTSeeTranslationLanguageOption, IRTSeeTranslationFieldDefinition } from '@rtsee/utilities-ui';
 import * as i44 from '@angular/forms';
 import { FormGroup, FormBuilder, FormControl, FormArray } from '@angular/forms';
 import * as i43 from '@angular/common';
 import { ViewportScroller } from '@angular/common';
+import Swiper from 'swiper';
 import * as i45 from 'ngx-autosize';
 import * as i46 from 'ngx-infinite-scroll';
 import * as i48 from 'ngx-captcha';
@@ -937,14 +938,41 @@ declare class SearchComponent implements OnInit, OnDestroy {
     static ɵcmp: i0.ɵɵComponentDeclaration<SearchComponent, "rtsee-search", never, { "search": { "alias": "search"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-declare class StoryPlayerComponent implements OnInit, AfterViewInit {
+/** Data passed by Swiper's Virtual module to `renderExternal` */
+interface IVirtualSlidesData {
+    offset: number;
+    from: number;
+    to: number;
+    slides: number[];
+}
+/**
+ * Story slides player.
+ *
+ * Uses Swiper's Virtual module with `renderExternal`, so Angular only renders the few
+ * slides around the active one (Safari crashed when animating 20+ card slides at once).
+ * Swiper is aware of ALL the story slides (1..totalSlides) from the start, while the
+ * slide contents are lazy loaded by the story; slides not loaded yet render a placeholder.
+ */
+declare class StoryPlayerComponent implements OnInit, AfterViewInit, DoCheck, OnDestroy {
+    private cdr;
     story: RTSeeStory;
     settings: RTSeePresentationSettings;
     presentation: RTSeePresentation;
     swiperEl: ElementRef<HTMLElement>;
-    constructor();
+    swiper: Swiper | null;
+    /** slide numbers currently rendered by the virtual swiper */
+    virtualData: IVirtualSlidesData;
+    constructor(cdr: ChangeDetectorRef);
     ngOnInit(): void;
     ngAfterViewInit(): void;
+    /** grows the virtual slides list when the slides count becomes known / changes */
+    ngDoCheck(): void;
+    ngOnDestroy(): void;
+    getLoadedSlide(slideNumber: number): RTSeeStorySlide | null;
+    private renderVirtualSlides;
+    private getSlidesCount;
+    /** virtual slides are just the slide numbers: 1..N */
+    private getVirtualSlides;
     static ɵfac: i0.ɵɵFactoryDeclaration<StoryPlayerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<StoryPlayerComponent, "rtsee-story-player", never, { "story": { "alias": "story"; "required": false; }; "settings": { "alias": "settings"; "required": false; }; "presentation": { "alias": "presentation"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -1001,6 +1029,16 @@ declare class RTSeeModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<RTSeeModule>;
 }
 
+declare class TranslationsPanelComponent {
+    panel: RTSeeTranslationsPanel;
+    toggle(): void;
+    selectLanguage(language: IRTSeeTranslationLanguageOption): void;
+    onInput(field: IRTSeeTranslationFieldDefinition, event: Event): void;
+    save(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TranslationsPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TranslationsPanelComponent, "rtsee-translations-panel", never, { "panel": { "alias": "panel"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 declare class GtagService {
     private window;
     constructor(document: Document);
@@ -1101,5 +1139,5 @@ declare class SlideNumberChangedWidgetComponent extends BaseEventWidgetComponent
     static ɵcmp: i0.ɵɵComponentDeclaration<SlideNumberChangedWidgetComponent, "rtsee-slide-number-changed-widget", never, {}, {}, never, never, true, never>;
 }
 
-export { BaseEventWidgetComponent, EntitiesConfigurationsListComponent, EntitiesListComponent, EventsWidgetsService, FormComponent, GtagService, IllustratorComponent, InteractiveStoryEditorComponent, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RTSeeTaskComponent, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent, SlideNumberChangedWidgetComponent, StoryDetailsOpenedWidgetComponent, StoryElementsSectionComponent, StoryReadingStartedWidgetComponent };
+export { BaseEventWidgetComponent, EntitiesConfigurationsListComponent, EntitiesListComponent, EventsWidgetsService, FormComponent, GtagService, IllustratorComponent, InteractiveStoryEditorComponent, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RTSeeTaskComponent, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent, SlideNumberChangedWidgetComponent, StoryDetailsOpenedWidgetComponent, StoryElementsSectionComponent, StoryReadingStartedWidgetComponent, TranslationsPanelComponent };
 export type { IAccordionItem, RTSeeTagForm, RTSeeTagGroupForm };

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

@@ -158,7 +158,7 @@
 
   .rtsee-events-dashboard-container {
     display: none;
-    padding-bottom: $rts-bottom-nav-height + $rts-offset-md;
+    padding-bottom: $rts-bottom-nav-height;
   }
 
   .rtsee-presentation-container {
@@ -169,6 +169,10 @@
   @media screen and (min-width: $rts-break-md) {
     $rts-divider-style: 2px solid rgba(0, 0, 0, 0.9);
 
+    .rtsee-events-dashboard-container {
+      padding-bottom: 0;
+    }
+
     .rtsee-nav-block {
       position: fixed;
       height: 100%;

package/dist/ngx/src/lib/theme/forms/index.scss

@@ -1 +1,2 @@
 @import "./common.scss";
+@import "./translations-panel.scss";

package/dist/ngx/src/lib/theme/forms/translations-panel.scss

@@ -0,0 +1,209 @@
+// ═══════════════════════════════════════════════════════════════════
+// Translations panel (rendered by rtsee-form for translatable forms)
+// ═══════════════════════════════════════════════════════════════════
+@import "../rts-common/variables-spacing";
+@import "../rts-common/variables-typography";
+@import "../rts-common/variables-layout";
+@import "../rts-common/variables-effects";
+
+.rtsee-translations-panel {
+  margin-top: $rtsu-space-md;
+  border: 1px solid var(--rts-border-med);
+  border-radius: $rtsu-radius-md;
+  background: linear-gradient(145deg, var(--rts-card-bg-start, var(--rts-bg-surface)), var(--rts-card-bg-end, var(--rts-bg-surface-elevated)));
+  overflow: hidden;
+  transition: border-color $rtsu-transition-base, box-shadow $rtsu-transition-base;
+
+  &--expanded {
+    border-color: var(--rts-accent);
+    box-shadow: $rtsu-shadow-accent-sm;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: $rtsu-space-sm;
+    width: 100%;
+    padding: $rtsu-space-sm + $rtsu-space-xs $rtsu-space-md;
+    background: transparent;
+    border: 0;
+    color: var(--rts-text-primary);
+    font-family: $rtsu-font-family;
+    font-size: $rtsu-font-size-base;
+    font-weight: $rtsu-font-weight-semibold;
+    cursor: pointer;
+    text-align: left;
+
+    &:hover {
+      background: var(--rts-bg-surface-hover);
+    }
+  }
+
+  &__icon {
+    color: var(--rts-accent);
+  }
+
+  &__title {
+    flex: 1;
+  }
+
+  &__badge {
+    min-width: 22px;
+    padding: 0 $rtsu-space-xs + $rtsu-space-2xs;
+    border-radius: 11px;
+    background: var(--rts-accent-highlight-dim);
+    color: var(--rts-accent-light);
+    font-size: $rtsu-font-size-xs;
+    line-height: 20px;
+    text-align: center;
+  }
+
+  &__chevron {
+    color: var(--rts-text-muted);
+    transition: transform $rtsu-transition-base;
+  }
+
+  &--expanded &__chevron {
+    transform: rotate(180deg);
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: $rtsu-space-md;
+    padding: 0 $rtsu-space-md $rtsu-space-md;
+    animation: rtsee-translations-fade-in $rtsu-transition-base;
+  }
+
+  &__languages {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $rtsu-space-sm;
+  }
+
+  &__language {
+    display: inline-flex;
+    align-items: center;
+    gap: $rtsu-space-xs + $rtsu-space-2xs;
+    padding: $rtsu-space-xs + $rtsu-space-2xs $rtsu-space-sm + $rtsu-space-xs;
+    border: 1px solid var(--rts-border-med);
+    border-radius: 999px;
+    background: var(--rts-bg-surface);
+    color: var(--rts-text-secondary);
+    font-family: $rtsu-font-family;
+    font-size: $rtsu-font-size-sm;
+    cursor: pointer;
+    transition: all $rtsu-transition-fast;
+
+    &:hover:not(:disabled) {
+      border-color: var(--rts-border-bright);
+      color: var(--rts-text-primary);
+      transform: translateY(-1px);
+    }
+
+    &--translated {
+      border-color: var(--rts-success);
+      color: var(--rts-text-primary);
+
+      .rtsee-translations-panel__language-dot {
+        background: var(--rts-success);
+        box-shadow: 0 0 6px var(--rts-success);
+      }
+    }
+
+    &--selected {
+      border-color: var(--rts-accent);
+      background: var(--rts-accent-highlight-dim);
+      color: var(--rts-text-primary);
+      box-shadow: $rtsu-shadow-accent-sm;
+    }
+
+    &--original {
+      opacity: 0.6;
+      cursor: default;
+    }
+  }
+
+  &__language-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--rts-border-bright);
+  }
+
+  &__language-key {
+    color: var(--rts-text-muted);
+    font-size: $rtsu-font-size-2xs;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  &__language-tag {
+    font-size: $rtsu-font-size-2xs;
+    color: var(--rts-success);
+  }
+
+  &--expanded &__language--original &__language-tag {
+    color: var(--rts-text-muted);
+  }
+
+  &__form {
+    display: flex;
+    flex-direction: column;
+    gap: $rtsu-space-sm + $rtsu-space-xs;
+    padding-top: $rtsu-space-sm;
+    border-top: 1px dashed var(--rts-border-dim);
+  }
+
+  &__field {
+    display: flex;
+    flex-direction: column;
+    gap: $rtsu-space-xs;
+  }
+
+  &__required {
+    color: var(--rts-danger);
+    margin-left: $rtsu-space-2xs;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: $rtsu-space-sm;
+  }
+
+  &__saved {
+    color: var(--rts-success);
+    font-size: $rtsu-font-size-sm;
+    animation: rtsee-translations-fade-in $rtsu-transition-base;
+  }
+
+  &__hint,
+  &__loading {
+    margin: 0;
+    color: var(--rts-text-secondary);
+    font-size: $rtsu-font-size-sm;
+  }
+
+  &__error {
+    margin: 0;
+    padding: $rtsu-space-sm;
+    border: 1px solid var(--rts-danger-border);
+    border-radius: $rtsu-radius-sm;
+    background: var(--rts-danger-bg);
+    color: var(--rts-danger);
+    font-size: $rtsu-font-size-sm;
+  }
+}
+
+@keyframes rtsee-translations-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

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

@@ -9,5 +9,7 @@
 @import "./settings";
 @import "./join-call";
 @import "./story-details";
+@import "./story-element-thumbnail";
+@import "./story-slides-preview";
 @import "./interactive-story-editor";
 @import "./illustrator";

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

@@ -23,7 +23,33 @@
     height: $presentation-dashboard-header-height;
     top: - $presentation-dashboard-header-height;
     z-index: 300;
-    background-color: #ffffff;
+    // light reading theme (default)
+    background-color: rgba($rts-reading-light-bg, 0.92);
+    color: $rts-reading-light-text;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    backdrop-filter: blur(12px);
+    transition:
+      top 0.5s ease-in-out,
+      background-color 0.3s ease,
+      color 0.3s ease,
+      border-color 0.3s ease;
+
+    // header button tokens (light)
+    --rts-reading-header-btn-bg: rgba(0, 0, 0, 0.05);
+    --rts-reading-header-btn-bg-hover: rgba(0, 0, 0, 0.1);
+    --rts-reading-header-muted: #{$rts-reading-light-muted};
+    --rts-reading-header-progress-track: rgba(0, 0, 0, 0.06);
+  }
+
+  &.rtsee-presentation-header-convertable.rtsee-presentation-header-theme-dark {
+    background-color: rgba($rts-reading-dark-bg, 0.92);
+    color: $rts-reading-dark-text;
+    border-bottom-color: rgba(255, 255, 255, 0.06);
+
+    --rts-reading-header-btn-bg: rgba(255, 255, 255, 0.06);
+    --rts-reading-header-btn-bg-hover: rgba(255, 255, 255, 0.12);
+    --rts-reading-header-muted: #{$rts-reading-dark-muted};
+    --rts-reading-header-progress-track: rgba(255, 255, 255, 0.06);
   }
 
   &.rtsee-presentation-header-visible {
@@ -75,52 +101,133 @@
 
   .rtsee-presentation-header-active-story-info {
     position: relative;
-    padding: 0 $presentation-dashboard-header-height;
+    display: flex;
+    align-items: center;
+    gap: $rts-offset-sm;
+    height: $presentation-dashboard-header-height;
+    padding: 0 $rts-offset-sm;
 
-    .rtsee-presentation-header-active-story-info-close {
-      position: absolute;
-      display: flex;
+    // round icon buttons (back / settings)
+    .rtsee-presentation-header-icon-btn {
+      flex-shrink: 0;
+      display: inline-flex;
       align-items: center;
       justify-content: center;
-      top: 0;
-      left: 0;
-      height: $presentation-dashboard-header-height;
-      width: $presentation-dashboard-header-height;
+      width: 38px;
+      height: 38px;
+      padding: 0;
+      border: none;
+      border-radius: 50%;
+      background: var(--rts-reading-header-btn-bg);
+      color: inherit;
+      font: inherit;
       cursor: pointer;
-      color: $rts-rates-bg-form-start;
+      transition:
+        background-color 0.2s ease,
+        transform 0.2s ease;
+
+      &:hover {
+        background: var(--rts-reading-header-btn-bg-hover);
+      }
+
+      &:active {
+        transform: scale(0.94);
+      }
+
+      &:focus-visible {
+        outline: 2px solid $rts-rates-accent-purple;
+        outline-offset: 2px;
+      }
 
-      .rtsee-presentation-header-active-story-info-close-icon {
-        font-size: 1.5rem
+      .pi {
+        font-size: 1.05rem;
       }
     }
 
-    .rtsee-presentation-header-active-story-info-details {
-      padding: 5px 0;
+    .rtsee-presentation-header-active-story-info-close:hover .pi {
+      transform: translateX(-2px);
+    }
+
+    .rtsee-presentation-header-active-story-info-close .pi {
+      transition: transform 0.2s ease;
+    }
+
+    // "Aa" reading settings glyph
+    .rtsee-presentation-header-settings-glyph {
+      display: inline-flex;
+      align-items: baseline;
+      font-family: Georgia, "Times New Roman", serif;
+      font-weight: 700;
+      line-height: 1;
+      letter-spacing: -0.02em;
 
-      .rtsee-presentation-header-active-story-name {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 100%;
+      .rtsee-presentation-header-settings-glyph-big {
+        font-size: 1.15rem;
+      }
+
+      .rtsee-presentation-header-settings-glyph-small {
+        font-size: 0.85rem;
       }
     }
 
-    .rtsee-presentation-header-active-story-info-settings {
-      position: absolute;
+    .rtsee-presentation-header-active-story-info-details {
+      flex: 1;
+      min-width: 0;
       display: flex;
       align-items: center;
-      justify-content: center;
-      width: $presentation-dashboard-header-height;
-      height: $presentation-dashboard-header-height;
+      gap: ($rts-offset-sm + $rts-offset-xsm);
+    }
+
+    .rtsee-presentation-header-active-story-cover {
+      flex-shrink: 0;
+      width: 34px;
+      height: 34px;
+      border-radius: 8px;
+      object-fit: cover;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    }
+
+    .rtsee-presentation-header-active-story-text {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      line-height: 1.2;
+    }
+
+    .rtsee-presentation-header-active-story-name {
+      font-size: 0.95rem;
+      font-weight: 600;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .rtsee-presentation-header-active-story-progress-label {
+      font-size: 0.75rem;
+      font-weight: 500;
+      color: var(--rts-reading-header-muted);
+      font-variant-numeric: tabular-nums;
+    }
+
+    // thin reading progress bar along the bottom edge
+    .rtsee-presentation-header-active-story-progress {
+      position: absolute;
+      left: 0;
       right: 0;
-      top: 0;
-      cursor: pointer;
+      bottom: -1px;
+      height: 2px;
+      background: var(--rts-reading-header-progress-track);
+      overflow: hidden;
 
-      .rtsee-presentation-header-active-story-info-settings-icon {
-        font-size: 1.8rem;
-        padding: 7px;
-        background-color: rgba(0, 0, 0, 0.06);
-        border-radius: 50%;
+      .rtsee-presentation-header-active-story-progress-bar {
+        height: 100%;
+        background: linear-gradient(
+          90deg,
+          $rts-rates-accent-purple 0%,
+          $rts-rates-accent-purple-light 100%
+        );
+        border-radius: 0 2px 2px 0;
+        transition: width 0.4s ease;
       }
     }
   }

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

@@ -65,6 +65,43 @@
     }
   }
 
+  .rtsee-presentation-reading-theme-settings {
+    .rtsee-presentation-reading-theme-toggle {
+      display: flex;
+      margin-bottom: $rts-offset-md;
+
+      .p-togglebutton {
+        flex: 1;
+      }
+
+      .p-togglebutton-content {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: $rts-offset-sm;
+        width: 100%;
+      }
+    }
+
+    .rtsee-presentation-reading-theme-example {
+      padding: $rts-offset-md;
+      border-radius: 10px;
+      line-height: 1.6;
+      background-color: $rts-reading-light-bg;
+      color: $rts-reading-light-text;
+      border: 1px solid rgba(0, 0, 0, 0.08);
+      transition:
+        background-color 0.3s ease,
+        color 0.3s ease;
+
+      &.rtsee-presentation-reading-theme-example-dark {
+        background-color: $rts-reading-dark-bg;
+        color: $rts-reading-dark-text;
+        border-color: rgba(255, 255, 255, 0.06);
+      }
+    }
+  }
+
   @media screen and (min-width: $rts-break-md) {
     position: absolute;
   }