chore: pause video when pauseAnimations true

examples-standalone/coffee-warehouse/src/app/components/info/info.component.html

@@ -7,7 +7,7 @@ <h2>Build Professional-Grade Angular UI</h2>
                 Kendo UI for Angular delivers Kendo UI components natively developed from the ground up and intended for the Angular framework.</p>
 
         <div class="section-2">
-            <video width="1040" controls autoplay>
+            <video id="video" width="1040" controls autoplay>
                 <source src="./../assets/Progress_Who_We_Are.mp4" type="video/mp4">
             </video>
 

examples-standalone/coffee-warehouse/src/app/components/info/info.component.ts

@@ -1,15 +1,36 @@
-import { Component } from '@angular/core';
+import { AfterViewInit, Component } from '@angular/core';
 import { MessageService } from '@progress/kendo-angular-l10n';
 import { CustomMessagesService } from '../../services/custom-messages.service';
+import { SettingsService } from '../../settings.service';
+import { isPresent } from '@progress/kendo-angular-common';
 
 @Component({
     selector: 'app-info-component',
     templateUrl: './info.component.html'
 })
-export class InfoComponent {
+export class InfoComponent implements AfterViewInit {
     public customMsgService: CustomMessagesService;
+    public set pauseAnimation(value: boolean) {
+        this._pauseAnimation = value;
 
-    constructor(public msgService: MessageService) {
+        if (!isPresent(this.videoElement)) { return; }
+        value ? this.videoElement.pause() : this.videoElement.play();
+    }
+
+    public ngAfterViewInit(): void {
+        this.videoElement = document.getElementById('video') as HTMLVideoElement;
+    }
+
+    private _pauseAnimation = false;
+    private videoElement: HTMLVideoElement;
+
+    constructor(public msgService: MessageService, private settingsService: SettingsService) {
         this.customMsgService = this.msgService as CustomMessagesService;
+
+        this.settingsService.changes.subscribe(settings => {
+            if (settings.pauseAnimations !== this._pauseAnimation) {
+                this.pauseAnimation = settings.pauseAnimations;
+            }
+        });
     }
 }