Auto-Rickroller

rick-roll.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/google-signin/google-signin.html">
<link rel="import" href="../bower_components/paper-shadow/paper-shadow.html">
<link rel="import" href="../bower_components/paper-input/paper-autogrow-textarea.html">
<link rel="import" href="../bower_components/paper-input/paper-input-decorator.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/google-apis/google-client-api.html">

<polymer-element name="rick-roll">
  <template>
    <style>

      :host {
        font-family: 'RobotoDraft','Roboto',arial,sans-serif;
      }

      paper-shadow {
        margin: 10px;
        text-align: center;
      }

      paper-shadow > div {
        padding: 10px;
      }

      paper-button {
        background: #4285f4;
        color: #fff;
      }

      paper-autogrow-textarea, paper-input-decorator {
        width: 100%;
      }

      .small {
        font-size: 0.8em;
      }
    </style>
    <google-api-loader name="plus" version="v1" on-google-api-load="{{apiLoaded}}"></google-api-loader>
    <google-api-loader name="youtube" version="v3" on-google-api-load="{{apiLoaded}}"></google-api-loader>
    <div fit layout vertical center-justified center>
      <paper-shadow z="1" layout horizontal>
        <div style="overflow-y: auto;">
          <h1>Auto-Rickroller</h1>
          <div hidden?="{{!signedIn || !loaded}}">
            <paper-input-decorator
              label="Your message"
              isInvalid="{{!message}}"
              error="Message is required">
              <paper-autogrow-textarea id="message">
                <textarea value="{{message}}"></textarea>
              </paper-autogrow-textarea>
            </paper-input-decorator>
            <paper-button
              raised
              on-tap="{{send}}"
              id="send"
              disabled="{{sending || !message}}">Rickroll</paper-button>
            <p class="small">This will post your favourite video on Google+ publicly for all your followers to see. You've been warned.</p>
            <p hidden?="{{!plusUrl}}"><a href="{{plusUrl}}">Your post has been shared!</a></p>
          </div>
          <div layout horizontal center-justified?="{{!signedIn}}" end-justified?="{{signedIn}}">
            <google-signin
              clientId="<YOUR CLIEND ID>"
              scopes="https://www.googleapis.com/auth/youtube.force-ssl https://www.googleapis.com/auth/plus.login"
              on-google-signin-success="{{signIn}}"
              on-google-signed-out="{{signOut}}"
              height="{{signedIn ? 'short' : 'standard'}}"
            ></google-signin>
          </div>
          <p hidden?="{{signedIn}}">
            Sign-in with your Google+ account so you can start sending out your favourite video to your followers.
          </p>
        </div>
      </paper-shadow>
    </div>
  </template>
  <script>
    (function (global) {
      global.Polymer({
        signedIn: false,
        loaded: false,
        sending: false,
        signIn: function () {
          this.signedIn = true;
        },
        signOut: function () {
          this.signedIn = false;
        },
        apiLoaded: function () {
          if (global.gapi.client.plus && global.gapi.client.youtube) {
            this.loaded = true;
          }
        },
        send: function () {
          if (!this.message) {
            return;
          }
          this.sending = true;
          global.gapi.client.youtube.channels.list({'mine': true, 'part': 'id'}).then(function (r) {
            if (r.result.items && r.result.items.length > 0) {
              var channelId = r.result.items[0].id;

              global.gapi.client.youtube.commentThreads.insert({
                'part': 'snippet',
                'shareOnGooglePlus': true,
                'snippet': {
                  'channelId': channelId,
                  'videoId': 'dQw4w9WgXcQ',
                  'topLevelComment': {
                    'snippet': {
                      'textOriginal': this.message
                    }
                  }
                }
              }).then(function (r) {
                var plusId = r.result.id;
                global.gapi.client.plus.activities.get({'activityId': plusId}).then(function (r) {
                  this.plusUrl = r.result.url;
                  this.finished(true);
                }.bind(this), this.failure.bind(this));
              }.bind(this), this.failure.bind(this));
            } else {
              this.failure();
            }
          }.bind(this), this.failure.bind(this));
        },
        failure: function (r) {
          global.console.log(r);
          this.finished(false);
        },
        finished: function (success) {
          if (success) {
            this.message = "";
            this.$.message.update();
          }
          this.$.send.disabled = false;
        }
      });
    }(this));
  </script>
</polymer-element>