peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-18 20:47:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
Peter Maquiran
2023-12-13 18:19:08 +01:00
parent 56c5416aac
commit e2cf79352e
8 changed files with 71 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/publications/view-publications/publication-detail/publication-detail.page.html
+1 -1
View File
@@ -30,7 +30,7 @@
src="{{'data:image/jpg;base64,' + files.FileBase64}}">
<video *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video" controls="controls" preload="metadata"
webkit-playsinline="webkit-playsinline">
webkit-playsinline="webkit-playsinline" (play)="StopvideoService.registerVideoWithEvent($event)" >
<source src="{{'data:video/mp4;base64,' + files.FileBase64}}" type="video/mp4">
</video>
src/app/pages/publications/view-publications/publication-detail/publication-detail.page.ts
+3 -2
View File
@@ -12,7 +12,7 @@ import { PermissionService } from 'src/app/services/permission.service';
import { HttpErrorHandle } from 'src/app/services/http-error-handle.service';
import { PublicationFolderService } from 'src/app/store/publication-folder.service';
import { checkFileTypeService } from 'src/app/services/checkFileType.service';
import { StopvideoService } from "src/app/services/stopvideo.service"
@Component({
@@ -44,7 +44,8 @@ export class PublicationDetailPage implements OnInit {
public p:PermissionService,
private httpErrorHandle: HttpErrorHandle,
public publicationFolderService: PublicationFolderService,
public checkFileType: checkFileTypeService
public checkFileType: checkFileTypeService,
public StopvideoService: StopvideoService
) {
}
src/app/pages/publications/view-publications/view-publications.page.html
+2 -2
View File
@@ -51,8 +51,8 @@
<img *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'image'" class="post-img"
[lazyLoad]="'data:image/jpg;base64,' + files.FileBase64">
<video [appVisibility]="onVisibilityChange" *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video" controls="controls" preload="metadata"
webkit-playsinline="webkit-playsinline">
<video #videoElement [appVisibility]="onVisibilityChange" *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video" controls="controls" preload="metadata"
webkit-playsinline="webkit-playsinline" (play)="stopvideoService.registerVideoWithEvent($event)">
<source src="{{'data:video/mp4;base64,' + files.FileBase64}}" type="video/mp4">
</video>
src/app/pages/publications/view-publications/view-publications.page.ts
+31 -6
View File
@@ -1,4 +1,4 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, ElementRef, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ModalController,IonicSlides } from '@ionic/angular';
import { Publication } from 'src/app/models/publication';
@@ -17,7 +17,7 @@ import { PublicationFolderService } from 'src/app/store/publication-folder.servi
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"
import { StopvideoService } from "src/app/services/stopvideo.service"
@Component({
selector: 'app-view-publications',
templateUrl: './view-publications.page.html',
@@ -51,6 +51,7 @@ export class ViewPublicationsPage implements OnInit {
swiperModules = [IonicSlides];
@ViewChild('VideoManager') VideoManager;
@ViewChildren('videoElement') videoElements: QueryList<ElementRef>;
constructor(
private modalController: ModalController,
@@ -65,7 +66,8 @@ export class ViewPublicationsPage implements OnInit {
private storage: Storage,
public publicationFolderService: PublicationFolderService,
public checkFileType: checkFileTypeService,
private publicationVideoManagerService: PublicationVideoManagerService) {
private publicationVideoManagerService: PublicationVideoManagerService,
public stopvideoService: StopvideoService) {
/* this.publicationVideoManagerService.setContainer(this.VideoManager.nativeElement) */
@@ -114,7 +116,7 @@ export class ViewPublicationsPage implements OnInit {
})
console.log(this.publicationFolderService.publicationList[this.folderId])
// console.log(this.publicationFolderService.publicationList[this.folderId])
}
@@ -122,10 +124,29 @@ export class ViewPublicationsPage implements OnInit {
console.log("nice to have", e)
if(!e) {
/* this.stopVideo() */
this.stopVideo()
}
}
stopVideo() {
var videos = document.querySelectorAll('video');
// Pause each video
videos.forEach(function (video) {
video.pause();
})
this.videoElements.forEach(videoElement => {
// You can access the native HTML video element using videoElement.nativeElement
const video: HTMLVideoElement = videoElement.nativeElement;
// Do something with each video element
// console.log(video);
});
}
ngOnChanges() {
if (typeof (this.folderId) == 'object') {
@@ -293,7 +314,11 @@ export class ViewPublicationsPage implements OnInit {
goToPublicationDetail(DocumentId: string, ProcessId: string) {
this.router.navigate(['/home/publications/view-publications', this.folderId, DocumentId]);
setTimeout(() => {
this.stopVideo();
this.router.navigate(['/home/publications/view-publications', this.folderId, DocumentId]);
}, 500)
}
async viewPublicationDetail(DocumentId: string) {
src/app/services/directives/visibility1.directive.ts
+1 -1
View File
@@ -24,7 +24,7 @@ export class VisibilityDirective {
entries.forEach(entry => {
if (entry.isIntersecting) {
this.appVisibility(true);
// this.stopvideoService.registerVideo(this.elementRef.nativeElement)
this.stopvideoService.registerVideo(this.elementRef.nativeElement)
} else {
this.elementRef.nativeElement.pause()
// Pause video when not visible
src/app/services/stopvideo.service.ts
+12
View File
@@ -15,6 +15,13 @@ export class StopvideoService {
this.router.events.forEach((event) => {
if (event instanceof NavigationEnd && !event.url.includes('/home/publications')) {
this.stopAndRemoveAllVideos();
// Get all video elements in the document
var videoElements = document.querySelectorAll('video');
// Pause each video element
videoElements.forEach(function(video) {
video.pause();
});
}
});
@@ -25,6 +32,11 @@ export class StopvideoService {
this.video.push(tagVideo);
}
registerVideoWithEvent(event: any) {
const videoElement: HTMLVideoElement = event.target as HTMLVideoElement;
this.video.push(videoElement);
}
stopAndRemoveAllVideos() {
for (let i = 0; i < this.video.length; i++) {
const video = this.video[i];
src/app/shared/publication/view-publications/view-publications.page.html
+2 -2
View File
@@ -49,8 +49,8 @@
<img *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'image'" class="post-img cursor-pointer"
[lazyLoad]="'data:image/jpg;base64,' + files.FileBase64">
<video [appVisibility]="onVisibilityChange" #myVideo *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video" controls="controls" preload="metadata"
webkit-playsinline="webkit-playsinline" class="videoPlayer">
<video [appVisibility]="onVisibilityChange" #myVideo #videoElement *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video" controls="controls" preload="metadata"
webkit-playsinline="webkit-playsinline" class="videoPlayer" (play)="StopvideoService.registerVideoWithEvent($event)" >
<source [src]="'data:video/mp4;base64,' + files.FileBase64" type="video/mp4">
</video>
src/app/shared/publication/view-publications/view-publications.page.ts
+19 -5
View File
@@ -1,4 +1,4 @@
import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ViewChildren, QueryList, ElementRef } from '@angular/core';
import { IonicSlides, ModalController } from '@ionic/angular';
import { Publication } from 'src/app/models/publication';
import { PublicationFolder } from 'src/app/models/publicationfolder';
@@ -16,7 +16,7 @@ import { PublicationFolderService } from 'src/app/store/publication-folder.servi
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"
import { StopvideoService } from "src/app/services/stopvideo.service"
@Component({
selector: 'app-view-publications',
templateUrl: './view-publications.page.html',
@@ -44,6 +44,8 @@ export class ViewPublicationsPage implements OnInit {
@ViewChild('myVideo') myVideo: any;
@ViewChild('VideoManager') VideoManager;
@ViewChildren('videoElement') videoElements: QueryList<ElementRef>;
public lastScrollTop = 0;
public isHidden = false;
@@ -57,7 +59,8 @@ export class ViewPublicationsPage implements OnInit {
private httpErrorHandle: HttpErrorHandle,
public publicationFolderService: PublicationFolderService,
public checkFileType: checkFileTypeService,
private publicationVideoManagerService: PublicationVideoManagerService
private publicationVideoManagerService: PublicationVideoManagerService,
public StopvideoService: StopvideoService
) {
@@ -114,7 +117,6 @@ export class ViewPublicationsPage implements OnInit {
this.getPublicationDetail();
this.getPublicationsIds();
this.stopVideo();
@@ -336,7 +338,10 @@ export class ViewPublicationsPage implements OnInit {
async viewPublicationDetail(DocumentId: string, ProcessId: string) {
this.openPublicationDetails.emit({ DocumentId, ProcessId });
setTimeout(()=> {
this.stopVideo();
this.openPublicationDetails.emit({ DocumentId, ProcessId });
}, 200)
}
@@ -347,6 +352,15 @@ export class ViewPublicationsPage implements OnInit {
videos.forEach(function (video) {
video.pause();
})
this.videoElements.forEach(videoElement => {
// You can access the native HTML video element using videoElement.nativeElement
const video: HTMLVideoElement = videoElement.nativeElement;
// Do something with each video element
console.log(video);
});
}
public onScroll(event): void {