@@ -81,4 +81,4 @@
- \ No newline at end of file + 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 25aed5f5a..67a64e862 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 } 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() diff --git a/src/app/services/directives/visibility.directive.spec.ts b/src/app/services/directives/visibility.directive.spec.ts new file mode 100644 index 000000000..a243e0278 --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/services/directives/visibility.directive.ts b/src/app/services/directives/visibility.directive.ts new file mode 100644 index 000000000..17e2e1823 --- /dev/null +++ b/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); + } + +} diff --git a/src/app/services/publication/publication-video-manager.service.spec.ts b/src/app/services/publication/publication-video-manager.service.spec.ts new file mode 100644 index 000000000..bb48dfaf4 --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/services/publication/publication-video-manager.service.ts b/src/app/services/publication/publication-video-manager.service.ts new file mode 100644 index 000000000..08fcd9eb6 --- /dev/null +++ b/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 + } + +} diff --git a/src/app/shared/publication/view-publications/view-publications.module.ts b/src/app/shared/publication/view-publications/view-publications.module.ts index 98fa5b813..568cb5e0a 100644 --- a/src/app/shared/publication/view-publications/view-publications.module.ts +++ b/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] }) 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 4cb6cdd14..654dc35c7 100644 --- a/src/app/shared/publication/view-publications/view-publications.page.html +++ b/src/app/shared/publication/view-publications/view-publications.page.html @@ -34,19 +34,22 @@ -
+ +

{{publicationFolderService.FolderDetails[folderId].Detail}}

+ +
- - 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 379de203a..a81ab74d8 100644 --- a/src/app/shared/publication/view-publications/view-publications.page.ts +++ b/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; diff --git a/src/index.html b/src/index.html index 9035b5085..8aec05f01 100644 --- a/src/index.html +++ b/src/index.html @@ -75,6 +75,7 @@ }, enumerable: false }); +