principles-ui-components/UI_Component/common/TTS.js

Supporting UI controller for Tizen TV web application, which developed base on React Framework.

/**
 * @author Haipeng Zhang(hp.zhang@samsung.com)
 * @fileoverview This module manages TTS item.
 * @date    2017/07/31 (last modified date)
 *
 * Copyright 2017 by Samsung Electronics, Inc.,
 *
 * This software is the confidential and proprietary information
 * of Samsung Electronics, Inc. ("Confidential Information").  You
 * shall not disclose such Confidential Information and shall use
 * it only in accordance with the terms of the license agreement
 * you entered into with Samsung.
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { VOICE_GUIDE_DELAY } from './CommonDefine';

export default class TTS extends Component {

    constructor(props) {
        super(props);
        this.delayFocusTimer = null;
    }

    componentDidMount() {
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return (JSON.stringify(nextProps) !== JSON.stringify(this.props));
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
        if (this.delayFocusTimer) {
            clearTimeout(this.delayFocusTimer);
            this.delayFocusTimer = null;
        }
    }

    /**
    * voice guide play
    * @name playTTS
    * @method
    * @param
    * @memberof
    */
    playTTS() {
        if (this.props.ttsEnable) {
            if (this.delayFocusTimer) {
                clearTimeout(this.delayFocusTimer);
                this.delayFocusTimer = null;
            }

            this.delayFocusTimer = setTimeout(() => {
                this.TTSnode.focus();
            }, VOICE_GUIDE_DELAY);
        }
    }

    render() {
        const { ttsEnable, ttsText } = this.props;

        let TTSComponent = null;
        if (ttsEnable) {
            TTSComponent = <div ref={(TTSnode) => { this.TTSnode = TTSnode; }} role='' style={{ opacity: 0 }}>{ttsText}</div>;
        }

        return (
          <div>
            {TTSComponent}
          </div>
        );
    }
}

TTS.defaultProps = {
    ttsEnable: PropTypes.bool,
    ttsText: '',
};

TTS.propTypes = {
    ttsEnable: PropTypes.bool,
    ttsText: PropTypes.string,
};