All thigns related to player element have been moved to PlayerData (or at least most of them).

js/lib/EdgeDetect.js

@@ -1,3 +1,13 @@
+var EdgeDetectPrimaryDirection = {
+  VERTICAL: 0,
+  HORIZONTAL: 1
+}
+
+var EdgeDetectQuality = {
+  FAST: 0,
+  IMPROVED: 1
+}
+
 class EdgeDetect{
 
   constructor(ardConf){
@@ -575,14 +585,4 @@ class EdgeDetect{
     }
   }
 
-}
-
-var EdgeDetectPrimaryDirection = {
-  VERTICAL: 0,
-  HORIZONTAL: 1
-}
-
-var EdgeDetectQuality = {
-  FAST: 0,
-  IMPROVED: 1
 }

js/lib/PlayerData.js

@@ -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;
+  }
+}
+

js/lib/PlayerDetect.js

@@ -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
-}

js/lib/VideoData.js

@@ -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);
   }
 
+
 }

js/modules/PageInfo.js

@@ -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");
@@ -8,12 +46,4 @@ var _pi_hasVideos = function(){
     return false;
   
 //   if(videos[0].style.display == "none") // in this case ultrawidify doesn't even work
-//     return false;
+//     return false;
-  
-  
-  return true;
-}
-
-var PageInfo = {
-  hasVideos: _pi_hasVideos
-}

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(){