From 47738b392d0420be98ad093465fe0fc39a13eed0 Mon Sep 17 00:00:00 2001 From: trivernis Date: Sun, 21 Nov 2021 14:23:57 +0100 Subject: [PATCH] Move gallery content viewer to separate component Signed-off-by: trivernis --- mediarepo-ui/src/app/app.module.ts | 4 ++ .../content-viewer.component.html | 1 + .../content-viewer.component.scss | 4 ++ .../content-viewer.component.spec.ts | 25 ++++++++ .../content-viewer.component.ts | 37 +++++++++++ .../image-viewer/image-viewer.component.html | 16 +++++ .../image-viewer/image-viewer.component.scss | 35 +++++++++++ .../image-viewer.component.spec.ts | 25 ++++++++ .../image-viewer/image-viewer.component.ts | 63 +++++++++++++++++++ .../file-gallery/file-gallery.component.html | 21 +------ .../file-gallery/file-gallery.component.scss | 34 ---------- .../file-gallery/file-gallery.component.ts | 40 ------------ 12 files changed, 213 insertions(+), 92 deletions(-) create mode 100644 mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.html create mode 100644 mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.scss create mode 100644 mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.spec.ts create mode 100644 mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.ts create mode 100644 mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.html create mode 100644 mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.scss create mode 100644 mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.spec.ts create mode 100644 mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.ts diff --git a/mediarepo-ui/src/app/app.module.ts b/mediarepo-ui/src/app/app.module.ts index e8ca84f..a4cadde 100644 --- a/mediarepo-ui/src/app/app.module.ts +++ b/mediarepo-ui/src/app/app.module.ts @@ -59,6 +59,8 @@ import { TagFilterListItemComponent } from './components/file-search/filter-dial import { TagInputComponent } from './components/inputs/tag-input/tag-input.component'; import { ContextMenuComponent } from './components/context-menu/context-menu.component'; import { FileContextMenuComponent } from './components/context-menu/file-context-menu/file-context-menu.component'; +import { ContentViewerComponent } from './components/file-gallery/content-viewer/content-viewer.component'; +import { ImageViewerComponent } from './components/file-gallery/content-viewer/image-viewer/image-viewer.component'; @NgModule({ declarations: [ @@ -88,6 +90,8 @@ import { FileContextMenuComponent } from './components/context-menu/file-context TagInputComponent, ContextMenuComponent, FileContextMenuComponent, + ContentViewerComponent, + ImageViewerComponent, ], imports: [ BrowserModule, diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.html b/mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.html new file mode 100644 index 0000000..14cb1f4 --- /dev/null +++ b/mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.html @@ -0,0 +1 @@ + diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.scss b/mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.scss new file mode 100644 index 0000000..aa664cb --- /dev/null +++ b/mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.scss @@ -0,0 +1,4 @@ +app-image-viewer { + width: 100%; + height: 100%; +} diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.spec.ts b/mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.spec.ts new file mode 100644 index 0000000..897cbed --- /dev/null +++ b/mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ContentViewerComponent } from './content-viewer.component'; + +describe('ContentViewerComponent', () => { + let component: ContentViewerComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ContentViewerComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ContentViewerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.ts b/mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.ts new file mode 100644 index 0000000..0b966f2 --- /dev/null +++ b/mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.ts @@ -0,0 +1,37 @@ +import {Component, Input, OnInit} from '@angular/core'; +import {SafeResourceUrl} from "@angular/platform-browser"; + +type ContentType = "image" | "video" | "text" | "other"; + +@Component({ + selector: 'app-content-viewer', + templateUrl: './content-viewer.component.html', + styleUrls: ['./content-viewer.component.scss'] +}) +export class ContentViewerComponent { + + @Input() contentUrl!: SafeResourceUrl | string; + @Input() mimeType: string | undefined; + + constructor() { } + + public getContentType(): ContentType { + if (!this.mimeType) { + return "other"; + } + let mimeParts = this.mimeType.split("/"); + const type = mimeParts.shift() ?? "other"; + const subtype = mimeParts.shift() ?? "*"; + + switch (type) { + case "image": + return "image"; + case "video": + return "video"; + case "text": + return "text"; + default: + return "other"; + } + } +} diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.html b/mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.html new file mode 100644 index 0000000..f2f9c11 --- /dev/null +++ b/mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.html @@ -0,0 +1,16 @@ +
+
+ + +
+
+
+ +
+
+
diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.scss b/mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.scss new file mode 100644 index 0000000..fc6770e --- /dev/null +++ b/mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.scss @@ -0,0 +1,35 @@ + +.image-drag-container, .image-scale-container { + height: 100%; + width: 100%; +} + +.image-scale-container { + display: block; +} + +.zoom-slider { + position: absolute; + display: flex; + flex-direction: column; + right: 1em; + bottom: 1em; + z-index: 10; + opacity: 0.5; + padding: 1em 0.5em; + transition-duration: 0.2s; +} + +.zoom-slider:hover { + opacity: 1; + background-color: rgba(0, 0, 0, 0.3); + border-radius: 1em; +} + + +.image-full-view-inner { + height: 100%; + width: 100%; + display: block; + position: relative; +} diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.spec.ts b/mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.spec.ts new file mode 100644 index 0000000..1f4f87b --- /dev/null +++ b/mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ImageViewerComponent } from './image-viewer.component'; + +describe('ImageViewerComponent', () => { + let component: ImageViewerComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ImageViewerComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ImageViewerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.ts b/mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.ts new file mode 100644 index 0000000..dc336c3 --- /dev/null +++ b/mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.ts @@ -0,0 +1,63 @@ +import { + Component, + ElementRef, + HostListener, + Input, + OnInit, + ViewChild +} from '@angular/core'; +import {CdkDragMove} from "@angular/cdk/drag-drop"; +import {SafeResourceUrl} from "@angular/platform-browser"; + +@Component({ + selector: 'app-image-viewer', + templateUrl: './image-viewer.component.html', + styleUrls: ['./image-viewer.component.scss'] +}) +export class ImageViewerComponent { + + @Input() imageUrl!: SafeResourceUrl | string; + public imageZoom = 1; + public imagePosition = {x: 0, y: 0}; + public mouseInImageView = false; + + constructor() { } + + public resetImage() { + this.imageZoom = 1; + this.imagePosition = {x: 0, y: 0}; + } + + public onDragMoved($event: CdkDragMove): void { + this.imagePosition.x += $event.delta.x; + this.imagePosition.y += $event.delta.y; + } + + @HostListener("window:keydown", ["$event"]) + private async handleKeydownEvent(event: KeyboardEvent) { + switch (event.key) { + case "Escape": + this.resetImage(); + break; + } + } + + @HostListener("mousewheel", ["$event"]) + private handleScroll(event: any) { + if (this.mouseInImageView) { + const delta = event.wheelDelta ?? event.detail; + + if (delta > 0) { + this.imageZoom += 0.2 + if (this.imageZoom > 4) { + this.imageZoom = 4; + } + } else if (delta < 0) { + this.imageZoom -= 0.2 + if (this.imageZoom < 0.5) { + this.imageZoom = 0.5; + } + } + } + } +} diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html index 1555516..b149aa6 100644 --- a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html +++ b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html @@ -4,25 +4,10 @@
-
-
- -
-
- - -
-
-
- -
-
+
+
+
diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.scss b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.scss index 82b0004..83fccf1 100644 --- a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.scss +++ b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.scss @@ -32,13 +32,6 @@ app-file-gallery-entry { overflow: hidden; } -.file-full-view-inner { - height: 100%; - width: 100%; - display: block; - position: relative; -} - app-content-aware-image { height: 100%; width: 100%; @@ -66,30 +59,3 @@ app-content-aware-image { margin: auto; } } - -.image-drag-container, .image-scale-container { - height: 100%; - width: 100%; -} - -.image-scale-container { - display: block; -} - -.zoom-slider { - position: absolute; - display: flex; - flex-direction: column; - right: 1em; - bottom: 1em; - z-index: 10; - opacity: 0.5; - padding: 1em 0.5em; - transition-duration: 0.2s; -} - -.zoom-slider:hover { - opacity: 1; - background-color: rgba(0, 0, 0, 0.3); - border-radius: 1em; -} diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts index 9d8c911..b209366 100644 --- a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts +++ b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts @@ -1,6 +1,5 @@ import { Component, - ElementRef, EventEmitter, HostListener, Input, @@ -15,7 +14,6 @@ import {FileService} from "../../services/file/file.service"; import {SafeResourceUrl} from "@angular/platform-browser"; import {Selectable} from "../../models/Selectable"; import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling"; -import {CdkDragMove} from "@angular/cdk/drag-drop"; import {TabService} from "../../services/tab/tab.service"; @Component({ @@ -33,15 +31,9 @@ export class FileGalleryComponent implements OnChanges, OnInit { entries: Selectable[] = []; @ViewChild("virtualScroll") virtualScroll!: CdkVirtualScrollViewport; - @ViewChild("scaledImage") scaledImage: ElementRef | undefined; - @ViewChild( - "imageDragContainer") imageDragContainer: ElementRef | undefined; public selectedFile: Selectable | undefined; public fileContentUrl: SafeResourceUrl | undefined; - public imageZoom = 1; - public imagePosition = {x: 0, y: 0}; - public mouseInImageView = false; private scrollTimeout: number | undefined; @@ -56,7 +48,6 @@ export class FileGalleryComponent implements OnChanges, OnInit { */ async onEntrySelect(entry: Selectable) { if (entry) { - this.resetImage(); this.selectedFile?.unselect(); entry.select(); this.selectedFile = entry; @@ -149,15 +140,6 @@ export class FileGalleryComponent implements OnChanges, OnInit { } } - public resetImage() { - this.imageZoom = 1; - this.imagePosition = {x: 0, y: 0}; - } - - public onDragMoved($event: CdkDragMove): void { - this.imagePosition.x += $event.delta.x; - this.imagePosition.y += $event.delta.y; - } @HostListener("window:keydown", ["$event"]) private async handleKeydownEvent(event: KeyboardEvent) { @@ -168,28 +150,6 @@ export class FileGalleryComponent implements OnChanges, OnInit { case "ArrowLeft": await this.previousItem(); break; - case "Escape": - this.resetImage(); - break; - } - } - - @HostListener("mousewheel", ["$event"]) - private handleScroll(event: any) { - if (this.mouseInImageView) { - const delta = event.wheelDelta ?? event.detail; - - if (delta > 0) { - this.imageZoom += 0.2 - if (this.imageZoom > 4) { - this.imageZoom = 4; - } - } else if (delta < 0) { - this.imageZoom -= 0.2 - if (this.imageZoom < 0.5) { - this.imageZoom = 0.5; - } - } } }