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){
    return this.__select(history);
  };
  var current_strategy = null;
  var strategies = [
    new Strategy("一番最近っぽい30件",
                 function(history){
                   var n = 30;
                   if(history.length<n){
                     return history.slice().reverse();
                   }else{
                     return history.slice(history.length - n).reverse();
                   }
                 }),
    new Strategy("一番昔っぽい30件",
                 function(history){
                   var n = 30;
                   return history.slice(0, n);
                 }),
    new Strategy("ランダムっぽい30件",
                 function(history){
                   var n = 30;
                   var h = history.slice();
                   var res = [];
                   for(var i=0;i<n;i++){
                     var j = Math.floor(Math.random()*h.length);
                     j = j===h.length ? j-1 : j;
                     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.id="play-history-wrapper";
    div.className+=" wrapper-left rad";
    div.innerHTML = [
      '<label for="play-history-strategy" style="font-size:12px;">表示</label><select id="play-history-strategy" style="font-size:12px; height:20px;"></select>',
      '<button class="prev button_gray" id="prev_h">&lt;</button>',
      '<div id="play-history-pane"></div>',
      '<button class="next button_gray" id="next_h">&gt;</button>'
    ].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();
      setTimeout(function(){
	      $("#play-history-pane").jCarouselLite({btnNext:"#next_h",btnPrev: "#prev_h",circular: false,scroll:3,visible:3,});
      },0);
    };

    $(".tabs_content").append(div);
    $("ul.tabs").append('<li id="tab_history"><a href="#">再生履歴</a></li>');
    $("ul.tabs").jTabs({content:".tabs_content",animate:true});
    $("#play-history-wrapper").css({"height":"170px", "margin-top":0, "margin-bottom":0});
    $("#prev_h").css({"height":"145px"});
    $("#next_h").css({"height":"145px"});

    var sheet=document.styleSheets[1];
    sheet.insertRule("#play-history-pane{ height:145px; width:450px; display:inline-block; float:left; font-size:12px; text-align:center; }",sheet.cssRules.length);
    sheet.insertRule("#play-history-pane ul li{ height:145px; padding-left:10px; text-align:left }",sheet.cssRules.length);
    sheet.insertRule("#play-history-pane ul li img{ height:100px; width:140px; padding:0; diplay:block; }",sheet.cssRules.length);

    select.addEventListener("change",onchange);
    document.getElementById("tab_history").addEventListener("click",onchange);
    onchange();
  };

  var buildItemUI = function(item){
    var li = document.createElement("li");
    li.style="overflow: hidden; float: left; width: 140px; height: 145px;";
    li.innerHTML = [
      "<div class=\"vid_item\">",
      "<p class=\"vid_title\">"+item.title.slice(0,20)+"</p>",
      "<img src=\""+item.thumbnail+"\" title=\""+item.title+"\" />",
      "<p><a href=\"javascript:void(0);\" onclick=\"client.addNew('"+item.id+"',function(j){});return false;\" id=\"queue_link\" data-id=\""+item.id+"\">キューに入れる</a></p>",
      "</div>"
    ].join("");
    return li;
  };
  var updateUI = function(){
    var el = document.getElementById("play-history-pane");
    el.innerHTML = "";
    el.width=450;
    el.appendChild(document.createElement("ul"));
    current_strategy.select(PlayLog.__log).forEach(function(item){
      if(item===undefined||item.id===undefined||item.title===undefined||item.thumbnail===undefined);
      else{
	      el.children[0].appendChild(buildItemUI(item));
      }
    });
  };
  PlayLog.load();
  initUI();
  initListener();
  injectPlayLogger();
})();

Currently, this code does not work correctly on Google Chrome.