Add show image button on sensitive images

VernissageApp · Sep 29, 2024 · d22b33d · d22b33d
1 parent 0731980
commit d22b33d
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 16 deletions.
diff --git 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')),
-    ])
-]
+    ]),
+]
diff --git a/src/app/pages/status/status.page.html b/src/app/pages/status/status.page.html
@@ -13,11 +13,19 @@
             <ng-container *ngIf="images">
                 <ng-container *ngIf="images.length === 1">
                     <div [ngClass]="{ 'photo-image-container-fixed': !isHandset }">
-                        <canvas [@showOrHide]="!imageIsLoaded ? 'true' : 'false'" [ngClass]="{ 'hidden': imageIsLoaded }" class="blurhash" #canvas [width]="imageWidth" [height]="imageHeight"></canvas>
-                        <img [@showOrHide]="imageIsLoaded ? 'true' : 'false'" [ngClass]="{ 'hidden': !imageIsLoaded }" [src]="images[0].data?.src" (click)="openInFullScreen()" (keydown.enter)="openInFullScreen()" tabindex="0" (load)="onImageLoaded()" alt="Status image" />
+                        @if (mainStatus.sensitive) {
+                            <div [@show]="!showSensitiveImage ? 'true' : 'false'" class="content-warning">
+                                <div class="text">{{ mainStatus.contentWarning ?? '' }}</div>
+                                <button mat-stroked-button (click)="showSensitiveImage = true">Show image</button>
+                            </div>
+                            <canvas [@showOrHide]="!showSensitiveImage ? 'true' : 'false'" class="blurhash" #canvas [width]="imageWidth" [height]="imageHeight"></canvas>
+                            <img [@show]="showSensitiveImage ? 'true' : 'false'" [src]="images[0].data?.src" (click)="openInFullScreen()" (keydown.enter)="openInFullScreen()" tabindex="0" (load)="onImageLoaded()" alt="Status image" />
+                        } @else {
+                            <img [@show]="imageIsLoaded ? 'true' : 'false'" [src]="images[0].data?.src" (click)="openInFullScreen()" (keydown.enter)="openInFullScreen()" tabindex="0" (load)="onImageLoaded()" alt="Status image" />
+                        }
                     </div>
                 </ng-container>
-                <ng-container *ngIf="images.length > 1">
+                <ng-container *ngIf="images.length > 1">                
                     <gallery
                         class="custom-gallery"
                         [ngClass]="{ 'custom-gallery-browser': showContextArrows() }"
@@ -31,6 +39,7 @@
                         (itemClick)="openInFullScreen()"
                         (indexChange)="onImageIndexChange($event)">
                     </gallery>
+
                 </ng-container>
             </ng-container>
         </div>

diff --git 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
@@ -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<void> {
-        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);
     }