I'm currently working on creating a button functionality similar to the voice note feature in WhatsApp. The idea is that when the user holds down the button, the voice recording starts, and upon releasing the button, any action can be performed.
While exploring the ionic2 documentation, I couldn't find a directive that specifically handles the onRelease event as required.
Fortunately, I came across a code snippet that seems to work correctly for this purpose:
@Output('long-press') onPress: EventEmitter < any > = new EventEmitter();
@Output('long-press-up') onPressUp: EventEmitter < any > = new EventEmitter();
ngOnInit() {
this.pressGesture = new Gesture(this.htmlElement);
this.pressGesture.listen();
this.pressGesture.on('press', (event) => {
this.recordVoice();
this.onPress.emit(event);
});
this.pressGesture.on('pressup', (event) => {
this.stopRecording();
this.onPressUp.emit(event);
});
}
COMPONENT
<button type="button" clear item-right (long-press)="longPressed()" (long-press-up)="longPressReleased()">
<ion-icon name="mic"></ion-icon>
</button>
However, there's an issue where holding anywhere on the screen triggers this.recordVoice(), and releasing triggers this.stopRecording(). This behavior needs to be limited to the specific button press only.
To address this concern, adjustments need to be made to the existing code. Any guidance on how to modify it to achieve the desired functionality would be greatly appreciated. Thank you.