jiti-meet/modules/UI/ring_overlay/RingOverlay.js

83 lines
2.1 KiB
JavaScript

/* global $ */
/**
* Shows ring overlay
*/
class RingOverlay {
/**
* @param callee instance of User class from TokenData.js
*/
constructor(callee) {
this.callee = callee;
this._buildHtml();
this.audio = $("#ring_overlay_ringing");
this.audio[0].play();
this._setAudioTimeout();
}
/**
* Builds and appends the ring overlay to the html document
*/
_buildHtml() {
$("body").append("<div class='overlay_container' >" +
"<div class='overlay' /><div class='overlay_content'>" +
"<img class='overlay_avatar' src='" +
this.callee.getAvatarUrl() + "' />" +
"<span data-i18n='calling' data-i18n-options='" +
JSON.stringify({name: this.callee.getName()}) +
"' class='overlay_text'>Calling " +
this.callee.getName() + "...</span></div>" +
"<audio id='ring_overlay_ringing' src='/sounds/ring.ogg' /></div>");
}
/**
* Sets the interval that is going to play the ringing sound.
*/
_setAudioTimeout() {
this.interval = setInterval( () => {
this.audio[0].play();
}, 5000);
}
/**
* Destroys and clears all the objects (html elements and audio interval)
* related to the ring overlay.
*/
destroy() {
if(this.interval)
clearInterval(this.interval);
$(".overlay_container").remove();
}
}
/**
* Store the current ring overlay instance.
* Note: We want to have only 1 instance at a time.
*/
let overlay = null;
export default {
/**
* Shows the ring overlay for the passed callee.
* @param callee {class User} the callee. Instance of User class from
* TokenData.js
*/
show(callee) {
if(overlay) {
this.hide();
}
overlay = new RingOverlay(callee);
},
/**
* Hides the ring overlay. Destroys all the elements related to the ring
* overlay.
*/
hide() {
if(!overlay)
return false;
overlay.destroy();
overlay = null;
return true;
}
};