BGM ShareHouseでの再生履歴を保存するUser Script Google ChromeとOperaで動作確認済み

bgmsharehouse-playhistory.user.js

// ==UserScript==
// @include http://bgm.tokor.org/*
// ==/UserScript==

(function(){
  var PersistentStore = {
    read: function(key){
      return JSON.parse(window.localStorage.getItem(key));
    },
    write: function(key,val){
      return window.localStorage.setItem(key,JSON.stringify(val));
    }
  };

  var PlayLog = {
    __storeKey: "play_log",
    __log: [],
    load: function(){
      var log = PersistentStore.read(this.__storeKey);
      if(log){
        this.__log = log;
      }
    },
    store: function(){
      PersistentStore.write(this.__storeKey, this.__log);
    },
    add: function(info){
      if(!this.exist(info.id)){
        this.__log.push(info);
      }
    },
    find: function(key,val){
      for(var i=0,len=this.__log.length;i<len;i++){
        if(this.__log[i][key] === val){
          return i;
        }
      }
      return -1;
    },
    exist: function(id){
      return this.find("id",id) !== -1;
    },
    getInfo: function(index){
      return this.__log[index];
    }
  };
  var Strategy = function(name,f){
    this.name = name;
    this.__select = f;
  }
  Strategy.prototype.select = function(history){
    //filter invalid log
    return this.__select(history.filter(function(v){
      return typeof(v.title) !== "undefined";
    }));
  };
  var current_strategy = null;
  var strategies = [
    new Strategy("一番最近っぽい50件",
                 function(history){
                   var n = 50;
                   if(history.length<n){
                     return history.slice().reverse();
                   }else{
                     return history.slice(history.length - n).reverse();
                   }
                 }),
    new Strategy("一番昔っぽい50件",
                 function(history){
                   var n = 50;
                   return history.slice(0, n);
                 }),
    new Strategy("ランダムっぽい50件",
                 function(history){
                   var n = 50;
                   var h = history.slice();
                   var res = [];
                   for(var i=0;i<n;i++){
                     var j = Math.floor(Math.random()*h.length);
                     res.push(h[j]);
                     h.splice(j,1);
                   }
                   return res;
                 })
  ];
  var injectPlayLogger = function(){
    var script = document.createElement("script");
    script.textContent = "("+(function(){
      var fireEvent = function(name,val){
        var e;
        if(window.opera){
          e = document.createEvent("Event");
          e.initEvent(name, true, false);
          e.mydata = val;
        }else{
          e = document.createEvent("MessageEvent");
          e.initMessageEvent(name, true, false,
                             JSON.stringify(val),
                             location.protocol + "//" + location.host,
                             "",
                             window
                            );
        }
        document.dispatchEvent(e);
      };
      onNextVideoLoaded = (function(f){
        return function(json){
          setTimeout(function(){
            fireEvent("playVideo",videoInfo);
          },1000);
          return f(json);
        };
      })(onNextVideoLoaded);
    }).toString()+")();";
    document.body.appendChild(script);
  };
  var initListener = function(){
    document.addEventListener("playVideo",function(e){
      var data = e.mydata || JSON.parse(e.data);
      PlayLog.add(data);
      PlayLog.store();
      updateUI();
    },false);
  };
  var initUI = function(){
    var div = document.createElement("div");
    div.innerHTML = [
      '<div>再生履歴:<label for="play-history-strategy">表示</label><select id="play-history-strategy"></select></div>',
      '<div id="play-history-pane" ',
      'style="overflow: scroll;width: 100%;height: 10em;background-color: #fff;"',
      '>',
      '<div id="play-history-inner-pane" style="width: 10000%;">',
      '</div>',
      '</div>'
    ].join("");
    var select = div.getElementsByTagName("select")[0];
    strategies.forEach(function(v,i){
      var option = document.createElement("option");
      option.value = i;
      option.textContent = v.name;
      select.appendChild(option);
    });
    var onchange = function(){
      var i = select.options[select.selectedIndex].value;
      current_strategy = strategies[i];
      updateUI();
    };
    select.addEventListener("change",onchange);
    document.getElementById("content-left").appendChild(div);
    onchange();
  };
  var buildItemUI = function(item){
    var div = document.createElement("div");
    div.style.position = "static";
    div.style.float = "left";
    div.style.width = "150px";
    div.style.height = "200px";
    div.innerHTML = [
      "<p style=\"width: 130px; overflow: hidden;\">"+item.title+"</p>",
      "<p><img src=\""+item.thumbnail+"\" title=\""+item.title+"\"/></p>",
      "<p><a onclick=\"client.addNew('"+item.id+"',function(j){});return false;\" href=\"#\">キューに入れる</a></p>"
    ].join("");
    return div;
  };
  var updateUI = function(){
    var el = document.getElementById("play-history-inner-pane");
    el.innerHTML = "";
    current_strategy.select(PlayLog.__log).forEach(function(item){
      el.appendChild(buildItemUI(item));
    });
  };
  PlayLog.load();
  initUI();
  initListener();
  injectPlayLogger();
})();