From f3446c86964ef082aea2490956d9d6223a6be153 Mon Sep 17 00:00:00 2001 From: trivernis Date: Sat, 16 Oct 2021 15:05:51 +0200 Subject: [PATCH] Add thumbnails and improve performance Signed-off-by: trivernis --- mediarepo-ui/package.json | 4 +- mediarepo-ui/src-tauri/Cargo.lock | 118 ++++++++++++++++-- mediarepo-ui/src-tauri/Cargo.toml | 2 +- mediarepo-ui/src-tauri/src/commands/files.rs | 28 ++++- mediarepo-ui/src-tauri/src/ipc/files.rs | 1 - mediarepo-ui/src-tauri/src/main.rs | 4 +- mediarepo-ui/src/app/app.module.ts | 4 + .../file-grid-entry.component.html | 4 +- .../file-grid-entry.component.scss | 2 +- .../file-grid-entry.component.ts | 34 +++-- .../file-grid/file-grid.component.html | 12 +- .../file-grid/file-grid.component.scss | 11 +- .../file-grid/file-grid.component.ts | 13 +- mediarepo-ui/src/app/models/Thumbnail.ts | 6 + .../src/app/pages/home/home.component.html | 2 +- .../src/app/pages/home/home.component.scss | 3 +- .../src/app/pages/home/home.component.ts | 15 +++ .../src/app/services/file/file.service.ts | 15 ++- mediarepo-ui/yarn.lock | 14 ++- 19 files changed, 243 insertions(+), 49 deletions(-) create mode 100644 mediarepo-ui/src/app/models/Thumbnail.ts diff --git a/mediarepo-ui/package.json b/mediarepo-ui/package.json index db1d209..66073b1 100644 --- a/mediarepo-ui/package.json +++ b/mediarepo-ui/package.json @@ -23,6 +23,8 @@ "@angular/platform-browser-dynamic": "~12.2.0", "@angular/router": "~12.2.0", "@tauri-apps/api": "^1.0.0-beta.8", + "primeicons": "^4.1.0", + "primeng": "^12.2.1", "rxjs": "~6.6.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" @@ -50,4 +52,4 @@ "karma-jasmine-html-reporter": "~1.7.0", "typescript": "~4.3.5" } -} \ No newline at end of file +} diff --git a/mediarepo-ui/src-tauri/Cargo.lock b/mediarepo-ui/src-tauri/Cargo.lock index c7c82f9..5dfc3a1 100644 --- a/mediarepo-ui/src-tauri/Cargo.lock +++ b/mediarepo-ui/src-tauri/Cargo.lock @@ -55,7 +55,7 @@ version = "0.1.0" dependencies = [ "directories", "mediarepo", - "rmp-ipc", + "rmp-ipc 0.4.3", "serde", "serde_json", "tauri", @@ -306,6 +306,12 @@ version = "3.7.1" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "d9df67f7bf9ef8498769f994239c45613ef0c5899415fb58e9add412d2c1a538" +[[package]] +name = "bytemuck" +version = "1.7.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "72957246c41db82b8ef88a5486143830adeb8227ef9837740bdec67724cf2c5b" + [[package]] name = "byteorder" version = "1.4.3" @@ -460,6 +466,12 @@ dependencies = [ "objc", ] +[[package]] +name = "color_quant" +version = "1.1.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "3d7b894f5411737b7867f4827955924d7c254fc9f4d91a6aad6b097804b1018b" + [[package]] name = "com" version = "0.2.0" @@ -1256,6 +1268,16 @@ dependencies = [ "wasi 0.10.0+wasi-snapshot-preview1", ] +[[package]] +name = "gif" +version = "0.11.3" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "c3a7187e78088aead22ceedeee99779455b23fc231fe13ec443f99bb71694e5b" +dependencies = [ + "color_quant", + "weezl", +] + [[package]] name = "gio" version = "0.14.8" @@ -1562,6 +1584,25 @@ dependencies = [ "winapi-util", ] +[[package]] +name = "image" +version = "0.23.14" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "24ffcb7e7244a9bf19d35bf2883b9c080c4ced3c07a9895572178cdb8f13f6a1" +dependencies = [ + "bytemuck", + "byteorder", + "color_quant", + "gif", + "jpeg-decoder", + "num-iter", + "num-rational", + "num-traits", + "png 0.16.8", + "scoped_threadpool", + "tiff", +] + [[package]] name = "indexmap" version = "1.7.0" @@ -1648,6 +1689,15 @@ dependencies = [ "libc", ] +[[package]] +name = "jpeg-decoder" +version = "0.1.22" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "229d53d58899083193af11e15917b5640cd40b29ff475a1fe4ef725deb02d0f2" +dependencies = [ + "rayon", +] + [[package]] name = "js-sys" version = "0.3.55" @@ -1790,7 +1840,7 @@ checksum = "a3e378b66a060d48947b590737b30a1be76706c8dd7b8ba0f2fe3989c68a853f" [[package]] name = "mediarepo" version = "0.1.0" -source = "git+https://github.com/Trivernis/mediarepo-daemon?rev=a928f5e42eb7a8ce524d3722a4f5ae05889e52ba#a928f5e42eb7a8ce524d3722a4f5ae05889e52ba" +source = "git+https://github.com/Trivernis/mediarepo-daemon?rev=57308089d58706ee1438f6b55d53691e9e08ce6b#57308089d58706ee1438f6b55d53691e9e08ce6b" dependencies = [ "log", "mediarepo-core", @@ -1801,12 +1851,14 @@ dependencies = [ [[package]] name = "mediarepo-core" version = "0.1.0" -source = "git+https://github.com/Trivernis/mediarepo-daemon?rev=a928f5e42eb7a8ce524d3722a4f5ae05889e52ba#a928f5e42eb7a8ce524d3722a4f5ae05889e52ba" +source = "git+https://github.com/Trivernis/mediarepo-daemon?rev=57308089d58706ee1438f6b55d53691e9e08ce6b#57308089d58706ee1438f6b55d53691e9e08ce6b" dependencies = [ "base64", + "futures", + "image", "multibase", "multihash", - "rmp-ipc", + "rmp-ipc 0.6.0", "sea-orm", "serde", "sqlx", @@ -1818,8 +1870,8 @@ dependencies = [ [[package]] name = "mediarepo-database" -version = "0.1.0" -source = "git+https://github.com/Trivernis/mediarepo-daemon?rev=a928f5e42eb7a8ce524d3722a4f5ae05889e52ba#a928f5e42eb7a8ce524d3722a4f5ae05889e52ba" +version = "0.2.0" +source = "git+https://github.com/Trivernis/mediarepo-daemon?rev=57308089d58706ee1438f6b55d53691e9e08ce6b#57308089d58706ee1438f6b55d53691e9e08ce6b" dependencies = [ "chrono", "mediarepo-core", @@ -1830,7 +1882,7 @@ dependencies = [ [[package]] name = "mediarepo-model" version = "0.1.0" -source = "git+https://github.com/Trivernis/mediarepo-daemon?rev=a928f5e42eb7a8ce524d3722a4f5ae05889e52ba#a928f5e42eb7a8ce524d3722a4f5ae05889e52ba" +source = "git+https://github.com/Trivernis/mediarepo-daemon?rev=57308089d58706ee1438f6b55d53691e9e08ce6b#57308089d58706ee1438f6b55d53691e9e08ce6b" dependencies = [ "chrono", "mediarepo-core", @@ -1846,12 +1898,11 @@ dependencies = [ [[package]] name = "mediarepo-socket" version = "0.1.0" -source = "git+https://github.com/Trivernis/mediarepo-daemon?rev=a928f5e42eb7a8ce524d3722a4f5ae05889e52ba#a928f5e42eb7a8ce524d3722a4f5ae05889e52ba" +source = "git+https://github.com/Trivernis/mediarepo-daemon?rev=57308089d58706ee1438f6b55d53691e9e08ce6b#57308089d58706ee1438f6b55d53691e9e08ce6b" dependencies = [ "chrono", "mediarepo-core", "mediarepo-model", - "rmp-ipc", "serde", "tokio", ] @@ -2147,6 +2198,17 @@ dependencies = [ "num-traits", ] +[[package]] +name = "num-rational" +version = "0.3.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "12ac428b1cb17fce6f731001d307d351ec70a6d202fc2e60f7d4c5e42d8f4f07" +dependencies = [ + "autocfg", + "num-integer", + "num-traits", +] + [[package]] name = "num-traits" version = "0.2.14" @@ -2878,6 +2940,21 @@ dependencies = [ "typemap_rev", ] +[[package]] +name = "rmp-ipc" +version = "0.6.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "fbd5082cefa9a4407327087d75dfadb5bf2d6f07168d0b609a2509f54fa3b243" +dependencies = [ + "lazy_static", + "log", + "rmp-serde", + "serde", + "thiserror", + "tokio", + "typemap_rev", +] + [[package]] name = "rmp-serde" version = "0.15.5" @@ -2958,6 +3035,12 @@ version = "1.0.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "ea6a9290e3c9cf0f18145ef7ffa62d68ee0bf5fcd651017e586dc7fd5da448c2" +[[package]] +name = "scoped_threadpool" +version = "0.1.9" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "1d51f5df5af43ab3f1360b429fa5e0152ac5ce8c0bd6485cae490332e96846a8" + [[package]] name = "scopeguard" version = "1.1.0" @@ -3791,6 +3874,17 @@ dependencies = [ "once_cell", ] +[[package]] +name = "tiff" +version = "0.6.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "9a53f4706d65497df0c4349241deddf35f84cee19c87ed86ea8ca590f4464437" +dependencies = [ + "jpeg-decoder", + "miniz_oxide 0.4.4", + "weezl", +] + [[package]] name = "time" version = "0.1.44" @@ -4249,6 +4343,12 @@ dependencies = [ "winapi", ] +[[package]] +name = "weezl" +version = "0.1.5" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "d8b77fdfd5a253be4ab714e4ffa3c49caf146b4de743e97510c0656cf90f1e8e" + [[package]] name = "wepoll-ffi" version = "0.1.2" diff --git a/mediarepo-ui/src-tauri/Cargo.toml b/mediarepo-ui/src-tauri/Cargo.toml index 52dd369..077db0e 100644 --- a/mediarepo-ui/src-tauri/Cargo.toml +++ b/mediarepo-ui/src-tauri/Cargo.toml @@ -30,7 +30,7 @@ features = ["fs", "io-std", "io-util"] [dependencies.mediarepo] git = "https://github.com/Trivernis/mediarepo-daemon" -rev = "a928f5e42eb7a8ce524d3722a4f5ae05889e52ba" +rev = "57308089d58706ee1438f6b55d53691e9e08ce6b" features = ["library"] default-features=false diff --git a/mediarepo-ui/src-tauri/src/commands/files.rs b/mediarepo-ui/src-tauri/src/commands/files.rs index 4d18c7e..682b0ad 100644 --- a/mediarepo-ui/src-tauri/src/commands/files.rs +++ b/mediarepo-ui/src-tauri/src/commands/files.rs @@ -1,5 +1,6 @@ -use mediarepo::requests::ReadFileRequest; -use mediarepo::responses::FileResponse; +use mediarepo::requests::{GetFileThumbnailsRequest, ReadFileRequest}; +use mediarepo::responses::{FileResponse, ThumbnailResponse}; + use crate::context::Context; use crate::error::{AppError, AppResult}; @@ -25,5 +26,28 @@ pub async fn read_file_by_hash(hash: String, context: tauri::State<'_, Context>) } else { Err(AppError::new("No ipc connection.")) } +} + +#[tauri::command] +pub async fn get_thumbnails(hash: String, context: tauri::State<'_, Context>) -> AppResult> { + let ipc = context.ipc.read().await; + if let Some(ipc) = &*ipc { + let response = ipc.emitter.emit_to("files", "get_thumbnails", GetFileThumbnailsRequest::Hash(hash)).await?.await_reply(&ipc).await?; + Ok(response.data::>()?) + } else { + Err(AppError::new("No ipc connection.")) + } +} + +#[tauri::command] +pub async fn read_thumbnail(hash: String, context: tauri::State<'_, Context>) -> AppResult> { + let ipc = context.ipc.read().await; + if let Some(ipc) = &*ipc { + let response = ipc.emitter.emit_to("files", "read_thumbnail", hash).await?.await_reply(&ipc).await?; + + Ok(response.data::>()?) + } else { + Err(AppError::new("No ipc connection.")) + } } diff --git a/mediarepo-ui/src-tauri/src/ipc/files.rs b/mediarepo-ui/src-tauri/src/ipc/files.rs index 48afb4b..e69de29 100644 --- a/mediarepo-ui/src-tauri/src/ipc/files.rs +++ b/mediarepo-ui/src-tauri/src/ipc/files.rs @@ -1 +0,0 @@ -use mediarepo::requests::AddFileRequest; diff --git a/mediarepo-ui/src-tauri/src/main.rs b/mediarepo-ui/src-tauri/src/main.rs index cee7606..bd94925 100644 --- a/mediarepo-ui/src-tauri/src/main.rs +++ b/mediarepo-ui/src-tauri/src/main.rs @@ -4,7 +4,7 @@ )] use crate::commands::repo::{get_repositories, add_repository, select_repository, get_active_repository}; -use crate::commands::files::{get_all_files, read_file_by_hash}; +use crate::commands::files::*; use crate::commands::emit_info; use crate::context::Context; use crate::settings::load_settings; @@ -21,7 +21,7 @@ fn main() { tauri::Builder::default() .manage(context) - .invoke_handler(tauri::generate_handler![get_repositories, add_repository, select_repository, get_active_repository, emit_info, get_all_files, read_file_by_hash]) + .invoke_handler(tauri::generate_handler![get_repositories, add_repository, select_repository, get_active_repository, emit_info, get_all_files, read_file_by_hash, get_thumbnails, read_thumbnail]) .run(tauri::generate_context!()) .expect("error while running tauri application"); } diff --git a/mediarepo-ui/src/app/app.module.ts b/mediarepo-ui/src/app/app.module.ts index c5a766f..72dc4f3 100644 --- a/mediarepo-ui/src/app/app.module.ts +++ b/mediarepo-ui/src/app/app.module.ts @@ -21,6 +21,8 @@ import {MatSidenavModule} from "@angular/material/sidenav"; import {MatGridListModule} from "@angular/material/grid-list"; import { FileGridEntryComponent } from './components/file-grid/file-grid-entry/file-grid-entry.component'; import {MatProgressBarModule} from "@angular/material/progress-bar"; +import {MatPaginatorModule} from "@angular/material/paginator"; +import {ScrollingModule} from "@angular/cdk/scrolling"; @NgModule({ declarations: [ @@ -47,6 +49,8 @@ import {MatProgressBarModule} from "@angular/material/progress-bar"; MatSidenavModule, MatGridListModule, MatProgressBarModule, + MatPaginatorModule, + ScrollingModule, ], providers: [], bootstrap: [AppComponent] diff --git a/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.html b/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.html index 92071f6..0f9e73a 100644 --- a/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.html +++ b/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.html @@ -1,7 +1,7 @@ - + {{file?.name}} - File Image + File Image diff --git a/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.scss b/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.scss index b5137b5..4af898b 100644 --- a/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.scss +++ b/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.scss @@ -1,7 +1,6 @@ mat-card { height: calc(100% - 32px); width: calc(100% - 32px); - padding: 16px; } mat-card-content { @@ -14,5 +13,6 @@ mat-card-content { .entry-image { max-width: 100%; max-height: 100%; + height: auto; margin: auto; } diff --git a/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.ts b/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.ts index 01d2a13..33efb6e 100644 --- a/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.ts +++ b/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.ts @@ -1,8 +1,16 @@ -import {Component, Input, OnInit} from '@angular/core'; +import { + AfterContentChecked, + Component, + Input, + OnInit, + ViewChild, + ElementRef, AfterViewInit +} from '@angular/core'; import {File} from "../../../models/File"; import {FileService} from "../../../services/file/file.service"; import {ErrorBrokerService} from "../../../services/error-broker/error-broker.service"; import {SafeResourceUrl} from "@angular/platform-browser"; +import {MatCard} from "@angular/material/card"; @Component({ selector: 'app-file-grid-entry', @@ -11,19 +19,23 @@ import {SafeResourceUrl} from "@angular/platform-browser"; }) export class FileGridEntryComponent implements OnInit { - @Input() file: File | undefined; + @ViewChild("card") card!: ElementRef; + @Input() file!: File; + contentUrl: SafeResourceUrl | undefined; constructor(private fileService: FileService, private errorBroker: ErrorBrokerService) { } - async ngOnInit(): Promise { - if (this.file) { - console.log(this.file); - try { - this.contentUrl = await this.fileService.readFile(this.file.hash, this.file.mime_type ?? "image/png"); - } catch (err) { - this.errorBroker.showError(err); - } - } + async ngOnInit() { + await this.loadImage(); } + async loadImage() { + try { + const thumbnails = await this.fileService.getThumbnails(this.file.hash); + let thumbnail = thumbnails.find(t => (t.height > 250 || t.width > 250) && (t.height < 500 && t.width < 500)); + this.contentUrl = await this.fileService.readThumbnail(thumbnail!!); + } catch (err) { + this.errorBroker.showError(err); + } + } } diff --git a/mediarepo-ui/src/app/components/file-grid/file-grid.component.html b/mediarepo-ui/src/app/components/file-grid/file-grid.component.html index dc94919..5bca9ec 100644 --- a/mediarepo-ui/src/app/components/file-grid/file-grid.component.html +++ b/mediarepo-ui/src/app/components/file-grid/file-grid.component.html @@ -1,5 +1,7 @@ - - - - - + +
+
+ +
+
+
diff --git a/mediarepo-ui/src/app/components/file-grid/file-grid.component.scss b/mediarepo-ui/src/app/components/file-grid/file-grid.component.scss index 10b4de1..dc20e1c 100644 --- a/mediarepo-ui/src/app/components/file-grid/file-grid.component.scss +++ b/mediarepo-ui/src/app/components/file-grid/file-grid.component.scss @@ -1,4 +1,13 @@ app-file-grid-entry { + height: 250px; + width: 100%; + padding: 5px; +} + +.file-scroll { height: 100%; - width: 100% +} + +.file-row { + display: flex; } diff --git a/mediarepo-ui/src/app/components/file-grid/file-grid.component.ts b/mediarepo-ui/src/app/components/file-grid/file-grid.component.ts index 2ec7c09..c6a47aa 100644 --- a/mediarepo-ui/src/app/components/file-grid/file-grid.component.ts +++ b/mediarepo-ui/src/app/components/file-grid/file-grid.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, Input, OnInit} from '@angular/core'; import {File} from "../../models/File"; import {FileService} from "../../services/file/file.service"; @@ -7,14 +7,9 @@ import {FileService} from "../../services/file/file.service"; templateUrl: './file-grid.component.html', styleUrls: ['./file-grid.component.scss'] }) -export class FileGridComponent implements OnInit { +export class FileGridComponent { - files: File[] = []; - - constructor(private fileService: FileService) { } - - ngOnInit(): void { - this.fileService.displayedFiles.subscribe((files) => this.files = files); - } + @Input() fileRows: File[][] = []; + constructor() { } } diff --git a/mediarepo-ui/src/app/models/Thumbnail.ts b/mediarepo-ui/src/app/models/Thumbnail.ts new file mode 100644 index 0000000..8acbb90 --- /dev/null +++ b/mediarepo-ui/src/app/models/Thumbnail.ts @@ -0,0 +1,6 @@ +export type Thumbnail = { + hash: string, + height: number, + width: number, + mime: string | undefined +} diff --git a/mediarepo-ui/src/app/pages/home/home.component.html b/mediarepo-ui/src/app/pages/home/home.component.html index 8a787ae..f3df0d8 100644 --- a/mediarepo-ui/src/app/pages/home/home.component.html +++ b/mediarepo-ui/src/app/pages/home/home.component.html @@ -7,7 +7,7 @@

Drawer

- + diff --git a/mediarepo-ui/src/app/pages/home/home.component.scss b/mediarepo-ui/src/app/pages/home/home.component.scss index 9477b83..c6d00f6 100644 --- a/mediarepo-ui/src/app/pages/home/home.component.scss +++ b/mediarepo-ui/src/app/pages/home/home.component.scss @@ -10,6 +10,7 @@ mat-drawer { height: 100%; + width: 25%; } mat-drawer-content { @@ -23,5 +24,5 @@ mat-drawer-container { } app-file-grid { - padding: 1em; + padding: 0; } diff --git a/mediarepo-ui/src/app/pages/home/home.component.ts b/mediarepo-ui/src/app/pages/home/home.component.ts index a28cc3c..d7d030a 100644 --- a/mediarepo-ui/src/app/pages/home/home.component.ts +++ b/mediarepo-ui/src/app/pages/home/home.component.ts @@ -1,5 +1,7 @@ import { Component, OnInit } from '@angular/core'; import {FileService} from "../../services/file/file.service"; +import {File} from "../../models/File"; +import {PageEvent} from "@angular/material/paginator"; @Component({ selector: 'app-home', @@ -8,10 +10,23 @@ import {FileService} from "../../services/file/file.service"; }) export class HomeComponent implements OnInit { + fileRows: File[][] = []; + page: number = 0; + pageSize: number = 25; + constructor(private fileService: FileService) { } async ngOnInit() { + this.fileService.displayedFiles.subscribe((files) => this.setFileRows(files)); await this.fileService.getFiles(); } + setFileRows(files: File[]) { + this.fileRows = []; + const filesPerRow = 6; + for (let i = 0; i < (Math.ceil(files.length /filesPerRow )); i++) { + this.fileRows.push(files.slice(i * filesPerRow, Math.min(files.length, (i + 1) * filesPerRow))) + } + console.log(this.fileRows); + } } diff --git a/mediarepo-ui/src/app/services/file/file.service.ts b/mediarepo-ui/src/app/services/file/file.service.ts index 1400beb..3bb2e64 100644 --- a/mediarepo-ui/src/app/services/file/file.service.ts +++ b/mediarepo-ui/src/app/services/file/file.service.ts @@ -4,6 +4,7 @@ import {File} from "../../models/File"; import {invoke} from "@tauri-apps/api/tauri"; import {DOCUMENT} from "@angular/common"; import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser"; +import {Thumbnail} from "../../models/Thumbnail"; @Injectable({ providedIn: 'root' @@ -18,7 +19,7 @@ export class FileService { public async getFiles() { let all_files = await invoke("get_all_files"); - this.displayedFiles.next(all_files.slice(70, 100)); + this.displayedFiles.next(all_files); } public async readFile(hash: string, mime_type: string): Promise { @@ -28,4 +29,16 @@ export class FileService { const url = URL?.createObjectURL(blob); return this.sanitizer.bypassSecurityTrustResourceUrl(url); } + + public async readThumbnail(thumbnail: Thumbnail): Promise { + let data = await invoke("read_thumbnail", {hash: thumbnail.hash}); + const blob = new Blob([new Uint8Array(data)], {type: thumbnail.mime}); + + const url = URL?.createObjectURL(blob); + return this.sanitizer.bypassSecurityTrustResourceUrl(url); + } + + public async getThumbnails(hash: string): Promise { + return await invoke("get_thumbnails", {hash}); + } } diff --git a/mediarepo-ui/yarn.lock b/mediarepo-ui/yarn.lock index 9e06e4f..468774b 100644 --- a/mediarepo-ui/yarn.lock +++ b/mediarepo-ui/yarn.lock @@ -8272,6 +8272,18 @@ pretty-bytes@^5.3.0: resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb" integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg== +primeicons@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/primeicons/-/primeicons-4.1.0.tgz#19eaef8ef5594b0006358ae64e738d03e167c9bb" + integrity sha512-uEv2pSPk1zQCfaB2VgnUfnUxxlGryYi+5rbdxmZBBt5v9S/pscIQYS5YDLxsQZ7D9jn5c76+Tx5wX/2J1nK6sA== + +primeng@^12.2.1: + version "12.2.1" + resolved "https://registry.yarnpkg.com/primeng/-/primeng-12.2.1.tgz#a01f6207b6e65dc22dbafc7ffa97ae6d0a43cf86" + integrity sha512-2Nr/ASCq7SsLutFm/mBjudqCr31pO596qDs8zA6VcNMw0FmXjM85YqeHWB8hc4hlDzky4BHAuIKphvT4ykA+xw== + dependencies: + tslib "^2.1.0" + process-nextick-args@~2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" @@ -9938,7 +9950,7 @@ tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== -tslib@^2.0.0, tslib@^2.2.0, tslib@^2.3.0: +tslib@^2.0.0, tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0: version "2.3.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01" integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==