clean create event page, stop video, event list box

src/app/pages/publications/view-publications/view-publications.module.ts

@@ -10,6 +10,7 @@ import { ViewPublicationsPage } from './view-publications.page';
 
 import { Attributes, IntersectionObserverHooks, LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS } from 'ng-lazyload-image';
 import { ShowMorePageModule } from 'src/app/shared/publication/view-publications/show-more/show-more.module'
+import { VisibilityDirective } from 'src/app/services/directives/visibility1.directive';
 export class LazyLoadImageHooks extends IntersectionObserverHooks {
 setup(attributes: Attributes) {
   attributes.offset = 10;
@@ -31,7 +32,7 @@ setup(attributes: Attributes) {
     ShowMorePageModule,
   ],
   exports: [ViewPublicationsPage],
-  declarations: [ViewPublicationsPage],
+  declarations: [ViewPublicationsPage, VisibilityDirective],
   providers: [{provide: LAZYLOAD_IMAGE_HOOKS, useClass: LazyLoadImageHooks}]
 })
 export class ViewPublicationsPageModule {}

src/app/pages/publications/view-publications/view-publications.page.html

@@ -51,13 +51,30 @@
                   <img  *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'image'" class="post-img"
                     [lazyLoad]="'data:image/jpg;base64,' + files.FileBase64">
 
-                  <video *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video" controls="controls" preload="metadata"
+                  <video [appVisibility]="onVisibilityChange" *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video" controls="controls" preload="metadata"
                     webkit-playsinline="webkit-playsinline">
                     <source src="{{'data:video/mp4;base64,' + files.FileBase64}}" type="video/mp4">
                   </video>
 
                 </div>
               </swiper-slide>
+
+              <div class="swiper-button-next"
+                style="
+                  position: absolute;
+                  background: red;
+                  top: 50%;
+                ">
+                <div>arrow-left</div>
+              </div>
+              <div class="slides-per-view"
+              style="
+                position: absolute;
+                background: red;
+                top: 50%;
+              ">
+                <div>arrow-rights</div>
+              </div>
             </swiper-container>
               <!-- <div *ngIf="publication.FileExtension == 'mp4'"
               (click)="goToPublicationDetail(publication.DocumentId, publication.ProcessId)" class="post-video">

src/app/pages/publications/view-publications/view-publications.page.scss

@@ -291,3 +291,11 @@ swiper-slide video {
   justify-content: center;
   background: black;
 }
+
+
+.swiper-container::part(button-next) {
+  display: none !important;
+  .swiper-button-next {
+    display: none !important;
+  }
+}

src/app/pages/publications/view-publications/view-publications.page.ts

@@ -68,6 +68,14 @@ export class ViewPublicationsPage implements OnInit {
     private publicationVideoManagerService: PublicationVideoManagerService) {
 
 
+      /* this.publicationVideoManagerService.setContainer(this.VideoManager.nativeElement) */
+
+
+      setTimeout(() => {
+
+        console.log(this.VideoManager.nativeElement)
+      }, 2000)
+
     this.createPublicationList()
 
     this.getFromDB();
@@ -109,6 +117,15 @@ export class ViewPublicationsPage implements OnInit {
     console.log(this.publicationFolderService.publicationList[this.folderId])
   }
 
+
+  onVisibilityChange = (e: boolean) => {
+
+    console.log("nice to have", e)
+    if(!e) {
+      /* this.stopVideo() */
+    }
+  }
+
   ngOnChanges() {
 
     if (typeof (this.folderId) == 'object') {
@@ -233,20 +250,20 @@ export class ViewPublicationsPage implements OnInit {
     const found = this.publicationIsPresent(publicationId, folderId)
 
 
-    
+
     if (!found) {
       this.publicationFolderService.publicationList[folderId].push(publicationDetails)
     } else {
 
 
       let a: any = Object.assign({},this.publicationFolderService.publicationList[folderId][findIndex])
-      let b: any = Object.assign({}, publicationDetails) 
+      let b: any = Object.assign({}, publicationDetails)
 
       a.Files = a.Files.length
       b.Files = b.Files.length
 
       if(JSON.stringify(a) !=  JSON.stringify(b)) {
-        
+
         // console.log({a, b})
         this.publicationFolderService.publicationList[folderId][findIndex] = publicationDetails
       } else {