/**
 * Event Screen
 * screen side ui
 */
/* globals Vue, io, Sound */

Vue.config.delimiters = ["[", "]"];

(function (socket) {
  // sound preload
  var sounds = {
    notify: new Sound("/sounds/se_pinponpan01.webm")
  };

  var vm = new Vue({
    data: function () {
      return {
        connected: false,
        name: "",
        channel: "",
        tweets: [],
        message: ""
      };
    },
    created: function () {
      var path = location.pathname.slice(1).split("/");
      var is_screen = path[0] === "screen";
      if (is_screen) {
        this.join(null, path[1]);
      }

      this.$on("restore", function (channel) {
        channel.type = "tweet";
        var tweet_json = sessionStorage.getItem("tweets");
        // restore tweets stream
        if (channel.type === "tweet" && channel.name === sessionStorage.getItem("channel") && tweet_json) {
          console.log(JSON.parse(tweet_json));
          this.$data.tweets = this.$data.tweets.concat(JSON.parse(tweet_json));
        }
      });
    },
    methods: {
      join: function (e, _id) {
        e && e.preventDefault();

        var that = this;

        var name = this.$data.name;

        socket = io.connect();
        socket.on("connect", function () {
          if (! _id) {
            socket.emit("join", {
              name: name
            }, function (err, screen) {
              console.log(err, screen);

              that.$data.connected = true;
              var url = "/screen/" + screen._id;

              if (window.history) {
                history.pushState({}, screen._id, url);
              } else {
                location.assign(url);
              }
            });
          } else {
            socket.emit("join", {
              screen_id: _id
            }, function (err, screen) {
              console.log(err, screen);

              that.$data.connected = true;
              that.$data.name = screen.name;
              that.$data.channel = screen.channel.name;

              that.$emit("restore", screen.channel);
            });
          }
        }).on("error", function (err) {
          console.error(err);
        });

        socket.on("data", function (data) {
          console.log(data);
        });

        socket.on("tweet", function (tweet) {
          var tweets = that.$data.tweets;
          tweets.unshift(tweet);
          // 200 件を超えたら先頭 100 件を残して削除
          if (tweets.length >= 200) {
            tweets.splice(100, Infinity);
          }
          sessionStorage.setItem("channel", that.$data.channel);
          sessionStorage.setItem("tweets", JSON.stringify(tweets));
        });

        socket.on("update", function (screen) {
          console.log(screen);
          that.$data.name = screen.name;
          that.$data.channel = screen.channel.name;
        });

        socket.on("reload", function () {
          location.reload(true);
        });

        socket.on("notify", function (info) {
          console.log(info);
          if (info.sound && sounds[info.sound]) {
            sounds[info.sound].play();
          }
          if (info.message != null) {
            that.$data.message = info.message;
          }
        });
      }
    }
  });

  vm.$mount(document.body);

})(null);

@@ -875,55 +875,8 @@
 ) %7B%0A
-          console.log(JSON.parse(tweet_json));%0A
     
@@ -947,24 +947,24 @@
 eet_json));%0A
+
         %7D%0A  
@@ -1336,32 +1336,50 @@
     console.log(
+%22connect-join-A%22, 
 err, screen);%0A%0A 
@@ -1803,16 +1803,34 @@
 ole.log(
+%22connect-join-B%22, 
 err, scr
@@ -1916,32 +1916,70 @@
  = screen.name;%0A
+              if (screen.channel) %7B%0A  
               th
@@ -2014,25 +2014,26 @@
 annel.name;%0A
-%0A
+  
             
@@ -2065,32 +2065,48 @@
 creen.channel);%0A
+              %7D%0A
             %7D);%0A
@@ -2266,16 +2266,24 @@
 ole.log(
+%22data%22, 
 data);%0A 
@@ -2761,16 +2761,26 @@
 ole.log(
+%22update%22, 
 screen);
@@ -3016,24 +3016,24 @@
 on (info) %7B%0A
-
           co
@@ -3042,16 +3042,26 @@
 ole.log(
+%22notify%22, 
 info);%0A 

Update debug log