twitch-service

twitch-service

<link rel="import" href="..\..\bower_components/polymer/polymer.html">

<polymer-element name="twitch-service" attributes="">
  <template>
    <style>
     .offline {
       display: none;
     }
    </style>
    <link rel="stylesheet" href="twitch-service.css">
    <template if="{{online}}"><h4>ONLINE</h4></template>
    <template if="{{!online}}"><h4>Offline</h4><a href='http://www.twitch.tv/{{twitchName}}'></a></template>
  </template>
  <script>
    (function () {
      Polymer({
        publish: {
          online: {value: false, reflect: true},
          streams: {value: false, reflect: true},
        },
        twitchName: '<twitch-acc-name>',
        api_key: '<api-key>',
        twitchData: {},

        ready: function() {
          if(this.twitchName === !null) {
            $.getJSON("https://api.twitch.tv/kraken/?client_id="+ this.api_key + '&callback=?',function(twitchData) {
              this.twitchData = twitchData;
            });
          } else {
            $.getJSON("https://api.twitch.tv/kraken/"+ this.twitchName + '?client_id=' + this.api_key + '&callback=?',function(twitchUserData) {
              this.twitchUserData = twitchUserData;
            });
          }
          
          if(this.twitchData) {
            this.globalize();
          }
        },
        globalize: function() {
          if(this.streams) {
            console.log('streams');
            this.streamData = this.twitchData.stream;
          }
          if(this.streamStatus) {
            if(this.twitchData.stream) {
              this.online = true;
            }
            if(!this.twitchData.stream) {
              this.online = false;
            }
          }


          console.log('Data:', this.twitchData);
          if(this.twitchData.stream) {
            // displayed if online
            console.log('test')
            $('#streamWidget').html("<p class='online'>*ONLINE*</p> twitch.tv: <a href='http://www.twitch.tv/"+this.twitchName+"'>"+ streamData.stream.channel.status+"</a>")
          }
        }
      });
    })();
  </script>
</polymer-element>