Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(file-representation): add credentials to all file download requests (DEV-1257) #803

Merged
merged 1 commit into from Aug 19, 2022
Merged

chore(file-representation): add credentials to all file download requests (DEV-1257) #803

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app/workspace/resource/representation/archive/archive.component.ts
View file
Open in desktop
Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions src/app/workspace/resource/representation/audio/audio.component.html
View file
Open in desktop
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/app/workspace/resource/representation/audio/audio.component.ts
View file
Open in desktop
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/app/workspace/resource/representation/document/document.component.ts
View file
Open in desktop
Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions src/app/workspace/resource/representation/still-image/still-image.component.html
View file
Open in desktop
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/app/workspace/resource/representation/still-image/still-image.component.ts
View file
Open in desktop
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/app/workspace/resource/representation/text/text.component.ts
View file
Open in desktop
Expand Up @@ -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);
Expand Down
66 changes: 32 additions & 34 deletions src/app/workspace/resource/representation/video/video.component.html
View file
Open in desktop
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -39,39 +37,39 @@

<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">
<!-- vertical more button with menu to open and copy url -->
<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>
<button mat-icon-button (click)="goToStart()" [disabled]="currentTime === 0 || failedToLoad"
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>

Expand All @@ -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>
Expand All @@ -102,4 +100,4 @@
</mat-toolbar-row>
</mat-toolbar>

</div>
</div>
7 changes: 7 additions & 0 deletions src/app/workspace/resource/representation/video/video.component.scss
View file
Open in desktop
Expand Up @@ -156,3 +156,10 @@

}

::ng-deep .mat-menu-custom-black {
background: #292929;
.menu-content {
color: #FFFFFF;
}
}

2 changes: 1 addition & 1 deletion src/app/workspace/resource/representation/video/video.component.ts
View file
Open in desktop
Expand Up @@ -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);
Expand Down