xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2025-01-14 14:43:17 +08:00
Code Actions Projects Activity

added controls and logic for changing playback speeds

Browse Source
This commit is contained in:
crypt-o-warrior 2022-12-16 23:20:32 +01:00
parent 9ee05c3ada
commit 16a7934ace
No known key found for this signature in database
GPG Key ID: 95194045885EFFFF
3 changed files with 46 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css
View File

@ -65,12 +65,14 @@
.controls .control-button {
margin-left: 0.2em;
margin-right: 0.2em;
display: inline-block;
padding: 0 0.5rem;
display: inline-block;
font-size: 1.5rem;
line-height: 1;
color: white;
background-color: transparent;
cursor: pointer;
vertical-align: middle !important;
}
.controls .button-disabled {
@ -277,4 +279,6 @@ input[type="range"].zoom-progress::-moz-range-track {
opacity: 1;
}
.dropdown-menu {
min-width: auto;
}

48
src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html
View File

@ -34,7 +34,7 @@
aria-controls="dropdown-basic">
<span class="oi oi-menu"></span>
</button>
<ul id="dropdown-basic" *dropdownMenu class="dropdown-menu dropdown-menu-right"
<ul id="dropdown-basic" *dropdownMenu class="dropdown-menu dropdown-menu-right"
role="menu" aria-labelledby="button-basic">
<li role="menuitem">
<a *ngIf="activePhoto"
@ -63,7 +63,7 @@
</bSwitch>
</div>
</li>
<li role="menuitem ">
<li role="menuitem">
<div class="dropdown-item d-flex justify-content-between">
<span title="key: a" i18n-title i18n>Show faces</span>
<bSwitch
@ -83,7 +83,7 @@
</li>
<li
*ngIf="activePhoto && activePhoto.gridMedia.isVideo()"
role="menuitem ">
role="menuitem">
<div class="dropdown-item d-flex justify-content-between">
<span title="key: l" i18n-title i18n>Play videos</span>
<bSwitch
@ -186,19 +186,35 @@
<div [class.dim-controls]="controllersDimmed" class="controls controls-playback"
*ngIf="zoom == 1 && activePhoto && activePhoto.gridMedia.isPhoto()">
<span class="oi oi-media-pause highlight control-button"
[ngClass]="playBackState == PlayBackStates.Paused ? 'button-disabled':''"
(click)="pause()"
title="pause"></span>
<span
class="oi oi-media-play highlight control-button"
[ngClass]="playBackState == PlayBackStates.Play ? 'button-active':''"
(click)="play()"
title="auto play"></span>
<span class="oi oi-media-skip-forward highlight control-button"
[ngClass]="playBackState == PlayBackStates.FastForward ? 'button-active':''"
(click)="fastForward()"
title="fast auto play"></span>
<span class="oi oi-media-pause highlight control-button"
[ngClass]="playBackState == PlayBackStates.Paused ? 'button-disabled':''"
(click)="pause()"
title="pause"></span>
<span class="oi oi-media-play highlight control-button"
[ngClass]="playBackState == PlayBackStates.Play ? 'button-active':''"
(click)="play()"
title="auto play"></span>
<span class="oi btn-group highlight control-button"
dropdown
[dropup]="true">
<div id="button-duration"
dropdownToggle
data-bs-auto-close="outside"
aria-controls="dropdown-basic">
<span class="text-white pe-1">{{selectedPlayBackDuration + 's'}}</span>
<span class="oi-clock"></span>
</div>
<ul id="dropdown-basic" *dropdownMenu class="dropdown-menu dropdown-menu-right"
role="menu" aria-labelledby="button-duration">
<li *ngFor="let duration of playBackDurations" role="menuitem" (click)="play(duration)">
<a class="dropdown-item" [class]="selectedPlayBackDuration === duration ? 'active' : ''">{{duration}}s</a>
</li>
</ul>
</span>
</div>
<div [class.dim-controls]="controllersDimmed" class="controls controls-big-play"

18
src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts
View File

@ -29,7 +29,6 @@ import {LightboxService} from '../lightbox.service';
export enum PlayBackStates {
Paused = 1,
Play = 2,
FastForward = 3,
}
@Component({
@ -57,6 +56,8 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
public zoom = 1;
public playBackState: PlayBackStates = PlayBackStates.Paused;
public PlayBackStates = PlayBackStates;
public playBackDurations = [2,5,10,15,20,30,60];
public selectedPlayBackDuration = 5;
public controllersDimmed = false;
public controllersVisible = true;
@ -119,7 +120,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
}
ngOnInit(): void {
this.timer = timer(1000, 2000);
this.timer = timer(1000, 1000);
}
ngOnDestroy(): void {
@ -291,20 +292,17 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
this.nextPhoto.emit();
};
public play(): void {
public play(duration?: number): void {
this.pause();
if (duration) {
this.selectedPlayBackDuration = duration;
}
this.timerSub = this.timer
.pipe(filter((t) => t % 2 === 0))
.pipe(filter((t) => t % this.selectedPlayBackDuration === 0))
.subscribe(this.showNextMedia);
this.playBackState = PlayBackStates.Play;
}
public fastForward(): void {
this.pause();
this.timerSub = this.timer.subscribe(this.showNextMedia);
this.playBackState = PlayBackStates.FastForward;
}
@HostListener('mousemove')
onMouseMove(): void {
this.showControls();