systrace/catapult/third_party/polymer/components/app-route/demo/youtube-demo/youtube-search.html

<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-input/paper-input.html">
<link rel="import" href="../../../iron-ajax/iron-ajax.html">

<link rel="import" href="../../app-route.html">

<link rel="import" href="route-info.html">

<dom-module id="youtube-search">
  <template>
    <style>
      :host {
        --primary-color: #fff;
        --paper-input-container-color: #fff;
        display: block;
        position: relative;
        padding: 1em;
      }

      route-info {
        color: #fff;
      }
    </style>

    <!-- This app-route consumes the route which was provided by the tail of
    a app-route in the host of this element -->
    <app-route route="{{route}}" pattern="/:searchQuery" data="{{data}}">
    </app-route>

    <paper-input label="Search Youtube" value="{{data.searchQuery}}"></paper-input>

    <route-info route="[[route]]"></route-info>

    <iron-ajax auto
        id="youtubeSearch"
        url="https://www.googleapis.com/youtube/v3/search"
        params="{{params}}"
        last-response="{{videoData}}">
    </iron-ajax>
  </template>

  <script>
    Polymer({
      is: 'youtube-search',

      properties: {
        route: {
          type: Object,
          notify: true
        },

        data: {
          type: Object
        },

        category: {
          type: String,
          notify: true,
          observer: '_categoryChanged'
        },

        params: {
          type: String,
          computed: '_setParams(data.searchQuery)'
        },

        videoData: {
          type: Object,
          notify: true
        }
      },

      observers: ['_pathChanged(route.path)'],

      _pathChanged: function() {
        this.async(function() {
          if (!this.route.path) {
            this.set('route.path', '/');
          }
        });
      },

      _setParams: function(category) {
        return {
          part: 'snippet',
          q: this.data.searchQuery,
          key: 'AIzaSyAuecFZ9xJXbGDkQYWBmYrtzOGJD-iDIgI',
          type: 'video'
        }
      },

    });
  </script>
</dom-module>