ngx-payvent-shared 0.0.7 → 0.0.8
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/fesm2022/ngx-payvent-shared.mjs +130 -55
- package/fesm2022/ngx-payvent-shared.mjs.map +1 -1
- package/index.d.ts +12 -6
- package/package.json +1 -1
|
@@ -2474,11 +2474,11 @@ class SidebarComponent {
|
|
|
2474
2474
|
}
|
|
2475
2475
|
}
|
|
2476
2476
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2477
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: SidebarComponent, isStandalone: true, selector: "sidebar", viewQueries: [{ propertyName: "contentComponent", first: true, predicate: ["content"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if(sidebarService.sidebars().length > 0) {\r\n\r\n<div class=\"sidebar-overlay\">\r\n @for(sidebar of sidebarService.sidebars(); track sidebar.id) {\r\n @if(sidebar.visible) {\r\n <div [id]=\"'sidebar-' + sidebar.id\" class=\"sidebar-container container left-1/2 -translate-x-1/2 w-full\"\r\n [ngStyle]=\"sidebar.options.ngStyle\" animate.enter=\"fade-in\" animate.leave=\"fade-out\">\r\n <div class=\"flex flex-col h-full sidebar-pan-control\" [id]=\"'sidebar-body-' + sidebar.id\"\r\n style=\"touch-action: none;\" (touchmove)=\"onPan($event, sidebar.id)\" (touchstart)=\"onPan($event, sidebar.id)\"\r\n (touchend)=\"onPan($event, sidebar.id)\">\r\n <div class=\"sm:text-right text-center px-3 py-2 inline-block leading-none\" [id]=\"'sidebar-header-' + sidebar.id\">\r\n <div class=\"self-center bg-
|
|
2477
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: SidebarComponent, isStandalone: true, selector: "sidebar", viewQueries: [{ propertyName: "contentComponent", first: true, predicate: ["content"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if(sidebarService.sidebars().length > 0) {\r\n\r\n<div class=\"sidebar-overlay\">\r\n @for(sidebar of sidebarService.sidebars(); track sidebar.id) {\r\n @if(sidebar.visible) {\r\n <div [id]=\"'sidebar-' + sidebar.id\" class=\"sidebar-container container left-1/2 -translate-x-1/2 w-full\"\r\n [ngStyle]=\"sidebar.options.ngStyle\" animate.enter=\"fade-in\" animate.leave=\"fade-out\">\r\n <div class=\"flex flex-col h-full sidebar-pan-control\" [id]=\"'sidebar-body-' + sidebar.id\"\r\n style=\"touch-action: none;\" (touchmove)=\"onPan($event, sidebar.id)\" (touchstart)=\"onPan($event, sidebar.id)\"\r\n (touchend)=\"onPan($event, sidebar.id)\">\r\n <div class=\"sm:text-right text-center px-3 py-2 inline-block leading-none\" [id]=\"'sidebar-header-' + sidebar.id\">\r\n <div class=\"self-center bg-[#D7D8E0] rounded-full inline-block sm:hidden\"\r\n [id]=\"'sidebar-header-hook-' + sidebar.id\" style=\"height: .3rem; width:44px\"></div>\r\n <div class=\"hidden sm:inline-block\">\r\n <a (click)=\"closeCallback(sidebar.id)\" class=\"text-2xl p-2 opacity-40 font-bold\">\r\n <i class=\"fi fi-rr-cross\"></i>\r\n </a>\r\n </div>\r\n </div>\r\n <div #content\r\n [class]=\"{ 'overflow-y-auto': sidebar.options.contentScrollable(), 'p-2': !sidebar.options.noPadding, 'h-full': true }\">\r\n <ng-container *ngComponentOutlet=\"sidebar.component;inputs: sidebar.inputs;\" />\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n</div>\r\n}\r\n", styles: [".sidebar-container{bottom:0;position:fixed;background-color:var(--p-surface-0);border-top-left-radius:var(--p-border-radius-xl);border-top-right-radius:var(--p-border-radius-xl)}.sidebar-overlay{position:fixed;inset:0;z-index:999;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.sidebar-pan-control{border-top-left-radius:var(--p-border-radius);border-top-right-radius:var(--p-border-radius)}.fade-in{animation:fadeIn .2s}@keyframes fadeIn{0%{transform:translateY(100%)}to{transform:translateY(0)}}.fade-out{animation:fadeOut .2s}@keyframes fadeOut{0%{transform:translateY(0)}to{transform:translateY(100%)}}\n"], dependencies: [{ kind: "ngmodule", type: DrawerModule }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: HammerModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
2478
2478
|
}
|
|
2479
2479
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
2480
2480
|
type: Component,
|
|
2481
|
-
args: [{ selector: 'sidebar', standalone: true, imports: [DrawerModule, NgComponentOutlet, ButtonModule, HammerModule, CommonModule], template: "@if(sidebarService.sidebars().length > 0) {\r\n\r\n<div class=\"sidebar-overlay\">\r\n @for(sidebar of sidebarService.sidebars(); track sidebar.id) {\r\n @if(sidebar.visible) {\r\n <div [id]=\"'sidebar-' + sidebar.id\" class=\"sidebar-container container left-1/2 -translate-x-1/2 w-full\"\r\n [ngStyle]=\"sidebar.options.ngStyle\" animate.enter=\"fade-in\" animate.leave=\"fade-out\">\r\n <div class=\"flex flex-col h-full sidebar-pan-control\" [id]=\"'sidebar-body-' + sidebar.id\"\r\n style=\"touch-action: none;\" (touchmove)=\"onPan($event, sidebar.id)\" (touchstart)=\"onPan($event, sidebar.id)\"\r\n (touchend)=\"onPan($event, sidebar.id)\">\r\n <div class=\"sm:text-right text-center px-3 py-2 inline-block leading-none\" [id]=\"'sidebar-header-' + sidebar.id\">\r\n <div class=\"self-center bg-
|
|
2481
|
+
args: [{ selector: 'sidebar', standalone: true, imports: [DrawerModule, NgComponentOutlet, ButtonModule, HammerModule, CommonModule], template: "@if(sidebarService.sidebars().length > 0) {\r\n\r\n<div class=\"sidebar-overlay\">\r\n @for(sidebar of sidebarService.sidebars(); track sidebar.id) {\r\n @if(sidebar.visible) {\r\n <div [id]=\"'sidebar-' + sidebar.id\" class=\"sidebar-container container left-1/2 -translate-x-1/2 w-full\"\r\n [ngStyle]=\"sidebar.options.ngStyle\" animate.enter=\"fade-in\" animate.leave=\"fade-out\">\r\n <div class=\"flex flex-col h-full sidebar-pan-control\" [id]=\"'sidebar-body-' + sidebar.id\"\r\n style=\"touch-action: none;\" (touchmove)=\"onPan($event, sidebar.id)\" (touchstart)=\"onPan($event, sidebar.id)\"\r\n (touchend)=\"onPan($event, sidebar.id)\">\r\n <div class=\"sm:text-right text-center px-3 py-2 inline-block leading-none\" [id]=\"'sidebar-header-' + sidebar.id\">\r\n <div class=\"self-center bg-[#D7D8E0] rounded-full inline-block sm:hidden\"\r\n [id]=\"'sidebar-header-hook-' + sidebar.id\" style=\"height: .3rem; width:44px\"></div>\r\n <div class=\"hidden sm:inline-block\">\r\n <a (click)=\"closeCallback(sidebar.id)\" class=\"text-2xl p-2 opacity-40 font-bold\">\r\n <i class=\"fi fi-rr-cross\"></i>\r\n </a>\r\n </div>\r\n </div>\r\n <div #content\r\n [class]=\"{ 'overflow-y-auto': sidebar.options.contentScrollable(), 'p-2': !sidebar.options.noPadding, 'h-full': true }\">\r\n <ng-container *ngComponentOutlet=\"sidebar.component;inputs: sidebar.inputs;\" />\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n</div>\r\n}\r\n", styles: [".sidebar-container{bottom:0;position:fixed;background-color:var(--p-surface-0);border-top-left-radius:var(--p-border-radius-xl);border-top-right-radius:var(--p-border-radius-xl)}.sidebar-overlay{position:fixed;inset:0;z-index:999;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.sidebar-pan-control{border-top-left-radius:var(--p-border-radius);border-top-right-radius:var(--p-border-radius)}.fade-in{animation:fadeIn .2s}@keyframes fadeIn{0%{transform:translateY(100%)}to{transform:translateY(0)}}.fade-out{animation:fadeOut .2s}@keyframes fadeOut{0%{transform:translateY(0)}to{transform:translateY(100%)}}\n"] }]
|
|
2482
2482
|
}], propDecorators: { contentComponent: [{
|
|
2483
2483
|
type: ViewChild,
|
|
2484
2484
|
args: ['content', { read: ElementRef }]
|
|
@@ -2491,27 +2491,30 @@ class StoriesComponent {
|
|
|
2491
2491
|
subFooterTemplate = input(...(ngDevMode ? [undefined, { debugName: "subFooterTemplate" }] : []));
|
|
2492
2492
|
sideTemplate = input(...(ngDevMode ? [undefined, { debugName: "sideTemplate" }] : []));
|
|
2493
2493
|
showSubFooter = input(true, ...(ngDevMode ? [{ debugName: "showSubFooter" }] : []));
|
|
2494
|
-
mute = signal(true, ...(ngDevMode ? [{ debugName: "mute" }] : []));
|
|
2495
2494
|
descriptionOpen = input(...(ngDevMode ? [undefined, { debugName: "descriptionOpen" }] : []));
|
|
2495
|
+
mute = signal(true, ...(ngDevMode ? [{ debugName: "mute" }] : []));
|
|
2496
2496
|
fullScreen = model(false, ...(ngDevMode ? [{ debugName: "fullScreen" }] : []));
|
|
2497
|
+
paused = model(false, ...(ngDevMode ? [{ debugName: "paused" }] : []));
|
|
2498
|
+
eventName = input('', ...(ngDevMode ? [{ debugName: "eventName" }] : []));
|
|
2499
|
+
usePortalFullscreen = input(true, ...(ngDevMode ? [{ debugName: "usePortalFullscreen" }] : []));
|
|
2497
2500
|
storyChanged = output();
|
|
2501
|
+
close = output();
|
|
2498
2502
|
currentStory = computed(() => this.stories()[this.currentStoryIndex()], ...(ngDevMode ? [{ debugName: "currentStory" }] : []));
|
|
2499
|
-
defaultDuration = input(
|
|
2503
|
+
defaultDuration = input(5, ...(ngDevMode ? [{ debugName: "defaultDuration" }] : []));
|
|
2500
2504
|
currentProgress = signal(0, ...(ngDevMode ? [{ debugName: "currentProgress" }] : []));
|
|
2501
2505
|
currentDuration = signal(0, ...(ngDevMode ? [{ debugName: "currentDuration" }] : []));
|
|
2502
2506
|
currentTime = 0;
|
|
2503
2507
|
timerInterval = 100;
|
|
2504
2508
|
timerSubscription;
|
|
2505
|
-
paused = model(false, ...(ngDevMode ? [{ debugName: "paused" }] : []));
|
|
2506
|
-
close = output();
|
|
2507
2509
|
sidebarService = inject(SidebarService);
|
|
2508
2510
|
videoPlayer = viewChild('videoPlayer', ...(ngDevMode ? [{ debugName: "videoPlayer" }] : []));
|
|
2509
2511
|
storyContainer = viewChild('viewContainer', ...(ngDevMode ? [{ debugName: "storyContainer" }] : []));
|
|
2510
|
-
|
|
2512
|
+
savedStyle = null;
|
|
2511
2513
|
constructor() {
|
|
2512
2514
|
effect(() => {
|
|
2513
|
-
if (this.currentStoryIndex()
|
|
2515
|
+
if (this.currentStoryIndex() === -1 && this.stories().length > 0) {
|
|
2514
2516
|
untracked(() => this.next());
|
|
2517
|
+
}
|
|
2515
2518
|
});
|
|
2516
2519
|
effect(() => {
|
|
2517
2520
|
if (!this.videoPlayer())
|
|
@@ -2533,39 +2536,58 @@ class StoriesComponent {
|
|
|
2533
2536
|
}
|
|
2534
2537
|
});
|
|
2535
2538
|
effect(() => {
|
|
2536
|
-
if (this.fullScreen())
|
|
2537
|
-
|
|
2538
|
-
|
|
2539
|
-
|
|
2540
|
-
|
|
2541
|
-
this.storyContainer().nativeElement.style.left = '0';
|
|
2542
|
-
}
|
|
2539
|
+
if (!this.fullScreen())
|
|
2540
|
+
return;
|
|
2541
|
+
if (!this.usePortalFullscreen())
|
|
2542
|
+
return;
|
|
2543
|
+
this.applyPortalFullscreen();
|
|
2543
2544
|
});
|
|
2544
2545
|
}
|
|
2545
|
-
ngOnInit() {
|
|
2546
|
-
}
|
|
2546
|
+
ngOnInit() { }
|
|
2547
2547
|
next() {
|
|
2548
|
-
this.currentStoryIndex.update(c => c + 1 < this.stories().length ? c + 1 : 0);
|
|
2548
|
+
this.currentStoryIndex.update(c => (c + 1 < this.stories().length ? c + 1 : 0));
|
|
2549
|
+
this.currentStory().completion = signal(0, ...(ngDevMode ? [{ debugName: "completion" }] : []));
|
|
2550
|
+
this.storyChanged.emit(this.currentStory());
|
|
2551
|
+
this.paused.set(false);
|
|
2552
|
+
this.currentProgress.set(0);
|
|
2553
|
+
this.currentTime = 0;
|
|
2554
|
+
if (this.currentStory().type === 'video') {
|
|
2555
|
+
// duration will be set on loadeddata
|
|
2556
|
+
}
|
|
2557
|
+
else {
|
|
2558
|
+
this.currentDuration.set(15);
|
|
2559
|
+
this.runTimer();
|
|
2560
|
+
}
|
|
2561
|
+
}
|
|
2562
|
+
prev() {
|
|
2563
|
+
this.currentStoryIndex.update(c => (c - 1 >= 0 ? c - 1 : this.stories().length - 1));
|
|
2549
2564
|
this.currentStory().completion = signal(0, ...(ngDevMode ? [{ debugName: "completion" }] : []));
|
|
2550
2565
|
this.storyChanged.emit(this.currentStory());
|
|
2551
2566
|
this.paused.set(false);
|
|
2552
2567
|
this.currentProgress.set(0);
|
|
2553
2568
|
this.currentTime = 0;
|
|
2554
|
-
if (this.currentStory().type
|
|
2569
|
+
if (this.currentStory().type === 'video') {
|
|
2570
|
+
// duration will be set on loadeddata
|
|
2555
2571
|
}
|
|
2556
2572
|
else {
|
|
2557
2573
|
this.currentDuration.set(15);
|
|
2558
2574
|
this.runTimer();
|
|
2559
2575
|
}
|
|
2560
2576
|
}
|
|
2577
|
+
toggleFullScreen() {
|
|
2578
|
+
if (this.fullScreen())
|
|
2579
|
+
this.emitClose();
|
|
2580
|
+
else
|
|
2581
|
+
this.setFullScreen();
|
|
2582
|
+
}
|
|
2561
2583
|
runTimer() {
|
|
2562
2584
|
if (this.timerSubscription)
|
|
2563
2585
|
this.timerSubscription.unsubscribe();
|
|
2564
|
-
if (this.paused() || this.stories().length
|
|
2586
|
+
if (this.paused() || this.stories().length === 1)
|
|
2565
2587
|
return;
|
|
2566
2588
|
this.timerSubscription = timer(this.timerInterval).subscribe(() => {
|
|
2567
2589
|
this.currentTime += this.timerInterval;
|
|
2568
|
-
|
|
2590
|
+
const duration = this.currentDuration() ?? this.defaultDuration();
|
|
2569
2591
|
this.currentProgress.set(this.currentTime / (duration * 10));
|
|
2570
2592
|
if (this.currentTime >= duration * 1000)
|
|
2571
2593
|
this.next();
|
|
@@ -2573,52 +2595,105 @@ class StoriesComponent {
|
|
|
2573
2595
|
this.runTimer();
|
|
2574
2596
|
});
|
|
2575
2597
|
}
|
|
2576
|
-
closeCallback(id) {
|
|
2577
|
-
//this.sidebarService.closeSidebar(id);
|
|
2578
|
-
}
|
|
2579
2598
|
emitClose() {
|
|
2580
|
-
|
|
2581
|
-
|
|
2599
|
+
// Only restore body scroll if portal fullscreen is being used
|
|
2600
|
+
if (this.usePortalFullscreen()) {
|
|
2601
|
+
document.getElementsByTagName('html')[0].style['overflow'] = 'initial';
|
|
2602
|
+
document.getElementsByTagName('body')[0].style['overflow'] = 'initial';
|
|
2603
|
+
}
|
|
2582
2604
|
this.fullScreen.set(false);
|
|
2583
|
-
if
|
|
2584
|
-
|
|
2585
|
-
this.
|
|
2586
|
-
this.storyContainer().nativeElement.style.top = this.regularStyle.top;
|
|
2587
|
-
this.storyContainer().nativeElement.style.left = this.regularStyle.left;
|
|
2588
|
-
this.storyContainer().nativeElement.addEventListener('transitionend', () => {
|
|
2589
|
-
this.storyContainer().nativeElement.style = {};
|
|
2590
|
-
this.storyContainer().nativeElement.style.position = 'relative';
|
|
2591
|
-
}, { once: true });
|
|
2605
|
+
// Restore styles only if we had applied portal fullscreen
|
|
2606
|
+
if (this.usePortalFullscreen()) {
|
|
2607
|
+
this.restorePortalFullscreen();
|
|
2592
2608
|
}
|
|
2593
2609
|
this.close.emit();
|
|
2594
2610
|
}
|
|
2595
2611
|
setFullScreen() {
|
|
2596
|
-
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2601
|
-
|
|
2602
|
-
|
|
2603
|
-
|
|
2604
|
-
|
|
2605
|
-
left: this.storyContainer().nativeElement.style.left,
|
|
2606
|
-
width: this.storyContainer().nativeElement.style.width,
|
|
2607
|
-
height: this.storyContainer().nativeElement.style.height
|
|
2608
|
-
};
|
|
2609
|
-
this.storyContainer().nativeElement.style.position = 'fixed';
|
|
2612
|
+
// Layout-only fullscreen: do not touch body scroll or position fixed
|
|
2613
|
+
if (!this.usePortalFullscreen()) {
|
|
2614
|
+
this.fullScreen.set(true);
|
|
2615
|
+
return;
|
|
2616
|
+
}
|
|
2617
|
+
// Old behavior (portal fullscreen)
|
|
2618
|
+
document.getElementsByTagName('html')[0].style['overflow'] = 'hidden';
|
|
2619
|
+
document.getElementsByTagName('body')[0].style['overflow'] = 'hidden';
|
|
2620
|
+
this.applyPortalFullscreen();
|
|
2610
2621
|
this.fullScreen.set(true);
|
|
2611
|
-
|
|
2612
|
-
|
|
2613
|
-
this.storyContainer()
|
|
2614
|
-
|
|
2622
|
+
}
|
|
2623
|
+
applyPortalFullscreen() {
|
|
2624
|
+
const el = this.storyContainer()?.nativeElement;
|
|
2625
|
+
if (!el)
|
|
2626
|
+
return;
|
|
2627
|
+
// Save current inline styles so we can restore accurately
|
|
2628
|
+
this.savedStyle = {
|
|
2629
|
+
position: el.style.position,
|
|
2630
|
+
width: el.style.width,
|
|
2631
|
+
height: el.style.height,
|
|
2632
|
+
top: el.style.top,
|
|
2633
|
+
left: el.style.left,
|
|
2634
|
+
right: el.style.right,
|
|
2635
|
+
bottom: el.style.bottom,
|
|
2636
|
+
transition: el.style.transition,
|
|
2637
|
+
zIndex: el.style.zIndex
|
|
2638
|
+
};
|
|
2639
|
+
// Capture current box so the transition looks smooth
|
|
2640
|
+
el.style.width = el.offsetWidth + 'px';
|
|
2641
|
+
el.style.height = el.offsetHeight + 'px';
|
|
2642
|
+
el.style.top = el.getBoundingClientRect().top + 'px';
|
|
2643
|
+
el.style.left = el.getBoundingClientRect().left + 'px';
|
|
2644
|
+
el.style.transition = 'all .2s';
|
|
2645
|
+
// Portal fullscreen
|
|
2646
|
+
el.style.position = 'fixed';
|
|
2647
|
+
el.style.zIndex = '9999';
|
|
2648
|
+
el.style.width = '100%';
|
|
2649
|
+
el.style.height = '100%';
|
|
2650
|
+
el.style.top = '0';
|
|
2651
|
+
el.style.left = '0';
|
|
2652
|
+
el.style.right = '0';
|
|
2653
|
+
el.style.bottom = '0';
|
|
2654
|
+
}
|
|
2655
|
+
restorePortalFullscreen() {
|
|
2656
|
+
const el = this.storyContainer()?.nativeElement;
|
|
2657
|
+
if (!el || !this.savedStyle)
|
|
2658
|
+
return;
|
|
2659
|
+
// Restore the saved styles after the shrink animation ends
|
|
2660
|
+
const saved = this.savedStyle;
|
|
2661
|
+
el.style.transition = el.style.transition || 'all .2s';
|
|
2662
|
+
// restore to previous dimensions/position first
|
|
2663
|
+
if (saved.width != null)
|
|
2664
|
+
el.style.width = saved.width;
|
|
2665
|
+
if (saved.height != null)
|
|
2666
|
+
el.style.height = saved.height;
|
|
2667
|
+
if (saved.top != null)
|
|
2668
|
+
el.style.top = saved.top;
|
|
2669
|
+
if (saved.left != null)
|
|
2670
|
+
el.style.left = saved.left;
|
|
2671
|
+
if (saved.right != null)
|
|
2672
|
+
el.style.right = saved.right;
|
|
2673
|
+
if (saved.bottom != null)
|
|
2674
|
+
el.style.bottom = saved.bottom;
|
|
2675
|
+
el.addEventListener('transitionend', () => {
|
|
2676
|
+
el.style.position = saved.position ?? '';
|
|
2677
|
+
el.style.width = saved.width ?? '';
|
|
2678
|
+
el.style.height = saved.height ?? '';
|
|
2679
|
+
el.style.top = saved.top ?? '';
|
|
2680
|
+
el.style.left = saved.left ?? '';
|
|
2681
|
+
el.style.right = saved.right ?? '';
|
|
2682
|
+
el.style.bottom = saved.bottom ?? '';
|
|
2683
|
+
el.style.transition = saved.transition ?? '';
|
|
2684
|
+
el.style.zIndex = saved.zIndex ?? '';
|
|
2685
|
+
}, { once: true });
|
|
2686
|
+
this.savedStyle = null;
|
|
2687
|
+
}
|
|
2688
|
+
closeCallback(id) {
|
|
2689
|
+
// this.sidebarService.closeSidebar(id);
|
|
2615
2690
|
}
|
|
2616
2691
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: StoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2617
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: StoriesComponent, isStandalone: true, selector: "stories", inputs: { stories: { classPropertyName: "stories", publicName: "stories", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, subFooterTemplate: { classPropertyName: "subFooterTemplate", publicName: "subFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, sideTemplate: { classPropertyName: "sideTemplate", publicName: "sideTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSubFooter: { classPropertyName: "showSubFooter", publicName: "showSubFooter", isSignal: true, isRequired: false, transformFunction: null }, descriptionOpen: { classPropertyName: "descriptionOpen", publicName: "descriptionOpen", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, defaultDuration: { classPropertyName: "defaultDuration", publicName: "defaultDuration", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fullScreen: "fullScreenChange", storyChanged: "storyChanged", paused: "pausedChange", close: "close" }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true, isSignal: true }, { propertyName: "storyContainer", first: true, predicate: ["viewContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"w-full h-full story-container z-52\" #viewContainer>\r\n\r\n @if(stories().length > 1) {\r\n <div class=\"story-lines-container\">\r\n <div class=\"flex gap-1 story-lines p-3 justify-center\">\r\n @for (story of stories(); track story.id; let i = $index) {\r\n\r\n <div class=\"story-line transition-all\" [ngClass]=\"{ 'story-line-selected' : currentStoryIndex() == i }\">\r\n @if (currentStoryIndex() >= i) {\r\n <div class=\"story-line-inner bg-surface-100\"\r\n [style.width]=\"currentStoryIndex() > i ? '100%' : (currentStoryIndex() == i ? this.currentProgress() + '%' : '0')\">\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"story-backdrop z-1\" (click)=\"next()\">\r\n @if (currentStory()?.type=='image') {\r\n <img [src]=\"currentStory().src\" />\r\n } @else if (currentStory()?.type=='video') {\r\n <video class=\"w-full\">\r\n <source [src]=\"currentStory().src\" type=\"video/mp4\">\r\n </video>\r\n }\r\n </div>\r\n\r\n\r\n <div class=\"story-content sm:border-round\">\r\n\r\n\r\n @if (currentStory()?.type == 'image') {\r\n <img [src]=\"currentStory().src\" (click)=\"next()\" />\r\n }\r\n @if (currentStory()?.type=='video') {\r\n <video class=\"w-full h-full\" (canplay)=\"videoPlayer.play()\" (loadedmetadata)=\"videoPlayer.muted = mute()\"\r\n #videoPlayer autoplay [muted]=\"mute()\" [playsInline]=\"true\" loop (click)=\"next()\">\r\n <source [src]=\"currentStory().src\" type=\"video/mp4\">\r\n\r\n </video>\r\n }\r\n\r\n </div>\r\n <div class=\"top-7 right-5 z-3 absolute flex gap-2\">\r\n @if (currentStory()?.type=='video') {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"mute.set(!mute())\" style=\"color: inherit;\">\r\n @if(mute()) {\r\n <i class=\"fi text-2xl fi-rr-volume-mute\"></i>\r\n }\r\n @else {\r\n <i class=\"fi text-2xl fi-rr-volume\"></i>\r\n }\r\n </a>\r\n </div>\r\n }\r\n\r\n @if(stories().length > 1) {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"paused.set(!paused())\" style=\"color:inherit\">\r\n @if (paused()) {\r\n <i class=\"fi fi-rr-play text-2xl\"></i>\r\n }\r\n @else {\r\n <i class=\"fi fi-rr-pause text-2xl\"></i>\r\n }\r\n\r\n </a>\r\n </div>\r\n @if(fullScreen()) {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"emitClose()\" style=\"color: inherit;\">\r\n <i class=\"fi text-2xl fi-rr-compress\"></i>\r\n </a>\r\n </div>\r\n }\r\n @if(!fullScreen()) {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"setFullScreen()\" style=\"color: inherit;\">\r\n <i class=\"fi text-2xl fi-rr-expand\"></i>\r\n </a>\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n <div [class]=\"'story-overlay absolute bottom-0 p-2 left-0 z-2 gap-2 ' + (descriptionOpen() ? 'scrollable' : '')\">\r\n @if(footerTemplate()){\r\n <div class=\"story-footer\">\r\n <ng-container [ngTemplateOutlet]=\"footerTemplate()\"\r\n [ngTemplateOutletContext]=\"{ $implicit: currentStory() }\"></ng-container>\r\n </div>\r\n }\r\n\r\n\r\n\r\n </div>\r\n\r\n\r\n\r\n</div>", styles: [".story-content{z-index:1;background-repeat:no-repeat;position:absolute;overflow:hidden;object-fit:contain;text-align:center;align-content:center;width:100%;height:100%}.story-container{min-height:300px;overflow:hidden}.story-backdrop{background-color:#000;position:absolute;left:0;top:0;width:100%;height:100%;filter:blur(20px) brightness(60%);text-align:center;align-content:center;overflow:hidden}.story-backdrop video,.story-backdrop img{object-fit:cover;display:inline-block;width:100%;height:100%}.story-content video,.story-content img{object-fit:contain;display:inline-block;width:100%;height:100%}.story-content img{width:100%}.story-lines-container{position:absolute;top:0;z-index:10;width:100%;margin-inline:auto;text-align:center}.story-line{background:#fff6;border-radius:6px;height:8px;width:8px}.story-line-selected{width:50px}.story-footer{color:#fff;flex:1;min-width:0}p-skeleton .p-skeleton{background-color:#373737cc}.story-overlay{color:#fff;text-shadow:0 0px 3px rgba(0,0,0)}.story-side{text-align:center}.story-side .side-icon{font-size:24px}.story-line-inner{background:#fff;border-radius:6px;height:8px;min-width:8px;transition:width .1s}.story-container{background-color:#000}.story-overlay.scrollable{height:90%;padding-top:0}.story-overlay.scrollable .story-footer{height:100%;overflow-y:auto}.story-overlay.scrollable .story-description{height:initial}.story-footer::-webkit-scrollbar{display:none}@media (max-width: 567px){.story-content{width:100%;height:100%;border-radius:0;background-color:transparent;margin:0}}.story-controls{top:10px;right:10px;position:absolute;z-index:3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
2692
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: StoriesComponent, isStandalone: true, selector: "stories", inputs: { stories: { classPropertyName: "stories", publicName: "stories", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, subFooterTemplate: { classPropertyName: "subFooterTemplate", publicName: "subFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, sideTemplate: { classPropertyName: "sideTemplate", publicName: "sideTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSubFooter: { classPropertyName: "showSubFooter", publicName: "showSubFooter", isSignal: true, isRequired: false, transformFunction: null }, descriptionOpen: { classPropertyName: "descriptionOpen", publicName: "descriptionOpen", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null }, eventName: { classPropertyName: "eventName", publicName: "eventName", isSignal: true, isRequired: false, transformFunction: null }, usePortalFullscreen: { classPropertyName: "usePortalFullscreen", publicName: "usePortalFullscreen", isSignal: true, isRequired: false, transformFunction: null }, defaultDuration: { classPropertyName: "defaultDuration", publicName: "defaultDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fullScreen: "fullScreenChange", paused: "pausedChange", storyChanged: "storyChanged", close: "close" }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true, isSignal: true }, { propertyName: "storyContainer", first: true, predicate: ["viewContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"w-full h-full story-container relative overflow-hidden\" #viewContainer>\r\n <!-- BACKDROP -->\r\n <div class=\"story-backdrop absolute inset-0 z-[1]\">\r\n @if (currentStory()?.type=='image') {\r\n <img [src]=\"currentStory().src\" class=\"w-full h-full object-cover scale-110 blur-2xl\" alt=\"\" />\r\n } @else if (currentStory()?.type=='video') {\r\n <video class=\"w-full h-full object-cover scale-110 blur-2xl\" autoplay muted playsinline loop>\r\n <source [src]=\"currentStory().src\" type=\"video/mp4\" />\r\n </video>\r\n }\r\n <div class=\"absolute inset-0 bg-black/20\"></div>\r\n </div>\r\n \r\n <!-- CENTER CONTENT (square + passer under it) -->\r\n <div class=\"absolute inset-0 z-[2] flex flex-col items-center justify-start pointer-events-none h-[92vh] pt-[5vh]\">\r\n <!-- MEDIA BOX -->\r\n @if(!fullScreen()){\r\n <div class=\"w-full flex justify-start items-center pb-4 pl-5\">\r\n <i class=\"fi fi-rr-angle-left text-[24px] text-[#FFFFFF]\"></i>\r\n <p class=\"text-[#FFFFFF] font-bold text-[16px] pl-5\">{{eventName()}}</p>\r\n </div>\r\n }\r\n <div\r\n class=\"pointer-events-none overflow-hidden shadow-lg\"\r\n [ngClass]=\"{\r\n 'w-full h-full rounded-none flex items-center justify-center': fullScreen(),\r\n 'w-[85%] aspect-[1] rounded-[24px] ': !fullScreen()\r\n }\"\r\n >\r\n \r\n @if(fullScreen() && currentStory()?.type == 'image') {\r\n <img\r\n [src]=\"currentStory().src\"\r\n class=\"absolute inset-0 w-full h-full object-cover blur-2xl scale-110 \"\r\n alt=\"\"\r\n />\r\n <div class=\"absolute inset-0 bg-black/20\"></div>\r\n }\r\n\r\n @if(fullScreen() && currentStory()?.type == 'video') {\r\n <video class=\"absolute inset-0 w-full h-full object-cover blur-2xl scale-110\" autoplay muted playsinline loop>\r\n <source [src]=\"currentStory().src\" type=\"video/mp4\" />\r\n </video>\r\n <div class=\"absolute inset-0 bg-black/20\"></div>\r\n }\r\n\r\n @if (currentStory()?.type == 'image') {\r\n <img\r\n [src]=\"currentStory().src\"\r\n class=\"relative z-[1] w-full h-full\"\r\n [ngClass]=\"{ 'object-contain': fullScreen(), 'object-cover': !fullScreen() }\"\r\n alt=\"\"\r\n />\r\n }\r\n\r\n @if (currentStory()?.type=='video') {\r\n <video\r\n class=\"relative z-[1] w-full h-full\"\r\n [ngClass]=\"{ 'object-contain': fullScreen(), 'object-cover': !fullScreen() }\"\r\n (canplay)=\"videoPlayer.play()\"\r\n (loadedmetadata)=\"videoPlayer.muted = mute()\"\r\n #videoPlayer\r\n autoplay\r\n [muted]=\"mute()\"\r\n [playsInline]=\"true\"\r\n loop\r\n >\r\n <source [src]=\"currentStory().src\" type=\"video/mp4\" />\r\n </video>\r\n }\r\n </div>\r\n\r\n @if(stories().length > 1 && !fullScreen()) {\r\n <div class=\"story-lines-container mt-3 w-[320px] pointer-events-none z-[2]\">\r\n <div class=\"flex gap-1 px-3 justify-center\">\r\n @for (story of stories(); track story.id; let i = $index) {\r\n <div class=\"story-line transition-all h-[4px]\" [ngClass]=\"{ 'story-line-selected' : currentStoryIndex() == i }\">\r\n @if (currentStoryIndex() >= i) {\r\n <div\r\n class=\"story-line-inner bg-surface-100\"\r\n [style.width]=\"currentStoryIndex() > i ? '100%' : (currentStoryIndex() == i ? this.currentProgress() + '%' : '0')\"\r\n ></div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <div>\r\n \r\n </div>\r\n </div>\r\n \r\n\r\n <!-- CLICK AREAS -->\r\n <div class=\"absolute inset-0 z-[4] flex select-none\">\r\n <button\r\n type=\"button\"\r\n class=\"h-full w-1/3 bg-transparent outline-none focus:outline-none\"\r\n (click)=\"$event.stopPropagation(); prev()\"\r\n aria-label=\"Previous story\"\r\n ></button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"h-full w-1/3 bg-transparent outline-none focus:outline-none\"\r\n (click)=\"$event.stopPropagation(); toggleFullScreen()\"\r\n aria-label=\"Toggle fullscreen\"\r\n ></button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"h-full w-1/3 bg-transparent outline-none focus:outline-none\"\r\n (click)=\"$event.stopPropagation(); next()\"\r\n aria-label=\"Next story\"\r\n ></button>\r\n </div>\r\n\r\n <!-- TOP RIGHT CONTROLS (FULLSCREEN) -->\r\n @if(fullScreen()) {\r\n <div class=\"top-7 right-5 z-[6] absolute flex gap-2\">\r\n <!-- @if (currentStory()?.type=='video') {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"mute.set(!mute()); $event.stopPropagation()\" style=\"color: inherit;\">\r\n @if(mute()) {\r\n <i class=\"fi text-2xl fi-rr-volume-mute\"></i>\r\n } @else {\r\n <i class=\"fi text-2xl fi-rr-volume\"></i>\r\n }\r\n </a>\r\n </div>\r\n } -->\r\n\r\n @if(stories().length > 1) {\r\n <!-- <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"paused.set(!paused()); $event.stopPropagation()\" style=\"color:inherit\">\r\n @if (paused()) {\r\n <i class=\"fi fi-rr-play text-2xl\"></i>\r\n } @else {\r\n <i class=\"fi fi-rr-pause text-2xl\"></i>\r\n }\r\n </a>\r\n </div> -->\r\n\r\n <div class=\"w-12 h-12 rounded-full text-center content-center text-white\">\r\n <a (click)=\"emitClose(); $event.stopPropagation()\" style=\"color: inherit;\">\r\n <i class=\"fi text-2xl fi-rr-cross\"></i>\r\n </a>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- FOOTER OVERLAY -->\r\n <div [class]=\"'story-overlay absolute bottom-0 p-2 left-0 z-[5] gap-2 ' + (descriptionOpen() ? 'scrollable' : '')\">\r\n @if(footerTemplate()){\r\n <div class=\"story-footer\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"footerTemplate()\"\r\n [ngTemplateOutletContext]=\"{ $implicit: currentStory() }\"\r\n ></ng-container>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".story-content{z-index:1;background-repeat:no-repeat;position:absolute;overflow:hidden;object-fit:contain;text-align:center;align-content:center;width:100%;height:100%}.story-container{min-height:300px;overflow:hidden;background-color:#000}.story-backdrop{background-color:#000;position:absolute;left:0;top:0;width:100%;height:100%;filter:blur(20px) brightness(60%);text-align:center;align-content:center;overflow:hidden}.story-backdrop video,.story-backdrop img{object-fit:cover;display:inline-block;width:100%;height:100%}.story-content video,.story-content img{object-fit:contain;display:inline-block;width:100%;height:100%}.story-content img{width:100%}.story-lines-container{position:relative;top:auto;width:100%;margin-inline:auto;text-align:center}.story-line{background:#fff6;border-radius:4px;height:4px;width:4px}.story-line-selected{width:50px;height:4px}.story-footer{color:#fff;flex:1;min-width:0}p-skeleton .p-skeleton{background-color:#373737cc}.story-overlay{color:#fff;text-shadow:0 0px 3px rgba(0,0,0)}.story-overlay.scrollable{height:90%;padding-top:0}.story-overlay.scrollable .story-footer{height:100%;overflow-y:auto}.story-overlay.scrollable .story-description{height:initial}.story-footer::-webkit-scrollbar{display:none}.story-side{text-align:center}.story-side .side-icon{font-size:24px}.story-line-inner{background:#fff;border-radius:6px;height:4px;min-width:4px;transition:width .1s}@media (max-width: 567px){.story-content{width:100%;height:100%;border-radius:0;background-color:transparent;margin:0}}.story-controls{top:10px;right:10px;position:absolute;z-index:3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
2618
2693
|
}
|
|
2619
2694
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: StoriesComponent, decorators: [{
|
|
2620
2695
|
type: Component,
|
|
2621
|
-
args: [{ selector: 'stories', standalone: true, imports: [CommonModule, NgTemplateOutlet, ButtonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"w-full h-full story-container
|
|
2696
|
+
args: [{ selector: 'stories', standalone: true, imports: [CommonModule, NgTemplateOutlet, ButtonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"w-full h-full story-container relative overflow-hidden\" #viewContainer>\r\n <!-- BACKDROP -->\r\n <div class=\"story-backdrop absolute inset-0 z-[1]\">\r\n @if (currentStory()?.type=='image') {\r\n <img [src]=\"currentStory().src\" class=\"w-full h-full object-cover scale-110 blur-2xl\" alt=\"\" />\r\n } @else if (currentStory()?.type=='video') {\r\n <video class=\"w-full h-full object-cover scale-110 blur-2xl\" autoplay muted playsinline loop>\r\n <source [src]=\"currentStory().src\" type=\"video/mp4\" />\r\n </video>\r\n }\r\n <div class=\"absolute inset-0 bg-black/20\"></div>\r\n </div>\r\n \r\n <!-- CENTER CONTENT (square + passer under it) -->\r\n <div class=\"absolute inset-0 z-[2] flex flex-col items-center justify-start pointer-events-none h-[92vh] pt-[5vh]\">\r\n <!-- MEDIA BOX -->\r\n @if(!fullScreen()){\r\n <div class=\"w-full flex justify-start items-center pb-4 pl-5\">\r\n <i class=\"fi fi-rr-angle-left text-[24px] text-[#FFFFFF]\"></i>\r\n <p class=\"text-[#FFFFFF] font-bold text-[16px] pl-5\">{{eventName()}}</p>\r\n </div>\r\n }\r\n <div\r\n class=\"pointer-events-none overflow-hidden shadow-lg\"\r\n [ngClass]=\"{\r\n 'w-full h-full rounded-none flex items-center justify-center': fullScreen(),\r\n 'w-[85%] aspect-[1] rounded-[24px] ': !fullScreen()\r\n }\"\r\n >\r\n \r\n @if(fullScreen() && currentStory()?.type == 'image') {\r\n <img\r\n [src]=\"currentStory().src\"\r\n class=\"absolute inset-0 w-full h-full object-cover blur-2xl scale-110 \"\r\n alt=\"\"\r\n />\r\n <div class=\"absolute inset-0 bg-black/20\"></div>\r\n }\r\n\r\n @if(fullScreen() && currentStory()?.type == 'video') {\r\n <video class=\"absolute inset-0 w-full h-full object-cover blur-2xl scale-110\" autoplay muted playsinline loop>\r\n <source [src]=\"currentStory().src\" type=\"video/mp4\" />\r\n </video>\r\n <div class=\"absolute inset-0 bg-black/20\"></div>\r\n }\r\n\r\n @if (currentStory()?.type == 'image') {\r\n <img\r\n [src]=\"currentStory().src\"\r\n class=\"relative z-[1] w-full h-full\"\r\n [ngClass]=\"{ 'object-contain': fullScreen(), 'object-cover': !fullScreen() }\"\r\n alt=\"\"\r\n />\r\n }\r\n\r\n @if (currentStory()?.type=='video') {\r\n <video\r\n class=\"relative z-[1] w-full h-full\"\r\n [ngClass]=\"{ 'object-contain': fullScreen(), 'object-cover': !fullScreen() }\"\r\n (canplay)=\"videoPlayer.play()\"\r\n (loadedmetadata)=\"videoPlayer.muted = mute()\"\r\n #videoPlayer\r\n autoplay\r\n [muted]=\"mute()\"\r\n [playsInline]=\"true\"\r\n loop\r\n >\r\n <source [src]=\"currentStory().src\" type=\"video/mp4\" />\r\n </video>\r\n }\r\n </div>\r\n\r\n @if(stories().length > 1 && !fullScreen()) {\r\n <div class=\"story-lines-container mt-3 w-[320px] pointer-events-none z-[2]\">\r\n <div class=\"flex gap-1 px-3 justify-center\">\r\n @for (story of stories(); track story.id; let i = $index) {\r\n <div class=\"story-line transition-all h-[4px]\" [ngClass]=\"{ 'story-line-selected' : currentStoryIndex() == i }\">\r\n @if (currentStoryIndex() >= i) {\r\n <div\r\n class=\"story-line-inner bg-surface-100\"\r\n [style.width]=\"currentStoryIndex() > i ? '100%' : (currentStoryIndex() == i ? this.currentProgress() + '%' : '0')\"\r\n ></div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <div>\r\n \r\n </div>\r\n </div>\r\n \r\n\r\n <!-- CLICK AREAS -->\r\n <div class=\"absolute inset-0 z-[4] flex select-none\">\r\n <button\r\n type=\"button\"\r\n class=\"h-full w-1/3 bg-transparent outline-none focus:outline-none\"\r\n (click)=\"$event.stopPropagation(); prev()\"\r\n aria-label=\"Previous story\"\r\n ></button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"h-full w-1/3 bg-transparent outline-none focus:outline-none\"\r\n (click)=\"$event.stopPropagation(); toggleFullScreen()\"\r\n aria-label=\"Toggle fullscreen\"\r\n ></button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"h-full w-1/3 bg-transparent outline-none focus:outline-none\"\r\n (click)=\"$event.stopPropagation(); next()\"\r\n aria-label=\"Next story\"\r\n ></button>\r\n </div>\r\n\r\n <!-- TOP RIGHT CONTROLS (FULLSCREEN) -->\r\n @if(fullScreen()) {\r\n <div class=\"top-7 right-5 z-[6] absolute flex gap-2\">\r\n <!-- @if (currentStory()?.type=='video') {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"mute.set(!mute()); $event.stopPropagation()\" style=\"color: inherit;\">\r\n @if(mute()) {\r\n <i class=\"fi text-2xl fi-rr-volume-mute\"></i>\r\n } @else {\r\n <i class=\"fi text-2xl fi-rr-volume\"></i>\r\n }\r\n </a>\r\n </div>\r\n } -->\r\n\r\n @if(stories().length > 1) {\r\n <!-- <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"paused.set(!paused()); $event.stopPropagation()\" style=\"color:inherit\">\r\n @if (paused()) {\r\n <i class=\"fi fi-rr-play text-2xl\"></i>\r\n } @else {\r\n <i class=\"fi fi-rr-pause text-2xl\"></i>\r\n }\r\n </a>\r\n </div> -->\r\n\r\n <div class=\"w-12 h-12 rounded-full text-center content-center text-white\">\r\n <a (click)=\"emitClose(); $event.stopPropagation()\" style=\"color: inherit;\">\r\n <i class=\"fi text-2xl fi-rr-cross\"></i>\r\n </a>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- FOOTER OVERLAY -->\r\n <div [class]=\"'story-overlay absolute bottom-0 p-2 left-0 z-[5] gap-2 ' + (descriptionOpen() ? 'scrollable' : '')\">\r\n @if(footerTemplate()){\r\n <div class=\"story-footer\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"footerTemplate()\"\r\n [ngTemplateOutletContext]=\"{ $implicit: currentStory() }\"\r\n ></ng-container>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".story-content{z-index:1;background-repeat:no-repeat;position:absolute;overflow:hidden;object-fit:contain;text-align:center;align-content:center;width:100%;height:100%}.story-container{min-height:300px;overflow:hidden;background-color:#000}.story-backdrop{background-color:#000;position:absolute;left:0;top:0;width:100%;height:100%;filter:blur(20px) brightness(60%);text-align:center;align-content:center;overflow:hidden}.story-backdrop video,.story-backdrop img{object-fit:cover;display:inline-block;width:100%;height:100%}.story-content video,.story-content img{object-fit:contain;display:inline-block;width:100%;height:100%}.story-content img{width:100%}.story-lines-container{position:relative;top:auto;width:100%;margin-inline:auto;text-align:center}.story-line{background:#fff6;border-radius:4px;height:4px;width:4px}.story-line-selected{width:50px;height:4px}.story-footer{color:#fff;flex:1;min-width:0}p-skeleton .p-skeleton{background-color:#373737cc}.story-overlay{color:#fff;text-shadow:0 0px 3px rgba(0,0,0)}.story-overlay.scrollable{height:90%;padding-top:0}.story-overlay.scrollable .story-footer{height:100%;overflow-y:auto}.story-overlay.scrollable .story-description{height:initial}.story-footer::-webkit-scrollbar{display:none}.story-side{text-align:center}.story-side .side-icon{font-size:24px}.story-line-inner{background:#fff;border-radius:6px;height:4px;min-width:4px;transition:width .1s}@media (max-width: 567px){.story-content{width:100%;height:100%;border-radius:0;background-color:transparent;margin:0}}.story-controls{top:10px;right:10px;position:absolute;z-index:3}\n"] }]
|
|
2622
2697
|
}], ctorParameters: () => [] });
|
|
2623
2698
|
|
|
2624
2699
|
// import { UUID } from 'angular2-uuid';
|