diff --git a/backend/middlewares/GalleryMWs.ts b/backend/middlewares/GalleryMWs.ts index f372c96..b55ff8d 100644 --- a/backend/middlewares/GalleryMWs.ts +++ b/backend/middlewares/GalleryMWs.ts @@ -11,6 +11,8 @@ import {ProjectPath} from '../ProjectPath'; import {Config} from '../../common/config/private/Config'; import {UserDTO} from '../../common/entities/UserDTO'; import {RandomQuery} from '../model/interfaces/IGalleryManager'; +import {MediaDTO} from '../../common/entities/MediaDTO'; +import {VideoDTO} from '../../common/entities/VideoDTO'; const LOG_TAG = '[GalleryMWs]'; @@ -71,8 +73,28 @@ export class GalleryMWs { }; + const cleanUpMedia = (media: MediaDTO[]) => { + media.forEach(m => { + if (MediaDTO.isPhoto(m)) { + delete (m).metadata.bitRate; + delete (m).metadata.duration; + } else if (MediaDTO.isVideo(m)) { + delete (m).metadata.cameraData; + delete (m).metadata.orientation; + delete (m).metadata.orientation; + delete (m).metadata.keywords; + delete (m).metadata.positionData; + } + }); + }; + if (cw.directory) { removeDirs(cw.directory); + // TODO: remove when typeorm inheritance is fixed + cleanUpMedia(cw.directory.media); + } + if (cw.searchResult) { + cleanUpMedia(cw.searchResult.media); } diff --git a/common/Utils.ts b/common/Utils.ts index fc79c93..1ca1685 100644 --- a/common/Utils.ts +++ b/common/Utils.ts @@ -5,6 +5,11 @@ export class Utils { return JSON.parse(JSON.stringify(object)); } + static zeroPrefix(value, length: number) { + const ret = '00000' + value; + return ret.substr(ret.length - length); + } + static equalsFilter(object: any, filter: any): boolean { if (typeof filter !== 'object' || filter == null) { return object === filter; diff --git a/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html b/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html index 4b46e0e..734a22e 100644 --- a/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html +++ b/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html @@ -15,8 +15,8 @@
{{media.metadata.size.width}} x {{media.metadata.size.height}}
-
{{calcMpx()}}MP
-
{{calcFileSize()}}
+
{{calcMpx()}}MP
+
{{calcSize(media.metadata.fileSize)}}
@@ -35,6 +35,22 @@ + +
+
+ +
+
+
+ {{"Video"}} +
+
+
length: {{renderDuration(VideoData.duration)}}
+
bit rate: {{calcSize(VideoData.bitRate)}}/s
+
+
+
+
@@ -67,8 +83,8 @@
- {{media.metadata.positionData.GPSData.latitude.toFixed(3)}}, - {{media.metadata.positionData.GPSData.longitude.toFixed(3)}} + {{PositionData.GPSData.latitude.toFixed(3)}}, + {{PositionData.GPSData.longitude.toFixed(3)}}
@@ -80,11 +96,11 @@ [zoomControl]="false" [streetViewControl]="false" [zoom]="10" - [latitude]="media.metadata.positionData.GPSData.latitude" - [longitude]="media.metadata.positionData.GPSData.longitude"> + [latitude]="PositionData.GPSData.latitude" + [longitude]="PositionData.GPSData.longitude"> + [latitude]="PositionData.GPSData.latitude" + [longitude]="PositionData.GPSData.longitude"> diff --git a/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts index 52bc656..4fdc2c8 100644 --- a/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts +++ b/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts @@ -1,7 +1,9 @@ import {Component, ElementRef, EventEmitter, Input, Output} from '@angular/core'; -import {CameraMetadata, PhotoDTO} from '../../../../../common/entities/PhotoDTO'; +import {CameraMetadata, PhotoDTO, PositionMetaData} from '../../../../../common/entities/PhotoDTO'; import {Config} from '../../../../../common/config/public/Config'; import {MediaDTO} from '../../../../../common/entities/MediaDTO'; +import {VideoDTO, VideoMetadata} from '../../../../../common/entities/VideoDTO'; +import {Utils} from '../../../../../common/Utils'; @Component({ selector: 'app-info-panel', @@ -18,14 +20,26 @@ export class InfoPanelLightboxComponent { this.mapEnabled = Config.Client.Map.enabled; } + isPhoto() { + return this.media && MediaDTO.isPhoto(this.media); + } + calcMpx() { return (this.media.metadata.size.width * this.media.metadata.size.height / 1000000).toFixed(2); } - calcFileSize() { + renderDuration(time: number) { + const h = Math.floor(time / 1000 / 60 / 60); + time %= 1000 * 60 * 60; + const m = Math.floor(time / 1000 / 60); + time %= 1000 * 60; + const s = Math.floor(time / 1000); + return Utils.zeroPrefix(h, 2) + ':' + Utils.zeroPrefix(m, 2) + ':' + Utils.zeroPrefix(s, 2); + } + + calcSize(size: number) { const postFixes = ['B', 'KB', 'MB', 'GB', 'TB']; let index = 0; - let size = this.media.metadata.fileSize; while (size > 1000 && index < postFixes.length - 1) { size /= 1000; index++; @@ -52,8 +66,18 @@ export class InfoPanelLightboxComponent { return '1/' + (1 / f); } + get VideoData(): VideoMetadata { + if (typeof (this.media).metadata.bitRate === 'undefined') { + return null; + } + return (this.media).metadata; + } + hasPositionData(): boolean { - return MediaDTO.hasPositionData(this.media); + return !!(this.media).metadata.positionData && + !!((this.media).metadata.positionData.city || + (this.media).metadata.positionData.state || + (this.media).metadata.positionData.country); } hasGPS() { @@ -61,6 +85,10 @@ export class InfoPanelLightboxComponent { (this.media).metadata.positionData.GPSData.latitude && (this.media).metadata.positionData.GPSData.longitude; } + get PositionData(): PositionMetaData { + return (this.media).metadata.positionData; + } + getPositionText(): string { if (!(this.media).metadata.positionData) { return ''; diff --git a/frontend/app/gallery/lightbox/inputrange.css b/frontend/app/gallery/lightbox/inputrange.css index be9a0cc..d58bd73 100644 --- a/frontend/app/gallery/lightbox/inputrange.css +++ b/frontend/app/gallery/lightbox/inputrange.css @@ -17,7 +17,7 @@ input[type="range"]::-webkit-slider-runnable-track { */ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; - width: 10px; /* 1 */ + width: 1px; /* 1 */ height: 10px; background: #fff; box-shadow: -100vw 0 0 100vw white; @@ -31,7 +31,7 @@ input[type="range"]::-moz-range-track { input[type="range"]::-moz-range-thumb { background: #fff; height: 10px; - width: 10px; + width: 1px; box-shadow: -100vw 0 0 100vw white; box-sizing: border-box; } @@ -43,7 +43,7 @@ input[type="range"]::-ms-fill-lower { input[type="range"]::-ms-thumb { background: #fff; height: 10px; - width: 10px; + width: 1px; box-sizing: border-box; } diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.css b/frontend/app/gallery/lightbox/lightbox.gallery.component.css index 15ab2ac..a646016 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.css +++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.css @@ -64,6 +64,10 @@ app-gallery-lightbox-photo { opacity: 0.1; } +#controllers-container.dim-controls-video { + opacity: 0; +} + #swipeable-container{ height: 100%; } diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.html b/frontend/app/gallery/lightbox/lightbox.gallery.component.html index a8da174..f684b3d 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.html +++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.html @@ -16,52 +16,53 @@ id="controllers-container" #controls [style.width.px]="getPhotoFrameWidth()" - [ngClass]="!controllersDimmed ? 'dim-controls': ''"> + [ngClass]="!controllersDimmed ? (activePhoto && activePhoto.gridPhoto.isVideo() ? 'dim-controls-video' :'dim-controls'): ''"> + +
+ + + + +
+ +
+ +
+ + + +
+ +
+ + +
+ +
+ + + +
+
-
- - - - -
- -
- -
- - - -
- -
- - -
- -
- - - -
-
-
+
diff --git a/frontend/app/gallery/lightbox/media/media.lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/media/media.lightbox.gallery.component.ts index b7b3060..133d990 100644 --- a/frontend/app/gallery/lightbox/media/media.lightbox.gallery.component.ts +++ b/frontend/app/gallery/lightbox/media/media.lightbox.gallery.component.ts @@ -62,7 +62,7 @@ export class GalleryLightboxMediaComponent implements OnChanges { public get VideoVolume(): number { if (!this.video) { - return 100; + return 1; } return this.video.nativeElement.volume; } @@ -88,7 +88,7 @@ export class GalleryLightboxMediaComponent implements OnChanges { public get Muted(): boolean { if (!this.video) { - return true; + return false; } return this.video.nativeElement.muted; }