Play/pause toggle

[grahamharper]

How would you go about setting up a control that toggles between play and pause rather than two separate controls on screen?

[Wildhoney]

Use the Controls directive in your template, from there you have access to the playing property where you can determine its state – simply hide/show buttons depending on that state.

JSFiddle example.

[grahamharper]

Thanks for responding so quick. I actually tried that but there is a moment after you click either button that the other is visible. I thought there might be a better way?

[Wildhoney]

That seems strange, because I don't see that behaviour in the JSFiddle which presumably uses the same technique as you're using. Could you please try and replicate this delay in the fiddle?

[farazhassan]

Exactly the same thing happens to my code.. Do mention here if any solution is found. I wanted to write earlier but then saw the JSFiddle Adam posted and stopped thinking i might have done something wrong and will recheck my own code but now, I think the issue is with not my code but the library

[grahamharper]

I'm building an app with Ionic and I was able to reproduce the problem on plunker. This might be an Ionic problem as I noticed if I use version 1.0.0-beta.5 of Ionic there is no issue. Any version since has the delay.

[Wildhoney]

@farazhassan Are you also using Ionic?

[farazhassan]

Nope. Angular with anmgular-bootstrap-ui. Thats all.

[MrViSiOn]

This is not working for me...

                      <section vi-controls>
                        <a vi-controls-play ng-hide="playing">
                            <i class="icon icon--xl icon--green icon--flat mdi mdi-play"></i>
                        </a>
                        <a vi-controls-pause ng-show="playing">
                            <i class="icon icon--xl icon--green icon--flat mdi mdi-pause"></i>
                        </a>
                    </section>

Not working