feat(cdk): Media add playbackRate input (#83)

* feat(cdk): `Media` add `playbackRate` input * chore(demo): fix binding
taiga-family · Jan 11, 2021 · 5351762 · 5351762
1 parent de7ef92
commit 5351762
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/projects/cdk/directives/media/media.directive.ts b/projects/cdk/directives/media/media.directive.ts
@@ -8,10 +8,10 @@ import {
     Input,
     Output,
 } from '@angular/core';
-import {tuiDefaultProp} from '@taiga-ui/cdk/decorators';
+import {tuiDefaultProp, tuiRequiredSetter} from '@taiga-ui/cdk/decorators';
 
-export function currentTimeAssertion(currentTime: number): boolean {
-    return isFinite(currentTime) && currentTime >= 0;
+export function nonNegativeFiniteAssertion(value: number): boolean {
+    return isFinite(value) && value >= 0;
 }
 
 export function volumeAssertion(volume: number): boolean {
@@ -28,8 +28,14 @@ export class TuiMediaDirective {
     @tuiDefaultProp(volumeAssertion)
     volume = 1;
 
+    @Input('playbackRate')
+    @tuiRequiredSetter(nonNegativeFiniteAssertion)
+    set playbackRateSetter(playbackRate: number) {
+        this.updatePlaybackRate(playbackRate);
+    }
+
     @Input()
-    @tuiDefaultProp(currentTimeAssertion)
+    @tuiRequiredSetter(nonNegativeFiniteAssertion)
     set currentTime(currentTime: number) {
         if (currentTime !== this.currentTime) {
             this.elementRef.nativeElement.currentTime = currentTime;
@@ -42,6 +48,7 @@ export class TuiMediaDirective {
             this.elementRef.nativeElement.pause();
         } else {
             this.elementRef.nativeElement.play();
+            this.updatePlaybackRate(this.playbackRate);
         }
     }
 
@@ -54,6 +61,8 @@ export class TuiMediaDirective {
     @Output()
     readonly volumeChange = new EventEmitter<number>();
 
+    private playbackRate = 1;
+
     constructor(
         @Inject(ElementRef)
         private readonly elementRef: ElementRef<HTMLMediaElement>,
@@ -73,6 +82,7 @@ export class TuiMediaDirective {
     @HostListener('play', ['false'])
     onPausedChange(paused: boolean) {
         this.pausedChange.emit(paused);
+        this.updatePlaybackRate(this.playbackRate);
     }
 
     @HostListener('volumechange')
@@ -92,4 +102,9 @@ export class TuiMediaDirective {
     changeDetectionTrigger() {
         // @bad TODO: consider if other events need to trigger CD
     }
+
+    private updatePlaybackRate(playbackRate: number) {
+        this.playbackRate = playbackRate;
+        this.elementRef.nativeElement.playbackRate = this.playbackRate;
+    }
 }
diff --git a/projects/demo/src/modules/directives/media/media.component.ts b/projects/demo/src/modules/directives/media/media.component.ts
@@ -41,6 +41,7 @@ export class ExampleTuiMediaComponent {
 
     readonly volumeVariants: readonly number[] = [1, 0.5, 0.25, 0];
 
+    playbackRate = 1;
     currentTime = 0;
     volume = this.volumeVariants[0];
     paused = true;

diff --git a/projects/demo/src/modules/directives/media/media.template.html b/projects/demo/src/modules/directives/media/media.template.html
@@ -35,8 +35,9 @@
             tuiMedia
             controls
             src="assets/media/strays.mp3"
+            [playbackRate]="playbackRate"
+            [(paused)]="paused"
             [(currentTime)]="currentTime"
-            [paused]="paused"
             [(volume)]="volume"
         ></audio>
         <tui-doc-documentation>
@@ -58,6 +59,15 @@
             >
                 Paused state
             </ng-template>
+            <ng-template
+                i18n
+                documentationPropertyName="playbackRate"
+                documentationPropertyType="number"
+                documentationPropertyMode="input"
+                [(documentationPropertyValue)]="playbackRate"
+            >
+                Playback speed
+            </ng-template>
             <ng-template
                 i18n
                 documentationPropertyName="volume"