Media Plugin - onStatusUpdate callback function usage?

Ionic Framework ionic-v3
1

I am using this plugin: https://ionicframework.com/docs/native/media/

According to the docs, I can provide a function when creating a new mediaObject that will trigger when there’s a status change; the function given in the example is a simple log function:

const onStatusUpdate = (status) => console.log(status);

How can I actually take that status change event and, say, send it elsewhere so I can, for example, change a button from “playing” to “stopped”?

2

To clarify and as we already spoke about this in Slack: The onStatusUpdate function actually is called like it should and status changes are output on the console right now, correct?

So your question is more “How can I e.g. change a button when this triggers?”

3

Change a button or anything of the sort, yes.

4

Ok.

To be honest, I have no idea how this const line actually works, JS is strange these days. @rapropos or @LoLStats maybe?

But have a look at this: http://ionicframework.com/docs/api/util/Events/ I think you could just replace the console.log with a events.publish call and then do the UI stuff in a subsribe.

5

In my opinion, you have to create/trigger an event.

You can watch this simple tutorial: https://www.youtube.com/watch?v=PvqLUFWjR6U
or read the Ionic docs http://ionicframework.com/docs/api/util/Events/

The example in the doc should already work for you!

6

Here’s what I did:

Service that handles all the audio bits:


    import { Events } from 'ionic-angular';

    declare var cordova: any;//necessary for file handling

    @Injectable()
    export class AudioService {
        constructor(
            public eventCtrl: Events
        ){
            ...
        }

        onStatusUpdate(status){
            this.eventCtrl.publish('audio:stopped',status);
            console.log("event thrown");
        };
    }

And on the page that receives the data:

    import { Events } from 'ionic-angular';

    @Injectable()
    export class AudioPage {
        constructor(
            public eventCtrl: Events
        ){
            ...
            this.eventCtrl.subscribe('audio:stopped', status => {
                console.log("event catch");
                if(status==3 || status==4){
                    this.pauseAll();
                }
            });
        }
    }

But I’m getting this error:

typeError: Cannot read property 'publish' of undefined

7

To clear it up:

If I call the onStatusUpdate function ( which calls the publish function ) it’s fine.

If I supply it to media.create as a callback function on status change, then it gives me a type error; seems like it loses context or some such.

8

I guess that’s one way of putting it. I never pass object methods as callbacks: only static ones or lexically-scoped closures.

constructor(public events: Events, media: Media) {
  let sclistener = (status) => {
    this.events.publish('audio:stopped', status);
    console.log("event thrown");
  };
  media.create('path/to/file.mp3', sclistener).then();
}

@Sujan: FMTEYEWTK about this entire topic of execution context and fat arrow functions.

1 Like
9

it worked for me !!

ionic cordova plugin add cordova-plugin-media@5.0.0