Skip to content

Commit

Permalink
Bug fixes for the AlanButton:
Browse files Browse the repository at this point in the history 
 - fix of the missing "listening" sound
 - fix issue with the negative z-index
 - fix issue with the missing turn-on sound
 - fix issue with ignoring some clicks on the button
  • Loading branch information
@annmirosh
annmirosh committed Dec 22, 2020
1 parent 5c727f6 commit c1ff018
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 15 deletions.
98 changes: 85 additions & 13 deletions dist/alan_lib.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,13 +68,19 @@
} else if (o.audio) {
playState = PLAY_ACTIVE;
fireEvent('playStart');
audioElement.setAttribute("src", o.audio)
audioElement.setAttribute("src", o.audio);
audioElement.removeEventListener("ended", onPlayStop, false);
audioElement.addEventListener("ended", onPlayStop, false);
} else {
console.error('invalid queue item');
}
}
}

function onPlayStop() {
fireEvent('playStop');
}

function fireEvent(event, o1, o2) {
var h = handlers[event];
if (h) {
Expand Down Expand Up @@ -412,6 +418,32 @@
connect._config.version = config.version;
connect._config.url = config.baseURL + "/ws_project/" + projectId;
connect._worker.postMessage(["connectProject", connect._config, fillAuth(auth, ext), mode]);
function signupEvent(name, handler) {
alanAudio.on(name, handler);
connect._addCleanup(function() {
alanAudio.off(name, handler);
});
}
function passEventToWorker(name) {
function handler(a1, a2) {
if (name === 'frame' && alanAudio.isPlaying()) {
return;
}
connect._worker.postMessage(['onAudioEvent', name, a1, a2]);
}
signupEvent(name, handler);
}
function passEventToClient(name) {
function handler(e1) {
connect._fire(name, e1);
}
signupEvent(name, handler);
}
passEventToWorker('frame');
passEventToWorker('micStop');
passEventToWorker('playStart');
passEventToClient('text');
passEventToClient('command');
return connect;
}

Expand Down Expand Up @@ -443,9 +475,11 @@ function alanBtn(options) {
var btnDisabled = false;
var hideS2TPanel = false;
var pinned = false;
var alanButtonVersion = '1.8.7';

var btnInstance = {
// Common public API
version: alanButtonVersion,
setVisualState: function (visualState) {
if (btnDisabled) {
return;
Expand Down Expand Up @@ -685,14 +719,19 @@ function alanBtn(options) {
var alanBtnDisabledMessage = document.createElement('div');
var soundOnAudioDoesNotExist = false;
var soundOffAudioDoesNotExist = false;
var soundOnAudio = new Audio(baseUrl + '/resources/sounds/soundOn.m4a');
var soundNextAudioDoesNotExist = false;
var soundOnAudio = new Audio(baseUrl + '/resources/sounds/soundOn.m4a?v=' + alanButtonVersion);
soundOnAudio.onerror = function() {
soundOnAudioDoesNotExist = true;
};
var soundOffAudio = new Audio(baseUrl + '/resources/sounds/soundOff.m4a');
var soundOffAudio = new Audio(baseUrl + '/resources/sounds/soundOff.m4a?v=' + alanButtonVersion);
soundOffAudio.onerror = function() {
soundOffAudioDoesNotExist = true;
};
var soundNextAudio = new Audio(baseUrl + '/resources/sounds/soundNext.m4a?v=' + alanButtonVersion);
soundNextAudio.onerror = function() {
soundNextAudioDoesNotExist = true;
};

// Specify layers for different statets to make smooth animation
var btnBgDefault = document.createElement('div');
Expand Down Expand Up @@ -824,7 +863,22 @@ function alanBtn(options) {
return value;
}

btnZIndex = options.zIndex || 4;
function findHighestZIndex() {
var elements = document.getElementsByTagName("*");
var defaultZIndex = 4;
for (var i = 0; i < elements.length; i++) {
var zindex = Number.parseInt(
document.defaultView.getComputedStyle(elements[i], null).getPropertyValue("z-index"),
10
);
if (zindex > defaultZIndex) {
defaultZIndex = zindex;
}
}
return defaultZIndex;
}

btnZIndex = options.zIndex || (findHighestZIndex() + 1);
btnIconsZIndex = btnZIndex - 2;
btnTextPanelsZIndex = btnZIndex - 1;
btnBgLayerZIndex = btnZIndex - 3;
Expand All @@ -838,8 +892,8 @@ function alanBtn(options) {
rootEl.style.bottom = bottomBtnPos;
}

if (options.zIndex !== undefined) {
rootEl.style.zIndex = options.zIndex;
if (btnZIndex) {
rootEl.style.zIndex = btnZIndex;
}

rootEl.style.position = options.position ? options.position : 'fixed';
Expand Down Expand Up @@ -1662,7 +1716,7 @@ function alanBtn(options) {
}

function _activateAlanButton(resolve) {
playSoundOn();
playSoundNext();
if (options.onBeforeMicStart) {
options.onBeforeMicStart();
}
Expand Down Expand Up @@ -1847,12 +1901,6 @@ function alanBtn(options) {
}

function onOptionsReceived(data) {
if (data && data.web && data.web.hidden === true) {
hideAlanBtn();
} else {
showAlanBtn();
}

if (data && data.web && data.web.hideS2TPanel === true) {
hideSpeach2TextPanel();
} else {
Expand All @@ -1876,6 +1924,12 @@ function alanBtn(options) {
if (isLocalStorageAvailable && data) {
localStorage.setItem(getStorageKey(), JSON.stringify(data));
}

if (data && data.web && data.web.hidden === true) {
hideAlanBtn();
} else {
showAlanBtn();
}
}

function onConnectStatusChange(res) {
Expand Down Expand Up @@ -1957,6 +2011,7 @@ function alanBtn(options) {
function onPlayStop(e) {
// console.log('BTN: play stop');
isAlanSpeaking = false;
playSoundNext();
switchState(LISTENING);
turnOffVoiceFn();
}
Expand Down Expand Up @@ -1999,6 +2054,7 @@ function alanBtn(options) {

function playSoundOn() {
if (!soundOnAudioDoesNotExist) {
soundOnAudio.currentTime = 0;
soundOnAudio.play().catch(function () {
console.log("No activation sound, because the user didn't interact with the button");
});
Expand All @@ -2007,12 +2063,22 @@ function alanBtn(options) {

function playSoundOff() {
if (!soundOffAudioDoesNotExist) {
soundOffAudio.currentTime = 0;
soundOffAudio.play().catch(function () {
console.log("No deactivation sound, because the user didn't interact with the button");
});
}
}

function playSoundNext() {
if (!soundNextAudioDoesNotExist) {
soundNextAudio.currentTime = 0;
soundNextAudio.play().catch(function () {
console.log("No deactivation sound, because the user didn't interact with the button");
});
}
}

window.switchState = switchState;

function switchState(newState) {
Expand Down Expand Up @@ -2547,7 +2613,9 @@ function alanBtn(options) {

function onMouseUp(e) {
var curPos;
var posInfo;
if (dndIsDown) {
posInfo = e.touches ? e.touches[0] : e;
dndIsDown = false;
rootEl.style.transition = dndAnimTransition;
if (isLeftAligned) {
Expand All @@ -2556,6 +2624,10 @@ function alanBtn(options) {
curPos = +rootEl.style.right.replace('px', '');
}
if (curPos <= window.innerWidth / 2) {
if (Math.abs(dndInitialMousePositions[0] - posInfo.clientX) < 15 && Math.abs(dndInitialMousePositions[1] - posInfo.clientY) < 15) {
afterMouseMove = false;
}

moveBtnToTheSameSide();
} else {
moveBtnToTheOppositeSide();
Expand Down
2 changes: 1 addition & 1 deletion dist/alan_lib.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@alan-ai/alan-sdk-web",
"version": "1.8.6",
"version": "1.8.7",
"description": "Alan Web SDK: a lightweight JavaScript library for adding a voice experience to your website or web application",
"keywords": [
"alan sdk web",
Expand Down

0 comments on commit c1ff018

Please sign in to comment.