Add support for videos and audios in gallery view
Signed-off-by: trivernis <trivernis@protonmail.com>pull/4/head
parent
47738b392d
commit
4a0b1eb2ae
@ -0,0 +1,4 @@
|
||||
<ng-content></ng-content>
|
||||
<div *ngIf="this.busy" class="busy-indicator-overlay" [class.blur]="this.blurBackground" [class.darken]="this.darkenBackground">
|
||||
<mat-progress-spinner color="primary" [mode]="mode" [value]="value"></mat-progress-spinner>
|
||||
</div>
|
||||
@ -0,0 +1,31 @@
|
||||
.busy-indicator-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
z-index: 998;
|
||||
|
||||
mat-progress-spinner {
|
||||
z-index: 999;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.busy-indicator-overlay.blur {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.busy-indicator-overlay.darken {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
::ng-deep app-busy-indicator {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { BusyIndicatorComponent } from './busy-indicator.component';
|
||||
|
||||
describe('BusyIndicatorComponent', () => {
|
||||
let component: BusyIndicatorComponent;
|
||||
let fixture: ComponentFixture<BusyIndicatorComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ BusyIndicatorComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(BusyIndicatorComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,48 @@
|
||||
import {Component, Input, OnInit} from '@angular/core';
|
||||
import {ProgressSpinnerMode} from "@angular/material/progress-spinner";
|
||||
|
||||
@Component({
|
||||
selector: 'app-busy-indicator',
|
||||
templateUrl: './busy-indicator.component.html',
|
||||
styleUrls: ['./busy-indicator.component.scss']
|
||||
})
|
||||
export class BusyIndicatorComponent {
|
||||
|
||||
@Input() busy: boolean = false;
|
||||
@Input() blurBackground: boolean = false;
|
||||
@Input() darkenBackground: boolean = false;
|
||||
@Input() mode: ProgressSpinnerMode = "indeterminate";
|
||||
@Input() value: number | undefined;
|
||||
|
||||
constructor() { }
|
||||
|
||||
public setBusy(busy: boolean) {
|
||||
this.busy = busy;
|
||||
}
|
||||
|
||||
public wrapOperation<T>(operation: Function): T | undefined {
|
||||
this.setBusy(true)
|
||||
try {
|
||||
const result = operation();
|
||||
this.setBusy(false);
|
||||
return result;
|
||||
} catch {
|
||||
return undefined;
|
||||
} finally {
|
||||
this.setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
public async wrapAsyncOperation<T>(operation: Function): Promise<T | undefined> {
|
||||
this.setBusy(true)
|
||||
try {
|
||||
const result = await operation();
|
||||
this.setBusy(false);
|
||||
return result;
|
||||
} catch {
|
||||
return undefined;
|
||||
} finally {
|
||||
this.setBusy(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
<div class="audio-container">
|
||||
<audio controls [src]="this.blobUrl">
|
||||
</audio>
|
||||
</div>
|
||||
@ -0,0 +1,8 @@
|
||||
.audio-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
audio {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AudioViewerComponent } from './audio-viewer.component';
|
||||
|
||||
describe('AudioViewerComponent', () => {
|
||||
let component: AudioViewerComponent;
|
||||
let fixture: ComponentFixture<AudioViewerComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ AudioViewerComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AudioViewerComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,14 @@
|
||||
import {Component, Input, OnInit} from '@angular/core';
|
||||
import {SafeResourceUrl} from "@angular/platform-browser";
|
||||
|
||||
@Component({
|
||||
selector: 'app-audio-viewer',
|
||||
templateUrl: './audio-viewer.component.html',
|
||||
styleUrls: ['./audio-viewer.component.scss']
|
||||
})
|
||||
export class AudioViewerComponent {
|
||||
|
||||
@Input() blobUrl!: SafeResourceUrl;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
@ -1 +1,9 @@
|
||||
<app-image-viewer *ngIf="getContentType() === 'image'" [imageUrl]="contentUrl"></app-image-viewer>
|
||||
<app-image-viewer *ngIf="getContentType() === 'image' && contentUrl" [imageUrl]="contentUrl"></app-image-viewer>
|
||||
<app-video-viewer *ngIf="getContentType() === 'video' && this.blobUrl" [blobUrl]="this.blobUrl!"></app-video-viewer>
|
||||
<app-audio-viewer *ngIf="getContentType() === 'audio' && this.blobUrl" [blobUrl]="this.blobUrl!"></app-audio-viewer>
|
||||
|
||||
<div *ngIf="getContentType() === 'other'" class="download-prompt">
|
||||
<span>Unsupported content type <b>{{this.file.mime_type}}</b></span>
|
||||
<button mat-flat-button color="primary" (click)="this.downloadContent()">Download</button>
|
||||
</div>
|
||||
<app-busy-indicator></app-busy-indicator>
|
||||
|
||||
@ -1,4 +1,19 @@
|
||||
app-image-viewer {
|
||||
app-image-viewer, app-video-viewer, app-audio-viewer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.download-prompt {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
button {
|
||||
margin: 1em 0 auto;
|
||||
align-self: center;
|
||||
}
|
||||
span {
|
||||
margin: auto 0 0;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
<video controls [src]="this.blobUrl">
|
||||
Unsupported video type
|
||||
</video>
|
||||
@ -0,0 +1,4 @@
|
||||
video {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { VideoViewerComponent } from './video-viewer.component';
|
||||
|
||||
describe('VideoViewerComponent', () => {
|
||||
let component: VideoViewerComponent;
|
||||
let fixture: ComponentFixture<VideoViewerComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ VideoViewerComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(VideoViewerComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,14 @@
|
||||
import {
|
||||
Component,
|
||||
Input,
|
||||
} from '@angular/core';
|
||||
import {SafeResourceUrl} from "@angular/platform-browser";
|
||||
|
||||
@Component({
|
||||
selector: 'app-video-viewer',
|
||||
templateUrl: './video-viewer.component.html',
|
||||
styleUrls: ['./video-viewer.component.scss']
|
||||
})
|
||||
export class VideoViewerComponent {
|
||||
@Input() blobUrl!: SafeResourceUrl;
|
||||
}
|
||||
@ -0,0 +1,49 @@
|
||||
import {downloadDir} from "@tauri-apps/api/path";
|
||||
import {dialog} from "@tauri-apps/api";
|
||||
import {File} from "../../models/File";
|
||||
|
||||
export class FileHelper {
|
||||
|
||||
/**
|
||||
* Opens a dialog to get a download location for the given file
|
||||
* @param {File} file
|
||||
*/
|
||||
public static async getFileDownloadLocation(file: File): Promise<string | undefined> {
|
||||
let extension;
|
||||
|
||||
if (file.mime_type) {
|
||||
extension = FileHelper.getExtensionForMime(file.mime_type);
|
||||
}
|
||||
const downloadDirectory = await downloadDir();
|
||||
const suggestionPath = downloadDirectory + file.hash + "." + extension;
|
||||
|
||||
return await dialog.save({
|
||||
defaultPath: suggestionPath,
|
||||
filters: [{
|
||||
name: file.mime_type ?? "All",
|
||||
extensions: [extension ?? "*"]
|
||||
}, {name: "All", extensions: ["*"]}]
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the extension for a mime type
|
||||
* @param {string} mime
|
||||
* @returns {string | undefined}
|
||||
* @private
|
||||
*/
|
||||
public static getExtensionForMime(mime: string): string | undefined {
|
||||
let parts = mime.split("/");
|
||||
|
||||
if (parts.length === 2) {
|
||||
const type = parts[0];
|
||||
const subtype = parts[1];
|
||||
return FileHelper.convertMimeSubtypeToExtension(subtype);
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
private static convertMimeSubtypeToExtension(subtype: string): string {
|
||||
return subtype;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue