All thigns related to player element have been moved to PlayerData (or at least most of them).
This commit is contained in:
parent
4e2ac9c647
commit
cbe250fabf
@ -1,3 +1,13 @@
|
||||
var EdgeDetectPrimaryDirection = {
|
||||
VERTICAL: 0,
|
||||
HORIZONTAL: 1
|
||||
}
|
||||
|
||||
var EdgeDetectQuality = {
|
||||
FAST: 0,
|
||||
IMPROVED: 1
|
||||
}
|
||||
|
||||
class EdgeDetect{
|
||||
|
||||
constructor(ardConf){
|
||||
@ -576,13 +586,3 @@ class EdgeDetect{
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var EdgeDetectPrimaryDirection = {
|
||||
VERTICAL: 0,
|
||||
HORIZONTAL: 1
|
||||
}
|
||||
|
||||
var EdgeDetectQuality = {
|
||||
FAST: 0,
|
||||
IMPROVED: 1
|
||||
}
|
||||
205
js/lib/PlayerData.js
Normal file
205
js/lib/PlayerData.js
Normal file
@ -0,0 +1,205 @@
|
||||
if(Debug.debug)
|
||||
console.log("Loading: FullScreenDetect.js");
|
||||
|
||||
/* sprejme <video> tag (element) in seznam imen, ki se lahko pojavijo v razredih oz. id staršev.
|
||||
// vrne dimenzije predvajalnika (širina, višina)
|
||||
//
|
||||
// Na youtube v theater mode je razširitev rahlo pokvarjena. Video tag ostane večji od predvajalnika, ko se zapusti
|
||||
// celozaslonski način. Ta funkcija skuša to težavo rešiti tako, da poišče element predvajalnika, ki je zavit okoli videa.
|
||||
//
|
||||
// Funkcija izkorišča lastnost, da bi načeloma moral biti vsak zunanji element večji od notranjega. Najmanjši element od
|
||||
// <video> značke pa do korena drevesa bi tako moral biti predvajalnik.
|
||||
//
|
||||
// Če je podan seznam imen, potem funkcija vrne dimenzije prvega elementa, ki v id oz. razredu vsebuje katerokoli ime iz seznama
|
||||
//
|
||||
// | EN |
|
||||
//
|
||||
// accepts <video> tag (element) and list of names that can appear in id or class
|
||||
// returns player dimensions (width, height)
|
||||
//
|
||||
// Theater mode is mildly broken on youtube. <video> tag remains bigger than the player after leaving the fullscreen mode, and
|
||||
// there's nothing we can do about that. This function aims to solve the problem by finding the player element that's wrapped around
|
||||
// the <video> tag.
|
||||
//
|
||||
// In general, an outer tag should be bigger than the inner tag. Therefore the smallest element between <video> tag and the document
|
||||
// root should be the player.
|
||||
//
|
||||
// If list of names is provided, the function returns dimensions of the first element that contains any name from the list in either
|
||||
// id or class.
|
||||
*/
|
||||
|
||||
class PlayerData {
|
||||
constructor(videoData) {
|
||||
this.videoData = videoData;
|
||||
this.video = videoData.video;
|
||||
this.element = undefined;
|
||||
this.dimensions = undefined;
|
||||
|
||||
this.getPlayerDimensions();
|
||||
}
|
||||
|
||||
static isFullScreen(){
|
||||
return ( window.innerHeight == window.screen.height && window.innerWidth == window.screen.width);
|
||||
}
|
||||
|
||||
startChangeDetection(){
|
||||
this.watchTimeout = setInterval(this.ghettoWatcher, 100);
|
||||
}
|
||||
|
||||
stopChangeDetection(){
|
||||
clearInterval(this.watchTimeout);
|
||||
}
|
||||
|
||||
ghettoWatcher(){
|
||||
if(this.checkPlayerSizeChange()){
|
||||
if(Debug.debug){
|
||||
console.log("[uw::ghettoOnChange] change detected");
|
||||
}
|
||||
|
||||
this.getPlayerDimensions();
|
||||
if(! this.element ){
|
||||
return;
|
||||
}
|
||||
|
||||
this.videoData.resizer.restore(); // note: this returns true if change goes through, false otherwise.
|
||||
return;
|
||||
}
|
||||
|
||||
// sem ter tja, checkPlayerSizeChange() ne zazna prehoda v celozaslonski način (in iz njega). Zato moramo
|
||||
// uporabiti dodatne trike.
|
||||
// sometimes, checkPlayerSizeChange might not detect a change to fullscreen. This means we need to
|
||||
// trick it into doing that
|
||||
|
||||
if(this.dimensions.fullscreen != PlayerData.isFullScreen()) {
|
||||
if(Debug.debug){
|
||||
console.log("[PlayerData::ghettoWatcher] fullscreen switch detected (basic change detection failed)");
|
||||
}
|
||||
|
||||
this.getPlayerDimensions();
|
||||
|
||||
if(! this.element ){
|
||||
return;
|
||||
}
|
||||
|
||||
this.videoData.resizer.restore();
|
||||
}
|
||||
}
|
||||
|
||||
getPlayerDimensions(elementNames){
|
||||
// element names — reserved for future use. If element names are provided, this function should return first element that
|
||||
// has classname or id that matches at least one in the elementNames array.
|
||||
var element = this.video;
|
||||
|
||||
if(! element ){
|
||||
if(Debug.debug)
|
||||
console.log("[PlayerDetect::_pd_getPlayerDimensions] element is not valid, doing nothing.", element)
|
||||
|
||||
this.element = undefined;
|
||||
this.dimensions = undefined;
|
||||
return;
|
||||
}
|
||||
|
||||
var isFullScreen = PlayerData.isFullScreen();
|
||||
|
||||
var trustCandidateAfterGrows = 2; // if candidate_width or candidate_height increases in either dimensions this many
|
||||
// times, we say we found our player. (This number ignores weird elements)
|
||||
// in case our <video> is bigger than player in one dimension but smaller in the other
|
||||
// if site is coded properly, player can't be wider than that
|
||||
var candidate_width = Math.max(element.offsetWidth, window.innerWidth);
|
||||
var candidate_height = Math.max(element.offsetHeight, window.innerHeight);
|
||||
var playerCandidateNode = element;
|
||||
|
||||
try {
|
||||
var grows = trustCandidateAfterGrows;
|
||||
while(element != undefined){
|
||||
// odstranimo čudne elemente, ti bi pokvarili zadeve
|
||||
// remove weird elements, those would break our stuff
|
||||
if ( element.offsetWidth == 0 || element.offsetHeight == 0){
|
||||
element = element.parentNode;
|
||||
continue;
|
||||
}
|
||||
|
||||
if ( element.offsetHeight <= candidate_height &&
|
||||
element.offsetWidth <= candidate_width ){
|
||||
|
||||
// if we're in fullscreen, we only consider elements that are exactly as big as the monitor.
|
||||
if( ! isFullScreen ||
|
||||
(element.offsetWidth == window.innerWidth && element.offsetHeight == window.innerHeight) ){
|
||||
|
||||
playerCandidateNode = element;
|
||||
candidate_width = element.offsetWidth;
|
||||
candidate_height = element.offsetHeight;
|
||||
|
||||
grows = trustCandidateAfterGrows;
|
||||
|
||||
if(Debug.debug){
|
||||
console.log("Found new candidate for player. Dimensions: w:", candidate_width, "h:",candidate_height, "node:", playerCandidateNode);
|
||||
}
|
||||
}
|
||||
}
|
||||
else if(grows --<= 0){
|
||||
|
||||
if(Debug.debug && Debug.playerDetect){
|
||||
console.log("Current element grew in comparrison to the child. We probably found the player. breaking loop, returning current result");
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
element = element.parentNode;
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
console.log("pdeeee,",e);
|
||||
}
|
||||
|
||||
if (isFullScreen && playerCandidateNode == element) {
|
||||
this.dimensions = {
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
fullscreen: true
|
||||
}
|
||||
this.element = element;
|
||||
} else {
|
||||
this.dimensions = {
|
||||
width: candidate_width,
|
||||
height: candidate_height,
|
||||
fullscreen: isFullScreen
|
||||
};
|
||||
this.element = playerCandidateNode;
|
||||
}
|
||||
}
|
||||
|
||||
checkPlayerSizeChange(){
|
||||
|
||||
// console.log("Player:", this.dimensions, "Node:", this.element)
|
||||
|
||||
if(Debug.debug){
|
||||
if(this.element == undefined)
|
||||
console.log("[PlayerDetect] player size changed. reason: player element undefined");
|
||||
|
||||
if(this.dimensions.fullscreen){
|
||||
if(! this.isFullScreen()){
|
||||
console.log("[PlayerDetect] player size changed. reason: exited fullscreen");
|
||||
}
|
||||
}
|
||||
if(! this.element)
|
||||
console.log("[PlayerDetect] player element isnt defined");
|
||||
|
||||
if ( this.element &&
|
||||
( this.dimensions.width != this.element.offsetWidth ||
|
||||
this.dimensions.height != this.element.offsetHeight )
|
||||
){
|
||||
console.log("[PlayerDetect] player size changed. reason: dimension change. Old dimensions?", this.dimensions.width, this.dimensions.height, "new dimensions:", this.element.offsetWidth, this.element.offsetHeight);
|
||||
}
|
||||
}
|
||||
|
||||
if(this.element == undefined){
|
||||
return true;
|
||||
} else if(this.dimensions.width != this.element.offsetWidth || this.dimensions.height != this.element.offsetHeight ){
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,173 +0,0 @@
|
||||
if(Debug.debug)
|
||||
console.log("Loading: FullScreenDetect.js");
|
||||
|
||||
var _pd_isFullScreen = function(){
|
||||
return ( window.innerHeight == window.screen.height && window.innerWidth == window.screen.width);
|
||||
}
|
||||
|
||||
|
||||
/* sprejme <video> tag (element) in seznam imen, ki se lahko pojavijo v razredih oz. id staršev.
|
||||
// vrne dimenzije predvajalnika (širina, višina)
|
||||
//
|
||||
// Na youtube v theater mode je razširitev rahlo pokvarjena. Video tag ostane večji od predvajalnika, ko se zapusti
|
||||
// celozaslonski način. Ta funkcija skuša to težavo rešiti tako, da poišče element predvajalnika, ki je zavit okoli videa.
|
||||
//
|
||||
// Funkcija izkorišča lastnost, da bi načeloma moral biti vsak zunanji element večji od notranjega. Najmanjši element od
|
||||
// <video> značke pa do korena drevesa bi tako moral biti predvajalnik.
|
||||
//
|
||||
// Če je podan seznam imen, potem funkcija vrne dimenzije prvega elementa, ki v id oz. razredu vsebuje katerokoli ime iz seznama
|
||||
//
|
||||
// | EN |
|
||||
//
|
||||
// accepts <video> tag (element) and list of names that can appear in id or class
|
||||
// returns player dimensions (width, height)
|
||||
//
|
||||
// Theater mode is mildly broken on youtube. <video> tag remains bigger than the player after leaving the fullscreen mode, and
|
||||
// there's nothing we can do about that. This function aims to solve the problem by finding the player element that's wrapped around
|
||||
// the <video> tag.
|
||||
//
|
||||
// In general, an outer tag should be bigger than the inner tag. Therefore the smallest element between <video> tag and the document
|
||||
// root should be the player.
|
||||
//
|
||||
// If list of names is provided, the function returns dimensions of the first element that contains any name from the list in either
|
||||
// id or class.
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
var _pd_getPlayerDimensions = function(startElement, elementNames){
|
||||
var element = startElement;
|
||||
|
||||
if(element == null || element == undefined){
|
||||
if(Debug.debug)
|
||||
console.log("[PlayerDetect::_pd_getPlayerDimensions] element is not valid, doing nothing.", element)
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
var isFullScreen = _pd_isFullScreen();
|
||||
|
||||
var trustCandidateAfterGrows = 2; // if candidate_width or candidate_height increases in either dimensions this many
|
||||
// times, we say we found our player. (This number ignores weird elements)
|
||||
// in case our <video> is bigger than player in one dimension but smaller in the other
|
||||
// if site is coded properly, player can't be wider than that
|
||||
var candidate_width = Math.max(element.offsetWidth, window.innerWidth);
|
||||
var candidate_height = Math.max(element.offsetHeight, window.innerHeight);
|
||||
var playerCandidateNode = startElement;
|
||||
|
||||
// <video> can't be root in a document, so we can do this
|
||||
element = element.parentNode;
|
||||
|
||||
try{
|
||||
var grows = trustCandidateAfterGrows;
|
||||
while(element != undefined){
|
||||
// odstranimo čudne elemente, ti bi pokvarili zadeve
|
||||
// remove weird elements, those would break our stuff
|
||||
if ( element.offsetWidth == 0 || element.offsetHeight == 0){
|
||||
element = element.parentNode;
|
||||
continue;
|
||||
}
|
||||
|
||||
if ( element.offsetHeight <= candidate_height &&
|
||||
element.offsetWidth <= candidate_width ){
|
||||
|
||||
// if we're in fullscreen, we only consider elements that are exactly as big as the monitor.
|
||||
if( ! isFullScreen ||
|
||||
(element.offsetWidth == window.innerWidth && element.offsetHeight == window.innerHeight) ){
|
||||
|
||||
playerCandidateNode = element;
|
||||
candidate_width = element.offsetWidth;
|
||||
candidate_height = element.offsetHeight;
|
||||
|
||||
grows = trustCandidateAfterGrows;
|
||||
|
||||
if(Debug.debug){
|
||||
console.log("Found new candidate for player. Dimensions: w:", candidate_width, "h:",candidate_height, "node:", playerCandidateNode);
|
||||
}
|
||||
}
|
||||
}
|
||||
else if(grows --<= 0){
|
||||
|
||||
if(Debug.debug && Debug.playerDetect){
|
||||
console.log("Current element grew in comparrison to the child. We probably found the player. breaking loop, returning current result");
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
element = element.parentNode;
|
||||
}
|
||||
}
|
||||
catch(e){
|
||||
console.log("pdeeee,",e);
|
||||
}
|
||||
var dims;
|
||||
|
||||
if(isFullScreen && playerCandidateNode == startElement){
|
||||
dims = {
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
element: null,
|
||||
fullscreen: true
|
||||
}
|
||||
}
|
||||
else{
|
||||
dims = {
|
||||
width: candidate_width,
|
||||
height: candidate_height,
|
||||
element: playerCandidateNode,
|
||||
fullscreen: isFullScreen
|
||||
};
|
||||
}
|
||||
|
||||
return dims;
|
||||
}
|
||||
|
||||
|
||||
// returns 'true' if there was a change.
|
||||
var _pd_checkPlayerSizeChange = function(){
|
||||
|
||||
// console.log("Player:", GlobalVars.playerDimensions, "Node:", GlobalVars.playerDimensions.element)
|
||||
|
||||
if(Debug.debug){
|
||||
if(GlobalVars.playerDimensions.element == undefined)
|
||||
console.log("[PlayerDetect] player size changed. reason: player element undefined");
|
||||
|
||||
if(GlobalVars.playerDimensions.fullscreen){
|
||||
if(! _pd_isFullScreen()){
|
||||
console.log("[PlayerDetect] player size changed. reason: exited fullscreen");
|
||||
}
|
||||
}
|
||||
if(! GlobalVars.playerDimensions.element)
|
||||
console.log("[PlayerDetect] player element isnt defined");
|
||||
|
||||
if ( GlobalVars.playerDimensions.element &&
|
||||
( GlobalVars.playerDimensions.width != GlobalVars.playerDimensions.element.offsetWidth ||
|
||||
GlobalVars.playerDimensions.height != GlobalVars.playerDimensions.element.offsetHeight )
|
||||
){
|
||||
console.log("[PlayerDetect] player size changed. reason: dimension change. Old dimensions?", GlobalVars.playerDimensions.width, GlobalVars.playerDimensions.height, "new dimensions:", GlobalVars.playerDimensions.element.offsetWidth, GlobalVars.playerDimensions.element.offsetHeight);
|
||||
}
|
||||
}
|
||||
|
||||
if(GlobalVars.playerDimensions.element == undefined)
|
||||
return true;
|
||||
|
||||
|
||||
|
||||
if(GlobalVars.playerDimensions.width != GlobalVars.playerDimensions.element.offsetWidth || GlobalVars.playerDimensions.height != GlobalVars.playerDimensions.element.offsetHeight ){
|
||||
return true;
|
||||
}
|
||||
|
||||
// if(GlobalVars.playerDimensions.fullscreen){
|
||||
// return ! _pd_isFullScreen();
|
||||
// }
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
var PlayerDetect = {
|
||||
getPlayerDimensions: _pd_getPlayerDimensions,
|
||||
checkPlayerSizeChange: _pd_checkPlayerSizeChange,
|
||||
isFullScreen: _pd_isFullScreen
|
||||
}
|
||||
@ -5,6 +5,7 @@ class VideoData {
|
||||
// todo: add ArDetect instance
|
||||
this.arDetector = new ArDetector(video);
|
||||
this.resizer = new Resizer(this);
|
||||
this.player = new PlayerData(this);
|
||||
|
||||
// player dimensions need to be in:
|
||||
// this.player.dimensions
|
||||
@ -26,4 +27,5 @@ class VideoData {
|
||||
this.resizer.setLastAr(lastAr);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -1,6 +1,44 @@
|
||||
if(Debug.debug)
|
||||
console.log("Loading: PageInfo.js");
|
||||
|
||||
class PageInfo {
|
||||
constructor(){
|
||||
this.hasVideos = false;
|
||||
this.siteDisabled = false;
|
||||
this.videos = [];
|
||||
}
|
||||
|
||||
|
||||
rescan(){
|
||||
var videos = document.getElementsByTagName('video');
|
||||
|
||||
if(!videos || videos.length == 0){
|
||||
this.hasVideos = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// add new videos
|
||||
for(video of videos){
|
||||
var existing = this.videos.find( (x) => {
|
||||
if (x == video.video)
|
||||
return x;
|
||||
if (x.currentSrc == video.video.currentSrc){
|
||||
return x;
|
||||
}
|
||||
})
|
||||
|
||||
if(existing){
|
||||
video.video = existing;
|
||||
} else {
|
||||
videos.push(
|
||||
new VideoData(video)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var _pi_hasVideos = function(){
|
||||
// return true;
|
||||
var videos = document.getElementsByTagName("video");
|
||||
@ -9,11 +47,3 @@ var _pi_hasVideos = function(){
|
||||
|
||||
// if(videos[0].style.display == "none") // in this case ultrawidify doesn't even work
|
||||
// return false;
|
||||
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
var PageInfo = {
|
||||
hasVideos: _pi_hasVideos
|
||||
}
|
||||
|
||||
46
js/uw.js
46
js/uw.js
@ -12,6 +12,16 @@ if(Debug.debug){
|
||||
}
|
||||
}
|
||||
|
||||
class VideoManager {
|
||||
|
||||
|
||||
refresh(){
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// load all settings from localStorage:
|
||||
|
||||
async function main(){
|
||||
@ -136,42 +146,6 @@ function ghettoOnChange(){
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if(PlayerDetect.checkPlayerSizeChange()){
|
||||
|
||||
if(Debug.debug){
|
||||
console.log("[uw::ghettoOnChange] change detected");
|
||||
}
|
||||
|
||||
|
||||
GlobalVars.playerDimensions = PlayerDetect.getPlayerDimensions( GlobalVars.video );
|
||||
|
||||
if(GlobalVars.playerDimensions == undefined){
|
||||
GlobalVars.playerDimensions = null;
|
||||
return;
|
||||
}
|
||||
|
||||
Resizer.restore(); // note: this returns true if change goes through, false otherwise.
|
||||
}
|
||||
|
||||
// sometimes, checkPlayerSizeChange might not detect a change to fullscreen. This means we need to
|
||||
// trick it into doing that
|
||||
|
||||
if(GlobalVars.playerDimensions.fullscreen != PlayerDetect.isFullScreen()){
|
||||
|
||||
if(Debug.debug){
|
||||
console.log("[uw::ghettoOnChange] fullscreen switch detected");
|
||||
}
|
||||
|
||||
GlobalVars.playerDimensions = PlayerDetect.getPlayerDimensions(GlobalVars.video);
|
||||
if(GlobalVars.playerDimensions == undefined){
|
||||
GlobalVars.playerDimensions = null;
|
||||
return;
|
||||
}
|
||||
|
||||
Resizer.restore();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function ghettoUrlWatcher(){
|
||||
|
||||
Loading…
Reference in New Issue
Block a user