シークバーに出るサムネイルを並べて表示
// ==UserScript==
// @name NicoVideoStoryboard
// @namespace https://github.com/segabito/
// @description シークバーに出るサムネイルを並べて表示
// @match http://www.nicovideo.jp/watch/*
// @match http://flapi.nicovideo.jp/api/getflv*
// @match http://*.nicovideo.jp/smile*
// @grant none
// @author segabito macmoto
// @version 1.3.5
// ==/UserScript==
// ver 1.1.2 仕様変更への暫定対応(後で調べてちゃんと直す)
// ver 1.1.0 Chrome + Tampermonkeyでも動くようにした
// ver 1.0.10 長時間動画でCookieの期限が切れるとサムネイルが取得できない問題に対処
// ver 1.0.6 CustomGinzaWatchと併用した時に干渉するのを調整
// ver 1.0.5 デモモードを追加。連続再生時、サムネイルの無い動画をスキップする (iPadで見せびらかす用モード)
// ver 1.0.4 タッチパネルでの操作を改善 (Windows Chromeのみ。Firefoxはいまいち)
// ver 1.0.3 WUXGAモニターフルスクリーン時に動画部分が1920x1080になるよう調整
// ver 1.0.1 フルスクリーンモードで開いた時はプレイヤー領域を押し上げるようにした
(function() {
var monkey = function() {
var DEBUG = !true;
var require = window.require; // , define = window.define;
var $ = require('jquery'), _ = require('lodash'), WatchApp = require('WatchApp');
var inherit = require('cjs!inherit');
var emitter = require('cjs!emitter');
var __css__ = (function() {/*
.xDomainLoaderFrame {
position: fixed;
top: -999px;
left: -999px;
width: 1px;
height: 1px;
border: 0;
}
.storyboardContainer {
position: fixed;
bottom: -300px;
left: 0;
right: 0;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
background: #999;
border: 2px outset #000;
z-index: 9005;
overflow: visible;
border-radius: 10px 10px 0 0;
border-width: 2px 2px 0;
box-shadow: 0 -2px 2px #666;
transition: bottom 0.5s ease-in-out;
}
{* FlashPlayerに重なる可能性のない状況ではGPUレイヤーにする *}
.full_with_brower .storyboardContainer,
.videoExplorer .storyboardContainer {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.storyboardContainer.withCustomGinzaWatch {
z-index: 100000;
}
.storyboardContainer.show {
bottom: 0;
}
.storyboardContainer .storyboardInner {
display: none;
position: relative;
text-align: center;
overflow-x: scroll;
white-space: nowrap;
background: #222;
margin: 4px 12px 3px;
border-style: inset;
border-width: 2px 4px;
border-radius: 10px 10px 0 0;
}
.storyboardContainer.success .storyboardInner {
display: block;
}
.storyboardContainer .storyboardInner .boardList {
overflow: hidden;
}
.storyboardContainer .boardList .board {
display: inline-block;
cursor: pointer;
background-color: #101010;
}
.storyboardContainer.clicked .storyboardInner * {
opacity: 0.3;
pointer-events: none;
}
.storyboardContainer.opening .storyboardInner .boardList .board {
pointer-events: none;
}
.storyboardContainer .boardList .board.lazyImage:not(.hasSub) {
background-color: #ccc;
cursor: wait;
}
.storyboardContainer .boardList .board.loadFail {
background-color: #c99;
}
.storyboardContainer .boardList .board > div {
white-space: nowrap;
}
.storyboardContainer .boardList .board .border {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-style: solid;
border-color: #000 #333 #000 #999;
border-width: 0 2px 0 2px;
display: inline-block;
}
.storyboardContainer .boardList .board:hover .border {
display: none; {* クリックできなくなっちゃうので苦し紛れの対策 もうちょっとマシな方法を考える *}
}
.storyboardContainer .storyboardHeader {
position: relative;
width: 100%;
}
.storyboardContainer .pointer {
position: absolute;
bottom: -15px;
left: 50%;
width: 32px;
margin-left: -16px;
color: #333;
z-index: 9010;
text-align: center;
}
.storyboardContainer .cursorTime {
display: none;
position: absolute;
bottom: -30px;
left: -999px;
font-size: 10pt;
border: 1px solid #000;
z-index: 9010;
background: #ffc;
pointer-events: none;
}
.storyboardContainer:hover .cursorTime {
display: block;
}
.storyboardContainer.clicked .cursorTime,
.storyboardContainer.opening .cursorTime {
display: none;
}
.storyboardContainer .setToDisable {
position: absolute;
display: inline-block;
right: 300px;
bottom: -32px;
transition: bottom 0.3s ease-in-out;
}
.storyboardContainer:hover .setToDisable {
bottom: 0;
}
.storyboardContainer .setToDisable button,
.setToEnableButtonContainer button {
background: none repeat scroll 0 0 #999;
border-color: #666;
border-radius: 18px 18px 0 0;
border-style: solid;
border-width: 2px 2px 0;
width: 200px;
overflow: auto;
white-space: nowrap;
cursor: pointer;
box-shadow: 0 -2px 2px #666;
}
.full_with_browser .setToEnableButtonContainer button {
box-shadow: none;
color: #888;
background: #000;
}
.full_with_browser .storyboardContainer .setToDisable,
.full_with_browser .setToEnableButtonContainer {
background: #000; {* Firefox対策 *}
}
.setToEnableButtonContainer button {
width: 200px;
}
.storyboardContainer .setToDisable button:hover,
.setToEnableButtonContainer:not(.loading):not(.fail) button:hover {
background: #ccc;
transition: none;
}
.storyboardContainer .setToDisable button.clicked,
.setToEnableButtonContainer.loading button,
.setToEnableButtonContainer.fail button,
.setToEnableButtonContainer button.clicked {
border-style: inset;
box-shadow: none;
}
.setToEnableButtonContainer {
position: fixed;
z-index: 9003;
right: 300px;
bottom: 0px;
transition: bottom 0.5s ease-in-out;
}
.setToEnableButtonContainer.withCustomGinzaWatch {
z-index: 99999;
}
.setToEnableButtonContainer.loadingVideo {
bottom: -50px;
}
.setToEnableButtonContainer.loading *,
.setToEnableButtonContainer.loadingVideo *{
cursor: wait;
font-size: 80%;
}
.setToEnableButtonContainer.fail {
color: #999;
cursor: default;
font-size: 80%;
}
.NicoVideoStoryboardSettingMenu {
height: 44px !important;
}
.NicoVideoStoryboardSettingMenu a {
font-weight: bolder;
}
#NicoVideoStoryboardSettingPanel {
position: fixed;
bottom: 2000px; right: 8px;
z-index: -1;
width: 500px;
background: #f0f0f0; border: 1px solid black;
padding: 8px;
transition: bottom 0.4s ease-out;
text-align: left;
}
#NicoVideoStoryboardSettingPanel.open {
display: block;
bottom: 8px;
box-shadow: 0 0 8px black;
z-index: 10000;
}
#NicoVideoStoryboardSettingPanel .close {
position: absolute;
cursor: pointer;
right: 8px; top: 8px;
}
#NicoVideoStoryboardSettingPanel .panelInner {
background: #fff;
border: 1px inset;
padding: 8px;
min-height: 300px;
overflow-y: scroll;
max-height: 500px;
}
#NicoVideoStoryboardSettingPanel .panelInner .item {
border-bottom: 1px dotted #888;
margin-bottom: 8px;
padding-bottom: 8px;
}
#NicoVideoStoryboardSettingPanel .panelInner .item:hover {
background: #eef;
}
#NicoVideoStoryboardSettingPanel .windowTitle {
font-size: 150%;
}
#NicoVideoStoryboardSettingPanel .itemTitle {
}
#NicoVideoStoryboardSettingPanel label {
margin-right: 12px;
}
#NicoVideoStoryboardSettingPanel small {
color: #666;
}
#NicoVideoStoryboardSettingPanel .expert {
margin: 32px 0 16px;
font-size: 150%;
background: #ccc;
}
body.full_with_browser #divrightbar,
body.full_with_browser #divrightbar1,
body.full_with_browser #divrightbar2,
body.full_with_browser #divrightbar3,
body.full_with_browser #divrightbar4,
body.full_with_browser #divrightbar5,
body.full_with_browser #divrightbar6,
body.full_with_browser #divrightbar7,
body.full_with_browser #divrightbar8,
body.full_with_browser #divrightbar9,
body.full_with_browser #divrightbar10,
body.full_with_browser #divrightbar11,
body.full_with_browser #divrightbar12 {
display: none !important;
}
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1].replace(/\{\*/g, '/*').replace(/\*\}/g, '*/');
var storyboardTemplate = [
'<div id="storyboardContainer" class="storyboardContainer">',
'<div class="storyboardHeader">',
'<div class="setToDisable"><button>閉じる ▼</button></div>',
'<div class="pointer">▼</div>',
'<div class="cursorTime"></div>',
'</div>',
'<div class="storyboardInner"></div>',
'<div class="failMessage">',
'</div>',
'</div>',
'',
''].join('');
// マスコットキャラクターのサムネーヨちゃん
var noThumbnailAA = (function() {/*
∧ ∧ ┌─────────────
( ´ー｀) ＜ サムネーヨ
＼ < └───/|────────
＼.＼＿＿＿＿__／/
＼ ／
∪∪‾∪∪
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1].replace(/\{\*/g, '/*').replace(/\*\}/g, '*/');
var EventDispatcher = (function() {
function AsyncEventDispatcher() {
}
inherit(AsyncEventDispatcher, emitter);
AsyncEventDispatcher.prototype.dispatchEvent = AsyncEventDispatcher.prototype.emit;
AsyncEventDispatcher.prototype.addEventListener = AsyncEventDispatcher.prototype.on;
AsyncEventDispatcher.prototype.removeEventListener = AsyncEventDispatcher.prototype.off;
_.assign(AsyncEventDispatcher.prototype, {
dispatchAsync: function() {
var args = arguments;
window.setTimeout($.proxy(function() {
try {
this.dispatchEvent.apply(this, args);
} catch (e) {
console.log(e);
}
}, this), 0);
}
});
return AsyncEventDispatcher;
})();
window.NicoVideoStoryboard =
(function() {
return {
api: {},
model: {},
view: {},
controller: {},
external: {},
event: {}
};
})();
// var console =
// (function(debug) {
// var n = window._.noop;
// return debug ? window.console : {log: n, trace: n, time: n, timeEnd: n};
// })(DEBUG);
var console = window.console;
window.NicoVideoStoryboard.event.windowEventDispatcher = (function() {
var eventDispatcher = new EventDispatcher();
var onMessage = function(event) {
if (event.origin.indexOf('nicovideo.jp') < 0) return;
try {
var data = JSON.parse(event.data);
if (data.id !== 'NicoVideoStoryboard') { return; }
eventDispatcher.dispatchEvent('onMessage', data.body, data.type);
} catch (e) {
console.log(
'%cNicoVideoStoryboard.Error: window.onMessage - ',
'color: red; background: yellow',
e
);
console.log('%corigin: ', 'background: yellow;', event.origin);
console.log('%cdata: ', 'background: yellow;', event.data);
console.trace();
}
};
window.addEventListener('message', onMessage);
return eventDispatcher;
})();
var initializeWatchController = function() {
window.NicoVideoStoryboard.external.watchController = (function() {
var PlayerInitializer = require('watchapp/init/PlayerInitializer');
var PlaylistInitializer = require('watchapp/init/PlaylistInitializer');
var CommonModelInitializer = require('watchapp/init/CommonModelInitializer');
var WatchInfoModel = require('watchapp/model/WatchInfoModel');
var nicoPlayerConnector = PlayerInitializer.nicoPlayerConnector;
var viewerInfoModel = CommonModelInitializer.viewerInfoModel;
var playerAreaConnector = PlayerInitializer.playerAreaConnector;
var playlist = PlaylistInitializer.playlist;
var watchInfoModel = WatchInfoModel.getInstance();
var externalNicoplayer;
var watchController = new EventDispatcher();
var getVpos = function() {
return nicoPlayerConnector.getVpos();
};
var setVpos = function(vpos) {
nicoPlayerConnector.seekVideo(vpos);
};
var _isPlaying = null;
var isPlaying = function() {
if (_isPlaying !== null) {
return _isPlaying;
}
if (!externalNicoplayer) {
externalNicoplayer = $("#external_nicoplayer")[0];
}
var status = externalNicoplayer.ext_getStatus();
return status === 'playing';
};
var play = function() {
nicoPlayerConnector.playVideo();
};
var pause = function() {
nicoPlayerConnector.stopVideo();
};
var isPremium = function() {
return !!viewerInfoModel.isPremium;
};
var getWatchId = function() {// スレッドIDだったりsmXXXXだったり
return watchInfoModel.v;
};
var getVideoId = function() {// smXXXXXX, soXXXXX など
return watchInfoModel.id;
};
var popupMarquee = require('watchapp/init/PopupMarqueeInitializer').popupMarqueeViewController;
var popup = {
message: function(text) {
popupMarquee.onData(
'<span style="background: black;">' + text + '</span>'
);
},
alert: function(text) {
popupMarquee.onData(
'<span style="background: black; color: red;">' + text + '</span>'
);
}
};
var _playlist = {
isContinuous: function() {
return playlist.isContinuous();
},
playNext: function() {
nicoPlayerConnector.playNextVideo();
},
playPrev: function() {
nicoPlayerConnector.playpreviousVideo();
}
};
playerAreaConnector.addEventListener('onVideoPlayed', function() {
_isPlaying = true;
watchController.dispatchEvent('onVideoPlayed');
});
playerAreaConnector.addEventListener('onVideoStopped', function() {
_isPlaying = false;
watchController.dispatchEvent('onVideoStopped');
});
playerAreaConnector.addEventListener('onVideoStarted', function() {
_isPlaying = true;
watchController.dispatchEvent('onVideoStarted');
});
playerAreaConnector.addEventListener('onVideoEnded', function() {
_isPlaying = false;
watchController.dispatchEvent('onVideoEnded');
});
playerAreaConnector.addEventListener('onVideoSeeking', function() {
//console.log('%conVideoSeeking', 'background: cyan');
watchController.dispatchEvent('onVideoSeeking');
});
playerAreaConnector.addEventListener('onVideoSeeked', function() {
//console.log('%conVideoSeeked', 'background: cyan');
watchController.dispatchEvent('onVideoSeeked');
});
playerAreaConnector.addEventListener('onVideoInitialized', function() {
watchController.dispatchEvent('onVideoInitialized');
});
watchInfoModel.addEventListener('reset', function() {
watchController.dispatchEvent('onWatchInfoReset');
});
var isWatchItLaterExist = function() {
return !!window.WatchItLater;
};
var isShinjukuWatchExist = function() {
return !!window.ShinjukuWatch;
};
var isCustomGinzaWatchExist = function() {
return $('body>#prefDiv').length > 0;
};
_.assign(watchController, {
getVpos: getVpos,
setVpos: setVpos,
isPlaying: isPlaying,
play: play,
pause: pause,
isPremium: isPremium,
getWatchId: getWatchId,
getVideoId: getVideoId,
popup: popup,
playlist: _playlist,
isWatchItLaterExist: isWatchItLaterExist,
isShinjukuWatchExist: isShinjukuWatchExist,
isCustomGinzaWatchExist: isCustomGinzaWatchExist
});
return watchController;
})();
};
window.NicoVideoStoryboard.api.getflv = (function() {
var BASE_URL = 'http://flapi.nicovideo.jp/api/getflv/';
var loaderFrame, loaderWindow, cache = {};
var eventDispatcher = window.NicoVideoStoryboard.event.windowEventDispatcher;
var getflv = new EventDispatcher();
var parseInfo = function(q) {
var info = {}, lines = q.split('&');
$.each(lines, function(i, line) {
var tmp = line.split('=');
var key = window.unescape(tmp[0]), value = window.unescape(tmp[1]);
info[key] = value;
});
return info;
};
var onMessage = function(data, type) {
if (type !== 'getflv') { return; }
var info = parseInfo(data.info), url = data.url;
cache[url] = info;
//console.log('getflv.onGetflvLoad', info);
getflv.dispatchAsync('onGetflvLoad', info);
};
var initialize = function() {
initialize = _.noop;
console.log('%c initialize getflv', 'background: lightgreen;');
loaderFrame = document.createElement('iframe');
loaderFrame.name = 'getflvLoader';
loaderFrame.className = DEBUG ? 'xDomainLoaderFrame debug' : 'xDomainLoaderFrame';
document.body.appendChild(loaderFrame);
loaderWindow = loaderFrame.contentWindow;
eventDispatcher.addEventListener('onMessage', onMessage);
};
var load = function(watchId) {
initialize();
var pim = require('watchapp/init/PlayerInitializer').playerInitializeModel;
if (pim && pim.flashVars && pim.flashVars.flvInfo) {
console.log('%cflashVars.flvInfo exist', 'background: lightgreen;');
getflv.dispatchAsync('onGetflvLoad', parseInfo(unescape(pim.flashVars.flvInfo)));
return;
}
var url = BASE_URL + watchId;
//console.log('getflv: ', url);
getflv.dispatchEvent('onGetflvLoadStart', watchId);
if (cache[url]) {
//console.log('%cgetflv cache exist', 'background: cyan', url);
getflv.dispatchAsync('onGetflvLoad', cache[url]);
} else {
loaderWindow.location.replace(url);
}
};
_.assign(getflv, {
load: load
});
return getflv;
})();
window.NicoVideoStoryboard.api.thumbnailInfo = (function() {
var getflv = window.NicoVideoStoryboard.api.getflv;
var loaderFrame, loaderWindow, cache = {};
var eventDispatcher = window.NicoVideoStoryboard.event.windowEventDispatcher;
var thumbnailInfo = new EventDispatcher();
var onGetflvLoad = function(info) {
//console.log('thumbnailInfo.onGetflvLoad', info);
if (!info.url) {
thumbnailInfo.dispatchAsync(
'onThumbnailInfoLoad',
{status: 'ng', message: 'サムネイル情報の取得に失敗しました'}
);
return;
} else
if (info.url.indexOf('http://') !== 0) { // rtmpe:～など
thumbnailInfo.dispatchAsync(
'onThumbnailInfoLoad',
{status: 'ng', message: 'この配信形式には対応していません'}
);
return;
}
var url = info.url + '&sb=1';
// Tampermonkeyでは、Content-type: text/xmlのページでスクリプトを実行できないため、
// いったんxmlと同一ドメインにあるサムネイルを表示してそこ経由でスクリプトを起動する
var thumbnailUrl = info.url.replace(/smile\?.=(\d+).*$/, 'smile?i=$1');
thumbnailInfo.dispatchEvent('onThumbnailInfoLoadStart');
if (cache[url]) {
//console.log('%cthumbnailInfo cache exist', 'background: cyan', url);
thumbnailInfo.dispatchAsync('onThumbnailInfoLoad', cache[url]);
return;
}
if (window.navigator.userAgent.toLowerCase().indexOf('webkit') < -1) {
// Firefox + Greasemonkey
loaderWindow.location.replace(url);
} else {
// Chrome (Tampermonkey)
loaderWindow.location.replace(thumbnailUrl + '#' + url);
}
};
var onMessage = function(data, type) { // onThumbnailInfoLoadMessage
if (type !== 'storyboard') { return; }
//console.log('thumbnailInfo.onMessage: ', data, type);
var url = data.url;
var xml = data.xml, $xml = $(xml), $storyboard = $xml.find('storyboard');
if ($storyboard.length < 1) {
thumbnailInfo.dispatchAsync(
'onThumbnailInfoLoad',
{status: 'ng', message: 'この動画にはサムネイルがありません'}
);
return;
}
var info = {
status: 'ok',
message: '成功',
url: data.url,
movieId: $xml.find('movie').attr('id'),
duration: $xml.find('duration').text(),
storyboard: []
};
for (var i = 0, len = $storyboard.length; i < len; i++) {
var sbInfo = parseStoryboard($($storyboard[i]), url);
info.storyboard.push(sbInfo);
}
info.storyboard.sort(function(a, b) {
var idA = parseInt(a.id.substr(1), 10), idB = parseInt(b.id.substr(1), 10);
return (idA < idB) ? 1 : -1;
});
console.log('%cstoryboard info', 'background: cyan', info);
cache[url] = info;
thumbnailInfo.dispatchAsync('onThumbnailInfoLoad', info);
};
var parseStoryboard = function($storyboard, url) {
var storyboardId = $storyboard.attr('id') || '1';
return {
id: storyboardId,
url: url.replace('sb=1', 'sb=' + storyboardId),
thumbnail:{
width: $storyboard.find('thumbnail_width').text(),
height: $storyboard.find('thumbnail_height').text(),
number: $storyboard.find('thumbnail_number').text(),
interval: $storyboard.find('thumbnail_interval').text()
},
board: {
rows: $storyboard.find('board_rows').text(),
cols: $storyboard.find('board_cols').text(),
number: $storyboard.find('board_number').text()
}
};
};
var initialize = function() {
initialize = _.noop;
console.log('%c initialize thumbnailInfo', 'background: lightgreen;');
loaderFrame = document.createElement('iframe');
loaderFrame.name = 'StoryboardLoader';
loaderFrame.className = DEBUG ? 'xDomainLoaderFrame debug' : 'xDomainLoaderFrame';
document.body.appendChild(loaderFrame);
loaderWindow = loaderFrame.contentWindow;
eventDispatcher.addEventListener('onMessage', onMessage);
getflv.addEventListener('onGetflvLoad', onGetflvLoad);
};
var load = function(watchId) {
initialize();
getflv.load(watchId);
};
_.assign(thumbnailInfo, {
load: load
});
return thumbnailInfo;
})();
window.NicoVideoStoryboard.model.StoryboardModel = (function() {
function StoryboardModel(params) {
this._thumbnailInfo = params.thumbnailInfo;
this._isEnabled = params.isEnabled;
this._watchId = params.watchId;
WatchApp.extend(this, StoryboardModel, EventDispatcher);
}
_.assign(StoryboardModel.prototype, {
initialize: function(info) {
console.log('%c initialize StoryboardModel', 'background: lightgreen;');
this.update(info);
},
update: function(info) {
if (info.status !== 'ok') {
_.assign(info, {
duration: 1,
url: '',
storyboard: [{
id: 1,
url: '',
thumbnail: {
width: 1,
height: 1,
number: 1,
interval: 1
},
board: {
rows: 1,
cols: 1,
number: 1
}
}]
});
}
this._info = info;
this.dispatchEvent('update');
},
reset: function() {
if (this.isEnabled()) {
window.setTimeout($.proxy(function() {
this.load();
}, this), 1000);
}
this.dispatchEvent('reset');
},
load: function() {
this._isEnabled = true;
this._thumbnailInfo.load(this._watchId);
},
setWatchId: function(watchId) {
this._watchId = watchId;
},
unload: function() {
this._isEnabled = false;
this.dispatchEvent('unload');
},
isEnabled: function() {
return this._isEnabled;
},
hasSubStoryboard: function() {
return this._info.storyboard.length > 1;
},
getStatus: function() { return this._info.status; },
getMessage: function() { return this._info.message; },
getDuration: function() { return parseInt(this._info.duration, 10); },
getUrl: function(i) { return this._info.storyboard[i || 0].url; },
getWidth: function(i) { return parseInt(this._info.storyboard[i || 0].thumbnail.width, 10); },
getHeight: function(i) { return parseInt(this._info.storyboard[i || 0].thumbnail.height, 10); },
getInterval: function(i) { return parseInt(this._info.storyboard[i || 0].thumbnail.interval, 10); },
getCount: function(i) {
return Math.max(
Math.ceil(this.getDuration() / Math.max(0.01, this.getInterval())),
parseInt(this._info.storyboard[i || 0].thumbnail.number, 10)
);
},
getRows: function(i) { return parseInt(this._info.storyboard[i || 0].board.rows, 10); },
getCols: function(i) { return parseInt(this._info.storyboard[i || 0].board.cols, 10); },
getPageCount: function(i) { return parseInt(this._info.storyboard[i || 0].board.number, 10); },
getTotalRows: function(i) {
return Math.ceil(this.getCount(i) / this.getCols(i));
},
getPageWidth: function(i) { return this.getWidth(i) * this.getCols(i); },
getPageHeight: function(i) { return this.getHeight(i) * this.getRows(i); },
getCountPerPage: function(i) { return this.getRows(i) * this.getCols(i); },
/**
* nページ目のURLを返す。 ゼロオリジン
*/
getPageUrl: function(page, storyboardIndex) {
page = Math.max(0, Math.min(this.getPageCount(storyboardIndex) - 1, page));
return this.getUrl(storyboardIndex) + '&board=' + (page + 1);
},
/**
* vposに相当するサムネは何番目か？を返す
*/
getIndex: function(vpos, storyboardIndex) {
// msec -> sec
var v = Math.floor(vpos / 1000);
v = Math.max(0, Math.min(this.getDuration(), v));
// サムネの総数 ÷ 秒数
// Math.maxはゼロ除算対策
var n = this.getCount(storyboardIndex) / Math.max(1, this.getDuration());
return parseInt(Math.floor(v * n), 10);
},
/**
* Indexのサムネイルは何番目のページにあるか？を返す
*/
getPageIndex: function(thumbnailIndex, storyboardIndex) {
var perPage = this.getCountPerPage(storyboardIndex);
var pageIndex = parseInt(thumbnailIndex / perPage, 10);
return Math.max(0, Math.min(this.getPageCount(storyboardIndex), pageIndex));
},
/**
* vposに相当するサムネは何ページの何番目にあるか？を返す
*/
getThumbnailPosition: function(vpos, storyboardIndex) {
var thumbnailIndex = this.getIndex(vpos, storyboardIndex);
var pageIndex = this.getPageIndex(thumbnailIndex);
var mod = thumbnailIndex % this.getCountPerPage(storyboardIndex);
var row = Math.floor(mod / Math.max(1, this.getCols()));
var col = mod % this.getRows(storyboardIndex);
return {
page: pageIndex,
index: thumbnailIndex,
row: row,
col: col
};
},
/**
* nページ目のx, y座標をvposに変換して返す
*/
getPointVpos: function(x, y, page, storyboardIndex) {
var width = Math.max(1, this.getWidth(storyboardIndex));
var height = Math.max(1, this.getHeight(storyboardIndex));
var row = Math.floor(y / height);
var col = Math.floor(x / width);
var mod = x % width;
// 何番目のサムネに相当するか？
var point =
page * this.getCountPerPage(storyboardIndex) +
row * this.getCols(storyboardIndex) +
col +
(mod / width) // 小数点以下は、n番目の左端から何%あたりか
;
// 全体の何%あたり？
var percent = point / Math.max(1, this.getCount(storyboardIndex));
percent = Math.max(0, Math.min(100, percent));
// vposは㍉秒単位なので1000倍
return Math.floor(this.getDuration() * percent * 1000);
},
/**
* vposは何ページ目に当たるか？を返す
*/
getVposPage: function(vpos, storyboardIndex) {
var index = this._storyboard.getIndex(vpos, storyboardIndex);
var page = this._storyboard.getPageIndex(index, storyboardIndex);
return page;
},
/**
* nページ目のCols, Rowsがsubではどこになるかを返す
*/
getPointPageColAndRowForSub: function(page, row, col) {
var mainPageCount = this.getCountPerPage();
var subPageCount = this.getCountPerPage(1);
var mainCols = this.getCols();
var subCols = this.getCols(1);
var mainIndex = mainPageCount * page + mainCols * row + col;
var subOffset = mainIndex % subPageCount;
var subPage = Math.floor(mainIndex / subPageCount);
var subRow = Math.floor(subOffset / subCols);
var subCol = subOffset % subCols;
return {
page: subPage,
row: subRow,
col: subCol
};
},
});
return StoryboardModel;
})();
window.NicoVideoStoryboard.view.FullScreenModeView = (function() {
var __TEMPLATE__ = (function() {/*
body.full_with_browser{
background: #000;
}
body.full_with_browser.NicoVideoStoryboardOpen #content{
margin-bottom: {$storyboardHeight}px;
transition: margin-bottom 0.5s ease-in-out;
}
{* フルスクリーン関係ないけど一旦ここに... *}
body.NicoVideoStoryboardOpen #footer {
min-height: {$storyboardHeight}px;
}
body.NicoVideoStoryboardOpen.videoExplorer #content.w_adjusted .videoExplorerMenuInner,
body.NicoVideoStoryboardOpen #leftPanel.sidePanel .sideVideoInfo .videoDescription {
margin-bottom: {$storyboardHeight}px;
}
body.NicoVideoStoryboardOpen #divrightbar,
body.NicoVideoStoryboardOpen #divrightbar1,
body.NicoVideoStoryboardOpen #divrightbar2,
body.NicoVideoStoryboardOpen #divrightbar3,
body.NicoVideoStoryboardOpen #divrightbar4,
body.NicoVideoStoryboardOpen #divrightbar5,
body.NicoVideoStoryboardOpen #divrightbar6,
body.NicoVideoStoryboardOpen #divrightbar7,
body.NicoVideoStoryboardOpen #divrightbar8,
body.NicoVideoStoryboardOpen #divrightbar9,
body.NicoVideoStoryboardOpen #divrightbar10,
body.NicoVideoStoryboardOpen #divrightbar11,
body.NicoVideoStoryboardOpen #divrightbar12
{
height: calc(100% - {$storyboardHeight}px);
}
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1].replace(/\{\*/g, '/*').replace(/\*\}/g, '*/');
var addStyle = function(styles, id) {
var elm = document.createElement('style');
window.setTimeout(function() {
elm.type = 'text/css';
if (id) { elm.id = id; }
var text = styles.toString();
text = document.createTextNode(text);
elm.appendChild(text);
var head = document.getElementsByTagName('head');
head = head[0];
head.appendChild(elm);
}, 0);
return elm;
};
function FullScreenModeView() {
this._css = null;
this._lastHeight = -1;
}
_.assign(FullScreenModeView.prototype, {
initialize: function() {
if (this._css) { return; }
console.log('%cinitialize NicoVideoStorybaordFullScreenStyle', 'background: lightgreen;');
this._css = addStyle('/* undefined */', 'NicoVideoStorybaordFullScreenStyle');
},
update: function($container) {
this.initialize();
var height = $container.outerHeight();
if (height === this._lastHeight) { return; }
this._lastHeight = height;
var newCss = __TEMPLATE__.split('{$storyboardHeight}').join(height);
this._css.innerHTML = newCss;
}
});
return FullScreenModeView;
})();
window.NicoVideoStoryboard.view.SetToEnableButtonView = (function() {
var TEXT = {
DEFAULT: 'サムネイルを開く ▲',
LOADING: '動画を読み込み中...',
GETFLV: '動画情報を読み込み中...',
THUMBNAIL: 'サムネイル情報を読み込み中...'
};
function SetToEnableButtonView(params) {
this._storyboard = params.storyboard;
this._eventDispatcher = params.eventDispatcher;
this._watchController = params.watchController;
this.initialize();
}
_.assign(SetToEnableButtonView.prototype, {
initialize: function() {
console.log('%c initialize SetToEnableButtonView', 'background: lightgreen;');
this._$view = $([
'<div class="setToEnableButtonContainer loadingVideo">',
'<button>', TEXT.DEFAULT, '</button>',
'</div>',
'',
'',
''].join(''));
this._$button = this._$view.find('button');
this._$button.on('click', $.proxy(this._onButtonClick, this));
this._$view.toggleClass('withCustomGinzaWatch', this._watchController.isCustomGinzaWatchExist());
var sb = this._storyboard;
sb.addEventListener('reset', $.proxy(this._onStoryboardReset, this));
sb.addEventListener('update', $.proxy(this._onStoryboardUpdate, this));
var evt = this._eventDispatcher;
evt.addEventListener('getFlvLoadStart',
$.proxy(this._onGetflvLoadStart, this));
evt.addEventListener('onThumbnailInfoLoadStart',
$.proxy(this._onThumbnailInfoLoadStart, this));
evt.addEventListener('onWatchInfoReset',
$.proxy(this._onWatchInfoReset, this));
$('body').append(this._$view);
},
reset: function() {
this._$view.attr('title', '');
if (this._storyboard.isEnabled()) {
this._$view.removeClass('loadingVideo getflv thumbnailInfo fail success').addClass('loading');
this._setText(TEXT.GETFLV);
} else {
this._$view.removeClass('loadingVideo getflv thumbnailInfo fail success loading');
this._setText(TEXT.DEFAULT);
}
},
_setText: function(text) {
this._$button.text(text);
},
_onButtonClick: function(e) {
if (
this._$view.hasClass('loading') ||
this._$view.hasClass('loadingVideo') ||
this._$view.hasClass('fail')) {
return;
}
e.preventDefault();
e.stopPropagation();
var $view = this._$view.addClass('loading clicked');
this._eventDispatcher.dispatchEvent('onEnableStoryboard');
window.setTimeout(function() {
$view.removeClass('clicked');
$view = null;
}, 1000);
},
_onStoryboardReset: function() {
this.reset();
},
_onStoryboardUpdate: function() {
var storyboard = this._storyboard;
if (storyboard.getStatus() === 'ok') {
window.setTimeout($.proxy(function() {
this._$view
.removeClass('loading getflv thumbnailInfo')
.addClass('success')
.attr('title', '');
this._setText(TEXT.DEFAULT);
}, this), 3000);
} else {
this._$view
.removeClass('loading')
.addClass('fail')
.attr('title', DEBUG ? noThumbnailAA : '');
this._setText(storyboard.getMessage());
}
},
_onGetflvLoadStart: function() {
this._$view.addClass('loading getflv');
this._setText(TEXT.GETFLV);
},
_onThumbnailInfoLoadStart: function() {
this._$view.addClass('loading thumbnailInfo');
this._setText(TEXT.THUMBNAIL);
},
_onWatchInfoReset: function() {
this._$view.addClass('loadingVideo');
this._setText(TEXT.LOADING);
}
});
return SetToEnableButtonView;
})();
var RequestAnimationFrame = function(callback, frameSkip) {
this.initialize(callback, frameSkip);
};
_.assign(RequestAnimationFrame.prototype, {
initialize: function(callback, frameSkip) {
this.requestAnimationFrame = _.bind((window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame), window);
this._frameSkip = Math.max(0, typeof frameSkip === 'number' ? frameSkip : 0);
this._frameCount = 0;
this._callback = callback;
this._enable = false;
this._onFrame = _.bind(this._onFrame, this);
},
_onFrame: function() {
if (this._enable) {
this._frameCount++;
try {
if (this._frameCount % (this._frameSkip + 1) === 0) {
this._callback();
}
} catch (e) {
console.log('%cException!', 'background: red;', e);
}
this.requestAnimationFrame(this._onFrame);
}
},
enable: function() {
if (this._enable) { return; }
this._enable = true;
this.requestAnimationFrame(this._onFrame);
},
disable: function() {
this._enable = false;
}
});
var StoryboardBlockList =
window.NicoVideoStoryboard.view.StoryboardBlockList = (function() {
var StoryboardBlock = function(option) {
this.initialize(option);
};
_.assign(StoryboardBlock.prototype, {
initialize: function(option) {
var height = option.boardHeight;
this._backgroundPosition = '0 -' + height * option.row + 'px';
this._src = option.src;
this._page = option.page;
this._isLoaded = false;
var $view = $('<div class="board"/>')
.css({
width: option.pageWidth,
height: height,
backgroundPosition: '0 -' + height * option.row + 'px'
})
.attr({
'data-src': option.src,
'data-page': option.page,
'data-top': height * option.row + height / 2,
'data-backgroundPosition': this._backgroundPosition
})
.append(option.$inner);
if (option.page === 0) {
this._isLoaded = true;
$view.css('background-image', 'url(' + option.src + ')');
} else {
// subStoryboardへの手抜き対応
// subの一行あたりの行数＝mainの整数倍 という前提が崩れたら破綻する
if (option.subOffset) {
var offset = option.subOffset;
this.hasSub = true;
$view
.addClass('hasSub')
.css({
'background-image': 'url(' + option.subSrc + ')',
'background-position': '-' + option.width * offset.col + 'px -' + height * offset.row + 'px',
'background-size': '200% auto'
});
}
$view.addClass('lazyImage page-' + option.page);
}
this._$view = $view;
},
loadImage: function() {
if (this._isLoaded) {
return;
}
var $view = this._$view;
var img = new Image();
img.onload = _.bind(function() {
$view
.css({
'background-image': 'url(' + this._src + ')',
'background-position': this._backgroundPosition,
'background-size': '',
})
.removeClass('lazyImage page-' + this._page);
$view = img = null;
}, this);
img.onerror = function() {
$view = img = null;
};
img.src = this._src;
this._isLoaded = true;
},
getPage: function() {
return this._page;
},
getView: function() {
return this._$view;
}
});
var StoryboardBlockBorder = function(width, height, cols) {
this.initialize(width, height, cols);
};
_.assign(StoryboardBlockBorder.prototype, {
initialize: function(width, height, cols) {
var $border = $('<div class="border"/>').css({
width: width,
height: height
});
var $div = $('<div />');
for (var i = 0; i < cols; i++) {
$div.append($border.clone());
}
this._$view = $div;
},
getView: function() {
return this._$view.clone();
}
});
var StoryboardBlockList = function(storyboard) {
this.initialize(storyboard);
};
_.assign(StoryboardBlockList.prototype, {
initialize: function(storyboard) {
if (storyboard) {
this.create(storyboard);
}
},
create: function(storyboard) {
var pages = storyboard.getPageCount();
var pageWidth = storyboard.getPageWidth();
var width = storyboard.getWidth();
var height = storyboard.getHeight();
var rows = storyboard.getRows();
var cols = storyboard.getCols();
var totalRows = storyboard.getTotalRows();
var rowCnt = 0;
this._$innerBorder =
new StoryboardBlockBorder(width, height, cols);
var $view = $('<div class="boardList"/>')
.css({
width: storyboard.getCount() * width,
paddingLeft: '50%',
paddingRight: '50%',
height: height
});
this._$view = $view;
this._blocks = [];
this._lazyLoaded = [];
var hasSubStoryboard = storyboard.hasSubStoryboard();
for (var i = 0; i < pages; i++) {
var src = storyboard.getPageUrl(i);
for (var j = 0; j < rows; j++) {
var option = {
width: width,
pageWidth: pageWidth,
boardHeight: height,
page: i,
row: j,
src: src
};
if (i > 0 && hasSubStoryboard) {
var offset = storyboard.getPointPageColAndRowForSub(i, j, 0);
option.subOffset = offset;
option.subSrc = storyboard.getPageUrl(offset.page, 1);
}
this.appendBlock(option);
rowCnt++;
if (rowCnt >= totalRows) {
break;
}
}
}
this._lazyLoadImageTimer =
window.setTimeout(_.bind(this._lazyLoadAll, this), 1000 * 60 * 4);
},
appendBlock: function(option) {
option.$inner = this._$innerBorder.getView();
var block = new StoryboardBlock(option);
this._blocks.push(block);
this._$view.append(block.getView());
},
loadImage: function(pageNumber) {
if (pageNumber < 1 || this._lazyLoaded[pageNumber]) {
return;
}
this._lazyLoaded[pageNumber] = true;
for (var i = 0, len = this._blocks.length; i < len; i++) {
var block = this._blocks[i];
if (block.getPage() <= pageNumber) {
block.loadImage();
}
}
},
_lazyLoadAll: function() {
console.log('%clazyLoadAll', 'background: cyan;');
for (var i = 1, len = this._blocks.length; i < len; i++) {
this._blocks[i].loadImage();
}
},
clear: function() {
this._$view.remove();
if (this._lazyLoadImageTimer) {
window.clearTimeout(this._lazyLoadImageTimer);
}
},
getView: function() {
return this._$view;
}
});
return StoryboardBlockList;
})();
window.NicoVideoStoryboard.view.StoryboardView = (function() {
var VPOS_RATE = 10;
function StoryboardView(params) {
this.initialize(params);
}
_.assign(StoryboardView.prototype, {
initialize: function(params) {
console.log('%c initialize StoryboardView', 'background: lightgreen;');
this._watchController = params.watchController;
var evt = this._eventDispatcher = params.eventDispatcher;
var sb = this._storyboard = params.storyboard;
this._isHover = false;
this._autoScroll = true;
this._currentUrl = '';
this._lazyImage = {};
this._lastPage = -1;
this._lastVpos = 0;
this._lastGetVpos = 0;
this._timerCount = 0;
this._scrollLeft = 0;
this._frameSkip = params.frameSkip || 1;
this._enableButtonView =
new window.NicoVideoStoryboard.view.SetToEnableButtonView({
storyboard: sb,
eventDispatcher: this._eventDispatcher,
watchController: this._watchController
});
this._fullScreenModeView =
new window.NicoVideoStoryboard.view.FullScreenModeView();
evt.addEventListener('onWatchInfoReset', $.proxy(this._onWatchInfoReset, this));
sb.addEventListener('update', $.proxy(this._onStoryboardUpdate, this));
sb.addEventListener('reset', $.proxy(this._onStoryboardReset, this));
sb.addEventListener('unload', $.proxy(this._onStoryboardUnload, this));
this._requestAnimationFrame = new RequestAnimationFrame(_.bind(this._onTimerInterval, this), this._frameSkip);
},
_initializeStoryboard: function() {
this._initializeStoryboard = _.noop;
console.log('%cStoryboardView.initializeStoryboard', 'background: lightgreen;');
var $view = this._$view = $(storyboardTemplate);
var $inner = this._$inner = $view.find('.storyboardInner');
this._$failMessage = $view.find('.failMessage');
this._$cursorTime = $view.find('.cursorTime');
this._$disableButton = $view.find('.setToDisable button');
$view
.on('click', '.board',
$.proxy(this._onBoardClick, this))
.on('mousemove', '.board',
$.proxy(this._onBoardMouseMove, this))
.on('mousemove', '.board',
_.debounce($.proxy(this._onBoardMouseMoveEnd, this), 300))
.on('mousewheel',
$.proxy(this._onMouseWheel, this))
.on('mousewheel',
_.debounce($.proxy(this._onMouseWheelEnd, this), 300))
.toggleClass('withCustomGinzaWatch', this._watchController.isCustomGinzaWatchExist());
var self = this;
var onHoverIn = function() { self._isHover = true; };
var onHoverOut = function() { self._isHover = false; };
$inner
.hover(onHoverIn, onHoverOut)
.on('touchstart', $.proxy(this._onTouchStart, this))
.on('touchend', $.proxy(this._onTouchEnd, this))
.on('touchmove', $.proxy(this._onTouchMove, this))
.on('scroll', _.throttle(function() { self._onScroll(); }, 500));
this._watchController
.addEventListener('onVideoSeeked', $.proxy(this._onVideoSeeked, this));
this._watchController
.addEventListener('onVideoSeeking', $.proxy(this._onVideoSeeking, this));
this._$disableButton.on('click',
$.proxy(this._onDisableButtonClick, this));
$('body')
.append($view)
.on('touchend', function() { self._isHover = false; });
},
_onBoardClick: function(e) {
var $board = $(e.target), offset = $board.offset();
var y = $board.attr('data-top') * 1;
var x = e.pageX - offset.left;
var page = $board.attr('data-page');
var vpos = this._storyboard.getPointVpos(x, y, page);
if (isNaN(vpos)) { return; }
var $view = this._$view;
$view.addClass('clicked');
window.setTimeout(function() { $view.removeClass('clicked'); }, 1000);
this._eventDispatcher.dispatchEvent('onStoryboardSelect', vpos);
this._$cursorTime.css({left: -999});
this._isHover = false;
if ($board.hasClass('lazyImage')) { this._lazyLoadImage(page); }
},
_onBoardMouseMove: function(e) {
var $board = $(e.target), offset = $board.offset();
var y = $board.attr('data-top') * 1;
var x = e.pageX - offset.left;
var page = $board.attr('data-page');
var vpos = this._storyboard.getPointVpos(x, y, page);
if (isNaN(vpos)) { return; }
var sec = Math.floor(vpos / 1000);
var time = Math.floor(sec / 60) + ':' + ((sec % 60) + 100).toString().substr(1);
this._$cursorTime.text(time).css({left: e.pageX});
this._isHover = true;
this._isMouseMoving = true;
if ($board.hasClass('lazyImage')) { this._lazyLoadImage(page); }
},
_onBoardMouseMoveEnd: function(e) {
this._isMouseMoving = false;
},
_onMouseWheel: function(e, delta) {
e.preventDefault();
e.stopPropagation();
this._isHover = true;
this._isMouseMoving = true;
var left = this.scrollLeft();
this.scrollLeft(left - delta * 140);
},
_onMouseWheelEnd: function(e, delta) {
this._isMouseMoving = false;
},
_onTouchStart: function(e) {
e.stopPropagation();
this._syncScrollLeft();
},
_onTouchEnd: function(e) {
e.stopPropagation();
},
_onTouchMove: function(e) {
e.stopPropagation();
this._isHover = true;
this._syncScrollLeft();
},
_onTouchCancel: function(e) {
},
_onVideoSeeking: function() {
},
_onVideoSeeked: function() {
if (!this._storyboard.isEnabled()) {
return;
}
if (this._storyboard.getStatus() !== 'ok') {
return;
}
var vpos = this._watchController.getVpos();
var page = this._storyboard.getVposPage(vpos);
this._lazyLoadImage(page);
if (this.isHover || !this._watchController.isPlaying()) {
this._onVposUpdate(vpos, true);
} else {
this._onVposUpdate(vpos);
}
},
update: function() {
this.disableTimer();
this._initializeStoryboard();
this._$view.removeClass('show success');
$('body').removeClass('NicoVideoStoryboardOpen');
if (this._storyboard.getStatus() === 'ok') {
this._updateSuccess();
} else {
this._updateFail();
}
},
scrollLeft: function(left) {
if (left === undefined) {
return this._scrollLeft;
} else
if (left === 0 || Math.abs(this._scrollLeft - left) >= 1) {
this._$inner[0].scrollLeft = left;
this._scrollLeft = left;
}
},
/**
* 現在の動画の位置に即スクロール
*/
scrollToVpos: function() {
vpos = this._watchController.getVpos();
this._onVposUpdate(vpos, true);
},
scrollToNext: function() {
this.scrollLeft(this._storyboard.getWidth());
},
scrollToPrev: function() {
this.scrollLeft(-this._storyboard.getWidth());
},
/**
* 変数として持ってるscrollLeftを実際の値と同期
*/
_syncScrollLeft: function() {
this._scrollLeft = this._$inner[0].scrollLeft;
},
_updateSuccess: function() {
var url = this._storyboard.getUrl();
var $view = this._$view.addClass('opening');
if (this._currentUrl === url) {
$view.addClass('show success');
this.enableTimer();
} else {
this._currentUrl = url;
console.time('createStoryboardDOM');
this._updateSuccessFull();
console.timeEnd('createStoryboardDOM');
}
$('body').addClass('NicoVideoStoryboardOpen');
window.setTimeout(function() {
$view.removeClass('opening');
$view = null;
}, 1000);
},
_updateSuccessFull: function() {
var list = new StoryboardBlockList(this._storyboard);
this._storyboardBlockList = list;
this._$inner.empty().append(list.getView()).append(this._$pointer);
var $view = this._$view;
$view.removeClass('fail').addClass('success');
this._fullScreenModeView.update($view);
window.setTimeout(function() { $view.addClass('show'); }, 100);
this.scrollLeft(0);
this.enableTimer();
},
_lazyLoadImage: function(pageNumber) { //return;
if (this._storyboardBlockList) {
this._storyboardBlockList.loadImage(pageNumber);
}
},
_updateFail: function() {
this._$view.removeClass('success').addClass('fail');
this.disableTimer();
},
clear: function() {
if (this._$view) {
this._$inner.empty();
}
this.disableTimer();
},
_clearTimer: function() {
this._requestAnimationFrame.disable();
},
enableTimer: function() {
this._clearTimer();
this._isHover = false;
this._requestAnimationFrame.enable();
},
disableTimer: function() {
this._clearTimer();
},
_onTimerInterval: function() {
if (this._isHover) { return; }
if (!this._autoScroll) { return; }
if (!this._storyboard.isEnabled()) { return; }
var div = VPOS_RATE;
var mod = this._timerCount % div;
this._timerCount++;
var vpos;
if (!this._watchController.isPlaying()) {
return;
}
// getVposが意外に時間を取るので回数を減らす
// そもそもコメントパネルがgetVpos叩きまくってるんですがそれは
if (mod === 0) {
vpos = this._watchController.getVpos();
} else {
vpos = this._lastVpos;
}
this._onVposUpdate(vpos);
},
_onVposUpdate: function(vpos, isImmediately) {
var storyboard = this._storyboard;
var duration = Math.max(1, storyboard.getDuration());
var per = vpos / (duration * 1000);
var width = storyboard.getWidth();
var boardWidth = storyboard.getCount() * width;
var targetLeft = boardWidth * per + width * 0.4;
var currentLeft = this.scrollLeft();
var leftDiff = targetLeft - currentLeft;
if (Math.abs(leftDiff) > 5000) {
leftDiff = leftDiff * 0.93; // 大きくシークした時
} else {
leftDiff = leftDiff / VPOS_RATE;
}
this._lastVpos = vpos;
this.scrollLeft(isImmediately ? targetLeft : (currentLeft + Math.round(leftDiff)));
},
_onScroll: function() {
var storyboard = this._storyboard;
var scrollLeft = this.scrollLeft();
var page = Math.round(scrollLeft / (storyboard.getPageWidth() * storyboard.getRows()));
this._lazyLoadImage(Math.min(page, storyboard.getPageCount() - 1));
},
reset: function() {
this._lastVpos = -1;
this._lastPage = -1;
this._currentUrl = '';
this._timerCount = 0;
this._scrollLeft = 0;
this._lazyImage = {};
this._autoScroll = true;
if (this._storyboardBlockList) {
this._storyboardBlockList.clear();
}
if (this._$view) {
$('body').removeClass('NicoVideoStoryboardOpen');
this._$view.removeClass('show');
this._$inner.empty();
}
},
_onDisableButtonClick: function(e) {
e.preventDefault();
e.stopPropagation();
var $button = this._$disableButton;
$button.addClass('clicked');
window.setTimeout(function() {
$button.removeClass('clicked');
}, 1000);
this._eventDispatcher.dispatchEvent('onDisableStoryboard');
},
_onStoryboardUpdate: function() {
this.update();
},
_onStoryboardReset: function() {
},
_onStoryboardUnload: function() {
$('body').removeClass('NicoVideoStoryboardOpen');
if (this._$view) {
this._$view.removeClass('show');
}
},
_onWatchInfoReset: function() {
this.reset();
}
});
return StoryboardView;
})();
window.NicoVideoStoryboard.controller.StoryboardController = (function() {
function StoryboardController(params) {
this.initialize(params);
}
_.assign(StoryboardController.prototype, {
initialize: function(params) {
console.log('%c initialize StoryboardController', 'background: lightgreen;');
this._thumbnailInfo = params.thumbnailInfo;
this._watchController = params.watchController;
this._config = params.config;
var evt = this._eventDispatcher = params.eventDispatcher;
evt.addEventListener('onVideoInitialized',
$.proxy(this._onVideoInitialized, this));
evt.addEventListener('onWatchInfoReset',
$.proxy(this._onWatchInfoReset, this));
evt.addEventListener('onStoryboardSelect',
$.proxy(this._onStoryboardSelect, this));
evt.addEventListener('onEnableStoryboard',
$.proxy(this._onEnableStoryboard, this));
evt.addEventListener('onDisableStoryboard',
$.proxy(this._onDisableStoryboard, this));
evt.addEventListener('onGetflvLoadStart',
$.proxy(this._onGetflvLoadStart, this));
evt.addEventListener('onThumbnailInfoLoadStart',
$.proxy(this._onThumbnailInfoLoadStart, this));
evt.addEventListener('onThumbnailInfoLoad',
$.proxy(this._onThumbnailInfoLoad, this));
this._initializeStoryboard();
},
_initializeStoryboard: function() {
this._initializeStoryboard = _.noop;
if (!this._storyboardModel) {
var nsv = window.NicoVideoStoryboard;
this._storyboardModel = new nsv.model.StoryboardModel({
thumbnailInfo: this._thumbnailInfo,
isEnabled: this._config.get('enabled') === true,
watchId: this._watchController.getWatchId()
});
}
if (!this._storyboardView) {
this._storyboardView = new window.NicoVideoStoryboard.view.StoryboardView({
watchController: this._watchController,
eventDispatcher: this._eventDispatcher,
storyboard: this._storyboardModel,
frameSkip: this._config.get('frameSkip')
});
}
},
load: function(watchId) {
if (watchId) {
this._storyboardModel.setWatchId(watchId);
}
this._storyboardModel.load();
},
unload: function() {
if (this._storyboardModel) {
this._storyboardModel.unload();
}
},
_onVideoInitialized: function() {
this._initializeStoryboard();
this._storyboardModel.reset();
},
_onWatchInfoReset: function() {
this._storyboardModel.setWatchId(this._watchController.getWatchId());
},
_onThumbnailInfoLoad: function(info) {
//console.log('StoryboardController._onThumbnailInfoLoad', info);
this._storyboardModel.update(info);
},
_onStoryboardSelect: function(vpos) {
//console.log('_onStoryboardSelect', vpos);
this._watchController.setVpos(vpos);
},
_onEnableStoryboard: function() {
window.setTimeout($.proxy(function() {
this._config.set('enabled', true);
this.load();
}, this), 0);
},
_onDisableStoryboard: function() {
window.setTimeout($.proxy(function() {
this._config.set('enabled', false);
this.unload();
}, this), 0);
},
_onGetflvLoadStart: function() {
},
_onThumbnailInfoLoadStart: function() {
}
});
return StoryboardController;
})();
_.assign(window.NicoVideoStoryboard, {
_addStyle: function(styles, id) {
var elm = document.createElement('style');
window.setTimeout(function() {
elm.type = 'text/css';
if (id) { elm.id = id; }
var text = styles.toString();
text = document.createTextNode(text);
elm.appendChild(text);
var head = document.getElementsByTagName('head');
head = head[0];
head.appendChild(elm);
}, 0);
return elm;
},
initialize: function() {
console.log('%c initialize NicoVideoStoryboard', 'background: lightgreen;');
this._initializeUserConfig();
this._getflv = window.NicoVideoStoryboard.api.getflv;
this._thumbnailInfo = window.NicoVideoStoryboard.api.thumbnailInfo;
this._watchController = window.NicoVideoStoryboard.external.watchController;
this._eventDispatcher = new EventDispatcher();
if (!this._watchController.isPremium()) {
this._watchController.popup.alert('NicoVideoStoryboardはプレミアムの機能を使っているため、一般アカウントでは動きません');
return;
}
this._storyboardController = new window.NicoVideoStoryboard.controller.StoryboardController({
thumbnailInfo: this._thumbnailInfo,
watchController: this._watchController,
eventDispatcher: this._eventDispatcher,
config: this.config
});
this._initializeEvent();
this._initializeSettingPanel();
this._addStyle(__css__, 'NicoVideoStoryboardCss');
},
_initializeEvent: function() {
console.log('%c initializeEvent NicoVideoStoryboard', 'background: lightgreen;');
var eventDispatcher = this._eventDispatcher;
this._watchController.addEventListener('onWatchInfoReset', function() {
eventDispatcher.dispatchEvent('onWatchInfoReset');
});
this._watchController.addEventListener('onVideoInitialized', function() {
eventDispatcher.dispatchEvent('onVideoInitialized');
});
this._getflv.addEventListener('onGetflvLoadStart', function() {
eventDispatcher.dispatchEvent('onGetflvLoadStart');
});
this._getflv.addEventListener('onGetflvLoad', function(info) {
eventDispatcher.dispatchEvent('onGetflvLoad', info);
});
this._thumbnailInfo.addEventListener('onThumbnailInfoLoadStart', function() {
eventDispatcher.dispatchEvent('onThumbnailInfoLoadStart');
});
this._thumbnailInfo.addEventListener('onThumbnailInfoLoad', $.proxy(function(info) {
eventDispatcher.dispatchEvent('onThumbnailInfoLoad', info);
this._onThumbnailInfoLoad(info);
}, this));
},
_initializeUserConfig: function() {
var prefix = 'NicoStoryboard_';
var conf = {
enabled: true,
autoScroll: true,
demoMode: false,
frameSkip: 3
};
this.config = {
get: function(key) {
try {
if (window.localStorage.hasOwnProperty(prefix + key)) {
return JSON.parse(window.localStorage.getItem(prefix + key));
}
return conf[key];
} catch (e) {
return conf[key];
}
},
set: function(key, value) {
window.localStorage.setItem(prefix + key, JSON.stringify(value));
}
};
},
load: function(watchId) {
// 動画ごとのcookieがないと取得できないので指定できてもあまり意味は無い
watchId = watchId || this._watchController.getWatchId();
this._storyboardController.load(watchId);
},
_initializeSettingPanel: function() {
var $menu = $('<li class="NicoVideoStoryboardSettingMenu"><a href="javascript:;" title="NicoVideoStoryboardの設定変更">NicoVideo-<br>Storyboard設定</a></li>');
var $panel = $('<div id="NicoVideoStoryboardSettingPanel" />');//.addClass('open');
//var $button = $('<button class="toggleSetting playerBottomButton">設定</botton>');
//$button.on('click', function(e) {
// e.stopPropagation(); e.preventDefault();
// $panel.toggleClass('open');
//});
var config = this.config, eventDispatcher = this._eventDispatcher;
$menu.find('a').on('click', function() { $panel.toggleClass('open'); });
var __tpl__ = (function() {/*
<div class="panelHeader">
<h1 class="windowTitle">NicoVideoStoryboardの設定</h1>
<p>設定はリロード後に反映されます</p>
<button class="close" title="閉じる">×</button>
</div>
<div class="panelInner">
<div class="item" data-setting-name="frameSkip" data-menu-type="radio">
<h3 class="itemTitle">フレームスキップ</h3>
<p>数字が小さいほど滑らかですが、重くなります</p>
<label><input type="radio" value="0" >0</label>
<label><input type="radio" value="1" >1</label>
<label><input type="radio" value="2" >2</label>
<label><input type="radio" value="3" >3</label>
<label><input type="radio" value="4" >4</label>
<label><input type="radio" value="5" >5</label>
<label><input type="radio" value="6" >6</label>
<label><input type="radio" value="7" >7</label>
<label><input type="radio" value="8" >8</label>
<label><input type="radio" value="9" >9</label>
</div>
<div class="item" data-setting-name="demoMode" data-menu-type="radio">
<h3 class="itemTitle">デモモード</h3>
<p>連続再生時、サムネイルが無い動画をスキップします</p>
<label><input type="radio" value="true" > ON</label>
<label><input type="radio" value="false"> OFF</label>
</div>
</div>
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1].replace(/\{\*/g, '/*').replace(/\*\}/g, '*/');
$panel.html(__tpl__);
$panel.find('.item').on('click', function(e) {
var $this = $(this);
var settingName = $this.attr('data-setting-name');
var value = JSON.parse($this.find('input:checked').val());
var currentValue = config.get(settingName);
if (currentValue !== value) {
console.log('%cseting-name: ' + settingName, 'background: cyan', 'value', value);
config.set(settingName, value);
eventDispatcher.dispatchEvent('NicoVideoStoryboard.config.' + settingName, value);
}
}).each(function(e) {
var $this = $(this);
var settingName = $this.attr('data-setting-name');
var value = config.get(settingName);
$this.addClass(settingName);
$this.find('input').attr('name', settingName).val([JSON.stringify(value)]);
});
$panel.find('.close').click(function() {
$panel.removeClass('open');
});
$('#siteHeaderRightMenuFix').after($menu);
$('body').append($panel);
},
_onThumbnailInfoLoad: function(info) {
if (
info.status !== 'ok' &&
this.config.get('demoMode') === true &&
this._watchController.playlist.isContinuous()
) {
this._watchController.playlist.playNext();
}
}
});
//======================================
//======================================
//======================================
require(['watchapp/model/WatchInfoModel'], function(WatchInfoModel) {
var watchInfoModel = WatchInfoModel.getInstance();
if (watchInfoModel.initialized) {
console.log('%c initialize', 'background: lightgreen;');
initializeWatchController();
window.NicoVideoStoryboard.initialize();
} else {
var onReset = function() {
watchInfoModel.removeEventListener('reset', onReset);
window.setTimeout(function() {
watchInfoModel.removeEventListener('reset', onReset);
console.log('%c initialize', 'background: lightgreen;');
initializeWatchController();
window.NicoVideoStoryboard.initialize();
}, 0);
};
watchInfoModel.addEventListener('reset', onReset);
}
});
};
// クロスドメインでのgetflv情報の通信用
var flapi = function() {
if (window.name.indexOf('getflvLoader') < 0 ) { return; }
var resp = document.documentElement.textContent;
var origin = 'http://' + location.host.replace(/^.*?\./, 'www.');
try {
parent.postMessage(JSON.stringify({
id: 'NicoVideoStoryboard',
type: 'getflv',
body: {
url: location.href,
info: resp
}
}),
origin);
} catch (e) {
alert(e);
console.log('err', e);
}
};
var xmlHttpRequest = function(options) {
try {
var req = new XMLHttpRequest();
var method = options.method || 'GET';
req.onreadystatechange = function() {
if (req.readyState === 4) {
if (typeof options.onload === "function") options.onload(req);
}
};
req.open(method, options.url, true);
if (options.headers) {
for (var h in options.headers) {
req.setRequestHeader(h, options.headers[h]);
}
}
req.send(options.data || null);
} catch (e) {
console.error(e);
}
};
// Tampermonkeyでは、Content-type: text/xmlのページでスクリプトを実行できないため、
// いったんxmlと同一ドメインにあるサムネイルを表示してそこ経由でスクリプトを起動する
var smileapiForTampermonkey = function() {
var origin = 'http://' + location.host.replace(/^.*?\./, 'www.');
var url = location.hash.split('#')[1];
xmlHttpRequest({
url: url,
onload: function(req) {
var xml = req.responseText;
parent.postMessage(JSON.stringify({
id: 'NicoVideoStoryboard',
type: 'storyboard',
body: {
url: url,
xml: xml
}
}),
origin);
}
});
};
// クロスドメインでのStoryboard情報の通信用
var smileapi = function() {
if (window.name.indexOf('StoryboardLoader') < 0 ) { return; }
if (location.href.match(/\.nicovideo\.jp\/smile?i=/) >= 0) {
return smileapiForTampermonkey();
}
var resp = document.getElementsByTagName('smile');
var origin = 'http://' + location.host.replace(/^.*?\./, 'www.');
var xml = '';
if (resp.length > 0) {
xml = resp[0].outerHTML;
}
try {
parent.postMessage(JSON.stringify({
id: 'NicoVideoStoryboard',
type: 'storyboard',
body: {
url: location.href,
xml: xml
}
}),
origin);
} catch (e) {
console.log('err', e);
}
};
var host = window.location.host || '';
if (host === 'flapi.nicovideo.jp') {
flapi();
} else
if (host.indexOf('smile-') >= 0) {
smileapi();
} else {
window.require(['WatchApp'], function() {
var script = document.createElement('script');
script.id = 'NicoVideoStoryboard';
script.setAttribute('type', 'text/javascript');
script.setAttribute('charset', 'UTF-8');
script.appendChild(document.createTextNode("(" + monkey + ")()"));
document.body.appendChild(script);
});
}
})();