OneDriveの動画プレイヤーのフルスクリーン再生を復活&細かい調整
目前為
// ==UserScript==
// @name OneDrive VideoPlayer fix
// @namespace http://github.com/segabito/
// @version 0.1.2
// @description OneDriveの動画プレイヤーのフルスクリーン再生を復活&細かい調整
// @author You
// @match https://onedrive.live.com/prev?*
// @grant none
// ==/UserScript==
(function() {
var monkey = function() {
var playerFrame = window, video;
// https://onedrive.live.com/handlers/clientstring.mvc?mkt=ja-JP&group=Files&v=19.8.1712.2000&useRequiresJs=False
var rrZW = top.window.live = top.window.live || {};
var uUks = rrZW.shared = rrZW.shared || {};
var ccEt = uUks.skydrive = uUks.skydrive || {};
var MOFY = ccEt.shared = ccEt.shared || {};
var jHBx = MOFY.video = MOFY.video || {};
var videoLoadErrorMessage = jHBx["loaderror"] || "問題が発生したため、動画を再生できません。";
var config = (function() {
var prefix = 'OV_';
var conf = {
slideshow: false,
fitMode: '',
};
return {
get: function(key) {
try {
if (window.sessionStorage.hasOwnProperty(prefix + key)) {
return JSON.parse(window.sessionStorage.getItem(prefix + key));
}
return conf[key];
} catch (e) {
return conf[key];
}
},
set: function(key, value) {
window.sessionStorage.setItem(prefix + key, JSON.stringify(value));
}
};
})();
var __parent_css__ = (function() {/*
{* :fullscreen .OneUp-video, *}
.fullscreen .OneUp-video
{
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.OneUp-detailsBar {
min-height: inherit !important;
}
.fullscreen .OneUp-detailsBar,
.fullscreen .OneUp-commandBar
{
display: none !important;
}
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1].replace(/\{\*/g, '/*').replace(/\*\}/g, '*/');
var __css__ = (function() {/*
.fit16-9 .c-VideoPlayer .canvas {
bottom: 0 !important;
}
.fit16-9 .c-HtmlDashVideoCanvas,
.fit16-9 .c-HtmlDashVideoCanvas video,
.fit16-9 .c-HtmlDashlingVideoCanvas,
.fit16-9 .c-HtmlDashlingVideoCanvas video,
.fit16-9 .c-HtmlHlsVideoCanvas,
.fit16-9 .c-HtmlHlsVideoCanvas video,
.fit16-9 .c-HtmlVideoCanvas,
.fit16-9 .c-HtmlVideoCanvas video
{
position: absolute;
{*background: #666;*}
{*top: -8.25%;*}
top: -16.666666%;
left: 0;
width: 100%;
height: 133.333333%;
}
#ovPanel {
position: fixed;
z-index: 10000;
top:32px;
right: 0px;
min-width: 100px;
{*transition: opacity 0.5s ease;*}
background-color: #888;
border: 1px solid #000;
box-shadow: 4px 4px 0 black;
opacity: 0;
}
#ovPanel:hover {
opacity: 1;
}
#ovPanel button {
cursor: pointer;
opacity: 1;
}
.fit16-9 #ovPanel .fitMode {
color: red;
}
.slideshow #ovPanel .slideshow {
color: red;
}
.c-VideoPlayer.isPlaybackPanelVisible .c-PlaybackPanel {
opacity: 0;
}
.c-VideoPlayer.isPlaybackPanelVisible .c-PlaybackPanel:hover {
opacity: 1;
}
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1].replace(/\{\*/g, '/*').replace(/\*\}/g, '*/');
var __panel__ = (function() {/*
<div id="ovPanel">
<button class="fitMode">fitMode</button>
<button class="slideshow">slideshow</button>
</div>
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1].replace(/\{\*/g, '/*').replace(/\*\}/g, '*/');
var addStyle = function(styles, targetWindow) {
if (!targetWindow) { targetWindow = self; }
var elm = targetWindow.document.createElement('style');
elm.type = 'text/css';
var text = styles.toString();
text = targetWindow.document.createTextNode(text);
elm.appendChild(text);
var head = targetWindow.document.getElementsByTagName('head');
head = head[0];
head.appendChild(elm);
return elm;
};
var FullScreen = {
now: function() {
if (top.document.fullScreenElement || top.document.mozFullScreen || top.document.webkitIsFullScreen) {
return true;
}
return false;
},
request: function(target) {
var elm = typeof target === 'string' ? top.document.getElementById(target) : target;
if (!elm) { return; }
if (elm.requestFullScreen) {
elm.requestFullScreen();
} else if (elm.webkitRequestFullScreen) {
elm.webkitRequestFullScreen();
} else if (elm.mozRequestFullScreen) {
elm.mozRequestFullScreen();
}
},
cancel: function() {
if (!this.now()) { return; }
if (top.document.cancelFullScreen) {
top.document.cancelFullScreen();
} else if (top.document.webkitCancelFullScreen) {
top.document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
top.document.mozCancelFullScreen();
}
}
};
var toggleMonitorFull = function(v) {
console.log('toggleMonitorFull!');
var now = FullScreen.now();
if (now || v === false) {
console.log('fullscreen cancel');
FullScreen.cancel();
} else if (!now || v === true) {
console.log('fullscreen request!');
FullScreen.request(top.document.body);
}
};
var isVideoFinished = function() {
//console.log('"%s","%s"', playerFrame.$('.duration').text(), playerFrame.$('.currentTime').text());
//console.log(playerFrame.$('.duration').text() === playerFrame.$('.currentTime').text());
return playerFrame.$('.duration').text() === playerFrame.$('.currentTime').text();
};
var isVideoPlayingError = function() {
return $('.errorMessage').text() === videoLoadErrorMessage ; // "問題が発生したため、動画を再生できません。";
};
var togglePlay = function() {
$('.canvasOverlay').click();
};
var playNext = function() {
try {
var $nextButton = top.window.jQuery('.OneUp-button[data-automationid=nextButton]');
top.$nextButton = $nextButton.click();
} catch (e) {
console.log('%cException: ', 'background: red;', e, $nextButton);
}
//window.parent.$('.OneUp-flipper--next').click();
};
var toggleFitMode = function(v) {
$('body').toggleClass('fit16-9', v);
config.set('fitMode', $('body').hasClass('fit16-9') ? 'fit16-9' : '');
};
var toggleSlideshow = function(v) {
$('body').toggleClass('slideshow', v);
config.set('slideshow', $('body').hasClass('slideshow'));
};
var timer = null, count = 0;
var onTimer = function() {
if (isVideoPlayingError()) {
console.log('%cVideo Playing Error. count:%s', 'background: lightgreen;', count++);
togglePlay();
return;
}
if (config.get('slideshow') && isVideoFinished()) {
playNext();
window.clearInterval(timer);
return;
}
};
var onFullscreenStatusChange = function() {
var td = top.window.document;
if (
(td.webkitFullscreenElement && td.webkitFullscreenElement !== null) ||
(td.mozFullscreenElement && td.mozFullscreenElement !== null) ||
(td.msFullscreenElement && td.msFullscreenElement !== null) ||
(td.fullscreenElement && td.fullscreenElement !== null)
) {
top.$('body').addClass('fullscreen');
} else {
top.$('body').removeClass('fullscreen');
}
};
var initialize = function() {
console.log('%cinitialize start', 'background: lightgreen;');
// for debug
parent.window.video = video = $('video')[0];
parent.playerFrame = window;
addStyle(__css__);
if (!parent.hasCssAdded) {
addStyle(__parent_css__, parent);
parent.hasCssAdded = true;
}
var td = top.window.document;
td.addEventListener('webkitfullscreenchange', onFullscreenStatusChange);
td.addEventListener('mozfullscreenchange', onFullscreenStatusChange);
td.addEventListener('msFullscreenChange', onFullscreenStatusChange);
td.addEventListener('fullscreenchange', onFullscreenStatusChange);
window.onbeforeunload = function() {
td.removeEventListener('webkitfullscreenchange', onFullscreenStatusChange);
td.removeEventListener('mozfullscreenchange', onFullscreenStatusChange);
td.removeEventListener('msFullscreenChange', onFullscreenStatusChange);
td.removeEventListener('fullscreenchange', onFullscreenStatusChange);
};
parent.$imageButton = $('#ImageButton-20_0').off().on('click', function() { toggleMonitorFull(); });
var $panel = $(__panel__);
$panel.find('.fitMode') .on('click', toggleFitMode);
$panel.find('.slideshow').on('click', toggleSlideshow);
$('body').toggleClass('fit16-9', config.get('fitMode') === 'fit16-9');
$('body').toggleClass('slideshow', config.get('slideshow'));
$('body').append($panel);
timer = window.setInterval(onTimer, 1000);
console.log('%cinitialize end', 'background: lightgreen;');
};
var initTimer = window.setInterval(function() {
if (window.$) {
window.clearInterval(initTimer);
window.setTimeout(initialize, 5000);
}
}, 1000);
};
var script = document.createElement("script");
script.id = "OneDriveVideoPlayerFix";
script.setAttribute("type", "text/javascript");
script.setAttribute("charset", "UTF-8");
script.appendChild(document.createTextNode('(' + monkey + ')();'));
document.body.appendChild(script);
})();
/*
*
ただのメモ
playerFrame = ($('.ItemVideoPlayer-frame')[0] && $('.ItemVideoPlayer-frame')[0].contentWindow);
playerFrame.location.href
playerFrame.$('.errorMessage').text();
if (playerFrame.$('.errorMessage').text() === "問題が発生したため、動画を再生できません。") { playerFrame.$('.canvasOverlay').click(); }
.c-HtmlDashVideoCanvas, .c-HtmlDashVideoCanvas video, .c-HtmlDashlingVideoCanvas, .c-HtmlDashlingVideoCanvas video, .c-HtmlHlsVideoCanvas, .c-HtmlHlsVideoCanvas video, .c-HtmlVideoCanvas, .c-HtmlVideoCanvas video {
position: absolute;
background: #666;
top: -8.25%;
left: 0;
width: 100%;
height: 116.5%;
}
.c-VideoPlayer.isPlaybackPanelVisible .c-PlaybackPanel {
}
*/