ngx-payvent-shared 0.0.6 → 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 +150 -57
- package/fesm2022/ngx-payvent-shared.mjs.map +1 -1
- package/index.d.ts +12 -6
- package/package.json +1 -1
|
@@ -2411,10 +2411,16 @@ class SidebarComponent {
|
|
|
2411
2411
|
this.sidebarService.closeSidebar(id);
|
|
2412
2412
|
}
|
|
2413
2413
|
onPan(evt, id) {
|
|
2414
|
-
console.log(evt);
|
|
2415
2414
|
switch (evt.type) {
|
|
2416
2415
|
case 'touchstart':
|
|
2417
|
-
let
|
|
2416
|
+
let target = evt.target;
|
|
2417
|
+
// while(target){
|
|
2418
|
+
// if(target.scrollTop>0 && this.#deltaScroll < 0)
|
|
2419
|
+
// return;
|
|
2420
|
+
// if(target.scrollTop + target.clientHeight > target.scrollHeight && this.#deltaScroll > 0)
|
|
2421
|
+
// return;
|
|
2422
|
+
// target = target.parentElement;
|
|
2423
|
+
// }
|
|
2418
2424
|
this.panElement = document.querySelector(`#sidebar-${id}`);
|
|
2419
2425
|
this.panElement.style.transition = 'none';
|
|
2420
2426
|
this.initialHeight = this.panElement.offsetHeight;
|
|
@@ -2425,6 +2431,18 @@ class SidebarComponent {
|
|
|
2425
2431
|
if (!this.panElement)
|
|
2426
2432
|
return;
|
|
2427
2433
|
this.#deltaScroll = this.#initialY - evt.touches[0].clientY;
|
|
2434
|
+
let target2 = evt.target;
|
|
2435
|
+
while (target2) {
|
|
2436
|
+
if (target2.scrollTop > 0 && this.#deltaScroll < 0) {
|
|
2437
|
+
this.#initialY = evt.touches[0].clientY;
|
|
2438
|
+
return;
|
|
2439
|
+
}
|
|
2440
|
+
if (target2.scrollTop > 0 && target2.scrollTop + target2.clientHeight < target2.scrollHeight && this.#deltaScroll > 0) {
|
|
2441
|
+
this.#initialY = evt.touches[0].clientY;
|
|
2442
|
+
return;
|
|
2443
|
+
}
|
|
2444
|
+
target2 = target2.parentElement;
|
|
2445
|
+
}
|
|
2428
2446
|
if (this.#deltaScroll < 0 && this.contentComponent.nativeElement.scrollTop > 0) {
|
|
2429
2447
|
this.panElement = null;
|
|
2430
2448
|
return;
|
|
@@ -2456,11 +2474,11 @@ class SidebarComponent {
|
|
|
2456
2474
|
}
|
|
2457
2475
|
}
|
|
2458
2476
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2459
|
-
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"] }] });
|
|
2460
2478
|
}
|
|
2461
2479
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
2462
2480
|
type: Component,
|
|
2463
|
-
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"] }]
|
|
2464
2482
|
}], propDecorators: { contentComponent: [{
|
|
2465
2483
|
type: ViewChild,
|
|
2466
2484
|
args: ['content', { read: ElementRef }]
|
|
@@ -2473,27 +2491,30 @@ class StoriesComponent {
|
|
|
2473
2491
|
subFooterTemplate = input(...(ngDevMode ? [undefined, { debugName: "subFooterTemplate" }] : []));
|
|
2474
2492
|
sideTemplate = input(...(ngDevMode ? [undefined, { debugName: "sideTemplate" }] : []));
|
|
2475
2493
|
showSubFooter = input(true, ...(ngDevMode ? [{ debugName: "showSubFooter" }] : []));
|
|
2476
|
-
mute = signal(true, ...(ngDevMode ? [{ debugName: "mute" }] : []));
|
|
2477
2494
|
descriptionOpen = input(...(ngDevMode ? [undefined, { debugName: "descriptionOpen" }] : []));
|
|
2495
|
+
mute = signal(true, ...(ngDevMode ? [{ debugName: "mute" }] : []));
|
|
2478
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" }] : []));
|
|
2479
2500
|
storyChanged = output();
|
|
2501
|
+
close = output();
|
|
2480
2502
|
currentStory = computed(() => this.stories()[this.currentStoryIndex()], ...(ngDevMode ? [{ debugName: "currentStory" }] : []));
|
|
2481
|
-
defaultDuration = input(
|
|
2503
|
+
defaultDuration = input(5, ...(ngDevMode ? [{ debugName: "defaultDuration" }] : []));
|
|
2482
2504
|
currentProgress = signal(0, ...(ngDevMode ? [{ debugName: "currentProgress" }] : []));
|
|
2483
2505
|
currentDuration = signal(0, ...(ngDevMode ? [{ debugName: "currentDuration" }] : []));
|
|
2484
2506
|
currentTime = 0;
|
|
2485
2507
|
timerInterval = 100;
|
|
2486
2508
|
timerSubscription;
|
|
2487
|
-
paused = model(false, ...(ngDevMode ? [{ debugName: "paused" }] : []));
|
|
2488
|
-
close = output();
|
|
2489
2509
|
sidebarService = inject(SidebarService);
|
|
2490
2510
|
videoPlayer = viewChild('videoPlayer', ...(ngDevMode ? [{ debugName: "videoPlayer" }] : []));
|
|
2491
2511
|
storyContainer = viewChild('viewContainer', ...(ngDevMode ? [{ debugName: "storyContainer" }] : []));
|
|
2492
|
-
|
|
2512
|
+
savedStyle = null;
|
|
2493
2513
|
constructor() {
|
|
2494
2514
|
effect(() => {
|
|
2495
|
-
if (this.currentStoryIndex()
|
|
2515
|
+
if (this.currentStoryIndex() === -1 && this.stories().length > 0) {
|
|
2496
2516
|
untracked(() => this.next());
|
|
2517
|
+
}
|
|
2497
2518
|
});
|
|
2498
2519
|
effect(() => {
|
|
2499
2520
|
if (!this.videoPlayer())
|
|
@@ -2515,39 +2536,58 @@ class StoriesComponent {
|
|
|
2515
2536
|
}
|
|
2516
2537
|
});
|
|
2517
2538
|
effect(() => {
|
|
2518
|
-
if (this.fullScreen())
|
|
2519
|
-
|
|
2520
|
-
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
this.storyContainer().nativeElement.style.left = '0';
|
|
2524
|
-
}
|
|
2539
|
+
if (!this.fullScreen())
|
|
2540
|
+
return;
|
|
2541
|
+
if (!this.usePortalFullscreen())
|
|
2542
|
+
return;
|
|
2543
|
+
this.applyPortalFullscreen();
|
|
2525
2544
|
});
|
|
2526
2545
|
}
|
|
2527
|
-
ngOnInit() {
|
|
2528
|
-
}
|
|
2546
|
+
ngOnInit() { }
|
|
2529
2547
|
next() {
|
|
2530
|
-
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));
|
|
2531
2564
|
this.currentStory().completion = signal(0, ...(ngDevMode ? [{ debugName: "completion" }] : []));
|
|
2532
2565
|
this.storyChanged.emit(this.currentStory());
|
|
2533
2566
|
this.paused.set(false);
|
|
2534
2567
|
this.currentProgress.set(0);
|
|
2535
2568
|
this.currentTime = 0;
|
|
2536
|
-
if (this.currentStory().type
|
|
2569
|
+
if (this.currentStory().type === 'video') {
|
|
2570
|
+
// duration will be set on loadeddata
|
|
2537
2571
|
}
|
|
2538
2572
|
else {
|
|
2539
2573
|
this.currentDuration.set(15);
|
|
2540
2574
|
this.runTimer();
|
|
2541
2575
|
}
|
|
2542
2576
|
}
|
|
2577
|
+
toggleFullScreen() {
|
|
2578
|
+
if (this.fullScreen())
|
|
2579
|
+
this.emitClose();
|
|
2580
|
+
else
|
|
2581
|
+
this.setFullScreen();
|
|
2582
|
+
}
|
|
2543
2583
|
runTimer() {
|
|
2544
2584
|
if (this.timerSubscription)
|
|
2545
2585
|
this.timerSubscription.unsubscribe();
|
|
2546
|
-
if (this.paused() || this.stories().length
|
|
2586
|
+
if (this.paused() || this.stories().length === 1)
|
|
2547
2587
|
return;
|
|
2548
2588
|
this.timerSubscription = timer(this.timerInterval).subscribe(() => {
|
|
2549
2589
|
this.currentTime += this.timerInterval;
|
|
2550
|
-
|
|
2590
|
+
const duration = this.currentDuration() ?? this.defaultDuration();
|
|
2551
2591
|
this.currentProgress.set(this.currentTime / (duration * 10));
|
|
2552
2592
|
if (this.currentTime >= duration * 1000)
|
|
2553
2593
|
this.next();
|
|
@@ -2555,52 +2595,105 @@ class StoriesComponent {
|
|
|
2555
2595
|
this.runTimer();
|
|
2556
2596
|
});
|
|
2557
2597
|
}
|
|
2558
|
-
closeCallback(id) {
|
|
2559
|
-
//this.sidebarService.closeSidebar(id);
|
|
2560
|
-
}
|
|
2561
2598
|
emitClose() {
|
|
2562
|
-
|
|
2563
|
-
|
|
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
|
+
}
|
|
2564
2604
|
this.fullScreen.set(false);
|
|
2565
|
-
if
|
|
2566
|
-
|
|
2567
|
-
this.
|
|
2568
|
-
this.storyContainer().nativeElement.style.top = this.regularStyle.top;
|
|
2569
|
-
this.storyContainer().nativeElement.style.left = this.regularStyle.left;
|
|
2570
|
-
this.storyContainer().nativeElement.addEventListener('transitionend', () => {
|
|
2571
|
-
this.storyContainer().nativeElement.style = {};
|
|
2572
|
-
this.storyContainer().nativeElement.style.position = 'relative';
|
|
2573
|
-
}, { once: true });
|
|
2605
|
+
// Restore styles only if we had applied portal fullscreen
|
|
2606
|
+
if (this.usePortalFullscreen()) {
|
|
2607
|
+
this.restorePortalFullscreen();
|
|
2574
2608
|
}
|
|
2575
2609
|
this.close.emit();
|
|
2576
2610
|
}
|
|
2577
2611
|
setFullScreen() {
|
|
2578
|
-
|
|
2579
|
-
|
|
2580
|
-
|
|
2581
|
-
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
left: this.storyContainer().nativeElement.style.left,
|
|
2588
|
-
width: this.storyContainer().nativeElement.style.width,
|
|
2589
|
-
height: this.storyContainer().nativeElement.style.height
|
|
2590
|
-
};
|
|
2591
|
-
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();
|
|
2592
2621
|
this.fullScreen.set(true);
|
|
2593
|
-
|
|
2594
|
-
|
|
2595
|
-
this.storyContainer()
|
|
2596
|
-
|
|
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);
|
|
2597
2690
|
}
|
|
2598
2691
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: StoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2599
|
-
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 });
|
|
2600
2693
|
}
|
|
2601
2694
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: StoriesComponent, decorators: [{
|
|
2602
2695
|
type: Component,
|
|
2603
|
-
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"] }]
|
|
2604
2697
|
}], ctorParameters: () => [] });
|
|
2605
2698
|
|
|
2606
2699
|
// import { UUID } from 'angular2-uuid';
|