@rtsee/ngx 0.0.70 → 0.0.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ngx/fesm2022/rtsee-ngx.mjs +14 -8
- package/dist/ngx/fesm2022/rtsee-ngx.mjs.map +1 -1
- package/dist/ngx/src/lib/theme/presentation/presentation.scss +52 -9
- package/dist/ngx/src/lib/theme/presentation/slide.scss +2 -2
- package/dist/ngx/src/lib/theme/presentation/story-player.scss +17 -4
- package/package.json +7 -7
|
@@ -12,6 +12,7 @@ import { RTSeeChatEvents } from '@rtsee/messenger';
|
|
|
12
12
|
import { debounceTime } from 'rxjs/operators';
|
|
13
13
|
import * as i4 from 'primeng/button';
|
|
14
14
|
import { Button, ButtonModule } from 'primeng/button';
|
|
15
|
+
import { Chip } from 'primeng/chip';
|
|
15
16
|
import Swiper from 'swiper';
|
|
16
17
|
import { EffectCards, Manipulation } from 'swiper/modules';
|
|
17
18
|
import { FloatLabel } from 'primeng/floatlabel';
|
|
@@ -28,7 +29,6 @@ import { AutoCompleteModule } from 'primeng/autocomplete';
|
|
|
28
29
|
import { OrderList } from 'primeng/orderlist';
|
|
29
30
|
import { Divider } from 'primeng/divider';
|
|
30
31
|
import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'primeng/tabs';
|
|
31
|
-
import { Chip } from 'primeng/chip';
|
|
32
32
|
import { ColorPicker } from 'primeng/colorpicker';
|
|
33
33
|
import * as i2 from '@angular/router';
|
|
34
34
|
import { RouterLink, RouterLinkActive } from '@angular/router';
|
|
@@ -993,14 +993,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
993
993
|
|
|
994
994
|
class PresentationHeaderComponent {
|
|
995
995
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
996
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationHeaderComponent, isStandalone: true, selector: "rtsee-presentation-header", inputs: { presentation: "presentation" }, ngImport: i0, template: "<div class=\"rtsee-presentation-header\"\n [ngClass]=\"{\n 'rtsee-presentation-header-convertable': presentation.activeStory,\n 'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n }\"\n>\n <div class=\"rtsee-presentation-room-block\">\n @if (presentation.activeRoom) {\n <div class=\"rtsee-presentation-active-room\">\n <p>{{presentation.activeRoom.id}}</p>\n <button (click)=\"presentation.emitJoinRoomCallEvent()\">Join Video Call</button>\n </div>\n }\n </div>\n @if (presentation.activeStory) {\n <div class=\"rtsee-story-info\">\n <
|
|
996
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationHeaderComponent, isStandalone: true, selector: "rtsee-presentation-header", inputs: { presentation: "presentation" }, ngImport: i0, template: "<div class=\"rtsee-presentation-header\"\n [ngClass]=\"{\n 'rtsee-presentation-header-convertable': presentation.activeStory,\n 'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n }\"\n>\n <div class=\"rtsee-presentation-room-block\">\n @if (presentation.activeRoom) {\n <div class=\"rtsee-presentation-active-room\">\n <p>{{presentation.activeRoom.id}}</p>\n <button (click)=\"presentation.emitJoinRoomCallEvent()\">Join Video Call</button>\n </div>\n }\n </div>\n @if (presentation.activeStory) {\n <div class=\"rtsee-presentation-header-active-story-info\">\n <div class=\"rtsee-presentation-header-active-story-info-close\"\n (click)=\"presentation.disableActiveStory()\"\n >\n <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n </div>\n <div class=\"rtsee-presentation-header-active-story-info-details\">\n <p-chip [label]=\"presentation.activeStory.name\"\n [image]=\"presentation.activeStory.imageUrl\"\n class=\"rtsee-presentation-header-active-story-name\"\n alt=\"Story image\" />\n </div>\n <div class=\"rtsee-presentation-header-active-story-info-settings\">\n <i class=\"pi pi-cog rtsee-presentation-header-active-story-info-settings-icon\"></i>\n </div>\n </div>\n }\n @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen) {\n <p-button [label]=\"'Dashboard'\"\n (click)=\"presentation.toggleDashboardState()\"\n ></p-button>\n }\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }] }); }
|
|
997
997
|
}
|
|
998
998
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationHeaderComponent, decorators: [{
|
|
999
999
|
type: Component,
|
|
1000
1000
|
args: [{ selector: 'rtsee-presentation-header', imports: [
|
|
1001
1001
|
Button,
|
|
1002
|
-
NgClass
|
|
1003
|
-
|
|
1002
|
+
NgClass,
|
|
1003
|
+
Chip
|
|
1004
|
+
], standalone: true, template: "<div class=\"rtsee-presentation-header\"\n [ngClass]=\"{\n 'rtsee-presentation-header-convertable': presentation.activeStory,\n 'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n }\"\n>\n <div class=\"rtsee-presentation-room-block\">\n @if (presentation.activeRoom) {\n <div class=\"rtsee-presentation-active-room\">\n <p>{{presentation.activeRoom.id}}</p>\n <button (click)=\"presentation.emitJoinRoomCallEvent()\">Join Video Call</button>\n </div>\n }\n </div>\n @if (presentation.activeStory) {\n <div class=\"rtsee-presentation-header-active-story-info\">\n <div class=\"rtsee-presentation-header-active-story-info-close\"\n (click)=\"presentation.disableActiveStory()\"\n >\n <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n </div>\n <div class=\"rtsee-presentation-header-active-story-info-details\">\n <p-chip [label]=\"presentation.activeStory.name\"\n [image]=\"presentation.activeStory.imageUrl\"\n class=\"rtsee-presentation-header-active-story-name\"\n alt=\"Story image\" />\n </div>\n <div class=\"rtsee-presentation-header-active-story-info-settings\">\n <i class=\"pi pi-cog rtsee-presentation-header-active-story-info-settings-icon\"></i>\n </div>\n </div>\n }\n @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen) {\n <p-button [label]=\"'Dashboard'\"\n (click)=\"presentation.toggleDashboardState()\"\n ></p-button>\n }\n</div>\n" }]
|
|
1004
1005
|
}], propDecorators: { presentation: [{
|
|
1005
1006
|
type: Input
|
|
1006
1007
|
}] } });
|
|
@@ -1050,11 +1051,12 @@ class SlideComponent {
|
|
|
1050
1051
|
}
|
|
1051
1052
|
onScroll(target) {
|
|
1052
1053
|
if (target && target instanceof HTMLElement) {
|
|
1053
|
-
this.handleScroll(target.scrollTop);
|
|
1054
|
+
this.handleScroll(target.scrollTop, target.scrollHeight, target.clientHeight);
|
|
1054
1055
|
}
|
|
1055
1056
|
}
|
|
1056
|
-
handleScroll(position) {
|
|
1057
|
+
handleScroll(position, scrollHeight, clientHeight) {
|
|
1057
1058
|
const BUFFER = 50;
|
|
1059
|
+
const isAtBottom = Math.abs((scrollHeight - position) - clientHeight) < 10;
|
|
1058
1060
|
if (position > this.lastScrollPosition + BUFFER) {
|
|
1059
1061
|
if (!this.scrollingDown) {
|
|
1060
1062
|
this.scrollingDown = true;
|
|
@@ -1071,9 +1073,13 @@ class SlideComponent {
|
|
|
1071
1073
|
}
|
|
1072
1074
|
this.lastScrollPosition = position;
|
|
1073
1075
|
}
|
|
1076
|
+
else if (isAtBottom) {
|
|
1077
|
+
this.lastScrollPosition = position;
|
|
1078
|
+
this.story.toggleHeader(true);
|
|
1079
|
+
}
|
|
1074
1080
|
}
|
|
1075
1081
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SlideComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1076
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SlideComponent, isStandalone: true, selector: "rtsee-slide", inputs: { story: "story", slide: "slide" }, ngImport: i0, template: "<div class=\"rtsee-presentation-slide\" (scroll)=\"onScroll($event.target)\">\n @if (slide.widget) {\n <ng-template widgetHost></ng-template>\n }\n <div class=\"rtsee-presentation-slide-default\">\n @if (slide.imageUrl) {\n <div class=\"rtsee-presentation-slide-image-container\"\n [ngStyle]=\"{'background-image': 'url(' + slide.imageUrl + ')'}\"\n >\n </div>\n }\n <div class=\"rtsee-presentation-slide-text\">\n <p>{{slide.text}}</p>\n </div>\n <div class=\"rtsee-presentation-slide-controls\"\n [ngClass]=\"{'rtsee-presentation-slide-controls-hidden': hideRewindControls}\"\n >\n @if (story.activeSlideNumber !== 1) {\n <p-button class=\"slide-navigation-btn navigation-prev\"\n label=\"Previous Page\"\n icon=\"pi pi-arrow-left\"\n [severity]=\"'secondary'\"\n [iconPos]=\"'left'\"\n
|
|
1082
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SlideComponent, isStandalone: true, selector: "rtsee-slide", inputs: { story: "story", slide: "slide" }, ngImport: i0, template: "<div class=\"rtsee-presentation-slide\" (scroll)=\"onScroll($event.target)\">\n @if (slide.widget) {\n <ng-template widgetHost></ng-template>\n }\n <div class=\"rtsee-presentation-slide-default\">\n @if (slide.imageUrl) {\n <div class=\"rtsee-presentation-slide-image-container\"\n [ngStyle]=\"{'background-image': 'url(' + slide.imageUrl + ')'}\"\n >\n </div>\n }\n <div class=\"rtsee-presentation-slide-text\">\n <p>{{slide.text}}</p>\n </div>\n <div class=\"rtsee-presentation-slide-controls\"\n [ngClass]=\"{'rtsee-presentation-slide-controls-hidden': hideRewindControls}\"\n >\n @if (story.activeSlideNumber !== 1) {\n <p-button class=\"slide-navigation-btn navigation-prev\"\n label=\"Previous Page\"\n icon=\"pi pi-arrow-left\"\n [severity]=\"'secondary'\"\n [iconPos]=\"'left'\"\n (click)=\"slideRewindClicked(false)\"\n >\n </p-button>\n }\n @if (story.activeSlideNumber !== this.story.totalSlides) {\n <p-button class=\"slide-navigation-btn navigation-next\"\n label=\"Next Page\"\n icon=\"pi pi-arrow-right\"\n [iconPos]=\"'right'\"\n (click)=\"slideRewindClicked(true)\"\n >\n </p-button>\n }\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
1077
1083
|
}
|
|
1078
1084
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SlideComponent, decorators: [{
|
|
1079
1085
|
type: Component,
|
|
@@ -1082,7 +1088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
1082
1088
|
WidgetDirective,
|
|
1083
1089
|
Button,
|
|
1084
1090
|
NgClass
|
|
1085
|
-
], standalone: true, template: "<div class=\"rtsee-presentation-slide\" (scroll)=\"onScroll($event.target)\">\n @if (slide.widget) {\n <ng-template widgetHost></ng-template>\n }\n <div class=\"rtsee-presentation-slide-default\">\n @if (slide.imageUrl) {\n <div class=\"rtsee-presentation-slide-image-container\"\n [ngStyle]=\"{'background-image': 'url(' + slide.imageUrl + ')'}\"\n >\n </div>\n }\n <div class=\"rtsee-presentation-slide-text\">\n <p>{{slide.text}}</p>\n </div>\n <div class=\"rtsee-presentation-slide-controls\"\n [ngClass]=\"{'rtsee-presentation-slide-controls-hidden': hideRewindControls}\"\n >\n @if (story.activeSlideNumber !== 1) {\n <p-button class=\"slide-navigation-btn navigation-prev\"\n label=\"Previous Page\"\n icon=\"pi pi-arrow-left\"\n [severity]=\"'secondary'\"\n [iconPos]=\"'left'\"\n
|
|
1091
|
+
], standalone: true, template: "<div class=\"rtsee-presentation-slide\" (scroll)=\"onScroll($event.target)\">\n @if (slide.widget) {\n <ng-template widgetHost></ng-template>\n }\n <div class=\"rtsee-presentation-slide-default\">\n @if (slide.imageUrl) {\n <div class=\"rtsee-presentation-slide-image-container\"\n [ngStyle]=\"{'background-image': 'url(' + slide.imageUrl + ')'}\"\n >\n </div>\n }\n <div class=\"rtsee-presentation-slide-text\">\n <p>{{slide.text}}</p>\n </div>\n <div class=\"rtsee-presentation-slide-controls\"\n [ngClass]=\"{'rtsee-presentation-slide-controls-hidden': hideRewindControls}\"\n >\n @if (story.activeSlideNumber !== 1) {\n <p-button class=\"slide-navigation-btn navigation-prev\"\n label=\"Previous Page\"\n icon=\"pi pi-arrow-left\"\n [severity]=\"'secondary'\"\n [iconPos]=\"'left'\"\n (click)=\"slideRewindClicked(false)\"\n >\n </p-button>\n }\n @if (story.activeSlideNumber !== this.story.totalSlides) {\n <p-button class=\"slide-navigation-btn navigation-next\"\n label=\"Next Page\"\n icon=\"pi pi-arrow-right\"\n [iconPos]=\"'right'\"\n (click)=\"slideRewindClicked(true)\"\n >\n </p-button>\n }\n </div>\n </div>\n</div>\n" }]
|
|
1086
1092
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { story: [{
|
|
1087
1093
|
type: Input
|
|
1088
1094
|
}], slide: [{
|