virtual-chat.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-progress/paper-progress.html">
<link rel="import" href="../paper-item/paper-item.html">

<!--
`virtual-chat`
Chat component that simulates people is talking
//TODO: Time to end... timeline :)
@demo demo/index.html 
-->

<dom-module id="virtual-chat">
  <template>
    <custom-style>
      <style is="custom-style">
        .flex-horizontal {
          @apply --layout-horizontal;
        }

        .flexchild {
          @apply --layout-flex;
        }

         :host {
          --paper-listbox: {
            border-right: 1px solid black;
            overflow-y: auto;
            height: 400px;
            padding: 0px;
          }
        }

        #chat {
          padding: 10px;
          overflow-y: auto;
        }

        .chatContainer {
          height: 400px;
          border: 1px solid black;
        }

        .flex-horizontal-with-ratios {
          @apply --layout-horizontal;
          width: 80%;
          padding-left: 10%;
        }

        .flex-horizontal-with-ratios div {
          height: 30px;
          display: flex;
          align-items: center;
        }

        .flex1child {
          @apply --layout-flex-1;
        }

        .flex8child {
          @apply --layout-flex-8;
        }

        #progress {
          width: 90%;
          padding-left: 5%;
        }
      </style>
    </custom-style>
    <header>
      <h2>[[name]]</h2>
    </header>

    <div class="container flex-horizontal-with-ratios">
      <div class="flex1child">[[_currentTime]]</div>
      <div class="flex8child">
        <paper-progress id="progress" value="[[_progressRatio]]"></paper-progress>
      </div>
      <div class="flex1child">[[_timeToEnd]]</div>
    </div>
    <div class="chatContainer flex-horizontal">
      <div>
        <paper-listbox>
          <template is="dom-repeat" items="[[_users]]" as="user">
            <paper-item>[[user]]</paper-item>
          </template>
        </paper-listbox>
      </div>
      <div class="flexchild" id="chat"></div>
    </div>
  </template>

  <script>
    /** @polymerElement */
    class VirtualChat extends Polymer.Element {

      static get is() { return 'virtual-chat'; }

      static get properties() {
        return {
          /**
          * Typed words per minute, to calculate time between posts
          */
          TWPM: {
            type: Number,
            readOnly: true,
            value: 50
          },

          /**
          * Read words per minute, to calculate time between posts
          */
          RWPM: {
            type: Number,
            readOnly: true,
            value: 280
          },

          /**
          * Name of the chat
          */
          name: {
            type: String
          },

          /**
          * Conversation to configure component.
          *
          * @type {Array<{user: String, message: String}>}
          */
          script: {
            type: Array,
            value: function () {
              return []
            },
            observer: '_handleScript'
          },

          /**
          * Array of users
          *
          * @type Array<String>
          */
          _users: {
            type: Array,
            value: () => {
              return [];
            }
          },

          /**
          * Value for the progress bar
          */
          _progressRatio: {
            computed: '_calculateProgressRatio(_totalProgressTime,_currentProgressTime)',
            value: 0
          },

          /**
          * Time to end formated as hh:mm:ss
          */
          _timeToEnd: {
            computed: '_formatToHours(_totalProgressTime)',
            type: String
          },

          /**
          * Current time formated as hh:mm:ss
          */
          _currentTime: {
            computed: '_formatToHours(_currentProgressTime)',
            type: String
          },

          /**
          * Counter for the time on the conversation (seconds)
          */
          _totalProgressTimeCounter: {
            type: Number,
            value: 0
          },

          /**
          * Time on the conversation (seconds)
          */
          _totalProgressTime: {
            type: Number,
            value: 0,
            notify: true
          },

          /**
          * Timer for updating the current conversation time
          */
          _timer: {
            type: Number
          },

          /**
          * Current time of conversation (seconds)
          */
          _currentProgressTime: {
            type: Number,
            value: 0,
            notify: true
          },

          /**
          * Array of pending messages for deleting if cleared chat
          */
          _pendingMessages: {
            type: Array,
            value: () => {
              return [];
            }
          }
        };
      }

      /**
       * Clear the chat screen and the future messages, it does not begin again
       */
      clear() {
        // Chat cleaning
        this.$.chat.innerHTML = '';
        this._users = [];

        // Messages cleaning
        for (let printFunction of this._pendingMessages) {
          clearTimeout(printFunction);
        }
        this._pendingMessages = [];

        // Progress cleaning
        clearTimeout(this._timer);
        this._totalProgressTimeCounter = 0;
        this._totalProgressTime = 0;
        this._currentProgressTime = 0;
      }

      /**
       * Reset chat
       */
      reset() {
        this.clear();

        // Makes the chat play again
        this._handleScript(this.script);
      }

      /**
       * Format seconds to String for hh:mm:ss
       * @param {Number} seconds seconds to transform
       * @return {String} formated string
       */
      _formatToHours(seconds) {
        return new Date(seconds * 1000).toISOString().substr(11, 8);
      }

      /**
       * Calculate ratio for progress bar
       * @param {Number} _totalProgressTime total seconds
       * @param {Number} _currentProgressTime current seconds
       * @return {Number} progress %
       */
      _calculateProgressRatio(_totalProgressTime, _currentProgressTime) {
        let progress = 0;
        if (_currentProgressTime !== 0 && _totalProgressTime !== 0) {
          progress = _currentProgressTime / _totalProgressTime;
        }

        return progress * 100;
      }

      /**
       * Set post to be launched to chat.
       * @param {Number} timeToPost needed time to post the message
       * @param {String} post The message to post
       */
      _scheduleMessages(timeToPost, post, user) {
        let printFunction = () => {
          if (this._users.indexOf(user) === -1) {
            this.push('_users', user);
          }
          this.$.chat.appendChild(post);
          this.$.chat.scrollTop = this.$.chat.scrollHeight;

          // Deleting from _pendingMessages array
          this._pendingMessages.shift();
        }

        this._pendingMessages.push(setTimeout(printFunction.bind(this), timeToPost * 1000));
      }

      /**
       * Feed the chat with a message by an user
       * @param {String} user Author of the post
       * @param {String} message The message to post
       */
      _feedChat(user, message) {
        let post;
        let words;
        let secondsTyping;
        let secondsReading;
        let timeToPost;
        let that = this;

        post = document.createElement('p');
        post.innerHTML = `<b> ${user} :</b> ${message}`;

        words = message.split(' ').length;
        secondsTyping = Math.floor((words / this.TWPM) * 60);
        secondsReading = Math.floor((words / this.RWPM) * 60);

        timeToPost = this._totalProgressTimeCounter + secondsTyping;
        this._totalProgressTimeCounter = timeToPost + secondsReading;

        this._scheduleMessages(timeToPost, post, user);
      }

      /**
       * Handles script when it is set
       * @param {Array<{user: String, message: String}>} script Script for feeding the chat
       */
      _handleScript(script) {
        let lineHandler = (line) => {
          this._feedChat(line.user, line.message);
        };
        if (script && script.length) {
          script.forEach(lineHandler.bind(this));
          this._totalProgressTime = this._totalProgressTimeCounter;
          this._initTimer();
        }
      }

      /**
       * Inits timer for current time tracking
       */
      _initTimer() {
        let timeUpdater = () => {
          this._currentProgressTime += 1;
        };

        this._timer = setInterval(timeUpdater.bind(this), 1000);
      }
    };
    window.customElements.define(VirtualChat.is, VirtualChat);
  </script>
</dom-module>