From e2cf79352e218f343b67770f118d64008b91e74a Mon Sep 17 00:00:00 2001
From: Peter Maquiran <peter.maquiran@equilibrium.local>
Date: Wed, 13 Dec 2023 18:19:08 +0100
Subject: [PATCH] fix

---
 .../publication-detail.page.html              |  2 +-
 .../publication-detail.page.ts                |  5 ++-
 .../view-publications.page.html               |  4 +-
 .../view-publications.page.ts                 | 37 ++++++++++++++++---
 .../directives/visibility1.directive.ts       |  2 +-
 src/app/services/stopvideo.service.ts         | 12 ++++++
 .../view-publications.page.html               |  4 +-
 .../view-publications.page.ts                 | 24 +++++++++---
 8 files changed, 71 insertions(+), 19 deletions(-)

diff --git a/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.html b/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.html
index a43f60327..2150ea06c 100644
--- a/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.html
+++ b/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.html
@@ -30,7 +30,7 @@
                 src="{{'data:image/jpg;base64,' + files.FileBase64}}">
 
               <video *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video" controls="controls" preload="metadata"
-                webkit-playsinline="webkit-playsinline">
+                webkit-playsinline="webkit-playsinline" (play)="StopvideoService.registerVideoWithEvent($event)" >
                 <source src="{{'data:video/mp4;base64,' + files.FileBase64}}" type="video/mp4">
               </video>
 
diff --git a/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.ts b/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.ts
index a91e46717..8abf39b97 100644
--- a/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.ts
+++ b/src/app/pages/publications/view-publications/publication-detail/publication-detail.page.ts
@@ -12,7 +12,7 @@ import { PermissionService } from 'src/app/services/permission.service';
 import { HttpErrorHandle } from 'src/app/services/http-error-handle.service';
 import { PublicationFolderService } from 'src/app/store/publication-folder.service';
 import { checkFileTypeService } from 'src/app/services/checkFileType.service';
-
+import { StopvideoService } from "src/app/services/stopvideo.service"
 
 
 @Component({
@@ -44,7 +44,8 @@ export class PublicationDetailPage implements OnInit {
     public p:PermissionService,
     private httpErrorHandle: HttpErrorHandle,
     public publicationFolderService: PublicationFolderService,
-    public checkFileType: checkFileTypeService
+    public checkFileType: checkFileTypeService,
+    public StopvideoService: StopvideoService
     ) {
     }
 
diff --git a/src/app/pages/publications/view-publications/view-publications.page.html b/src/app/pages/publications/view-publications/view-publications.page.html
index 3bf6e0513..5f3a68c67 100644
--- a/src/app/pages/publications/view-publications/view-publications.page.html
+++ b/src/app/pages/publications/view-publications/view-publications.page.html
@@ -51,8 +51,8 @@
                   <img  *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'image'" class="post-img"
                     [lazyLoad]="'data:image/jpg;base64,' + files.FileBase64">
 
-                  <video [appVisibility]="onVisibilityChange" *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video" controls="controls" preload="metadata"
-                    webkit-playsinline="webkit-playsinline">
+                  <video #videoElement [appVisibility]="onVisibilityChange" *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video" controls="controls" preload="metadata"
+                    webkit-playsinline="webkit-playsinline" (play)="stopvideoService.registerVideoWithEvent($event)">
                     <source src="{{'data:video/mp4;base64,' + files.FileBase64}}" type="video/mp4">
                   </video>
 
diff --git a/src/app/pages/publications/view-publications/view-publications.page.ts b/src/app/pages/publications/view-publications/view-publications.page.ts
index 9d8c647be..83ba408c3 100644
--- a/src/app/pages/publications/view-publications/view-publications.page.ts
+++ b/src/app/pages/publications/view-publications/view-publications.page.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ModalController,IonicSlides } from '@ionic/angular';
 import { Publication } from 'src/app/models/publication';
@@ -17,7 +17,7 @@ import { PublicationFolderService } from 'src/app/store/publication-folder.servi
 import { CapacitorVideoPlayer } from 'capacitor-video-player';
 import { checkFileTypeService } from 'src/app/services/checkFileType.service';
 import  { PublicationVideoManagerService } from "src/app/services/publication/publication-video-manager.service"
-
+import { StopvideoService } from "src/app/services/stopvideo.service"
 @Component({
   selector: 'app-view-publications',
   templateUrl: './view-publications.page.html',
@@ -51,6 +51,7 @@ export class ViewPublicationsPage implements OnInit {
   swiperModules = [IonicSlides];
 
   @ViewChild('VideoManager') VideoManager;
+  @ViewChildren('videoElement') videoElements: QueryList<ElementRef>;
 
   constructor(
     private modalController: ModalController,
@@ -65,7 +66,8 @@ export class ViewPublicationsPage implements OnInit {
     private storage: Storage,
     public publicationFolderService: PublicationFolderService,
     public checkFileType: checkFileTypeService,
-    private publicationVideoManagerService: PublicationVideoManagerService) {
+    private publicationVideoManagerService: PublicationVideoManagerService,
+    public stopvideoService: StopvideoService) {
 
 
       /* this.publicationVideoManagerService.setContainer(this.VideoManager.nativeElement) */
@@ -114,7 +116,7 @@ export class ViewPublicationsPage implements OnInit {
 
     })
 
-    console.log(this.publicationFolderService.publicationList[this.folderId])
+    // console.log(this.publicationFolderService.publicationList[this.folderId])
   }
 
 
@@ -122,10 +124,29 @@ export class ViewPublicationsPage implements OnInit {
 
     console.log("nice to have", e)
     if(!e) {
-      /* this.stopVideo() */
+      this.stopVideo()
     }
   }
 
+
+  stopVideo() {
+    var videos = document.querySelectorAll('video');
+
+    // Pause each video
+    videos.forEach(function (video) {
+      video.pause();
+    })
+
+
+    this.videoElements.forEach(videoElement => {
+      // You can access the native HTML video element using videoElement.nativeElement
+      const video: HTMLVideoElement = videoElement.nativeElement;
+
+      // Do something with each video element
+      // console.log(video);
+    });
+  }
+
   ngOnChanges() {
 
     if (typeof (this.folderId) == 'object') {
@@ -293,7 +314,11 @@ export class ViewPublicationsPage implements OnInit {
 
   goToPublicationDetail(DocumentId: string, ProcessId: string) {
 
-    this.router.navigate(['/home/publications/view-publications', this.folderId, DocumentId]);
+    setTimeout(() => {
+      this.stopVideo();
+      this.router.navigate(['/home/publications/view-publications', this.folderId, DocumentId]);
+    }, 500)
+
   }
 
   async viewPublicationDetail(DocumentId: string) {
diff --git a/src/app/services/directives/visibility1.directive.ts b/src/app/services/directives/visibility1.directive.ts
index ae3fb2771..5711c2ba5 100644
--- a/src/app/services/directives/visibility1.directive.ts
+++ b/src/app/services/directives/visibility1.directive.ts
@@ -24,7 +24,7 @@ export class VisibilityDirective {
       entries.forEach(entry => {
         if (entry.isIntersecting) {
           this.appVisibility(true);
-          // this.stopvideoService.registerVideo(this.elementRef.nativeElement)
+          this.stopvideoService.registerVideo(this.elementRef.nativeElement)
         } else {
           this.elementRef.nativeElement.pause()
           // Pause video when not visible
diff --git a/src/app/services/stopvideo.service.ts b/src/app/services/stopvideo.service.ts
index 1950ce903..51c3a809a 100644
--- a/src/app/services/stopvideo.service.ts
+++ b/src/app/services/stopvideo.service.ts
@@ -15,6 +15,13 @@ export class StopvideoService {
     this.router.events.forEach((event) => {
       if (event instanceof NavigationEnd && !event.url.includes('/home/publications')) {
         this.stopAndRemoveAllVideos();
+        // Get all video elements in the document
+        var videoElements = document.querySelectorAll('video');
+
+        // Pause each video element
+        videoElements.forEach(function(video) {
+          video.pause();
+        });
 
       }
     });
@@ -25,6 +32,11 @@ export class StopvideoService {
     this.video.push(tagVideo);
   }
 
+  registerVideoWithEvent(event: any) {
+    const videoElement: HTMLVideoElement = event.target as HTMLVideoElement;
+    this.video.push(videoElement);
+  }
+
   stopAndRemoveAllVideos() {
     for (let i = 0; i < this.video.length; i++) {
       const video = this.video[i];
diff --git a/src/app/shared/publication/view-publications/view-publications.page.html b/src/app/shared/publication/view-publications/view-publications.page.html
index 8bed6de4b..0438a4c8f 100644
--- a/src/app/shared/publication/view-publications/view-publications.page.html
+++ b/src/app/shared/publication/view-publications/view-publications.page.html
@@ -49,8 +49,8 @@
               <img  *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'image'" class="post-img cursor-pointer"
                 [lazyLoad]="'data:image/jpg;base64,' + files.FileBase64">
 
-              <video [appVisibility]="onVisibilityChange" #myVideo *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video" controls="controls" preload="metadata"
-                webkit-playsinline="webkit-playsinline" class="videoPlayer">
+              <video [appVisibility]="onVisibilityChange" #myVideo #videoElement *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video" controls="controls" preload="metadata"
+                webkit-playsinline="webkit-playsinline" class="videoPlayer" (play)="StopvideoService.registerVideoWithEvent($event)" >
                 <source [src]="'data:video/mp4;base64,' + files.FileBase64" type="video/mp4">
               </video>
 
diff --git a/src/app/shared/publication/view-publications/view-publications.page.ts b/src/app/shared/publication/view-publications/view-publications.page.ts
index 706467ad5..f00246e4d 100644
--- a/src/app/shared/publication/view-publications/view-publications.page.ts
+++ b/src/app/shared/publication/view-publications/view-publications.page.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ViewChildren, QueryList, ElementRef } from '@angular/core';
 import { IonicSlides, ModalController } from '@ionic/angular';
 import { Publication } from 'src/app/models/publication';
 import { PublicationFolder } from 'src/app/models/publicationfolder';
@@ -16,7 +16,7 @@ import { PublicationFolderService } from 'src/app/store/publication-folder.servi
 import { AskModalPage } from 'src/app/modals/ask-modal/ask-modal.page';
 import { checkFileTypeService } from 'src/app/services/checkFileType.service';
 import  { PublicationVideoManagerService } from "src/app/services/publication/publication-video-manager.service"
-
+import { StopvideoService } from "src/app/services/stopvideo.service"
 @Component({
   selector: 'app-view-publications',
   templateUrl: './view-publications.page.html',
@@ -44,6 +44,8 @@ export class ViewPublicationsPage implements OnInit {
   @ViewChild('myVideo') myVideo: any;
   @ViewChild('VideoManager') VideoManager;
 
+  @ViewChildren('videoElement') videoElements: QueryList<ElementRef>;
+
   public lastScrollTop = 0;
   public isHidden = false;
 
@@ -57,7 +59,8 @@ export class ViewPublicationsPage implements OnInit {
     private httpErrorHandle: HttpErrorHandle,
     public publicationFolderService: PublicationFolderService,
     public checkFileType: checkFileTypeService,
-    private publicationVideoManagerService: PublicationVideoManagerService
+    private publicationVideoManagerService: PublicationVideoManagerService,
+    public StopvideoService: StopvideoService
   ) {
 
 
@@ -114,7 +117,6 @@ export class ViewPublicationsPage implements OnInit {
     this.getPublicationDetail();
     this.getPublicationsIds();
 
-
     this.stopVideo();
 
 
@@ -336,7 +338,10 @@ export class ViewPublicationsPage implements OnInit {
 
   async viewPublicationDetail(DocumentId: string, ProcessId: string) {
 
-    this.openPublicationDetails.emit({ DocumentId, ProcessId });
+    setTimeout(()=> {
+      this.stopVideo();
+      this.openPublicationDetails.emit({ DocumentId, ProcessId });
+    }, 200)
 
   }
 
@@ -347,6 +352,15 @@ export class ViewPublicationsPage implements OnInit {
     videos.forEach(function (video) {
       video.pause();
     })
+
+
+    this.videoElements.forEach(videoElement => {
+      // You can access the native HTML video element using videoElement.nativeElement
+      const video: HTMLVideoElement = videoElement.nativeElement;
+
+      // Do something with each video element
+      console.log(video);
+    });
   }
 
   public onScroll(event): void {