ionic resume pause event prevent from fire on file

Question

I am developing a chat app inside I am using on pause and on resume event.

document.addEventListener('pause',onpause, false);

document.addEventListener('resume' , onresume,false);

This event works perfectly when I open the app and press home button to an Android phone these events are perfect. But my problem is that in chat app I am sending file attachments from the gallery when I select the browse button the phone image gallery, and same time pause event is fire. while I am on image gallery at a not selecting any image same time when I click on the home button the same event is not firing. So how I can prevent the pause event while selecting the file from the gallery.

Is there any other way to do this in ionic v1? Or how I can fire on pause and on resume event for the same.

Answer 1

I'm not sure if you're using Ionic 1 or 2, but for both versions you have the lifecycle events.

Here are the ones for Ionic 2 (scroll down to "Lifecycle events") https://ionicframework.com/docs/api/navigation/NavController/

Here are the ones for Ionic 1 https://forum.ionicframework.com/t/order-of-lifecycle-events/28251/2

Answer 2

You can remove the pause event before you open the gallery and reattach the event on the gallery's callback.

document.removeEventListener("pause", myFunction);

Answer 3

I wrote a small Service to solve that problem:

import {Injectable} from '@angular/core';
import {Subject} from "rxjs/Subject";

@Injectable()
export class EventService {
    protected resumeHalted = false;
    protected resumeSubject = new Subject<any>();

    protected resumeListener = () => {
        if (this.resumeHalted) {
            return;
        }
        this.resumeSubject.next();
    };

    constructor() {
        document.addEventListener('resume', this.resumeListener);
    }

    haltResume() {
        this.resumeHalted = true;
    }

    continueResume() {
        this.resumeHalted = false;
    }

    resume() {
        return this.resumeSubject;
    }
}

The gallery call is also wrapped in a service. Every time I call it, I "halt" the event and "continue" it after the user interaction finishes:

getPicture(options: CameraOptions) {
    let subject = new Subject<any>();

    this.eventService.haltResume();
    this.camera.getPicture(options).then((path) => {
        // ...
        subject.next();
        subject.complete();
        this.eventService.continueResume();
    }, () => {
        this.eventService.continueResume();
    });

    return subject.asObservable();
}

The last step: Instead of listening for the resume event, I subscribe to the resume Oberservable:

        this.eventService.resume().subscribe(() => {
            this.statusBar.hide();
        });