-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(slideshow): set standalone (#56)
* refactor(client/ng): turn slideshow as standalone component * fix(client/ng): @service imports * fix(client/ng): imports * fix(client/ng): slideshow navbar * fix(client/ng): slideshow eggtimer * refactor(EggTimer): comments, naming
- Loading branch information
Showing
18 changed files
with
333 additions
and
231 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
client/ng/src/app/components/admin/dashboard/dashboard.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import {BehaviorSubject, Subject} from "rxjs"; | ||
|
|
||
| type EggTimerOptions = { | ||
| precision?: number; | ||
| }; | ||
|
|
||
| export class EggTimer { | ||
| /** in seconds */ | ||
| private timer: number = 0; | ||
| /** in seconds */ | ||
| private initialTimer = 0; | ||
| /** in milliseconds */ | ||
| private readonly precision; | ||
| /** Triggered when paused or started */ | ||
| isPlaying$ = new BehaviorSubject(false); | ||
| /** triggered when the egg time expired */ | ||
| timeout$ = new Subject<void>(); | ||
|
|
||
| constructor({precision = 100}: EggTimerOptions = {}) { | ||
| this.precision = precision; | ||
| } | ||
|
|
||
| /** | ||
| * Return a number between 0 (just started) and 1 (timeout) | ||
| */ | ||
| get progress(): number { | ||
| return 1 - this.timer / this.initialTimer; | ||
| } | ||
|
|
||
| /** | ||
| * Reset the timer (without pausing/playing) | ||
| * @param time the new time in second | ||
| */ | ||
| reset(time: number) { | ||
| this.timer = time; | ||
| this.initialTimer = time; | ||
| } | ||
|
|
||
| /** | ||
| * Starts the timer | ||
| * @param time the new time in second | ||
| */ | ||
| start(time?: number) { | ||
| if ( time ) this.reset(time); | ||
|
|
||
| this.isPlaying$.next(true); | ||
|
|
||
| // Function to increment the egg timer and set a new page when necessary | ||
| // It relies on setTimeout to be sure next increment cannot happen when page is loading | ||
| const incrementEggTimer = async () => { | ||
| if ( !this.isPlaying$.value ) return; | ||
| this.timer -= this.precision / 1000; | ||
| if ( this.timer < 0 ) { | ||
| this.timer = 0; // set to 0 to ensure the progress computation won't be negative | ||
| this.isPlaying$.next(false); | ||
| this.timeout$.next(); | ||
| } else { | ||
| window.setTimeout( incrementEggTimer, this.precision); | ||
| } | ||
| }; | ||
|
|
||
| // Bootstrap the first increment | ||
| window.setTimeout( incrementEggTimer ); | ||
| } | ||
|
|
||
| pause() { | ||
| this.isPlaying$.next(false); | ||
| } | ||
| } |
106 changes: 106 additions & 0 deletions
106
client/ng/src/app/components/slideshow/navbar.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| import {Component, EventEmitter, Input, Output} from "@angular/core"; | ||
| import {CommonModule, NgClass, NgIf, NgOptimizedImage} from '@angular/common'; | ||
| import {ButtonType} from './navbar.types'; | ||
|
|
||
| @Component({ | ||
| standalone: true, | ||
| selector: 'app-navbar', | ||
| imports: [ | ||
| NgClass, | ||
| CommonModule, | ||
| NgIf, | ||
| NgOptimizedImage, | ||
| ], | ||
| styles: [` | ||
| :host { | ||
| display: flex; | ||
| } | ||
| .mirror-x{ | ||
| scale: -1; | ||
| } | ||
| img{ | ||
| transform: rotate(0deg); | ||
| width: auto; | ||
| height: auto; | ||
| filter: invert(0.8) drop-shadow( 1px 1px 2px white); | ||
| cursor: pointer; | ||
| transition-duration: 0.5s; | ||
| } | ||
| img:hover { | ||
| filter: invert(0.5) drop-shadow( 1px 1px 5px white); | ||
| transform: scale( 1.1); | ||
| transition-duration: 0.2s; | ||
| } | ||
| img.disable { | ||
| filter: invert(0.8) drop-shadow( 1px 1px 2px white); | ||
| cursor: pointer; | ||
| transition-duration: 0.5s; | ||
| } | ||
| `], | ||
| template: ` | ||
| <img | ||
| src="assets/rewind.svg" | ||
| [ngClass]="{ | ||
| 'disable': !enablePrevious | ||
| }" | ||
| (click)="clickEvent.emit('first')" | ||
| [title]="enablePrevious ? 'Se rendre au début' : 'Vous y êtes déjà'" | ||
| alt="go to first" | ||
| /> | ||
| <img | ||
| src="assets/arrow-left.svg" | ||
| [ngClass]="{ | ||
| 'disable': !enablePrevious | ||
| }" | ||
| (click)="clickEvent.emit('previous')" | ||
| [title]="enablePrevious ? 'précédent' : 'Vous y êtes déjà'" | ||
| alt="previous" | ||
| /> | ||
| <img | ||
| *ngIf="!playing" | ||
| src="assets/play.svg" | ||
| (click)="clickEvent.emit('play')" | ||
| title="Démarrer le diaporama" | ||
| alt="play" | ||
| /> | ||
| <img | ||
| *ngIf="playing" | ||
| src="assets/pause.svg" | ||
| (click)="clickEvent.emit('pause')" | ||
| title="Mettre le diaporama en pause" | ||
| alt="pause" | ||
| /> | ||
| <img | ||
| src="assets/arrow-left.svg" | ||
| class="mirror-x" | ||
| [ngClass]="{ | ||
| 'disable': !enableNext | ||
| }" | ||
| (click)="clickEvent.emit('next')" | ||
| [title]="enableNext ? 'suivant' : 'Vous y êtes déjà'" | ||
| alt="next" | ||
| /> | ||
| <img | ||
| src="assets/rewind.svg" | ||
| class="mirror-x" | ||
| [ngClass]="{ | ||
| 'disable': !enableNext | ||
| }" | ||
| (click)="clickEvent.emit('last')" | ||
| [title]="enableNext ? 'Se rendre à la fin' : 'Vous y êtes déjà'" | ||
| alt="go to last" | ||
| /> | ||
| ` | ||
| }) | ||
| export class NavBarComponent { | ||
| @Output('onClicked') clickEvent = new EventEmitter<ButtonType>(); | ||
| @Input() playing: boolean = false; | ||
| @Input() enablePrevious: boolean = false; | ||
| @Input() enableNext: boolean = false; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export type ButtonType = 'play' | 'pause' | 'previous' | 'next' | 'first' | 'last'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.