ngx-payvent-shared 0.0.1 → 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);
|
|
@@ -2481,32 +2481,52 @@ class StoriesComponent {
|
|
|
2481
2481
|
showSubFooter = input(true, ...(ngDevMode ? [{ debugName: "showSubFooter" }] : []));
|
|
2482
2482
|
mute = signal(true, ...(ngDevMode ? [{ debugName: "mute" }] : []));
|
|
2483
2483
|
descriptionOpen = input(...(ngDevMode ? [undefined, { debugName: "descriptionOpen" }] : []));
|
|
2484
|
-
fullScreen =
|
|
2484
|
+
fullScreen = model(false, ...(ngDevMode ? [{ debugName: "fullScreen" }] : []));
|
|
2485
2485
|
storyChanged = output();
|
|
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,18 +2540,20 @@ 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)
|
|
2529
2551
|
this.timerSubscription.unsubscribe();
|
|
2530
|
-
if (this.paused())
|
|
2552
|
+
if (this.paused() || this.stories().length == 1)
|
|
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,18 +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';
|
|
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
|
+
}
|
|
2546
2581
|
this.close.emit();
|
|
2547
2582
|
}
|
|
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';
|
|
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';
|
|
2603
|
+
}
|
|
2548
2604
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: StoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2549
|
-
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: { 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 });
|
|
2550
2606
|
}
|
|
2551
2607
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: StoriesComponent, decorators: [{
|
|
2552
2608
|
type: Component,
|
|
2553
|
-
args: [{ selector: 'stories', standalone: true, imports: [CommonModule, NgTemplateOutlet, ButtonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"w-full h-full story-container
|
|
2554
|
-
}], ctorParameters: () => []
|
|
2555
|
-
type: ViewChild,
|
|
2556
|
-
args: ['videoPlayer', { read: ElementRef }]
|
|
2557
|
-
}] } });
|
|
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: () => [] });
|
|
2558
2611
|
|
|
2559
2612
|
// import { UUID } from 'angular2-uuid';
|
|
2560
2613
|
// import { environment } from 'environments/environment';
|