Merge branch 'feature/shared-content' of https://bitbucket.org/equilibriumito/gabinete-digital-fo into feature/shared-content

src/app/app.module.ts

@@ -91,6 +91,7 @@ import '@teamhive/capacitor-video-recorder';
 import { tokenInterceptor } from './interceptors/token.interceptors';
 
 import { InputFilterDirective } from './services/directives/input-filter.directive';
+import { VisibilityDirective } from './services/directives/visibility.directive';
 
 // import { ServiceWorkerModule } from '@angular/service-worker';
 // import { AngularFireModule } from '@angular/fire';

src/app/home/home.page.ts

@@ -1,7 +1,7 @@
 import { Component, NgZone, OnInit } from '@angular/core';
 import { Event } from '../models/event.model';
 import { NotificationsService } from '../services/notifications.service';
-import { AlertController, ModalController, NavParams, Platform } from '@ionic/angular';
+import { AlertController, ModalController, Platform } from '@ionic/angular';
 import { Router } from '@angular/router';
 import { ToDayEventStorage } from '../store/to-day-event-storage.service';
 import { TotalDocumentStore } from '../store/total-document.service';
@@ -27,7 +27,7 @@ import { SendIntent } from "send-intent";
 import { Plugins } from '@capacitor/core';
 import { NewActionPage } from '../pages/publications/new-action/new-action.page';
 import { PublicationsPage } from '../pages/publications/publications.page';
-import { fetchData } from 'plugins/Echo';
+// import { fetchData } from 'plugins/Echo';
 import { Encoding, Filesystem, FilesystemDirectory } from '@capacitor/filesystem';
 import { sendIntent } from 'src/app/services/shareIntent'
 

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

@@ -37,14 +37,14 @@
     </ion-refresher-content>
   </ion-refresher>
   <div class="main-container background-white height-100 overflow-y-auto viewport-font-size">
-    <ion-content *ngIf="publicationFolderService.FolderDetails[folderId]">
+    <ion-content *ngIf="publicationFolderService.FolderDetails[folderId]" #VideoManager >
 
       <p class="px-20 item-content-detail font-14-em">{{publicationFolderService.FolderDetails[folderId].Detail}}</p>
 
       <ion-card *ngFor="let publication of publicationFolderService.publicationList[folderId] let i = index">
         <ion-card-content>
-          
-          
+
+
               <swiper-container [modules]="swiperModules" [pagination]="{clickable: true, dynamicBullets: true }">
               <swiper-slide *ngFor="let files of publication.Files let k = index">
                 <div (click)="goToPublicationDetail(publication.DocumentId, publication.ProcessId)">
@@ -61,9 +61,9 @@
             </swiper-container>
               <!-- <div *ngIf="publication.FileExtension == 'mp4'"
               (click)="goToPublicationDetail(publication.DocumentId, publication.ProcessId)" class="post-video">
-              
+
             </div> -->
-          
+
           <div class="post-content">
             <div class="post-title-time">
               <div class="post-title font-15-em">
@@ -81,4 +81,4 @@
     </ion-content>
 
   </div>
-</ion-content>
+</ion-content>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ModalController,IonicSlides } from '@ionic/angular';
 import { Publication } from 'src/app/models/publication';
@@ -16,7 +16,7 @@ import { Storage } from '@ionic/storage';
 import { PublicationFolderService } from 'src/app/store/publication-folder.service';
 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"
 
 @Component({
   selector: 'app-view-publications',
@@ -50,6 +50,8 @@ export class ViewPublicationsPage implements OnInit {
   };
   swiperModules = [IonicSlides];
 
+  @ViewChild('VideoManager') VideoManager;
+
   constructor(
     private modalController: ModalController,
     private publications: PublicationsService,
@@ -62,7 +64,11 @@ export class ViewPublicationsPage implements OnInit {
     private httpErroHandle: HttpErrorHandle,
     private storage: Storage,
     public publicationFolderService: PublicationFolderService,
-    public checkFileType: checkFileTypeService) {
+    public checkFileType: checkFileTypeService,
+    private publicationVideoManagerService: PublicationVideoManagerService) {
+
+
+      this.publicationVideoManagerService.setContainer(this.VideoManager.nativeElement)
 
     this.createPublicationList()
 
@@ -72,7 +78,7 @@ export class ViewPublicationsPage implements OnInit {
 
       if (params["params"]) {
         this.folderId = params["params"].folderId;
-        // 
+        //
       }
 
       window['app-view-publications-page-doRefresh'] = this.doRefresh
@@ -80,10 +86,10 @@ export class ViewPublicationsPage implements OnInit {
   }
 
   ngOnInit() {
-    
+
     this.videoplayer = CapacitorVideoPlayer;
     if (typeof (this.folderId) == 'object') {
-      this.folderId = this.folderId['ProcessId']
+      this.folderId = (this.folderId as any)['ProcessId']
     }
 
     this.createPublicationList()
@@ -108,7 +114,7 @@ export class ViewPublicationsPage implements OnInit {
   ngOnChanges() {
 
     if (typeof (this.folderId) == 'object') {
-      this.folderId = this.folderId['ProcessId']
+      this.folderId = (this.folderId as any )['ProcessId']
     }
 
     this.createPublicationList()

src/app/services/directives/visibility.directive.spec.ts

@@ -0,0 +1,8 @@
+import { VisibilityDirective } from './visibility.directive';
+
+describe('VisibilityDirective', () => {
+  it('should create an instance', () => {
+    const directive = new VisibilityDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/services/directives/visibility.directive.ts

@@ -0,0 +1,33 @@
+import { Directive, ElementRef, Input } from '@angular/core';
+
+@Directive({
+  selector: '[appVisibility]'
+})
+export class VisibilityDirective {
+
+  intersectionObserver: IntersectionObserver;
+  @Input() appVisibility: (arg: any) => void;
+
+  constructor(private elementRef: ElementRef) {
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.5 // Adjust as needed
+    };
+
+    this.intersectionObserver = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          this.appVisibility(true);
+        } else {
+          this.elementRef.nativeElement.pause()
+          // Pause video when not visible
+          this.appVisibility(false); // You can implement pause logic here
+        }
+      });
+    }, options);
+
+    this.intersectionObserver.observe(this.elementRef.nativeElement);
+  }
+
+}

src/app/services/publication/publication-video-manager.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PublicationVideoManagerService } from './publication-video-manager.service';
+
+describe('PublicationVideoManagerService', () => {
+  let service: PublicationVideoManagerService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PublicationVideoManagerService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/publication/publication-video-manager.service.ts

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PublicationVideoManagerService {
+
+  container: HTMLDivElement
+  scrollLimit: number = 0
+  selectedVideo: SelectedPublication
+
+  constructor() {}
+
+  setSelectedVideo(selectedVideo: SelectedPublication) {
+    this.selectedVideo = selectedVideo
+  }
+
+  setContainer(element: HTMLDivElement) {
+    this.container = element
+
+    console.log(this.container, "container")
+  }
+
+}
+
+
+class SelectedPublication {
+  position: number
+  video: HTMLVideoElement
+  constructor({position, video}) {
+    this.position = position
+    this.video = video
+  }
+
+}

src/app/shared/publication/view-publications/view-publications.module.ts

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

src/app/shared/publication/view-publications/view-publications.page.html

@@ -34,19 +34,22 @@
     <ion-refresher-content>
     </ion-refresher-content>
   </ion-refresher>
-  <div class="main-container px-20" *ngIf="publicationFolderService.FolderDetails[folderId]">
+
+  <div class="main-container px-20" *ngIf="publicationFolderService.FolderDetails[folderId]" class="VideoManager" #VideoManager>
     <p class="item-content-detail">{{publicationFolderService.FolderDetails[folderId].Detail}}</p>
 
+
+  
     <ion-card *ngFor="let publication of publicationFolderService.publicationList[folderId] let i = index">
       <ion-card-content>
 
         <swiper-container [modules]="swiperModules" [speed]=400 navigation="true" [pagination]="{clickable: true, dynamicBullets: true }">
           <swiper-slide *ngFor="let files of publication.Files let k = index">
             <div (click)="viewPublicationDetail(publication.DocumentId, publication.ProcessId)">
-              <img  *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'image'" class="post-img cursor-pointer" 
+              <img  *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'image'" class="post-img cursor-pointer"
                 [lazyLoad]="'data:image/jpg;base64,' + files.FileBase64">
 
-              <video #myVideo *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video" controls="controls" preload="metadata"
+              <video [appVisibility]="onVisibilityChange" #myVideo *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video" controls="controls" preload="metadata"
                 webkit-playsinline="webkit-playsinline" class="videoPlayer">
                 <source [src]="'data:video/mp4;base64,' + files.FileBase64" type="video/mp4">
               </video>

src/app/shared/publication/view-publications/view-publications.page.ts

@@ -15,6 +15,7 @@ import { HttpErrorHandle } from 'src/app/services/http-error-handle.service';
 import { PublicationFolderService } from 'src/app/store/publication-folder.service';
 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"
 
 @Component({
   selector: 'app-view-publications',
@@ -41,6 +42,8 @@ export class ViewPublicationsPage implements OnInit {
 
   swiperModules = [IonicSlides];
   @ViewChild('myVideo') myVideo: any;
+  @ViewChild('VideoManager') VideoManager;
+
   public lastScrollTop = 0;
   public isHidden = false;
 
@@ -53,11 +56,28 @@ export class ViewPublicationsPage implements OnInit {
     public p: PermissionService,
     private httpErrorHandle: HttpErrorHandle,
     public publicationFolderService: PublicationFolderService,
-    public checkFileType: checkFileTypeService
+    public checkFileType: checkFileTypeService,
+    private publicationVideoManagerService: PublicationVideoManagerService
   ) {
+
+    setTimeout(()=> {
+      // console.log("this.VideoManager", this.VideoManager, document.querySelector('.VideoManager'))
+      this.publicationVideoManagerService.setContainer(this.VideoManager.nativeElement)
+    }, 2000)
+
+    // this.publicationVideoManagerService.setContainer(this.VideoManager.nativeElement)
     this.createPublicationList()
+
   }
 
+
+  onVisibilityChange = (e: boolean) => {
+
+    console.log("nice to have", e)
+    if(!e) {
+      this.stopVideo()
+    }
+  }
   ngOnInit() {
     if (typeof (this.folderId) == 'object') {
       this.folderId = this.folderId['ProcessId']
@@ -92,6 +112,9 @@ export class ViewPublicationsPage implements OnInit {
     this.getPublicationsIds();
 
 
+    this.stopVideo();
+
+
   }
 
 
@@ -298,15 +321,19 @@ export class ViewPublicationsPage implements OnInit {
   }
 
   stopVideo() {
-    this.myVideo.nativeElement.pause();
-    this.myVideo.nativeElement.currentTime = 0;
+    var videos = document.querySelectorAll('video');
+
+    // Pause each video
+    videos.forEach(function (video) {
+      video.pause();
+    })
   }
 
   public onScroll(event): void {
     if(this.lastScrollTop < event.detail.scrollTop) {
-      console.log("scrolling down")
+      // console.log("scrolling down")
   } else {
-      console.log("scrolling up")
+      // console.log("scrolling up")
   }
 
   this.lastScrollTop = event.detail.scrollTop;

src/index.html

@@ -75,6 +75,7 @@
         },
         enumerable: false
     });
+
   </script>
 </head>