diff --git a/src/app/animations/show-or-hide.animation.ts b/src/app/animations/show-or-hide.animation.ts index 5220432..a668952 100644 --- a/src/app/animations/show-or-hide.animation.ts +++ b/src/app/animations/show-or-hide.animation.ts @@ -7,9 +7,19 @@ import { } from '@angular/animations'; export const showOrHideAnimation = [ + trigger('show', [ + state('false', style({ opacity: 0 })), + state('true', style({ opacity: 1 })), + transition('false => true', animate('500ms')), + ]), + trigger('hide', [ + state('false', style({ opacity: 0 })), + state('true', style({ opacity: 1 })), + transition('true => false', animate('500ms')), + ]), trigger('showOrHide', [ state('false', style({ opacity: 0 })), state('true', style({ opacity: 1 })), transition('false <=> true', animate('500ms')), - ]) -] \ No newline at end of file + ]), +] diff --git a/src/app/pages/status/status.page.html b/src/app/pages/status/status.page.html index 39a7eb2..2384648 100644 --- a/src/app/pages/status/status.page.html +++ b/src/app/pages/status/status.page.html @@ -13,11 +13,19 @@
- - Status image + @if (mainStatus.sensitive) { +
+
{{ mainStatus.contentWarning ?? '' }}
+ +
+ + Status image + } @else { + Status image + }
- + + diff --git a/src/app/pages/status/status.page.scss b/src/app/pages/status/status.page.scss index 1d1e9eb..dad3624 100644 --- a/src/app/pages/status/status.page.scss +++ b/src/app/pages/status/status.page.scss @@ -49,17 +49,30 @@ width: calc(100vw - 80px); } - .photo-image-container-fixed { - height: 600px; + .content-warning { + position: absolute; + top:40%; + width: 100%; + text-align: center; + z-index: 101; + + .text { + color: rgb(209, 209, 209); + background-color: transparent; + font-size: 1.2em; + text-shadow: #777777 1px 0 4px; + margin-bottom: 8px; + } } .blurhash { - position:absolute; + position: absolute; display: block; height: 100%; - width: calc(100vw - 80px); + width: 100%; max-height: 600px; object-fit: contain; + z-index: 100; } img { @@ -68,6 +81,19 @@ width: 100%; max-height: 600px; object-fit: contain; + z-index: 99; + } + + .photo-image-container-fixed { + height: 600px; + + .content-warning { + width: calc(100vw - 80px); + } + + .blurhash { + width: calc(100vw - 80px); + } } } diff --git a/src/app/pages/status/status.page.ts b/src/app/pages/status/status.page.ts index 05dde39..36f0580 100644 --- a/src/app/pages/status/status.page.ts +++ b/src/app/pages/status/status.page.ts @@ -58,6 +58,7 @@ export class StatusPage extends ResponsiveComponent implements OnInit, OnDestroy replyStatus?: Status; images?: GalleryItem[]; imageIsLoaded = false; + showSensitiveImage = false; firstCanvasInitialization = false; urlToGallery?: string; @@ -165,6 +166,7 @@ export class StatusPage extends ResponsiveComponent implements OnInit, OnDestroy if (this.isHandset) { this.loadingService.showLoader(); this.isReady = false; + this.firstCanvasInitialization = false; } await this.router.navigate(['/statuses', previousStatus.id], { replaceUrl: true }); @@ -183,6 +185,7 @@ export class StatusPage extends ResponsiveComponent implements OnInit, OnDestroy if (this.isHandset) { this.loadingService.showLoader(); this.isReady = false; + this.firstCanvasInitialization = false; } await this.router.navigate(['/statuses', nextStatus.id], { replaceUrl: true }); @@ -566,11 +569,8 @@ export class StatusPage extends ResponsiveComponent implements OnInit, OnDestroy } private async loadPageData(statusId: string): Promise { - this.imageIsLoaded = false; - this.changeDetectorRef.detectChanges(); - this.status = await this.statusesService.get(statusId); - + if (this.status.reblog) { this.mainStatus = this.status.reblog; } else { @@ -582,11 +582,16 @@ export class StatusPage extends ResponsiveComponent implements OnInit, OnDestroy this.setImageHeight(); this.setCardMetatags(); - this.images = this.mainStatus.attachments?.map(attachment => { + this.imageIsLoaded = false; + this.showSensitiveImage = !this.mainStatus.sensitive; + + this.images = this.mainStatus?.attachments?.map(attachment => { return new ImageItem({ src: attachment.originalFile?.url, thumb: attachment.smallFile?.url }) - }); + }); + + this.rendered = this.mainStatus?.noteHtml ?? ''; + this.changeDetectorRef.detectChanges(); - this.rendered = this.sanitizer.bypassSecurityTrustHtml(this.mainStatus?.noteHtml ?? ''); this.comments = await this.getAllReplies(this.mainStatus.id); }