diff --git a/frontend/app/gallery/lightbox/inputrange.css b/frontend/app/gallery/lightbox/inputrange.css new file mode 100644 index 0000000..be9a0cc --- /dev/null +++ b/frontend/app/gallery/lightbox/inputrange.css @@ -0,0 +1,68 @@ +input[type="range"] { + margin: auto; + -webkit-appearance: none; + position: relative; + overflow: hidden; + height: 8px; + cursor: pointer; + border-radius: 0; /* iOS */ +} + +input[type="range"]::-webkit-slider-runnable-track { + background: #6c757d; +} + +/* + * 1. Set to 0 width and remove border for a slider without a thumb + */ +input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + width: 10px; /* 1 */ + height: 10px; + background: #fff; + box-shadow: -100vw 0 0 100vw white; +} + +input[type="range"]::-moz-range-track { + height: 8px; + background: #6c757d; +} + +input[type="range"]::-moz-range-thumb { + background: #fff; + height: 10px; + width: 10px; + box-shadow: -100vw 0 0 100vw white; + box-sizing: border-box; +} + +input[type="range"]::-ms-fill-lower { + background: white; +} + +input[type="range"]::-ms-thumb { + background: #fff; + height: 10px; + width: 10px; + box-sizing: border-box; +} + +input[type="range"]::-ms-ticks-after { + display: none; +} + +input[type="range"]::-ms-ticks-before { + display: none; +} + +input[type="range"]::-ms-track { + background: #6c757d; + color: transparent; + height: 8px; + border: none; +} + +input[type="range"]::-ms-tooltip { + display: none; +} + diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.css b/frontend/app/gallery/lightbox/lightbox.gallery.component.css index d605154..15ab2ac 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.css +++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.css @@ -29,8 +29,10 @@ app-gallery-lightbox-photo { } .navigation-arrow { - width: 30%; - height: calc(100% - 75px); + width: 20%; + min-width: 60px; + height: 50%; + margin-top: 22vh; position: static; display: inline-block; padding: 15px; @@ -62,6 +64,10 @@ app-gallery-lightbox-photo { opacity: 0.1; } +#swipeable-container{ + height: 100%; +} + #rightArrow { float: right; text-align: right; @@ -94,11 +100,43 @@ app-gallery-lightbox-photo { } + .controls-playback { padding-right: 15px; bottom: 0; position: absolute; } +.controls-video { + padding-right: 15px; + bottom: 0; + position: absolute; +} + +.controls-video .oi, +.controls-video input{ + color: white; + cursor: pointer; + +} + +.controls-big-play span{ + font-size: 20vh; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.controls-video input[type=range]{ + padding: 0; + margin-top: 6px; +} + +.controls-video .oi{ + text-align: center; + max-width: 45px; + margin-left: 10px; +} .highlight { opacity: 0.5; diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.html b/frontend/app/gallery/lightbox/lightbox.gallery.component.html index c82f160..2c82173 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.html +++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.html @@ -12,73 +12,98 @@
-
- +
+ +
+ - + -
- -
+
+ +
-
+
-
+
-
+
-
+
-
+
+
-
- - + + -
+
- - + + +
+
+ +
+ +
+
+ + + +
- diff --git a/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.ts index efa034f..7c18e5f 100644 --- a/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.ts +++ b/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, Input, OnChanges} from '@angular/core'; +import {Component, ElementRef, Input, Output, OnChanges, ViewChild} from '@angular/core'; import {GridMedia} from '../../grid/GridMedia'; import {PhotoDTO} from '../../../../../common/entities/PhotoDTO'; import {FixOrientationPipe} from '../../FixOrientationPipe'; @@ -14,6 +14,9 @@ export class GalleryLightboxPhotoComponent implements OnChanges { @Input() gridMedia: GridMedia; @Input() loadMedia = false; @Input() windowAspect = 1; + + @ViewChild('video') video: ElementRef; + prevGirdPhoto = null; public imageSize = {width: 'auto', height: '100'}; @@ -23,6 +26,7 @@ export class GalleryLightboxPhotoComponent implements OnChanges { thumbnailSrc: string = null; photoSrc: string = null; + private videoProgress: number = 0; constructor(public elementRef: ElementRef) { } @@ -45,6 +49,76 @@ export class GalleryLightboxPhotoComponent implements OnChanges { FixOrientationPipe.transform(this.gridMedia.getPhotoPath(), this.gridMedia.Orientation) .then((src) => this.photoSrc = src); } + + + } + + private onVideoProgress() { + this.videoProgress = (100 / this.video.nativeElement.duration) * this.video.nativeElement.currentTime; + } + + public get VideoProgress(): number { + return this.videoProgress; + } + + + public get VideoVolume(): number { + if (!this.video) { + return 100; + } + return this.video.nativeElement.volume; + } + + public set VideoVolume(value: number) { + if (!this.video) { + return; + } + this.video.nativeElement.muted = false; + this.video.nativeElement.volume = value; + } + + public set VideoProgress(value: number) { + if (!this.video && value === null && typeof value === 'undefined') { + return; + } + this.video.nativeElement.currentTime = this.video.nativeElement.duration * (value / 100); + if (this.video.nativeElement.paused) { + this.video.nativeElement.play().catch(console.error); + } + } + + + public get Muted(): boolean { + if (!this.video) { + return true; + } + return this.video.nativeElement.muted; + } + + public mute() { + if (!this.video) { + return; + } + + this.video.nativeElement.muted = !this.video.nativeElement.muted; + } + + public playPause() { + if (!this.video) { + return; + } + if (this.video.nativeElement.paused) { + this.video.nativeElement.play().catch(console.error); + } else { + this.video.nativeElement.pause(); + } + } + + public get Paused(): boolean { + if (!this.video) { + return true; + } + return this.video.nativeElement.paused; } onImageError() { @@ -53,11 +127,6 @@ export class GalleryLightboxPhotoComponent implements OnChanges { console.error('Error: cannot load image for lightbox url: ' + this.gridMedia.getPhotoPath()); } - logevent(ev) { - console.log(ev); - this.imageLoadFinished = true; - this.imageLoaded = true; - } onImageLoad() { this.imageLoadFinished = true;