<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> 
<base href="https://wiki.asterisk.org/wiki" /> 
<title>Message Title</title>  
<style type="text/css">@media only screen and (max-device-width: 480px) {.mobile-only {
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        line-height: normal !important;
        font-size: inherit !important;
        mso-hide: all;
}

.desktop-only {
        display: none !important;
}

/* iPhone 3GS fix for unwanted 20px right margin */
body { min-width: 100% !important; padding: 0; margin: 0; }

#center-content-table { max-width: none; !important; }
#header-pattern-container { padding: 10px 10px 10px 10px !important; line-height: 20px !important; }
#header-avatar-image-container { padding-right: 8px !important; }
#email-content-container { padding: 0 !important; }
.mobile-expand { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; padding-left: 26px !important;}
.mobile-resize-text { font-size: 16px !important; line-height: 22px !important; }
#page-title-pattern-header { font-size: 20px !important; line-height: 28px !important; }
#page-title-pattern-icon-image-container-cell { padding-top: 7px !important; }
#inline-user-pattern { display: block !important; }
#inline-user-pattern-avatar { padding-top: 3px !important; }
.contextual-area-pattern { border-bottom: 1px solid #ccc !important; padding: 15px 10px 0 10px !important;}
.users-involved-pattern-column-table { width: 100% !important;  }
.users-involved-pattern-avatar-table-cell { padding: 3px 5px 5px 0 !important; }
.users-involved-pattern-column-container { padding-right: 0 !important; }
.contextual-excerpt-pattern, #users-involved-pattern { border: 0 !important; }

/** Aui Typography upsized for mobile **/
#content-excerpt-pattern-container, #contextual-excerpt-pattern-text-container { font-size: 16px !important; line-height: 22px !important; }
#content-excerpt-pattern-container h1, #contextual-excerpt-pattern-text-container h1 { font-size: 24px !important; line-height: 28px !important; }
#content-excerpt-pattern-container h2, #contextual-excerpt-pattern-text-container h2 { font-size: 20px !important; line-height: 28px !important; }
#content-excerpt-pattern-container h3, #contextual-excerpt-pattern-text-container h3 { font-size: 18px !important; line-height: 24px !important; }
#content-excerpt-pattern-container h4, #contextual-excerpt-pattern-text-container h4 { font-size: 16px !important; line-height: 22px !important; }
#content-excerpt-pattern-container h5, #contextual-excerpt-pattern-text-container h5 { font-size: 14px !important; line-height: 20px !important; }
#content-excerpt-pattern-container h6, #contextual-excerpt-pattern-text-container h6 { font-size: 14px !important; line-height: 20px !important; }
.user-mention { line-height: 18px !important; }
/** Aui Typography end **/

/* Show appropriate footer logo on mobile, display links vertically */
#footer-pattern { padding: 15px 10px !important; }
#footer-pattern-logo-desktop-container { padding: 0 !important; }
#footer-pattern-logo-desktop { width: 0 !important; height: 0 !important; }
#footer-pattern-logo-mobile {
    padding-top: 10px !important;
    width: 30px !important;
    height: 27px !important;
    display: inline !important;
}
#footer-pattern-text {
    display: block !important;
}
#footer-pattern-links-container { line-height: 0 !important;}
.footer-pattern-links.mobile-resize-text,
.footer-pattern-links.mobile-resize-text,
#footer-pattern-text.mobile-resize-text,
#footer-pattern-links-container.no-footer-links {
    font-size: 14px !important;
    line-height: 20px !important;
}
.footer-link { display: block !important; }
#footer-pattern-links-container table { display: inline-block !important; float: none !important; }
#footer-pattern-links-container, #footer-pattern-text { text-align: center !important; }
#footer-pattern-links { padding-bottom: 5px !important; }

/** Team Calendar overrides, these should be removed when notifications are updated in Team Calendars. For now CSS
    overrides are being used because the structure of the content can't change without rereleasing the plugin */
.mail-calendar-container .day-header + table tr td:first-child {
    vertical-align: top !important;
    padding-top: 5px !important;
}}
@media (min-width: 900px) {#center-content-table { width: 900px; }}
@media all {#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes.*/
body{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
#background-table {margin:0; padding:0; width:100% !important; }
/* Needed to override highlighting on date and time links in iOS */
.grey a {color: #707070; text-decoration: none; }/* These styles are appended to the head element of a notification in order to prevent Apple Mail and similar
   clients from underlining the due dates with a blue hyperlink */
/* a lozenge outside an inline task should always be #333, lozenges inside an inline task should be
   colored according to their upcoming due dates, a completed task date lozenge or deleted task date
   lozenge should always be #707070 */
.date-time-lozenge a {color: #333333; text-decoration: none; }
.inline-task-text-container .date-time-lozenge.date-upcoming a {color: #DF6F00; text-decoration: none; }
.inline-task-text-container .date-time-lozenge.date-past a {color: #D04437; text-decoration: none; }
.inline-task-text-container.content-deleted-color .date-time-lozenge a,
.inline-task-text-container.checked .date-time-lozenge a {
    color: #707070; text-decoration: none;
}}
</style> 
</head>
<body>
<table id="background-table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333; background-color: #f5f5f5"> 
<tbody> 
<tr> 
<td id="header-pattern-container" style="padding: 0px; border-collapse: collapse; padding: 10px 20px"> 
<table id="header-pattern" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<tbody> 
<tr> 
<td id="header-avatar-image-container" valign="top" style="padding: 0px; border-collapse: collapse; vertical-align: top; width: 32px; padding-right: 9px"><a href="https://wiki.asterisk.org/wiki/display/~mmichelson?src=email" style="color: #3b73af; text-decoration: none"><img id="header-avatar-image" class="image_fix" src="cid:avatar_99ed0aa29d6f204db4785296f8170422" height="32" width="32" border="0" style="border-radius: 3px; vertical-align: top" /></a></td>
<td id="header-text-container" valign="middle" style="padding: 0px; border-collapse: collapse; vertical-align: middle; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 1px">Mark Michelson <strong>edited</strong> a page</td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
<!-- End Header pattern --> 
<tr> 
<td id="email-content-container" style="padding: 0px; border-collapse: collapse; padding: 0 20px"> 
<table id="email-content-table" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333; border-spacing: 0; border-collapse: separate"> 
<tbody> 
<tr> 
<td class="email-content-rounded-top mobile-expand" style="padding: 0px; border-collapse: collapse; color: #fff; padding: 0 15px 0 16px; height: 15px; background-color: #fff; border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 0; border-top-right-radius: 5px; border-top-left-radius: 5px"> </td> 
</tr> 
<tr> 
<td class="email-content-main mobile-expand" style="padding: 0px; border-collapse: collapse; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-top: 0; border-bottom: 0; padding: 0 15px 15px 16px; background-color: #fff"> 
<table class="notification-comment-pattern" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 2px"> 
<tbody> 
<tr> 
<td class="notification-comment-pattern-container mobile-resize-text" style="padding: 0px; border-collapse: collapse; padding: 0px"><strong>Change comment:</strong> Modify javascript samples based on feedback</td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
<tr> 
<td class="email-content-main mobile-expand padding-top border-top" style="padding: 0px; border-collapse: collapse; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-top: 0; border-bottom: 0; padding: 0 15px 15px 16px; background-color: #fff; border-top: 1px solid #ccc; padding-top: 15px"> 
<table id="page-title-pattern" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<tbody> 
<tr> 
<td id="page-title-pattern-icon-image-container" valign="top" style="padding: 0px; border-collapse: collapse; width: 16px; vertical-align: top"> 
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<tbody> 
<tr> 
<td id="page-title-pattern-icon-image-container-cell" style="padding: 0px; border-collapse: collapse; width: 16px; padding: 9px 8px 0px 0px; mso-text-raise: 5px; mso-line-height-rule: exactly"><a href="https://wiki.asterisk.org/wiki/display/AST/Part+1%3A+Recording?src=email" title="page icon" style="vertical-align: top;; color: #3b73af; text-decoration: none"><img style="vertical-align: top; display: block;" src="cid:page-icon" alt="page icon" title="page icon" height="16" width="16" border="0" /></a></td> 
</tr> 
</tbody> 
</table> </td>
<td style="vertical-align: top;; padding: 0px; border-collapse: collapse; padding-right: 5px; font-size: 20px; line-height: 30px; mso-line-height-rule: exactly" id="page-title-pattern-header-container"><span id="page-title-pattern-header" style="font-family: Arial, sans-serif; padding: 0; font-size: 20px; line-height: 30px; mso-text-raise: 2px; mso-line-height-rule: exactly; vertical-align: middle"><a href="https://wiki.asterisk.org/wiki/display/AST/Part+1%3A+Recording?src=email" title="Part 1: Recording" style="color: #3b73af; text-decoration: none">Part 1: Recording</a></span></td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
<tr> 
<td class="email-content-main mobile-expand" style="padding: 0px; border-collapse: collapse; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-top: 0; border-bottom: 0; padding: 0 15px 15px 16px; background-color: #fff"> 
<table class="content-excerpt-pattern" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 1px"> 
<tbody> 
<tr> 
<td class="content-excerpt-pattern-container mobile-resize-text " style="padding: 0px; border-collapse: collapse; padding: 0 0 0 24px"> <p class="diff-context-placeholder" style="margin: 10px 0 0 0; margin-top: 0">...</p> 
<table class="diff-macro diff-block-target" style="background-color: #f0f0f0;border: 1px solid #dddddd;margin: 10px 1px;padding: 0 2px 2px;width: 100%;; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<thead> 
<tr> 
<th class="diff-macro-title" style="background-color: transparent; text-align: left; font-weight: normal;padding: 5px;"><span class="icon macro-placeholder-icon" style="background-color: ;line-height: 20px;"><img src="https://wiki.asterisk.org/wiki/s/en_GB/5635/60fd2eb45debbf4ede2b669f4c9b96b4ce40a937.48/_/plugins/servlet/confluence/placeholder/macro-icon?name=code" style="padding-right: 5px; vertical-align: text-bottom;" /> </span>Code Block</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td class="diff-macro-properties" style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;padding: 0; border: 1px solid #dddddd;; padding: 0px; border-collapse: collapse"> 
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<tbody> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">title</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">vm-record.js</td> 
</tr> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">language</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">js</td> 
</tr> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">collapse</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">true</td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
<tbody> 
<tr> 
<td class="diff-macro-body" style="background-color: #fff;border: 1px solid #dddddd;padding: 10px;; padding: 0px; border-collapse: collapse"> <pre style="margin: 10px 0 0 0; margin-top: 0">/*jshint node:true*/
'use strict';
 
var ari = require('ari-client');
var util = require('util');
var path = require('path');

var Event = require('./event');
var StateMachine = require('./state_machine');
// As we add new states to our state machine, this is where we will
// add the new required states. 
 
ari.connect('http://localhost:8088', 'asterisk', 'asterisk', clientLoaded);

var VoiceMailCall = function(ari_client, channel, mailbox) {
    this.client = ari_client;
    this.channel = channel;
    this.vm_path = path.join('voicemail', mailbox, Date.now().toString());

<span class="diff-html-removed" id="removed-diff-0" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">   </span><span class="diff-html-added" id="added-diff-0" style="font-size: 100%; background-color: #ddfade;">     </span>this.setup_state_machine<span class="diff-html-removed" id="removed-diff-1" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">();</span> <span class="diff-html-removed" id="removed-diff-2" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">}

VoiceMailCall.prototype.setup_state_machine </span>= function() {
    // This is where we will initialize states, create a state machine, add
    // state transitions to the state machine, and start the state machine.
<span class="diff-html-added" id="added-diff-1" style="font-size: 100%; background-color: #ddfade;">    </span>}

<span class="diff-html-added" id="added-diff-2" style="font-size: 100%; background-color: #ddfade;">    this.setup_state_machine();
}


</span>function clientLoaded(err, client) {
    if (err) {
        throw err;
    }

    client.on('StasisStart', stasisStart);

    function stasisStart(event, channel) {
        var mailbox = event.args[0]
        channel.answer(function(err) {
            if (err) {
                throw err;
            }
            new VoiceMailCall(client, channel, mailbox);
        });
    }

    client.start(process.argv[2]);
}

</pre> </td> 
</tr> 
</tbody> 
</table> <p class="diff-context-placeholder" style="margin: 10px 0 0 0">...</p> 
<table class="diff-macro diff-block-target" style="background-color: #f0f0f0;border: 1px solid #dddddd;margin: 10px 1px;padding: 0 2px 2px;width: 100%;; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<thead> 
<tr> 
<th class="diff-macro-title" style="background-color: transparent; text-align: left; font-weight: normal;padding: 5px;"><span class="icon macro-placeholder-icon" style="background-color: ;line-height: 20px;"><img src="https://wiki.asterisk.org/wiki/s/en_GB/5635/60fd2eb45debbf4ede2b669f4c9b96b4ce40a937.48/_/plugins/servlet/confluence/placeholder/macro-icon?name=code" style="padding-right: 5px; vertical-align: text-bottom;" /> </span>Code Block</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td class="diff-macro-properties" style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;padding: 0; border: 1px solid #dddddd;; padding: 0px; border-collapse: collapse"> 
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<tbody> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">title</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">recording_state.js</td> 
</tr> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">language</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">js</td> 
</tr> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">collapse</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">true</td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
<tbody> 
<tr> 
<td class="diff-macro-body" style="background-color: #fff;border: 1px solid #dddddd;padding: 10px;; padding: 0px; border-collapse: collapse"> <pre style="margin: 10px 0 0 0; margin-top: 0">var Event = require('./event')

<span class="diff-html-removed" id="removed-diff-3" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">var</span><span class="diff-html-added" id="added-diff-3" style="font-size: 100%; background-color: #ddfade;">function</span> RecordingState<span class="diff-html-removed" id="removed-diff-4" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> = function</span>(call) {
    this.state_name = "recording";

   <span class="diff-html-added" id="added-diff-4" style="font-size: 100%; background-color: #ddfade;"> </span>this.<span class="diff-html-removed" id="removed-diff-5" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">call = call;
}

RecordingState.prototype.</span>enter = function() {
    <span class="diff-html-removed" id="removed-diff-6" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">var</span> <span class="diff-html-removed" id="removed-diff-7" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self</span> <span class="diff-html-removed" id="removed-diff-8" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">=</span> <span class="diff-html-removed" id="removed-diff-9" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">this;</span> <span class="diff-html-removed" id="removed-diff-10" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">    </span>var recording = <span class="diff-html-removed" id="removed-diff-11" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span>call.client.LiveRecording(<span class="diff-html-removed" id="removed-diff-12" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span>call.client, {name: <span class="diff-html-removed" id="removed-diff-13" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span>call.vm_path});
    <span class="diff-html-added" id="added-diff-5" style="font-size: 100%; background-color: #ddfade;">    </span>console.log("Entering recording state");
    <span class="diff-html-removed" id="removed-diff-14" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span><span class="diff-html-added" id="added-diff-6" style="font-size: 100%; background-color: #ddfade;">    </span>call.channel.on("ChannelHangupRequest", on_hangup);
    <span class="diff-html-removed" id="removed-diff-15" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span><span class="diff-html-added" id="added-diff-7" style="font-size: 100%; background-color: #ddfade;">    </span>call.channel.on("ChannelDtmfReceived", on_dtmf);
    <span class="diff-html-removed" id="removed-diff-16" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span><span class="diff-html-added" id="added-diff-8" style="font-size: 100%; background-color: #ddfade;">    </span>call.channel.record({name: recording.name, format: 'wav', beep: true, ifExists: 'overwrite'}, recording);

    <span class="diff-html-added" id="added-diff-9" style="font-size: 100%; background-color: #ddfade;">    </span>function cleanup() {
        <span class="diff-html-removed" id="removed-diff-17" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span><span class="diff-html-added" id="added-diff-10" style="font-size: 100%; background-color: #ddfade;">    </span>call.channel.removeListener('ChannelHangupRequest', on_hangup);
        <span class="diff-html-removed" id="removed-diff-18" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span><span class="diff-html-added" id="added-diff-11" style="font-size: 100%; background-color: #ddfade;">    </span>call.channel.removeListener('ChannelDtmfReceived', on_dtmf);
    <span class="diff-html-added" id="added-diff-12" style="font-size: 100%; background-color: #ddfade;">    </span>}

    <span class="diff-html-added" id="added-diff-13" style="font-size: 100%; background-color: #ddfade;">    </span>function on_hangup(event, channel) {
        <span class="diff-html-added" id="added-diff-14" style="font-size: 100%; background-color: #ddfade;">    </span>console.log("Accepted recording %s on hangup", recording.name);
        <span class="diff-html-added" id="added-diff-15" style="font-size: 100%; background-color: #ddfade;">    </span>cleanup();
        <span class="diff-html-removed" id="removed-diff-19" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span><span class="diff-html-added" id="added-diff-16" style="font-size: 100%; background-color: #ddfade;">    </span>call.state_machine.change_state(Event.HANGUP);
    <span class="diff-html-added" id="added-diff-17" style="font-size: 100%; background-color: #ddfade;">    </span>}

    <span class="diff-html-added" id="added-diff-18" style="font-size: 100%; background-color: #ddfade;">    </span>function on_dtmf(event, channel) {
        <span class="diff-html-added" id="added-diff-19" style="font-size: 100%; background-color: #ddfade;">    </span>switch (event.digit) {
        <span class="diff-html-added" id="added-diff-20" style="font-size: 100%; background-color: #ddfade;">    </span>case '#':
            <span class="diff-html-added" id="added-diff-21" style="font-size: 100%; background-color: #ddfade;">    </span>console.log("Accepted recording", <span class="diff-html-removed" id="removed-diff-20" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span>call.vm_path);
            <span class="diff-html-added" id="added-diff-22" style="font-size: 100%; background-color: #ddfade;">    </span>cleanup();
            <span class="diff-html-added" id="added-diff-23" style="font-size: 100%; background-color: #ddfade;">    </span>recording.stop(function(err) {
                <span class="diff-html-removed" id="removed-diff-21" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span><span class="diff-html-added" id="added-diff-24" style="font-size: 100%; background-color: #ddfade;">    </span>call.state_machine.change_state(Event.DTMF_OCTOTHORPE);
            <span class="diff-html-added" id="added-diff-25" style="font-size: 100%; background-color: #ddfade;">    </span>});
            <span class="diff-html-added" id="added-diff-26" style="font-size: 100%; background-color: #ddfade;">    </span>break;
        <span class="diff-html-added" id="added-diff-27" style="font-size: 100%; background-color: #ddfade;">    </span>}
    <span class="diff-html-added" id="added-diff-28" style="font-size: 100%; background-color: #ddfade;">    </span>}
<span class="diff-html-added" id="added-diff-29" style="font-size: 100%; background-color: #ddfade;">    </span>}
<span class="diff-html-added" id="added-diff-30" style="font-size: 100%; background-color: #ddfade;">}</span>
<span class="diff-html-added" id="added-diff-31" style="font-size: 100%; background-color: #ddfade;">
</span>module.exports = RecordingState;</pre> </td> 
</tr> 
</tbody> 
</table> <p class="diff-context-placeholder" style="margin: 10px 0 0 0">...</p> 
<table class="diff-macro diff-block-target" style="background-color: #f0f0f0;border: 1px solid #dddddd;margin: 10px 1px;padding: 0 2px 2px;width: 100%;; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<thead> 
<tr> 
<th class="diff-macro-title" style="background-color: transparent; text-align: left; font-weight: normal;padding: 5px;"><span class="icon macro-placeholder-icon" style="background-color: ;line-height: 20px;"><img src="https://wiki.asterisk.org/wiki/s/en_GB/5635/60fd2eb45debbf4ede2b669f4c9b96b4ce40a937.48/_/plugins/servlet/confluence/placeholder/macro-icon?name=code" style="padding-right: 5px; vertical-align: text-bottom;" /> </span>Code Block</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td class="diff-macro-properties" style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;padding: 0; border: 1px solid #dddddd;; padding: 0px; border-collapse: collapse"> 
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<tbody> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">title</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">ending_state.js</td> 
</tr> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">language</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">js</td> 
</tr> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">collapse</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">true</td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
<tbody> 
<tr> 
<td class="diff-macro-body" style="background-color: #fff;border: 1px solid #dddddd;padding: 10px;; padding: 0px; border-collapse: collapse"> <pre style="margin: 10px 0 0 0; margin-top: 0">
<span class="diff-html-removed" id="removed-diff-22" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">var</span><span class="diff-html-added" id="added-diff-32" style="font-size: 100%; background-color: #ddfade;">function</span> EndingState<span class="diff-html-removed" id="removed-diff-23" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> = function</span>(call) {
    this.state_name = "ending";

   <span class="diff-html-added" id="added-diff-33" style="font-size: 100%; background-color: #ddfade;"> </span>this.<span class="diff-html-removed" id="removed-diff-24" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">call = call;
}

EndingState.prototype.</span>enter = function() {
    <span class="diff-html-added" id="added-diff-34" style="font-size: 100%; background-color: #ddfade;">    </span>channel_name = <span class="diff-html-removed" id="removed-diff-25" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">this.</span>call.channel.name;
    <span class="diff-html-added" id="added-diff-35" style="font-size: 100%; background-color: #ddfade;">    </span>console.log("Ending voice mail call from", channel_name);
    <span class="diff-html-removed" id="removed-diff-26" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">this.</span><span class="diff-html-added" id="added-diff-36" style="font-size: 100%; background-color: #ddfade;">    </span>call.channel.hangup();
<span class="diff-html-added" id="added-diff-37" style="font-size: 100%; background-color: #ddfade;">    </span>}
<span class="diff-html-added" id="added-diff-38" style="font-size: 100%; background-color: #ddfade;">}</span>
<span class="diff-html-added" id="added-diff-39" style="font-size: 100%; background-color: #ddfade;">
</span>module.exports = EndingState;</pre> </td> 
</tr> 
</tbody> 
</table> <p class="diff-context-placeholder" style="margin: 10px 0 0 0">...</p> 
<table class="diff-macro diff-block-target" style="background-color: #f0f0f0;border: 1px solid #dddddd;margin: 10px 1px;padding: 0 2px 2px;width: 100%;; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<thead> 
<tr> 
<th class="diff-macro-title" style="background-color: transparent; text-align: left; font-weight: normal;padding: 5px;"><span class="icon macro-placeholder-icon" style="background-color: ;line-height: 20px;"><img src="https://wiki.asterisk.org/wiki/s/en_GB/5635/60fd2eb45debbf4ede2b669f4c9b96b4ce40a937.48/_/plugins/servlet/confluence/placeholder/macro-icon?name=code" style="padding-right: 5px; vertical-align: text-bottom;" /> </span>Code Block</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td class="diff-macro-properties" style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;padding: 0; border: 1px solid #dddddd;; padding: 0px; border-collapse: collapse"> 
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<tbody> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">title</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">hungup_state.js</td> 
</tr> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">language</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">js</td> 
</tr> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">collapse</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">true</td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
<tbody> 
<tr> 
<td class="diff-macro-body" style="background-color: #fff;border: 1px solid #dddddd;padding: 10px;; padding: 0px; border-collapse: collapse"> <pre style="margin: 10px 0 0 0; margin-top: 0">
<span class="diff-html-removed" id="removed-diff-27" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">var</span><span class="diff-html-added" id="added-diff-40" style="font-size: 100%; background-color: #ddfade;">function</span> HungUpState<span class="diff-html-removed" id="removed-diff-28" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;"> = function</span>(call) {
    this.state_name = "hungup";

   <span class="diff-html-added" id="added-diff-41" style="font-size: 100%; background-color: #ddfade;"> </span>this.<span class="diff-html-removed" id="removed-diff-29" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">call = call;
}

HungUpState.prototype.</span>enter = function() {
    <span class="diff-html-added" id="added-diff-42" style="font-size: 100%; background-color: #ddfade;">    </span>channel_name = <span class="diff-html-removed" id="removed-diff-30" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">this.</span>call.channel.name;
    <span class="diff-html-added" id="added-diff-43" style="font-size: 100%; background-color: #ddfade;">    </span>console.log("Channel %s hung up", channel_name);
<span class="diff-html-added" id="added-diff-44" style="font-size: 100%; background-color: #ddfade;">    </span>}
<span class="diff-html-added" id="added-diff-45" style="font-size: 100%; background-color: #ddfade;">}</span>
<span class="diff-html-added" id="added-diff-46" style="font-size: 100%; background-color: #ddfade;">
</span>module.exports = HungUpState;</pre> </td> 
</tr> 
</tbody> 
</table> <p class="diff-context-placeholder" style="margin: 10px 0 0 0">...</p> 
<table class="diff-macro diff-block-target" style="background-color: #f0f0f0;border: 1px solid #dddddd;margin: 10px 1px;padding: 0 2px 2px;width: 100%;; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<thead> 
<tr> 
<th class="diff-macro-title" style="background-color: transparent; text-align: left; font-weight: normal;padding: 5px;"><span class="icon macro-placeholder-icon" style="background-color: ;line-height: 20px;"><img src="https://wiki.asterisk.org/wiki/s/en_GB/5635/60fd2eb45debbf4ede2b669f4c9b96b4ce40a937.48/_/plugins/servlet/confluence/placeholder/macro-icon?name=code" style="padding-right: 5px; vertical-align: text-bottom;" /> </span>Code Block</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td class="diff-macro-properties" style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;padding: 0; border: 1px solid #dddddd;; padding: 0px; border-collapse: collapse"> 
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<tbody> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">title</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">vm-call.js</td> 
</tr> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">language</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">js</td> 
</tr> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">collapse</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">true</td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
<tbody> 
<tr> 
<td class="diff-macro-body" style="background-color: #fff;border: 1px solid #dddddd;padding: 10px;; padding: 0px; border-collapse: collapse"> <pre style="margin: 10px 0 0 0; margin-top: 0">// At the top of the file
var RecordingState = require('./recording_state');
var EndingState = require('./ending_state');
var HungUpState = require('./hungup_state');


<span class="diff-html-added" id="added-diff-47" style="font-size: 100%; background-color: #ddfade;">       </span>// Inside our VoiceMailCall <span class="diff-html-removed" id="removed-diff-31" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">prototype</span><span class="diff-html-added" id="added-diff-48" style="font-size: 100%; background-color: #ddfade;">function</span>
<span class="diff-html-removed" id="removed-diff-32" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">VoiceMailCall</span><span class="diff-html-added" id="added-diff-49" style="font-size: 100%; background-color: #ddfade;"> this</span>.<span class="diff-html-removed" id="removed-diff-33" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">prototype.</span>setup_state_machine = function() {
        var hungup_state = new HungUpState(self)
        var recording_state = new RecordingState(self)
        var ending_state = new EndingState(self)

        this.state_machine = new StateMachine()
        this.state_machine.add_transition(recording_state, Event.DTMF_OCTOTHORPE, ending_state)
        this.state_machine.add_transition(recording_state, Event.HANGUP, hungup_state)
        this.state_machine.start(recording_state)
<span class="diff-html-added" id="added-diff-50" style="font-size: 100%; background-color: #ddfade;">       </span>}</pre> </td> 
</tr> 
</tbody> 
</table> <p class="diff-block-context" style="margin: 10px 0 0 0">The following is a sample output of a user calling the application and pressing the '#' key when finished recording</p> <p class="diff-context-placeholder" style="margin: 10px 0 0 0">...</p> 
<table class="diff-macro diff-block-target" style="background-color: #f0f0f0;border: 1px solid #dddddd;margin: 10px 1px;padding: 0 2px 2px;width: 100%;; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<thead> 
<tr> 
<th class="diff-macro-title" style="background-color: transparent; text-align: left; font-weight: normal;padding: 5px;"><span class="icon macro-placeholder-icon" style="background-color: ;line-height: 20px;"><img src="https://wiki.asterisk.org/wiki/s/en_GB/5635/60fd2eb45debbf4ede2b669f4c9b96b4ce40a937.48/_/plugins/servlet/confluence/placeholder/macro-icon?name=code" style="padding-right: 5px; vertical-align: text-bottom;" /> </span>Code Block</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td class="diff-macro-properties" style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;padding: 0; border: 1px solid #dddddd;; padding: 0px; border-collapse: collapse"> 
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<tbody> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">title</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">recording_state.js</td> 
</tr> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">language</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">js</td> 
</tr> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">collapse</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">true</td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
<tbody> 
<tr> 
<td class="diff-macro-body" style="background-color: #fff;border: 1px solid #dddddd;padding: 10px;; padding: 0px; border-collapse: collapse"> <pre style="margin: 10px 0 0 0; margin-top: 0">    function on_dtmf(event, channel) {
        switch (event.digit) {
        case '#':
            console.log("Accepted recording", <span class="diff-html-removed" id="removed-diff-34" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span>call.vm_path);
            cleanup();
            recording.stop(function(err) {
                <span class="diff-html-removed" id="removed-diff-35" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span>call.state_machine.change_state(Event.DTMF_OCTOTHORPE);
            });
            break;
        // NEW CONTENT
        case '*':
            console.log("Canceling recording", <span class="diff-html-removed" id="removed-diff-36" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span>call.vm_path);
            cleanup();
            recording.cancel(function(err) {
                <span class="diff-html-removed" id="removed-diff-37" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span>call.state_machine.change_state(Event.DTMF_STAR);
            });
            break;
        }
    }</pre> </td> 
</tr> 
</tbody> 
</table> <p class="diff-context-placeholder" style="margin: 10px 0 0 0">...</p> 
<table class="diff-macro diff-block-target" style="background-color: #f0f0f0;border: 1px solid #dddddd;margin: 10px 1px;padding: 0 2px 2px;width: 100%;; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<thead> 
<tr> 
<th class="diff-macro-title" style="background-color: transparent; text-align: left; font-weight: normal;padding: 5px;"><span class="icon macro-placeholder-icon" style="background-color: ;line-height: 20px;"><img src="https://wiki.asterisk.org/wiki/s/en_GB/5635/60fd2eb45debbf4ede2b669f4c9b96b4ce40a937.48/_/plugins/servlet/confluence/placeholder/macro-icon?name=code" style="padding-right: 5px; vertical-align: text-bottom;" /> </span>Code Block</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td class="diff-macro-properties" style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;padding: 0; border: 1px solid #dddddd;; padding: 0px; border-collapse: collapse"> 
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<tbody> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">title</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">vm-call.js</td> 
</tr> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">language</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">js</td> 
</tr> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">collapse</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">true</td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
<tbody> 
<tr> 
<td class="diff-macro-body" style="background-color: #fff;border: 1px solid #dddddd;padding: 10px;; padding: 0px; border-collapse: collapse"> <pre style="margin: 10px 0 0 0; margin-top: 0">
<span class="diff-html-removed" id="removed-diff-38" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">VoiceMailCall</span><span class="diff-html-added" id="added-diff-51" style="font-size: 100%; background-color: #ddfade;">this</span>.<span class="diff-html-removed" id="removed-diff-39" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">prototype.</span>setup_state_machine = function() {
    var hungup_state = new HungUpState(this);
    var recording_state = new RecordingState(this);
    var ending_state = new EndingState(this);

<span class="diff-html-removed" id="removed-diff-40" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">   </span><span class="diff-html-added" id="added-diff-52" style="font-size: 100%; background-color: #ddfade;">   </span>this.state_machine = new StateMachine();
    this.state_machine.add_transition(recording_state, Event.DTMF_OCTOTHORPE, ending_state);
    this.state_machine.add_transition(recording_state, Event.HANGUP, hungup_state);
    this.state_machine.add_transition(recording_state, Event.DTMF_STAR, recording_state);
    this.state_machine.start(recording_state);
}</pre> </td> 
</tr> 
</tbody> 
</table> <p class="diff-context-placeholder" style="margin: 10px 0 0 0">...</p> 
<table class="diff-macro diff-block-target" style="background-color: #f0f0f0;border: 1px solid #dddddd;margin: 10px 1px;padding: 0 2px 2px;width: 100%;; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<thead> 
<tr> 
<th class="diff-macro-title" style="background-color: transparent; text-align: left; font-weight: normal;padding: 5px;"><span class="icon macro-placeholder-icon" style="background-color: ;line-height: 20px;"><img src="https://wiki.asterisk.org/wiki/s/en_GB/5635/60fd2eb45debbf4ede2b669f4c9b96b4ce40a937.48/_/plugins/servlet/confluence/placeholder/macro-icon?name=code" style="padding-right: 5px; vertical-align: text-bottom;" /> </span>Code Block</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td class="diff-macro-properties" style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;padding: 0; border: 1px solid #dddddd;; padding: 0px; border-collapse: collapse"> 
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<tbody> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">title</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">reviewing_state.js</td> 
</tr> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">language</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">js</td> 
</tr> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">collapse</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">true</td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
<tbody> 
<tr> 
<td class="diff-macro-body" style="background-color: #fff;border: 1px solid #dddddd;padding: 10px;; padding: 0px; border-collapse: collapse"> <pre style="margin: 10px 0 0 0; margin-top: 0">var Event = require('./event');

function ReviewingState(call) {
    this.state_name = "reviewing";

   <span class="diff-html-added" id="added-diff-53" style="font-size: 100%; background-color: #ddfade;"> </span>this.<span class="diff-html-removed" id="removed-diff-41" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">call = call;
}

ReviewingState.prototype.</span>enter = function() {
    <span class="diff-html-removed" id="removed-diff-42" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">var</span> <span class="diff-html-removed" id="removed-diff-43" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self</span> <span class="diff-html-removed" id="removed-diff-44" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">=</span> <span class="diff-html-removed" id="removed-diff-45" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">this;</span> <span class="diff-html-removed" id="removed-diff-46" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">    </span>var playback = <span class="diff-html-removed" id="removed-diff-47" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span>call.client.Playback();
    <span class="diff-html-added" id="added-diff-54" style="font-size: 100%; background-color: #ddfade;">    </span>var url = "recording:" + <span class="diff-html-removed" id="removed-diff-48" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span>call.vm_path;
    <span class="diff-html-added" id="added-diff-55" style="font-size: 100%; background-color: #ddfade;">    </span>console.log("Entering reviewing state");
    <span class="diff-html-removed" id="removed-diff-49" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span><span class="diff-html-added" id="added-diff-56" style="font-size: 100%; background-color: #ddfade;">    </span>call.channel.on("ChannelHangupRequest", on_hangup);
    <span class="diff-html-removed" id="removed-diff-50" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span><span class="diff-html-added" id="added-diff-57" style="font-size: 100%; background-color: #ddfade;">    </span>call.channel.on("ChannelDtmfReceived", on_dtmf);
    <span class="diff-html-removed" id="removed-diff-51" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span><span class="diff-html-added" id="added-diff-58" style="font-size: 100%; background-color: #ddfade;">    </span>call.client.on("PlaybackFinished", on_playback_finished);
    <span class="diff-html-removed" id="removed-diff-52" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span><span class="diff-html-added" id="added-diff-59" style="font-size: 100%; background-color: #ddfade;">    </span>call.channel.play({media: url}, playback);

    <span class="diff-html-added" id="added-diff-60" style="font-size: 100%; background-color: #ddfade;">    </span>function cleanup() {
        <span class="diff-html-removed" id="removed-diff-53" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span><span class="diff-html-added" id="added-diff-61" style="font-size: 100%; background-color: #ddfade;">    </span>call.channel.removeListener('ChannelHangupRequest', on_hangup);
        <span class="diff-html-removed" id="removed-diff-54" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span><span class="diff-html-added" id="added-diff-62" style="font-size: 100%; background-color: #ddfade;">    </span>call.channel.removeListener('ChannelDtmfReceived', on_dtmf);
        <span class="diff-html-removed" id="removed-diff-55" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span><span class="diff-html-added" id="added-diff-63" style="font-size: 100%; background-color: #ddfade;">    </span>call.client.removeListener('PlaybackFinished', on_playback_finished);
        <span class="diff-html-added" id="added-diff-64" style="font-size: 100%; background-color: #ddfade;">    </span>if (playback) {
            <span class="diff-html-added" id="added-diff-65" style="font-size: 100%; background-color: #ddfade;">    </span>playback.stop();
        <span class="diff-html-added" id="added-diff-66" style="font-size: 100%; background-color: #ddfade;">    </span>}
    <span class="diff-html-added" id="added-diff-67" style="font-size: 100%; background-color: #ddfade;">    </span>}

    <span class="diff-html-added" id="added-diff-68" style="font-size: 100%; background-color: #ddfade;">    </span>function on_hangup(event, channel) {
        <span class="diff-html-added" id="added-diff-69" style="font-size: 100%; background-color: #ddfade;">    </span>console.log("Accepted recording %s on hangup", <span class="diff-html-removed" id="removed-diff-56" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span>call.vm_path);
        <span class="diff-html-added" id="added-diff-70" style="font-size: 100%; background-color: #ddfade;">    </span>playback = null;
        <span class="diff-html-added" id="added-diff-71" style="font-size: 100%; background-color: #ddfade;">    </span>cleanup();
        <span class="diff-html-removed" id="removed-diff-57" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span><span class="diff-html-added" id="added-diff-72" style="font-size: 100%; background-color: #ddfade;">    </span>call.state_machine.change_state(Event.HANGUP);
    <span class="diff-html-added" id="added-diff-73" style="font-size: 100%; background-color: #ddfade;">    </span>}

    <span class="diff-html-added" id="added-diff-74" style="font-size: 100%; background-color: #ddfade;">    </span>function on_playback_finished(event) {
        <span class="diff-html-added" id="added-diff-75" style="font-size: 100%; background-color: #ddfade;">    </span>if (playback && (playback.id === event.playback.id)) {
            <span class="diff-html-added" id="added-diff-76" style="font-size: 100%; background-color: #ddfade;">    </span>playback = null;
        <span class="diff-html-added" id="added-diff-77" style="font-size: 100%; background-color: #ddfade;">    </span>}
    <span class="diff-html-added" id="added-diff-78" style="font-size: 100%; background-color: #ddfade;">    </span>}

    <span class="diff-html-added" id="added-diff-79" style="font-size: 100%; background-color: #ddfade;">    </span>function on_dtmf(event, channel) {
        <span class="diff-html-added" id="added-diff-80" style="font-size: 100%; background-color: #ddfade;">    </span>switch (event.digit) {
        <span class="diff-html-added" id="added-diff-81" style="font-size: 100%; background-color: #ddfade;">    </span>case '#':
            <span class="diff-html-added" id="added-diff-82" style="font-size: 100%; background-color: #ddfade;">    </span>console.log("Accepted recording", <span class="diff-html-removed" id="removed-diff-58" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span>call.vm_path);
            <span class="diff-html-added" id="added-diff-83" style="font-size: 100%; background-color: #ddfade;">    </span>cleanup();
            <span class="diff-html-removed" id="removed-diff-59" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span><span class="diff-html-added" id="added-diff-84" style="font-size: 100%; background-color: #ddfade;">    </span>call.state_machine.change_state(Event.DTMF_OCTOTHORPE);
            <span class="diff-html-added" id="added-diff-85" style="font-size: 100%; background-color: #ddfade;">    </span>break;
        <span class="diff-html-added" id="added-diff-86" style="font-size: 100%; background-color: #ddfade;">    </span>case '*':
            <span class="diff-html-added" id="added-diff-87" style="font-size: 100%; background-color: #ddfade;">    </span>console.log("Canceling recording", <span class="diff-html-removed" id="removed-diff-60" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span>call.vm_path);
            <span class="diff-html-added" id="added-diff-88" style="font-size: 100%; background-color: #ddfade;">    </span>cleanup();
            <span class="diff-html-removed" id="removed-diff-61" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span><span class="diff-html-added" id="added-diff-89" style="font-size: 100%; background-color: #ddfade;">    </span>call.client.recordings.deleteStored({recordingName: <span class="diff-html-removed" id="removed-diff-62" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span>call.vm_path});
            <span class="diff-html-removed" id="removed-diff-63" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">self.</span><span class="diff-html-added" id="added-diff-90" style="font-size: 100%; background-color: #ddfade;">    </span>call.state_machine.change_state(Event.DTMF_STAR);
            <span class="diff-html-added" id="added-diff-91" style="font-size: 100%; background-color: #ddfade;">    </span>break;
        <span class="diff-html-added" id="added-diff-92" style="font-size: 100%; background-color: #ddfade;">    </span>}
    <span class="diff-html-added" id="added-diff-93" style="font-size: 100%; background-color: #ddfade;">    </span>}
<span class="diff-html-added" id="added-diff-94" style="font-size: 100%; background-color: #ddfade;">    </span>}
<span class="diff-html-added" id="added-diff-95" style="font-size: 100%; background-color: #ddfade;">}</span>
<span class="diff-html-added" id="added-diff-96" style="font-size: 100%; background-color: #ddfade;">
</span>module.exports = ReviewingState;</pre> </td> 
</tr> 
</tbody> 
</table> <p class="diff-context-placeholder" style="margin: 10px 0 0 0">...</p> 
<table class="diff-macro diff-block-target" style="background-color: #f0f0f0;border: 1px solid #dddddd;margin: 10px 1px;padding: 0 2px 2px;width: 100%;; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<thead> 
<tr> 
<th class="diff-macro-title" style="background-color: transparent; text-align: left; font-weight: normal;padding: 5px;"><span class="icon macro-placeholder-icon" style="background-color: ;line-height: 20px;"><img src="https://wiki.asterisk.org/wiki/s/en_GB/5635/60fd2eb45debbf4ede2b669f4c9b96b4ce40a937.48/_/plugins/servlet/confluence/placeholder/macro-icon?name=code" style="padding-right: 5px; vertical-align: text-bottom;" /> </span>Code Block</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td class="diff-macro-properties" style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;padding: 0; border: 1px solid #dddddd;; padding: 0px; border-collapse: collapse"> 
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<tbody> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">title</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">vm-call.js</td> 
</tr> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">language</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">js</td> 
</tr> 
<tr> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">collapse</td> 
<td style="background-color: #fafafa; padding: 0 0 0 5px; font-size: 12px; text-align: left;; padding: 0px; border-collapse: collapse">true</td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
<tbody> 
<tr> 
<td class="diff-macro-body" style="background-color: #fff;border: 1px solid #dddddd;padding: 10px;; padding: 0px; border-collapse: collapse"> <pre style="margin: 10px 0 0 0; margin-top: 0">// At the top of the file
var ReviewingState = require('./reviewing_state');

// In VoicemailCall::setup_state_machine
<span class="diff-html-removed" id="removed-diff-64" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">VoiceMailCall</span><span class="diff-html-added" id="added-diff-97" style="font-size: 100%; background-color: #ddfade;">this</span>.<span class="diff-html-removed" id="removed-diff-65" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">prototype.</span>setup_state_machine = function() {
    var hungup_state = new HungUpState(this);
    var recording_state = new RecordingState(this);
    var ending_state = new EndingState(this);
    var reviewing_state = new ReviewingState(this);

<span class="diff-html-removed" id="removed-diff-66" style="font-size: 100%; background-color: #ffe7e7; text-decoration: line-through;">   </span><span class="diff-html-added" id="added-diff-98" style="font-size: 100%; background-color: #ddfade;">   </span>this.state_machine = new StateMachine();
    this.state_machine.add_transition(recording_state, Event.DTMF_OCTOTHORPE, reviewing_state);
    this.state_machine.add_transition(recording_state, Event.HANGUP, hungup_state);
    this.state_machine.add_transition(recording_state, Event.DTMF_STAR, recording_state);
    this.state_machine.add_transition(reviewing_state, Event.DTMF_OCTOTHORPE, ending_state);
    this.state_machine.add_transition(reviewing_state, Event.HANGUP, hungup_state);
    this.state_machine.add_transition(reviewing_state, Event.DTMF_STAR, recording_state);
    this.state_machine.start(recording_state);
}</pre> </td> 
</tr> 
</tbody> 
</table> <p class="diff-context-placeholder" style="margin: 10px 0 0 0">...</p> </td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
<tr> 
<td class="email-content-main mobile-expand action-padding last-row-padding" style="padding: 0px; border-collapse: collapse; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-top: 0; border-bottom: 0; padding: 0 15px 15px 16px; background-color: #fff; padding-bottom: 10px; padding-bottom: 10px"> 
<table id="actions-pattern" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 1px"> 
<tbody> 
<tr> 
<td id="actions-pattern-container" valign="middle" style="padding: 0px; border-collapse: collapse; padding: 15px 0 0 24px; vertical-align: middle"> 
<table align="left" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<tbody> 
<tr> 
<td class="actions-pattern-action-icon-container" style="padding: 0px; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 0px; vertical-align: middle"><a href="https://wiki.asterisk.org/wiki/display/AST/Part+1%3A+Recording?src=email" title="View page Icon" style="color: #3b73af; text-decoration: none"><img class="actions-pattern-action-icon-image" height="16" width="16" border="0" title="View page Icon" src="cid:com.atlassian.confluence.plugins.confluence-email-resources%3Aview-page-email-adg-footer-item%3Aicon" alt="View page Icon" style="vertical-align: middle" /></a></td>
<td class="actions-pattern-action-text-container" style="padding: 0px; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 4px; padding-left: 5px; white-space: nowrap"><a href="https://wiki.asterisk.org/wiki/display/AST/Part+1%3A+Recording?src=email" title="View page" style="color: #3b73af; text-decoration: none">View page</a></td>
<td class="actions-pattern-action-bull" style="padding: 0px; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 4px; color: #999; padding: 0 5px">•</td> 
</tr> 
</tbody> 
</table> 
<table align="left" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<tbody> 
<tr> 
<td class="actions-pattern-action-icon-container" style="padding: 0px; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 0px; vertical-align: middle"><a href="https://wiki.asterisk.org/wiki/display/AST/Part+1%3A+Recording?showComments=true&showCommentArea=true&src=email#addcomment" title="Add comment Icon" style="color: #3b73af; text-decoration: none"><img class="actions-pattern-action-icon-image" height="16" width="16" border="0" title="Add comment Icon" src="cid:com.atlassian.confluence.plugins.confluence-email-resources%3Aadd-comment-to-content-email-adg-footer-item%3Aicon" alt="Add comment Icon" style="vertical-align: middle" /></a></td>
<td class="actions-pattern-action-text-container" style="padding: 0px; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 4px; padding-left: 5px; white-space: nowrap"><a href="https://wiki.asterisk.org/wiki/display/AST/Part+1%3A+Recording?showComments=true&showCommentArea=true&src=email#addcomment" title="Add comment" style="color: #3b73af; text-decoration: none">Add comment</a></td>
<td class="actions-pattern-action-bull" style="padding: 0px; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 4px; color: #999; padding: 0 5px">•</td> 
</tr> 
</tbody> 
</table> 
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<tbody> 
<tr> 
<td class="actions-pattern-action-icon-container" style="padding: 0px; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 0px; vertical-align: middle"><a href="https://wiki.asterisk.org/wiki/plugins/likes/like.action?contentId=30277826&src=email" title="Like Icon" style="color: #3b73af; text-decoration: none"><img class="actions-pattern-action-icon-image" height="16" width="16" border="0" title="Like Icon" src="cid:com.atlassian.confluence.plugins.confluence-like%3Aview-email-adg-content-item%3Aicon" alt="Like Icon" style="vertical-align: middle" /></a></td>
<td class="actions-pattern-action-text-container" style="padding: 0px; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 4px; padding-left: 5px; white-space: nowrap"><a href="https://wiki.asterisk.org/wiki/plugins/likes/like.action?contentId=30277826&src=email" title="Like" style="color: #3b73af; text-decoration: none">Like</a></td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
<tr> 
<td class="email-content-rounded-bottom mobile-expand" style="padding: 0px; border-collapse: collapse; color: #fff; height: 5px; line-height: 5px; padding: 0 15px 0 16px; background-color: #fff; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; border-top: 0; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; mso-line-height-rule: exactly"> </td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
<tr> 
<td id="footer-pattern" style="padding: 0px; border-collapse: collapse; padding: 12px 20px"> 
<table id="footer-pattern-container" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333"> 
<tbody> 
<tr> 
<td id="footer-pattern-links-container" width="100%" style="padding: 0px; border-collapse: collapse; color: #999; font-size: 12px; line-height: 18px; font-family: Arial, sans-serif; mso-line-height-rule: exactly; mso-text-raise: 2px"> 
<table align="left" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333; font-size: 12px; line-height: 18px; font-family: Arial, sans-serif; mso-line-height-rule: exactly; mso-text-raise: 2px"> 
<tbody> 
<tr> 
<td class="footer-pattern-links mobile-resize-text" style="padding: 0px; border-collapse: collapse"><a href="https://wiki.asterisk.org/wiki/users/removespacenotification.action?spaceKey=AST&src=email" title="" style="color: #3b73af; text-decoration: none">Stop watching space</a></td>
<td class="footer-pattern-links-bull" style="padding: 0px; border-collapse: collapse; padding: 0 5px; color: #999">•</td> 
</tr> 
</tbody> 
</table> 
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333; font-size: 12px; line-height: 18px; font-family: Arial, sans-serif; mso-line-height-rule: exactly; mso-text-raise: 2px"> 
<tbody> 
<tr> 
<td class="footer-pattern-links mobile-resize-text" style="padding: 0px; border-collapse: collapse"><a href="https://wiki.asterisk.org/wiki/users/editmyemailsettings.action?src=email" title="" style="color: #3b73af; text-decoration: none">Manage notifications</a></td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
<tr> 
<td id="footer-pattern-text" class="mobile-resize-text" width="100%" style="padding: 0px; border-collapse: collapse; color: #999; font-size: 12px; line-height: 18px; font-family: Arial, sans-serif; mso-line-height-rule: exactly; mso-text-raise: 2px; display: none">This message was sent by Atlassian Confluence 5.6.1</td> 
</tr> 
</tbody> 
</table> </td> 
</tr> 
</tbody> 
</table> 
<table id="sealed-section" border="0" cellpadding="0" cellspacing="0" width="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #333; display: none"> 
<tbody> 
<tr> 
<td style="padding: 0px; border-collapse: collapse; border: 0; font-size: 0px; line-height: 0; mso-line-height-rule: exactly"></td> 
</tr> 
</tbody> 
</table>
</body>
</html>