@rtsee/ngx 0.0.116 → 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';
@@ -17,6 +17,7 @@ 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>;
 }

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;
   }

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

@@ -227,43 +227,154 @@
     }
   }
 
-  /* ── HERO ACTIONS (buttons) ────────────────────────────────── */
+  /* ── READING PANEL (slides preview + start reading CTA) ─────── */
 
-  .rtsee-story-details-cover-actions {
+  .rtsee-story-details-reading-panel {
+    position: relative;
+    z-index: 3;
     display: flex;
+    flex-direction: column;
     align-items: stretch;
-    margin-top: -$rts-offset-md;
-    padding-bottom: $rts-offset-xl;
+    gap: ($rts-offset-md + $rts-offset-xsm);
+    margin: (-$rts-offset-lg) 0 $rts-offset-xl;
+    padding: ($rts-offset-md + $rts-offset-xsm);
+    border-radius: 20px;
+    border: 1px solid rgba($rts-rates-accent-purple, 0.25);
+    background:
+      radial-gradient(
+        120% 140% at 0% 0%,
+        rgba($rts-rates-accent-purple, 0.18) 0%,
+        rgba($rts-rates-accent-purple, 0) 60%
+      ),
+      linear-gradient(
+        135deg,
+        $rts-rates-bg-card-start 0%,
+        $rts-rates-bg-card-end 100%
+      );
+    backdrop-filter: blur(14px);
+    box-shadow:
+      0 12px 40px rgba(0, 0, 0, 0.35),
+      0 0 0 1px rgba(255, 255, 255, 0.02) inset;
+    animation: rtseeCardSlideUp 0.6s ease-out both;
 
-    // Mobile-first default
-    flex-direction: column;
-    gap: $rts-offset-sm;
-    width: 100%;
+    // fan the preview circles out when the panel is hovered
+    &:hover .rtsee-story-slides-preview-circle {
+      &:nth-child(1) { transform: translateX(-4px) rotate(-8deg); }
+      &:nth-child(2) { transform: translateY(-3px); }
+      &:nth-child(3) { transform: translateX(4px) rotate(8deg); }
+    }
 
-    /* Override primeng button defaults to look premium dark theme */
-    ::v-deep .p-button {
-      border-radius: 8px;
-      font-weight: 600;
-      padding: 12px 24px;
-      transition:
-        transform 0.2s ease,
-        box-shadow 0.2s ease;
-      width: 100%;
+    rtsee-story-slides-preview {
+      display: block;
     }
 
-    .rtsee-story-details-start-reading ::v-deep .p-button {
-      background: linear-gradient(135deg, $rts-rates-accent-purple 0%, $rts-rates-accent-purple-light 100%);
-      border: none;
-      box-shadow: 0 4px 16px rgba($rts-rates-accent-purple, 0.3);
+    /* ── Start reading CTA ── */
+    .rtsee-story-details-start-reading.rts-action-button {
+      display: block;
+      width: 100%;
 
-      &:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 6px 20px rgba($rts-rates-accent-purple, 0.4);
+      .p-button {
+        position: relative;
+        overflow: hidden;
+        width: 100%;
+        min-height: 58px;
+        justify-content: center;
+        gap: ($rts-offset-sm + $rts-offset-xsm);
+        padding: $rts-offset-md $rts-offset-lg;
+        border: none;
+        border-radius: 14px;
+        font-size: 1.12rem;
+        font-weight: 700;
+        letter-spacing: 0.01em;
+        color: #fff;
+        background: linear-gradient(
+          135deg,
+          $rts-rates-accent-purple 0%,
+          $rts-rates-accent-purple-light 100%
+        );
+        box-shadow:
+          0 8px 24px rgba($rts-rates-accent-purple, 0.45),
+          0 0 0 1px rgba(255, 255, 255, 0.12) inset;
+        animation: rtseeStartReadingGlow 2.8s ease-in-out infinite;
+        transition:
+          transform 0.2s ease,
+          box-shadow 0.2s ease,
+          filter 0.2s ease;
+
+        .p-button-icon {
+          font-size: 1.15rem;
+        }
+
+        // soft light sweep across the button
+        &::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: -60%;
+          width: 40%;
+          height: 100%;
+          background: linear-gradient(
+            100deg,
+            rgba(255, 255, 255, 0) 0%,
+            rgba(255, 255, 255, 0.28) 50%,
+            rgba(255, 255, 255, 0) 100%
+          );
+          transform: skewX(-20deg);
+          animation: rtseeStartReadingShine 3.6s ease-in-out infinite;
+          pointer-events: none;
+        }
+
+        &:hover {
+          animation: none;
+          transform: translateY(-2px);
+          filter: brightness(1.06);
+          box-shadow:
+            0 12px 30px rgba($rts-rates-accent-purple, 0.55),
+            0 0 0 1px rgba(255, 255, 255, 0.18) inset;
+        }
+
+        &:active {
+          transform: translateY(0) scale(0.99);
+        }
+
+        &:focus-visible {
+          outline: 2px solid $rts-rates-accent-purple-light;
+          outline-offset: 3px;
+        }
       }
+    }
+  }
 
-      &:active {
-        transform: translateY(0);
-        box-shadow: 0 4px 12px rgba($rts-rates-accent-purple, 0.3);
+  @keyframes rtseeStartReadingGlow {
+    0%,
+    100% {
+      box-shadow:
+        0 8px 24px rgba($rts-rates-accent-purple, 0.4),
+        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
+    }
+    50% {
+      box-shadow:
+        0 8px 32px rgba($rts-rates-accent-purple, 0.65),
+        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
+    }
+  }
+
+  @keyframes rtseeStartReadingShine {
+    0%,
+    60% {
+      left: -60%;
+    }
+    100% {
+      left: 130%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .rtsee-story-details-reading-panel .rtsee-story-details-start-reading .p-button {
+      animation: none;
+
+      &::after {
+        display: none;
       }
     }
   }
@@ -351,6 +462,47 @@
     white-space: pre-line;
   }
 
+  /* ── STORY ELEMENTS (author / characters / artifacts / places) ── */
+
+  .rtsee-story-details-elements {
+    margin-bottom: $rts-offset-xl;
+  }
+
+  .rtsee-story-details-elements-grid {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: ($rts-offset-sm + $rts-offset-xsm);
+    // compact row thumbnails: single column on phones, auto-filled columns on wider screens
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
+    // an expanded card shouldn't stretch its row neighbours
+    align-items: start;
+  }
+
+  .rtsee-story-details-elements-item {
+    min-width: 0;
+
+    rtsee-story-element-thumbnail {
+      display: block;
+    }
+
+    // stagger card entrance
+    @for $i from 1 through 8 {
+      &:nth-child(#{$i}) .rtsee-story-element-thumbnail {
+        animation-delay: #{$i * 0.06}s;
+      }
+    }
+  }
+
+  .rtsee-story-details-elements-featured {
+    max-width: 560px;
+
+    rtsee-story-element-thumbnail {
+      display: block;
+    }
+  }
+
   /* ── COMMENTS SECTION / INTEGRATED LOGIC ─────────────────── */
 
   .rtsee-story-details-votes {
@@ -392,15 +544,13 @@
       gap: $rts-offset-lg;
     }
 
-    .rtsee-story-details-cover-actions {
-      flex-direction: row;
-      align-items: center;
+    .rtsee-story-details-elements-grid {
       gap: $rts-offset-md;
-      width: auto;
+    }
 
-      ::v-deep .p-button {
-        width: auto;
-      }
+    .rtsee-story-details-reading-panel {
+      max-width: 460px;
+      padding: $rts-offset-lg;
     }
   }