From b247f859179847023fe882791d402546dead5cfa Mon Sep 17 00:00:00 2001
From: mdelez <60604010+mdelez@users.noreply.github.com>
Date: Fri, 19 Aug 2022 09:16:36 +0200
Subject: [PATCH] chore(file-representation): add credentials to all file
 download requests (#803)

---
 .../archive/archive.component.ts              |  2 +-
 .../representation/audio/audio.component.html |  4 +-
 .../representation/audio/audio.component.ts   |  2 +-
 .../document/document.component.ts            |  2 +-
 .../still-image/still-image.component.html    |  4 +-
 .../still-image/still-image.component.ts      |  2 +-
 .../representation/text/text.component.ts     |  2 +-
 .../representation/video/video.component.html | 66 +++++++++----------
 .../representation/video/video.component.scss |  7 ++
 .../representation/video/video.component.ts   |  2 +-
 10 files changed, 49 insertions(+), 44 deletions(-)

diff --git a/src/app/workspace/resource/representation/archive/archive.component.ts b/src/app/workspace/resource/representation/archive/archive.component.ts
index e8c831995f..4c9ad0f0c3 100644
--- a/src/app/workspace/resource/representation/archive/archive.component.ts
+++ b/src/app/workspace/resource/representation/archive/archive.component.ts
@@ -58,7 +58,7 @@ export class ArchiveComponent implements OnInit, AfterViewInit {
     // https://stackoverflow.com/questions/66986983/angular-10-download-file-from-firebase-link-without-opening-into-new-tab
     async downloadArchive(url: string) {
         try {
-            const res = await this._http.get(url, { responseType: 'blob' }).toPromise();
+            const res = await this._http.get(url, { responseType: 'blob', withCredentials: true }).toPromise();
             this.downloadFile(res);
         } catch (e) {
             this._errorHandler.showMessage(e);
diff --git a/src/app/workspace/resource/representation/audio/audio.component.html b/src/app/workspace/resource/representation/audio/audio.component.html
index d7b85a43fc..d957d1b1d1 100644
--- a/src/app/workspace/resource/representation/audio/audio.component.html
+++ b/src/app/workspace/resource/representation/audio/audio.component.html
@@ -28,10 +28,10 @@
                 </button>
                 <mat-menu #more="matMenu" class="mat-menu-custom-black">
                     <button class="menu-content" mat-menu-item (click)="openIIIFnewTab()">
-                        Open IIIF URL in new tab
+                        Open audio in new tab
                     </button>
                     <button class="menu-content" mat-menu-item [cdkCopyToClipboard]="src.fileValue.fileUrl">
-                        Copy IIIF URL to clipboard
+                        Copy audio URL to clipboard
                     </button>
                     <button class="menu-content" mat-menu-item (click)="downloadAudio(src.fileValue.fileUrl)">
                         Download audio
diff --git a/src/app/workspace/resource/representation/audio/audio.component.ts b/src/app/workspace/resource/representation/audio/audio.component.ts
index 9f49a6e4ed..750b860156 100644
--- a/src/app/workspace/resource/representation/audio/audio.component.ts
+++ b/src/app/workspace/resource/representation/audio/audio.component.ts
@@ -123,7 +123,7 @@ export class AudioComponent implements OnInit, AfterViewInit {
     // https://stackoverflow.com/questions/66986983/angular-10-download-file-from-firebase-link-without-opening-into-new-tab
     async downloadAudio(url: string){
         try {
-            const res = await this._http.get(url, { responseType: 'blob' }).toPromise();
+            const res = await this._http.get(url, { responseType: 'blob', withCredentials: true }).toPromise();
             this.downloadFile(res);
         } catch (e) {
             this._errorHandler.showMessage(e);
diff --git a/src/app/workspace/resource/representation/document/document.component.ts b/src/app/workspace/resource/representation/document/document.component.ts
index 51951d0752..8205684574 100644
--- a/src/app/workspace/resource/representation/document/document.component.ts
+++ b/src/app/workspace/resource/representation/document/document.component.ts
@@ -84,7 +84,7 @@ export class DocumentComponent implements OnInit, AfterViewInit {
 
     async downloadDocument(url: string) {
         try {
-            const res = await this._http.get(url, { responseType: 'blob' }).toPromise();
+            const res = await this._http.get(url, { responseType: 'blob', withCredentials: true }).toPromise();
             this.downloadFile(res);
         } catch (e) {
             this._errorHandler.showMessage(e);
diff --git a/src/app/workspace/resource/representation/still-image/still-image.component.html b/src/app/workspace/resource/representation/still-image/still-image.component.html
index e448647028..fdcd396f15 100644
--- a/src/app/workspace/resource/representation/still-image/still-image.component.html
+++ b/src/app/workspace/resource/representation/still-image/still-image.component.html
@@ -36,14 +36,14 @@
         </button>
         <mat-menu #more="matMenu" class="mat-menu-custom-black">
             <button class="menu-content" mat-menu-item (click)="openImageInNewTab(iiifUrl)">
-                Open IIIF file in new tab
+                Open IIIF URL in new tab
             </button>
             <button class="menu-content" mat-menu-item [cdkCopyToClipboard]="iiifUrl"
                 (click)="openSnackBar('IIIF URL copied to clipboard!')">
                 Copy IIIF URL to clipboard
             </button>
             <button class="menu-content" mat-menu-item (click)="downloadStillImage(images[0].fileValue.fileUrl)">
-                Download file
+                Download image
             </button>
             <button class="menu-content" mat-menu-item (click)="openReplaceFileDialog()">
                 Replace file
diff --git a/src/app/workspace/resource/representation/still-image/still-image.component.ts b/src/app/workspace/resource/representation/still-image/still-image.component.ts
index 3343afb610..cdc44d8ebc 100644
--- a/src/app/workspace/resource/representation/still-image/still-image.component.ts
+++ b/src/app/workspace/resource/representation/still-image/still-image.component.ts
@@ -367,7 +367,7 @@ export class StillImageComponent implements OnChanges, OnDestroy, AfterViewInit
 
     async downloadStillImage(url: string) {
         try {
-            const res = await this._http.get(url, { responseType: 'blob' }).toPromise();
+            const res = await this._http.get(url, { responseType: 'blob', withCredentials: true }).toPromise();
             this.downloadFile(res);
         } catch (e) {
             this._errorHandler.showMessage(e);
diff --git a/src/app/workspace/resource/representation/text/text.component.ts b/src/app/workspace/resource/representation/text/text.component.ts
index f49f39e5c2..ea64a4ae44 100644
--- a/src/app/workspace/resource/representation/text/text.component.ts
+++ b/src/app/workspace/resource/representation/text/text.component.ts
@@ -48,7 +48,7 @@ export class TextComponent implements OnInit, AfterViewInit {
     // https://stackoverflow.com/questions/66986983/angular-10-download-file-from-firebase-link-without-opening-into-new-tab
     async downloadText(url: string) {
         try {
-            const res = await this._http.get(url, { responseType: 'blob' }).toPromise();
+            const res = await this._http.get(url, { responseType: 'blob', withCredentials: true }).toPromise();
             this.downloadFile(res);
         } catch (e) {
             this._errorHandler.showMessage(e);
diff --git a/src/app/workspace/resource/representation/video/video.component.html b/src/app/workspace/resource/representation/video/video.component.html
index dcf9bdfc56..23d711fc32 100644
--- a/src/app/workspace/resource/representation/video/video.component.html
+++ b/src/app/workspace/resource/representation/video/video.component.html
@@ -2,18 +2,20 @@
 
     <div class="container">
         <!-- in case of an error -->
-        <app-status [status]="404" [url]="src.fileValue.fileUrl" [representation]="'video'" *ngIf="failedToLoad"></app-status>
+        <app-status [status]="404" [url]="src.fileValue.fileUrl" [representation]="'video'" *ngIf="failedToLoad">
+        </app-status>
 
         <div class="video-container">
-            <video class="video" #videoEle *ngIf="!fileHasChanged; else loading"  [src]="video" type="video/mp4" preload="auto" [muted]="muted"
-                (click)="togglePlay()" (timeupdate)="timeUpdate($event)" (loadedmetadata)="loadedMetadata()"
-                (canplaythrough)="loadedVideo()">
+            <video class="video" #videoEle *ngIf="!fileHasChanged; else loading" [src]="video" type="video/mp4"
+                preload="auto" [muted]="muted" (click)="togglePlay()" (timeupdate)="timeUpdate($event)"
+                (loadedmetadata)="loadedMetadata()" (canplaythrough)="loadedVideo()">
             </video>
 
             <div class="overlay">
                 <div>
                     <mat-icon (click)="updateTimeFromButton(-10)">replay_10</mat-icon>
-                    <mat-icon (click)="togglePlay()">{{ reachedTheEnd ? "replay" : (play ? "pause" : "play_arrow") }}</mat-icon>
+                    <mat-icon (click)="togglePlay()">{{ reachedTheEnd ? "replay" : (play ? "pause" : "play_arrow") }}
+                    </mat-icon>
                     <mat-icon (click)="updateTimeFromButton(10)">forward_10</mat-icon>
                 </div>
             </div>
@@ -26,11 +28,7 @@
         <div class="preview-line" *ngIf="!failedToLoad">
             <!-- preview image -->
             <div class="preview" #preview>
-                <app-video-preview
-                    [src]="src"
-                    [time]="previewTime"
-                    [dispTime]="true"
-                    [fileHasChanged]="fileHasChanged"
+                <app-video-preview [src]="src" [time]="previewTime" [dispTime]="true" [fileHasChanged]="fileHasChanged"
                     (loaded)="displayPreview(!$event)">
                 </app-video-preview>
             </div>
@@ -39,10 +37,10 @@
 
     <mat-toolbar class="controls">
         <mat-toolbar-row style="overflow: hidden;">
-            <app-av-timeline #timeline [value]="currentTime" [min]="0" [max]="duration" [resized]="cinemaMode" [splitSizeChanged]="splitSizeChanged"
-                (move)="updatePreview($event)" (mouseenter)="displayPreview(true)" (dimension)="timelineDimension = $event"
-                (mouseleave)="displayPreview(false)" (changed)="updateTimeFromSlider($event)"
-                [disabled]="failedToLoad"></app-av-timeline>
+            <app-av-timeline #timeline [value]="currentTime" [min]="0" [max]="duration" [resized]="cinemaMode"
+                [splitSizeChanged]="splitSizeChanged" (move)="updatePreview($event)" (mouseenter)="displayPreview(true)"
+                (dimension)="timelineDimension = $event" (mouseleave)="displayPreview(false)"
+                (changed)="updateTimeFromSlider($event)" [disabled]="failedToLoad"></app-av-timeline>
         </mat-toolbar-row>
 
         <mat-toolbar-row class="action">
@@ -50,18 +48,18 @@
             <button mat-icon-button [matMenuTriggerFor]="more">
                 <mat-icon>more_vert</mat-icon>
             </button>
-            <mat-menu #more="matMenu">
-                <button mat-menu-item (click)="openVideoInNewTab(this.src.fileValue.fileUrl)">
-                    Open file in new tab
+            <mat-menu #more="matMenu" class="mat-menu-custom-black">
+                <button mat-menu-item class="menu-content" (click)="openVideoInNewTab(this.src.fileValue.fileUrl)">
+                    Open video in new tab
                 </button>
-                <button mat-menu-item [cdkCopyToClipboard]="this.src.fileValue.fileUrl"
-                        (click)="openSnackBar('URL copied to clipboard!')">
-                    Copy URL to clipboard
+                <button mat-menu-item class="menu-content" [cdkCopyToClipboard]="this.src.fileValue.fileUrl"
+                    (click)="openSnackBar('URL copied to clipboard!')">
+                    Copy video URL to clipboard
                 </button>
-                <button mat-menu-item (click)="downloadVideo(this.src.fileValue.fileUrl)">
-                    Download file
+                <button mat-menu-item class="menu-content" (click)="downloadVideo(this.src.fileValue.fileUrl)">
+                    Download video
                 </button>
-                <button mat-menu-item (click)="openReplaceFileDialog()">
+                <button mat-menu-item class="menu-content" (click)="openReplaceFileDialog()">
                     Replace file
                 </button>
             </mat-menu>
@@ -69,9 +67,9 @@
                 matTooltip="Stop and go to start" [matTooltipPosition]="matTooltipPos">
                 <mat-icon>skip_previous</mat-icon>
             </button>
-            <button mat-icon-button (click)="togglePlay()" [matTooltip]="(reachedTheEnd ? 'Replay' : (play ? 'Pause' : 'Play'))"
-                [matTooltipPosition]="matTooltipPos"
-                [disabled]="failedToLoad">
+            <button mat-icon-button (click)="togglePlay()"
+                [matTooltip]="(reachedTheEnd ? 'Replay' : (play ? 'Pause' : 'Play'))"
+                [matTooltipPosition]="matTooltipPos" [disabled]="failedToLoad">
                 <mat-icon>{{ reachedTheEnd ? "replay" : (play ? "pause" : "play_arrow") }}</mat-icon>
             </button>
 
@@ -84,13 +82,13 @@
                     <span *ngIf="duration">/ {{ duration | appTime }}</span>
                 </p>
             </div>
-<!--            <button mat-icon-button (click)="muted = !muted" [matTooltip]="(muted ? 'Unmute' : 'Mute')"-->
-<!--                [matTooltipPosition]="matTooltipPos"-->
-<!--                [disabled]="failedToLoad">-->
-<!--                <mat-icon>-->
-<!--                    {{ muted ? "volume_mute" : "volume_up" }}-->
-<!--                </mat-icon>-->
-<!--            </button>-->
+            <!--            <button mat-icon-button (click)="muted = !muted" [matTooltip]="(muted ? 'Unmute' : 'Mute')"-->
+            <!--                [matTooltipPosition]="matTooltipPos"-->
+            <!--                [disabled]="failedToLoad">-->
+            <!--                <mat-icon>-->
+            <!--                    {{ muted ? "volume_mute" : "volume_up" }}-->
+            <!--                </mat-icon>-->
+            <!--            </button>-->
             <span class="fill-remaining-space"></span>
             <span class="empty-space"></span>
             <span class="empty-space"></span>
@@ -102,4 +100,4 @@
         </mat-toolbar-row>
     </mat-toolbar>
 
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/workspace/resource/representation/video/video.component.scss b/src/app/workspace/resource/representation/video/video.component.scss
index 39a67b7019..c7b6585326 100644
--- a/src/app/workspace/resource/representation/video/video.component.scss
+++ b/src/app/workspace/resource/representation/video/video.component.scss
@@ -156,3 +156,10 @@
 
 }
 
+::ng-deep .mat-menu-custom-black {
+  background: #292929;
+  .menu-content {
+    color: #FFFFFF;
+  }
+}
+
diff --git a/src/app/workspace/resource/representation/video/video.component.ts b/src/app/workspace/resource/representation/video/video.component.ts
index c4049972fa..accb43f040 100644
--- a/src/app/workspace/resource/representation/video/video.component.ts
+++ b/src/app/workspace/resource/representation/video/video.component.ts
@@ -307,7 +307,7 @@ export class VideoComponent implements OnInit, AfterViewInit {
 
     async downloadVideo(url: string) {
         try {
-            const res = await this._http.get(url, { responseType: 'blob' }).toPromise();
+            const res = await this._http.get(url, { responseType: 'blob', withCredentials: true }).toPromise();
             this.downloadFile(res);
         } catch (e) {
             this._errorHandler.showMessage(e);