ニコニコ動画の動画再生ページのレイアウトが変わった

ニコニコ動画の動画再生ページのレイアウトが変わったので
いつも通りスタイルシートを更新。
ニコニコ動画(9) 動画説明文を動画の横に


ただ更新したのはいい物のこのスタイルシートは16:9に対応していないのが
気に入っていなかったのでGreasemonkey辺りでどうにかできないかと思案。


前にニコニコ動画のプレーヤーからJavaScript経由で得られる情報を調べてみたが
そこからは動画の比率の情報は得られなかったので別の方法を検討。


動画の比率は何かしらの方法でプレーヤーに伝えられているだろうから
それを横からのぞき込んむことで初期の動画の比率を取得できないかと試してみた。


最初のサイズさえ取得できれば後は動画プレーヤーのクリック時にその位置から
比率が変更されたかどうかは分かる、


探してみたところ動画プレーヤーの属性から簡単に取得できた。

// ==UserScript==
// @name           ニコニコ動画(9) 動画説明文を動画の横に
// @namespace      http://d.hatena.ne.jp/kiyo_hoge/
// @description    「http://userstyles.org/styles/16521」の補助
// @include        http://www.nicovideo.jp/watch/*
// ==/UserScript==

location.href = 'javascript:(' + (function() {
  var flvplayer = document.getElementById('flvplayer');
  var watchHeader = document.getElementById('WATCHHEADER');
  
  if (!flvplayer) {
    return;
  }
  
  var flashvars = flvplayer.getAttribute('flashvars');
  var isWide;
  var loaded = false;
  
  if (flashvars.indexOf('isWide=1') >= 0) {
    isWide = true;
    addClass('video-size-wide', flvplayer);
    addClass('video-size-wide', watchHeader);
  }
  else {
    isWide = false;
  }
  
  flvplayer.addEventListener('click', function(e) {
    if (isVideoLoaded() && (flvplayer.ext_getVideoSize() == 'normal')) {
      if (isWide &&
        (632 <= e.layerX) && (e.layerX <= 652) &&
        (453 <= e.layerY) && (e.layerY <= 473)) {
        isWide = false;
        removeClass('video-size-wide', flvplayer);
        removeClass('video-size-wide', watchHeader);
      }
      else if (!isWide &&
        (502 <= e.layerX) && (e.layerX <= 522) && 
        (453 <= e.layerY) && (e.layerY <= 473)) {
        isWide = true;
        addClass('video-size-wide', flvplayer);
        addClass('video-size-wide', watchHeader);
      }
    }
  }, false);
  
  function addClass(className, elm) {
    var classList = elm.className.split(/\s+/);
    for (var i = classList.length; 0 <= i; i--) {
      if ((classList[i] == '') || (classList[i] == className)) {
        classList.splice(i, 1);
      }
    }
    classList.push(className);
    elm.className = classList.join(' ');
  }
  
  function removeClass(className, elm) {
    var classList = elm.className.split(/\s+/);
    for (var i = classList.length; 0 <= i; i--) {
      if ((classList[i] == '') || (classList[i] == className)) {
        classList.splice(i, 1);
      }
    }
    
    if (classList.length == 0) {
      elm.removeAttribute('class');
    }
    else {
      elm.className = classList.join(' ');
    }
  }
  
  function isVideoLoaded() {
    var status;
    if (loaded) {
      return true;
    }
    else {
      try {
        status = flvplayer.ext_getStatus();
      }
      catch (e) {
        status = 'stopped';
      }
      
      if (status != 'stopped') {
        loaded = true;
        return true;
      }
      
      return false;
    }
  }
}).toString() + ')();';

これと併用すれば上記のスタイルシートもプレーヤーサイズの比率変更に
対応することができるようになる。