ngx-payvent-shared 0.0.2 → 0.0.3
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, Input, Component, Injectable, EventEmitter, inject, DOCUMENT, computed, effect, Pipe, HostListener, input, model, output, ViewChild, ViewEncapsulation, ElementRef, HostBinding, Renderer2, Output, untracked, afterEveryRender, afterNextRender, Directive } from '@angular/core';
|
|
2
|
+
import { signal, Input, Component, Injectable, EventEmitter, inject, DOCUMENT, computed, effect, Pipe, HostListener, input, model, output, ViewChild, ViewEncapsulation, ElementRef, HostBinding, Renderer2, Output, viewChild, untracked, afterEveryRender, afterNextRender, Directive } from '@angular/core';
|
|
3
3
|
import { EdgeToEdge } from '@capawesome/capacitor-android-edge-to-edge-support';
|
|
4
4
|
import { Capacitor } from '@capacitor/core';
|
|
5
5
|
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
|
|
@@ -708,9 +708,9 @@ class SidebarService {
|
|
|
708
708
|
if (options.position == 'top' || options.position == 'bottom') {
|
|
709
709
|
options.ngStyle.width = null;
|
|
710
710
|
options.ngStyle.height = options.ngStyle.height || '30%';
|
|
711
|
-
options.ngStyle['max-height'] = '95%';
|
|
711
|
+
options.ngStyle['max-height'] = options.ngStyle.height == '100%' ? '100%' : '95%';
|
|
712
712
|
options.contentScrollable = signal(false, ...(ngDevMode ? [{ debugName: "contentScrollable" }] : []));
|
|
713
|
-
if (options.ngStyle.height == '95%')
|
|
713
|
+
if (options.ngStyle.height == '95%' || options.ngStyle.height == '100%')
|
|
714
714
|
options.contentScrollable.set(true);
|
|
715
715
|
if (options.position == 'bottom') {
|
|
716
716
|
options.ngStyle['border-top-left-radius'] = 'var(--p-border-radius)';
|
|
@@ -754,7 +754,7 @@ class SidebarService {
|
|
|
754
754
|
if (options.position == 'bottom' && size.height) {
|
|
755
755
|
options.ngStyle.transition = 'height .2s';
|
|
756
756
|
options.ngStyle.height = size.height;
|
|
757
|
-
if (size.height == '95%')
|
|
757
|
+
if (size.height == '95%' || size.height == '100%')
|
|
758
758
|
options.contentScrollable.set(true);
|
|
759
759
|
else
|
|
760
760
|
options.contentScrollable.set(false);
|
|
@@ -2486,27 +2486,47 @@ class StoriesComponent {
|
|
|
2486
2486
|
currentStory = computed(() => this.stories()[this.currentStoryIndex()], ...(ngDevMode ? [{ debugName: "currentStory" }] : []));
|
|
2487
2487
|
defaultDuration = input(7, ...(ngDevMode ? [{ debugName: "defaultDuration" }] : []));
|
|
2488
2488
|
currentProgress = signal(0, ...(ngDevMode ? [{ debugName: "currentProgress" }] : []));
|
|
2489
|
+
currentDuration = signal(0, ...(ngDevMode ? [{ debugName: "currentDuration" }] : []));
|
|
2489
2490
|
currentTime = 0;
|
|
2490
2491
|
timerInterval = 100;
|
|
2491
2492
|
timerSubscription;
|
|
2492
2493
|
paused = model(false, ...(ngDevMode ? [{ debugName: "paused" }] : []));
|
|
2493
2494
|
close = output();
|
|
2494
2495
|
sidebarService = inject(SidebarService);
|
|
2495
|
-
videoPlayer;
|
|
2496
|
+
videoPlayer = viewChild('videoPlayer', ...(ngDevMode ? [{ debugName: "videoPlayer" }] : []));
|
|
2497
|
+
storyContainer = viewChild('viewContainer', ...(ngDevMode ? [{ debugName: "storyContainer" }] : []));
|
|
2498
|
+
regularStyle;
|
|
2496
2499
|
constructor() {
|
|
2497
2500
|
effect(() => {
|
|
2498
2501
|
if (this.currentStoryIndex() == -1 && this.stories().length > 0)
|
|
2499
2502
|
untracked(() => this.next());
|
|
2500
2503
|
});
|
|
2504
|
+
effect(() => {
|
|
2505
|
+
if (!this.videoPlayer())
|
|
2506
|
+
return;
|
|
2507
|
+
this.videoPlayer().nativeElement.addEventListener('loadeddata', () => {
|
|
2508
|
+
this.currentDuration.set(this.videoPlayer().nativeElement.duration);
|
|
2509
|
+
this.runTimer();
|
|
2510
|
+
}, { once: true });
|
|
2511
|
+
});
|
|
2501
2512
|
effect(() => {
|
|
2502
2513
|
if (!this.paused()) {
|
|
2503
2514
|
untracked(() => this.runTimer());
|
|
2504
|
-
if (this.videoPlayer)
|
|
2505
|
-
this.videoPlayer.nativeElement.play();
|
|
2515
|
+
if (this.videoPlayer())
|
|
2516
|
+
this.videoPlayer().nativeElement.play();
|
|
2506
2517
|
}
|
|
2507
2518
|
else {
|
|
2508
|
-
if (this.videoPlayer)
|
|
2509
|
-
this.videoPlayer.nativeElement.pause();
|
|
2519
|
+
if (this.videoPlayer())
|
|
2520
|
+
this.videoPlayer().nativeElement.pause();
|
|
2521
|
+
}
|
|
2522
|
+
});
|
|
2523
|
+
effect(() => {
|
|
2524
|
+
if (this.fullScreen()) {
|
|
2525
|
+
this.storyContainer().nativeElement.style.position = 'fixed';
|
|
2526
|
+
this.storyContainer().nativeElement.style.width = '100%';
|
|
2527
|
+
this.storyContainer().nativeElement.style.height = '100%';
|
|
2528
|
+
this.storyContainer().nativeElement.style.top = '0';
|
|
2529
|
+
this.storyContainer().nativeElement.style.left = '0';
|
|
2510
2530
|
}
|
|
2511
2531
|
});
|
|
2512
2532
|
}
|
|
@@ -2520,9 +2540,11 @@ class StoriesComponent {
|
|
|
2520
2540
|
this.currentProgress.set(0);
|
|
2521
2541
|
this.currentTime = 0;
|
|
2522
2542
|
if (this.currentStory().type == 'video') {
|
|
2523
|
-
timer(100).subscribe(() => console.log(this.videoPlayer.nativeElement.duration));
|
|
2524
2543
|
}
|
|
2525
|
-
|
|
2544
|
+
else {
|
|
2545
|
+
this.currentDuration.set(15);
|
|
2546
|
+
this.runTimer();
|
|
2547
|
+
}
|
|
2526
2548
|
}
|
|
2527
2549
|
runTimer() {
|
|
2528
2550
|
if (this.timerSubscription)
|
|
@@ -2531,7 +2553,7 @@ class StoriesComponent {
|
|
|
2531
2553
|
return;
|
|
2532
2554
|
this.timerSubscription = timer(this.timerInterval).subscribe(() => {
|
|
2533
2555
|
this.currentTime += this.timerInterval;
|
|
2534
|
-
let duration = this.
|
|
2556
|
+
let duration = this.currentDuration() ?? this.defaultDuration();
|
|
2535
2557
|
this.currentProgress.set(this.currentTime / (duration * 10));
|
|
2536
2558
|
if (this.currentTime >= duration * 1000)
|
|
2537
2559
|
this.next();
|
|
@@ -2543,22 +2565,49 @@ class StoriesComponent {
|
|
|
2543
2565
|
//this.sidebarService.closeSidebar(id);
|
|
2544
2566
|
}
|
|
2545
2567
|
emitClose() {
|
|
2568
|
+
document.getElementsByTagName("html")[0].style['overflow'] = 'initial';
|
|
2569
|
+
document.getElementsByTagName("body")[0].style['overflow'] = 'initial';
|
|
2546
2570
|
this.fullScreen.set(false);
|
|
2571
|
+
if (this.regularStyle) {
|
|
2572
|
+
this.storyContainer().nativeElement.style.width = this.regularStyle.width;
|
|
2573
|
+
this.storyContainer().nativeElement.style.height = this.regularStyle.height;
|
|
2574
|
+
this.storyContainer().nativeElement.style.top = this.regularStyle.top;
|
|
2575
|
+
this.storyContainer().nativeElement.style.left = this.regularStyle.left;
|
|
2576
|
+
this.storyContainer().nativeElement.addEventListener('transitionend', () => {
|
|
2577
|
+
this.storyContainer().nativeElement.style = {};
|
|
2578
|
+
this.storyContainer().nativeElement.style.position = 'relative';
|
|
2579
|
+
}, { once: true });
|
|
2580
|
+
}
|
|
2547
2581
|
this.close.emit();
|
|
2548
2582
|
}
|
|
2549
2583
|
setFullScreen() {
|
|
2584
|
+
document.getElementsByTagName("html")[0].style['overflow'] = 'hidden';
|
|
2585
|
+
document.getElementsByTagName("body")[0].style['overflow'] = 'hidden';
|
|
2586
|
+
this.storyContainer().nativeElement.style.width = this.storyContainer().nativeElement.offsetWidth + 'px';
|
|
2587
|
+
this.storyContainer().nativeElement.style.height = this.storyContainer().nativeElement.offsetHeight + 'px';
|
|
2588
|
+
this.storyContainer().nativeElement.style.top = this.storyContainer().nativeElement.getBoundingClientRect().top + 'px';
|
|
2589
|
+
this.storyContainer().nativeElement.style.left = this.storyContainer().nativeElement.getBoundingClientRect().left + 'px';
|
|
2590
|
+
this.storyContainer().nativeElement.style.transition = 'all .2s';
|
|
2591
|
+
this.regularStyle = {
|
|
2592
|
+
top: this.storyContainer().nativeElement.style.top,
|
|
2593
|
+
left: this.storyContainer().nativeElement.style.left,
|
|
2594
|
+
width: this.storyContainer().nativeElement.style.width,
|
|
2595
|
+
height: this.storyContainer().nativeElement.style.height
|
|
2596
|
+
};
|
|
2597
|
+
this.storyContainer().nativeElement.style.position = 'fixed';
|
|
2550
2598
|
this.fullScreen.set(true);
|
|
2599
|
+
this.storyContainer().nativeElement.style.width = '100%';
|
|
2600
|
+
this.storyContainer().nativeElement.style.height = '100%';
|
|
2601
|
+
this.storyContainer().nativeElement.style.top = '0';
|
|
2602
|
+
this.storyContainer().nativeElement.style.left = '0';
|
|
2551
2603
|
}
|
|
2552
2604
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: StoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2553
|
-
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,
|
|
2605
|
+
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$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
2554
2606
|
}
|
|
2555
2607
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: StoriesComponent, decorators: [{
|
|
2556
2608
|
type: Component,
|
|
2557
|
-
args: [{ selector: 'stories', standalone: true, imports: [CommonModule, NgTemplateOutlet, ButtonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"w-full h-full story-container
|
|
2558
|
-
}], ctorParameters: () => []
|
|
2559
|
-
type: ViewChild,
|
|
2560
|
-
args: ['videoPlayer', { read: ElementRef }]
|
|
2561
|
-
}] } });
|
|
2609
|
+
args: [{ selector: 'stories', standalone: true, imports: [CommonModule, NgTemplateOutlet, ButtonModule], encapsulation: ViewEncapsulation.None, 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"] }]
|
|
2610
|
+
}], ctorParameters: () => [] });
|
|
2562
2611
|
|
|
2563
2612
|
// import { UUID } from 'angular2-uuid';
|
|
2564
2613
|
// import { environment } from 'environments/environment';
|