concerto-field.html

<!--
  The `concerto-field` element provides a field for a screen which manages
  fetching and displaying content elements.
-->
<dom-module id="concerto-field">

  <style>
    :host {
      display: block;
      width: 100%;
      height: 100%;
    }

    #content {
      width: 100%;
      height: 100%;
    }
  </style>

  <template>
    <iron-ajax
      id="contentsData"
      handle-as="json"
      on-response="handleContents"
      on-error="handleContentsError">
    </iron-ajax>
    <div id="content"></div>
  </template>

  <script>
    Polymer({
      is: "concerto-field",

      behaviors: [ConcertoBehaviors.ContentFactory,
                  Polymer.NeonAnimationRunnerBehavior],

      properties: {
        cacheKey: {
          type: String,
          observer: 'cacheKeyChanged'
        },
        screenId: Number,
        fieldId: Number,
        fieldName: String,
        baseUrl: String,
        timezone: {
          type: String,
          reflectToAttribute: true
        },
        handleContentLoadedBound: Object,
        currentContent: Object,
        contentStyle: String,
        contentQueue: {
          type: Array,
          value: []
        },
        contentErrorCount: {
          type: Number,
          value: 0
        },
        optConfig: {
          type: Object,
          observer: 'configTransition'
        },
        animationConfig: {
          type: Object,
          value: function() {
            return {
              'entry': {
                name: 'fade-in-animation',
                node: this.$.content
              },
              'exit': {
                name: 'fade-out-animation',
                node: this.$.content
              },
            }
          }
        },
        lastUpdated: {
          type: Number,
          value: 0
        }
      },

      created: function() {
        this.contentQueue = [];
        this.handleContentLoadedBound = this.handleContentLoaded.bind(this);
      },

      ready: function() {
        var contents = this.baseUrl + "/frontend/" + this.screenId + "/fields/" + this.fieldId + "/contents.json";
        this.$.contentsData.url = contents;
        this.loadNextContent();
      },

      cacheKeyChanged: function (newValue, oldValue) {
        if (oldValue !== undefined && oldValue !== null && newValue !== oldValue) {
          this.fire('fieldCacheKeyChanged', { newValue: newValue, oldValue: oldValue });
        }
      },

      configTransition: function() {
        // Customize entry transition
        if (this.optConfig['entry_transition']) {
          if (this.optConfig['entry_transition'] == 'replace') {
            this.animationConfig['entry']['name'] = 'transform-animation';
          } else {
            this.animationConfig['entry']['name'] = this.optConfig['entry_transition'];
          }
          this.animationConfig['entry']['node'] = this.$.content;
        }
        // Customize exit transition
        if (this.optConfig['exit_transition']) {
          if (this.optConfig['exit_transition'] == 'replace') {
            this.animationConfig['exit']['name'] = 'transform-animation';
          } else {
            this.animationConfig['exit']['name'] = this.optConfig['exit_transition'];
          }
          this.animationConfig['exit']['node'] = this.$.content;
        }
      },

      /**
       * Fetch new content from the server.
       *
       * @function fetchContent
       */
      fetchContent: function() {
        this.$.contentsData.generateRequest();
      },

      /**
       * Handle the content data back from the server.
       *
       * If content is returned and the field is currently blank we schedule
       * an immediate update of the field.
       */
      handleContents: function(event, response) {
        var key = response.xhr.getResponseHeader('X-Concerto-Frontend-Setup-Key');
        if (key) {
          this.cacheKey = key;
        }
        Array.prototype.push.apply(this.contentQueue, response.response);
        if(!this.currentContent && this.contentQueue.length >= 1) {
          // We are currently not showing content and some is now in the queue.
          // We schedule an update ASAP.
          console.log('Urgent content update for field ' + this.fieldId);
          this.scheduleNextContent(1);
        }
      },

      /**
       * Handle an error loading content data.
       */
      handleContentsError: function(event, xhr) {
        console.log('Error retrieving content data for field ' + this.fieldId);
      },

      /**
       * Load the next piece of content in the queue.
       *
       * Grab the next piece of content from the front of the queue and start
       * loading it. If the content fails to load move on to the next item in
       * the queue and repeat until something works or the queue is empty.
       *
       * If there is no content in the queue or the queue is empty after
       * grabbing the next piece call `fetchContent` to request more content.
       *
       * @function loadNextContent
       */
      loadNextContent: function() {
        var contentData = this.contentQueue.shift();

        // If the queue is empty fill it up.
        if (!contentData || this.contentQueue.length < 1) {
          this.fetchContent();
        }

        // Field kind is time, initialize content data for time
        if (this.fieldName == "Time") {
          var contentData = {
            'duration': 15,
            'id': 0,
            'name': 'System Time',
            'type': 'ClientTime',
            'render_details': {'timezone': this.timezone}
          };
        }

        if(!contentData) {
          var clear_content = this.optConfig['screens_clear_last_content'];
          if (clear_content == null || typeof clear_content == 'undefined') {
            clear_content = true;
          }

          // There was no content in the queue, try again in a few seconds.
          console.log('No content available for field ' + this.fieldId);
          this.scheduleNextContent(10 * 1000);
          // clearout any leftover content from what may be an empty feed
          if (this.lastUpdated > 0 && clear_content == true
            && Math.abs((this.lastUpdated - Date.now()) / 1000) > 60) {

            console.log('Removing stale content from field ' + this.fieldId);

            //this.displayContent(null);
            var contentData = {
              'duration': 10,
              'id': 0,
              'name': 'Empty Content - Waiting',
              'type': 'Empty',
              'render_details': {}
            };
            this.loadContent(contentData);


            this.lastUpdated = 0;
          }
        } else {
          // If we currently have content and the new content has the same id as
          // the current content, then throw it out so we don't end up reloading
          // the same piece of content.  Only do this if the field_config repeat_content
          // is set to 'Reload'. It's default value should be 'Suppress'.
          if (typeof this.currentContent !== 'undefined' && this.fieldName != 'Time') {
            // console.debug('checking for duplicate with ' + this.currentContent.contentId);
            var repeat_content = this.optConfig['repeat_content'] && this.optConfig['repeat_content'] == 'Reload';
            if (!repeat_content && this.currentContent.contentId != null && contentData != null &&
                this.currentContent.contentId == contentData.id && contentData['type'] != 'RemoteVideo') {
              console.log('skipping same piece of content ' + contentData.id + ' for field ' + this.fieldId);
              // We don't do this for RemoteVideo above because because
              // it needs to reload to replay, not just sit at the end for the whole duration.
              this.scheduleNextContent(this.currentContent.duration * 1000);
              return;
            }
          }

          if(!this.loadContent(contentData)) {
            // The contend failed to load.
            console.log('Unable to load ' + contentData.type + ' content for field ' + this.fieldId);
            this.contentErrorCount++;
            // Allow the field to retry 5 times quickly.
            if (this.contentErrorCount <= 5) {
              // Move on to the next content -- instead of calling recursively, use the scheduler
              // this.loadNextContent();
              if (this.isDebouncerActive('updateFieldContent' + this.fieldId)) {
                // if there is a pending call then do it now
                this.flushDebouncer('updateFieldContent' + this.fieldId);
              } else {
                this.scheduleNextContent(1);
              }
            } else {
              // Schedule a delayed retry of up to 5 minutes.
              var retryDuration = Math.min((this.contentErrorCount - 1) * 30, 600);
              console.log('Retrying in ' + retryDuration + ' seconds.');
              this.scheduleNextContent(retryDuration * 1000);
            }
          } else {
            // The content loaded sucessfully.
            this.contentErrorCount = 0;
          }
        }
      },

      /**
       * Load a piece of content based on the content data.
       *
       * Attempt to build a new HtmlElement for the content via the factory
       * and call the `fromJSON` method on that element to begin loading.
       *
       * @function loadContent
       * @param {Object} contentData
       * @returns {Boolean} Return true if the content started loading OK.
       */
      loadContent: function(contentData) {
        if (!contentData) {
          console.log('Missing contentData for field ' + this.fieldId);
          return false;
        }

        var simpleContentData = {
          title: contentData.name,
          contentId: contentData.id,
          duration: contentData.duration,
          config: this.optConfig
        };

        // Flatten render_details
        Object.keys(contentData.render_details).forEach(function(key) {
          simpleContentData[key] = contentData.render_details[key];
        });

        var contentType = contentData.type;
        var content = ConcertoBehaviors.ContentFactory.getType(contentType);
        if (!content) {
          console.log('No content type registered for ' + contentType);
          return false;
        }

        // Listen for the content load event when content data is initialized
        content.addEventListener('load', this.handleContentLoadedBound);
        // Content data is set and load event is fired
        content.baseUrl = this.baseUrl;
        content.cssText = this.contentStyle;
        content.fromJSON(simpleContentData);

        return true;
      },

      /**
       * Handle a piece of content that has fired the `load` event to indicate
       * it is ready to be displayed.
       */
      handleContentLoaded: function(event) {
        var content = event.detail;
        content.removeEventListener('load', this.handleContentLoadedBound);
        this.displayContent(content);
      },

      /**
       * Display a HtmlElement representing a content in the field.
       *
       * Schedule the next content updating to occur after the content duration
       * is up.
       *
       * @function displayContent
       * @param {Element} content ConcertoContent element to be displayed or
       *   null if content is to be removed.
       */
      displayContent: function(content) {
        if (this.currentContent) {
          // handle content transition after initial screen load
          this.addEventListener('neon-animation-finish', function _replaceContent(e) {
            // remove old content
            this.handleTransitionOutComplete(e, this.currentContent);
            this.removeEventListener('neon-animation-finish', _replaceContent);
            if (content) {
              // Transition new content in
              this.lastUpdated = Date.now();
              this.$.content.appendChild(content);
              this.playAnimation('entry');
              content.opened = true;
            }
            this.currentContent = content;
          });
          this.playAnimation('exit');
        } else {
          // handle content transition on initial screen load or when content was not there previously
          if (content) {
            this.lastUpdated = Date.now();
            this.$.content.appendChild(content);
            this.playAnimation('entry');
            content.opened = true;
            this.currentContent = content;
          }
        }

        // wait to insert new contents until old content duration expires
        if (content) {
          this.scheduleNextContent(content.duration * 1000);
        }
      },

      handleTransitionOutComplete: function(e, content) {
        Polymer.dom(this.$.content).removeChild(content);
        Polymer.dom.flush();
      },

      /**
       * Schedule an attempt to load the next piece of content for this field.
       *
       * @function scheduleNextContent
       * @param {Number} msToWait Number of milliseconds to wait.
       */
      scheduleNextContent: function(msToWait) {
        this.debounce('updateFieldContent' + this.fieldId, function() {
          this.loadNextContent();
        }, msToWait);
      }
    });
  </script>

</dom-module>