src/components/Mute.js

goog.module('gep.components.Mute');

const {Component} = goog.require('clulib.cm');

const SoundProvider = goog.require('gep.provider.SoundProvider');
const {WorldProvider,WorldEventType} = goog.require('gep.provider.WorldProvider');

const {listen} = goog.require('goog.events');
const EventType = goog.require('goog.events.EventType');
const classlist = goog.require('goog.dom.classlist');

/**
 * Component which represents the global mute button in dom.
 * Component is used from {@Link https://www.npmjs.com/package/clulib}
 * @extends {Component}
 */
class Mute extends Component
{
    constructor()
    {
        super();

        /**
         * Reference to the WorldProvider for monitoring actions, loading processes and status changes of the created THREE.Scene.
         * @type {WorldProvider}
         * @private
         */
        this.worldProvider_ = WorldProvider.getInstance();

        /**
         * Reference to SoundProvider for monitoring and executing sound loading processes and sound playback controling.
         * @type {SoundProvider}
         * @private
         */
        this.soundProvider_ = SoundProvider.getInstance();
    }

    /**
     * Component is ready and had loaded all dependencies (inherit method waitFor and sub components).
     * Init listener for click and mute changes
     * @inheritDoc
     */
    onInit()
    {
        super.onInit();

        this.update_();
        listen(this.getElement(), EventType.CLICK, this.handleClick_, false, this);
        listen(this.worldProvider_, WorldEventType.CHANGE_MUTING, this.update_, false, this);
    }

    /**
     * Handle mute click. Mute or unmute sound,
     * @private
     */
    handleClick_()
    {
        this.soundProvider_.muted = !this.soundProvider_.muted;
        this.worldProvider_.changeMuting();
    }

    /**
     * Update the display state and label of the mute button
     * @private
     */
    update_()
    {
        classlist.enable(this.getElement(), 'playing', !this.soundProvider_.muted);

        let label = this.soundProvider_.muted ? 'turn off sound' : 'turn on sound';
        this.getElement().setAttribute('aria-label', label);
    }
}

exports = Mute;