• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10<link rel="import" href="../../../polymer/polymer.html">
11<link rel="import" href="../../../paper-input/paper-input.html">
12<link rel="import" href="../../../iron-ajax/iron-ajax.html">
13
14<link rel="import" href="../../app-route.html">
15
16<link rel="import" href="route-info.html">
17
18<dom-module id="youtube-search">
19  <template>
20    <style>
21      :host {
22        --primary-color: #fff;
23        --paper-input-container-color: #fff;
24        display: block;
25        position: relative;
26        padding: 1em;
27      }
28
29      route-info {
30        color: #fff;
31      }
32    </style>
33
34    <!-- This app-route consumes the route which was provided by the tail of
35    a app-route in the host of this element -->
36    <app-route route="{{route}}" pattern="/:searchQuery" data="{{data}}">
37    </app-route>
38
39    <paper-input label="Search Youtube" value="{{data.searchQuery}}"></paper-input>
40
41    <route-info route="[[route]]"></route-info>
42
43    <iron-ajax auto
44        id="youtubeSearch"
45        url="https://www.googleapis.com/youtube/v3/search"
46        params="{{params}}"
47        last-response="{{videoData}}">
48    </iron-ajax>
49  </template>
50
51  <script>
52    Polymer({
53      is: 'youtube-search',
54
55      properties: {
56        route: {
57          type: Object,
58          notify: true
59        },
60
61        data: {
62          type: Object
63        },
64
65        category: {
66          type: String,
67          notify: true,
68          observer: '_categoryChanged'
69        },
70
71        params: {
72          type: String,
73          computed: '_setParams(data.searchQuery)'
74        },
75
76        videoData: {
77          type: Object,
78          notify: true
79        }
80      },
81
82      observers: ['_pathChanged(route.path)'],
83
84      _pathChanged: function() {
85        this.async(function() {
86          if (!this.route.path) {
87            this.set('route.path', '/');
88          }
89        });
90      },
91
92      _setParams: function(category) {
93        return {
94          part: 'snippet',
95          q: this.data.searchQuery,
96          key: 'AIzaSyAuecFZ9xJXbGDkQYWBmYrtzOGJD-iDIgI',
97          type: 'video'
98        }
99      },
100
101    });
102  </script>
103</dom-module>
104