solved erro of displaying video controls on publications

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

@@ -5,16 +5,20 @@
 </ion-header> -->
 
 <ion-content>
-  <swiper-container #swipers [slidechange]="onSlideChange()">
+  <swiper-container #swipers [slidechange]="onSlideChange()" >
     <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">
+          [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"
-        playsinline webkit-playsinline="webkit-playsinline" (play)="stopvideoService.registerVideoWithEvent($event)">
-          <source [src]="files.FileBase64" type="video/mp4" >
+        <video #videoElement [appVisibility]="onVisibilityChange" *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video"  controls="controls" preload="none"
+        playsinline webkit-playsinline="webkit-playsinline" (play)="stopvideoService.registerVideoWithEvent($event)" (click)="playVideo()">
+          <source [src]="files.FileBase64" type="video/mp4">
         </video>
+
+       <!--  <button class="play-button" *ngIf="!videoPlaying && checkFileType.checkFileType(files.FileExtension ) == 'video'">
+          ▶
+        </button> -->
   
       </div>
     </swiper-slide>

src/app/shared/swiper/swiper.page.scss

@@ -154,6 +154,8 @@ ion-toolbar {
   display: flex;
   justify-content: center;
   background: black;
+  position: relative;
+  
 }
 video {
   max-width: -webkit-fill-available;
@@ -275,7 +277,6 @@ swiper-slide img {
   background: black;
 }
 
-
 swiper-slide video {
   width: 100%;
   height: 100%;
@@ -292,8 +293,15 @@ swiper-slide video {
   display: flex;
   justify-content: center;
   background: black;
+  text-align: end;
 }
 
+.swiper-slide-active {
+  width: 100%;
+  text-align: center;
+  align-items: center;
+  justify-items: center;
+}
 
 .swiper-container::part(button-next) {
   display: none !important;
@@ -323,3 +331,42 @@ swiper-slide video {
   display: inline-block; /* Display dots in a row */
   margin-right: 5px;
 }
+
+.play-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+video::-webkit-media-controls-enclosure {
+  /* width:100%;
+  display:flex; */
+}
+
+video::-webkit-media-controls-panel {
+  /* width: 100%;
+  align-items: center;
+  text-align: center; */
+}
+
+.hide-controls::-webkit-media-controls-panel {
+  /* display: none; */
+}
+
+.play-button {
+  width: 69px;
+  height: 69px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  background-color: rgba(243, 241, 241, 0.5);
+  color: rgb(4, 4, 4);
+  border: none;
+  padding: 10px 20px;
+  cursor: pointer;
+  border-radius: 100px;
+  /* Add additional styles for your custom play button */
+}

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

@@ -2,6 +2,8 @@ import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { checkFileTypeService } from 'src/app/services/checkFileType.service';
 import { StopvideoService } from 'src/app/services/stopvideo.service';
 
+
+
 @Component({
   selector: 'app-swiper',
   templateUrl: './swiper.page.html',
@@ -18,23 +20,44 @@ export class SwiperPage implements OnInit {
   @ViewChild('swipers')
   swiperRef: ElementRef | undefined;
 
+  showControls: boolean = false;
+  previousIndex: number | undefined;
+
 
   constructor(
     public checkFileType: checkFileTypeService,
     public stopvideoService: StopvideoService,
   ) {
     console.log('swieper', this.publicationList)
-   }
+  }
 
   ngOnInit() {
     console.log('swieper', this.publicationList)
+
   }
 
+
   onSlideChange() {
-    this.swiperIndex = this.swiperRef?.nativeElement.swiper.activeIndex;
-    console.log(this.swiperIndex)
+
+    console.log('onchage')
+    if (this.swiperRef) {
+
+      const swiper = this.swiperRef.nativeElement.swiper;
+      this.swiperIndex = swiper.activeIndex;
+
+      // Check if the currentIndex is different from the previousIndex
+      if (this.swiperIndex !== this.previousIndex) {
+        console.log('Active index changed. New index:', this.swiperIndex);
+        // Update the previousIndex with the currentIndex
+        this.previousIndex = this.swiperIndex;
+        this.loadVideo()
+
+      }
+      console.log(this.swiperIndex)
+    }
   }
 
+
   goToSlide(index: number) {
     this.swiperIndex = this.swiperRef?.nativeElement.swiper.activeIndex;
     this.swiperRef?.nativeElement.swiper.slideTo(index);
@@ -71,4 +94,25 @@ export class SwiperPage implements OnInit {
     }
   }
 
+  //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;
+
+      video.load()
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
 }
+
+