improve profile reactiveness and action page performance

src/app/shared/swiper/swiper.page.html

@@ -4,14 +4,14 @@
   </ion-toolbar>
 </ion-header> -->
 
-<ion-content>
-  <swiper-container #swipers [slidechange]="onSlideChange()" [navigation]="navigation" autoHeight="true">
+<div>
+  <swiper-container id="C{{componentId}}" #swipers  (click)="click()" [navigation]="navigation" autoHeight="true">
     <swiper-slide *ngFor="let files of publicationList.Files let k = index">
       <div >
         <img  *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'image'" class="post-img"
           [src]="'data:image/jpg;base64,' + files.FileBase64" loading="lazy">
 
-        <video #videoElement [appVisibility]="onVisibilityChange" *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video"  controls="controls" preload="none"
+        <video #videoElements [appVisibility]="onVisibilityChange" *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video"  controls="controls" preload="none"
         playsinline webkit-playsinline="webkit-playsinline" (play)="stopvideoService.registerVideoWithEvent($event)"q>
           <source [src]="files.FileBase64" type="video/mp4">
         </video>
@@ -26,7 +26,7 @@
   </swiper-container>
 
 
-</ion-content>
+</div>
 
 <ion-footer>
   <div *ngIf="pagination && publicationList?.Files?.length > 1" class="dots-container">
@@ -38,20 +38,3 @@
     </span>
   </div>
 </ion-footer>
-
-
-<!-- <ion-footer>
-  <div *ngIf="publicationList.Files.length > 1" class="dots-container">
-    <span *ngFor="let files of publicationList.Files; let k = index" 
-      [class.dotsSwiper]="true" 
-      [class.active-dot]="swiperIndex === k"
-      [class.small-dot-after]="k === swiperIndex + 5"
-      [class.small-dot-before]="k === swiperIndex - 5"
-      [class.smaller-dot-after]="k === swiperIndex + 6"
-      [class.smaller-dot-before]="k === swiperIndex - 6"
-      [class.visibility-hiden-dot-after]="k === swiperIndex + 7"
-      [class.visibility-hiden-dot-before]="k === swiperIndex - 7"
-      (click)="goToSlide(k)">
-    </span>
-  </div>
-</ion-footer> -->

src/app/shared/swiper/swiper.page.ts

@@ -1,9 +1,7 @@
-import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, OnInit, ViewChild, OnChanges, ViewChildren, QueryList } from '@angular/core';
 import { checkFileTypeService } from 'src/app/services/checkFileType.service';
 import { StopvideoService } from 'src/app/services/stopvideo.service';
-
-
-
+import { v4 as uuidv4 } from 'uuid'
 @Component({
   selector: 'app-swiper',
   templateUrl: './swiper.page.html',
@@ -11,35 +9,45 @@ import { StopvideoService } from 'src/app/services/stopvideo.service';
 })
 export class SwiperPage implements OnInit {
 
-
   @Input() publicationList: any;
   @Input() navigation: boolean;
   @Input() pagination: boolean;
   swiperIndex: number = 0;
 
-  @ViewChild('VideoManager') VideoManager;
-  @ViewChild('videoElement') videoElements: ElementRef | undefined;
+  @ViewChildren('videoElement') videoElements: QueryList<ElementRef>;
   @ViewChild('swipers')
   swiperRef: ElementRef | undefined;
 
   showControls: boolean = false;
   previousIndex: number | undefined;
-
+  componentId = uuidv4()
 
   constructor(
     public checkFileType: checkFileTypeService,
     public stopvideoService: StopvideoService,
-  ) {
-    console.log('Income list',this.publicationList)
-  }
+  ) {}
 
   ngOnInit() {
-    
+
+    setTimeout(() => {
+      var videos:NodeListOf<HTMLVideoElement> = document.querySelectorAll(`#C${this.componentId} video`);
+
+      try {
+        // Pause each video
+        videos.forEach(function (video) {
+          video.load();
+        })
+      } catch(e) {}
+
+    }, 100)
+  }
+
+  ngOnChanges() {
+    this.onSlideChange()
   }
 
   onSlideChange() {
 
-    console.log('onchage')
     if (this.swiperRef) {
 
       const swiper = this.swiperRef.nativeElement.swiper;
@@ -52,12 +60,13 @@ export class SwiperPage implements OnInit {
         this.previousIndex = this.swiperIndex;
         this.loadVideo()
 
+      } else {
+        console.log(this.swiperIndex)
       }
-      console.log(this.swiperIndex)
+
     }
   }
 
-
   goToSlide(index: number) {
     this.swiperIndex = this.swiperRef?.nativeElement.swiper.activeIndex;
     this.swiperRef?.nativeElement.swiper.slideTo(index);
@@ -79,35 +88,45 @@ export class SwiperPage implements OnInit {
         video.pause();
       })
 
-      const video: HTMLVideoElement = this.videoElements.nativeElement;
-
-      video.pause()
-
-      /* this.videoElements.forEach(videoElement => {
+      this.videoElements.forEach(videoElement => {
         // You can access the native HTML video element using videoElement.nativeElement
-       
+        const video: HTMLVideoElement = videoElement.nativeElement;
+
+        video.pause()
         // Do something with each video element
         // console.log(video);
-      }); */
+      });
+
+
     } catch (error) {
       console.log(error)
     }
   }
 
+  click() {
+    this.onSlideChange()
+  }
   //This method does the refresh of all video(it was implement beacouse of the erro displaing the controls of the video while swipe)
   //If you can find a better solution, please remove
   loadVideo() {
-    var videos = document.querySelectorAll('video');
 
     try {
-      // Pause each video
-      videos.forEach(function (video) {
-        video.load();
-      })
 
-      const video: HTMLVideoElement = this.videoElements.nativeElement;
+      const file = this.publicationList.Files[this.swiperIndex]
+      if(this.checkFileType.checkFileType(file.FileExtension ) == 'video') {
+
+        const video = document.querySelector(`#C${this.componentId} .swiper-slide-active video`) as HTMLVideoElement
+        if(video) {
+
+          // video.load();
+          video.removeAttribute('controls');
+          setTimeout(() => {
+            video.setAttribute('controls', 'controls');
+          }, 10)
+        }
+
+      }
 
-      video.load()
     } catch (error) {
       console.log(error)
     }