Merge pull request #36 from kodujdlapolski/bugfix_16/dynamic-page-reload

Bugfix 16/dynamic page reload
kodujdlapolski · Dec 12, 2017 · 893bbc7 · 893bbc7
2 parents 0d77b33 + 3f15db4
commit 893bbc7
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 17 deletions.
diff --git a/src/js/factual_background.js b/src/js/factual_background.js
@@ -7,7 +7,7 @@
  * @author Alexandru Badiu <andu@ctrlz.ro>
  */
 import { getFacts, getAllFacts, getAllSources } from './api';
-import { getUserToken, slugify, standardizeUrl as utilsStandardizeUrl, parseFCOrigin} from './util';
+import { getUserToken, slugify, standardizeUrl as utilsStandardizeUrl, parseFCOrigin, parseUrl} from './util';
 import config from './config';
 
 require('../css/factual.scss');
@@ -16,7 +16,9 @@ class TabInfo {
   constructor(tabId) {
     this.tabId = tabId;
     this.numberOfFacts = 0;
-    this.status = 'loading';
+    this.contentLoaded = false;
+    this.currentUrl = null;
+    this.previousUrl = null;
 
     this.updateBrowserAction();
   }
@@ -26,16 +28,31 @@ class TabInfo {
     this.updateBrowserAction();
   }
 
-  setLoading() {
-    this.status = 'loading';
+  updateUrl(url) {
+    this.previousUrl = this.currentUrl;
+    this.currentUrl = url;
   }
 
-  isContentLoaded() {
-    return this.status === 'content-loaded';
-  }
+  wasDynamicPageReload() {
+    if (this.currentUrl !== this.previousUrl && this.currentUrl && this.previousUrl) {
+      // URL changed, potential dynamic page reload, such as on YouTube
+      console.debug(`URL changed from ${this.previousUrl} to ${this.currentUrl}. Dynamic page reload?`);
+      const parsedCurrent = parseUrl(this.currentUrl);
+      const parsedPrevious = parseUrl(this.previousUrl);
+
+      // ignore hash only in some cases; most single-page-app (SPA) technology uses hash reloading
+      // when navigating between pages: hash change may mean content change
+      const ignoreHashInDomains = ['www.youtube.com', 'youtube.com'];
+
+      if (ignoreHashInDomains.indexOf(parsedCurrent.hostname) !== -1) {
+        parsedCurrent.hash = '';
+        parsedPrevious.hash = '';
+        return parsedCurrent.href !== parsedPrevious.href;
+      }
+      return true;
+    }
 
-  setContentLoaded() {
-    this.status = 'content-loaded';
+    return false;
   }
 
   updateBrowserAction() {
@@ -221,25 +238,34 @@ class FactualBackground {
   }
 
   onUpdated(tabId, changeInfo, tabData) {
+    var tabInfo = this.getTabInfo(tabId);
     console.log('info', 'onUpdated', tabId, changeInfo, tabData);
-    const tabInfo = this.getTabInfo(tabId);
 
-    if (changeInfo.status === 'loading') {
-      tabInfo.setLoading();
+    if (changeInfo.status === 'loading' && changeInfo.url) {
+      // save loaded URL
+      tabInfo.updateUrl(changeInfo.url);
       return;
     }
 
     if (changeInfo.status !== 'complete') {
       return;
     }
 
-    if (tabInfo.isContentLoaded()) {
+    if (tabInfo.contentLoaded) {
+      // TODO to check: this might stop checking content on newly loaded Facebook posts
+      // PS. this check is not neccessary
       console.log('Content already loaded');
+
+      if (tabInfo.wasDynamicPageReload()) {
+          chrome.tabs.sendMessage(tabId, {
+            action: 'page-reloaded',
+          });
+      }
+
       return;
     }
 
-    tabInfo.setContentLoaded();
-
+    tabInfo.contentLoaded = true;
     chrome.tabs.sendMessage(tabId, {
       action: 'content-loaded',
     });
@@ -251,7 +277,7 @@ class FactualBackground {
   }
 
   onRemoved(tabId) {
-    console.log('onActivated', tabId);
+    console.log('onRemoved', tabId);
     delete this.tabsInfo[tabId];
   }
 

diff --git a/src/js/factual_client.js b/src/js/factual_client.js
@@ -41,10 +41,15 @@ class Factual {
         this.settings = request.msg;
       }
 
-      if (request.action === 'content-loaded') {
+      if (request.action === 'content-loaded' || request.action === 'page-reloaded') {
         if (isFacebook()) {
           this.handleFacebook();
         } else {
+          if (request.action === 'page-reloaded') {
+            // TODO clear banners here while implementing #29
+            $('.factchecker-fact-details-container').remove();
+          }
+
           chrome.runtime.sendMessage({ action: 'facts-get', url: window.location.href }, (facts) => {
             this.facts = facts || [];
             this.unmatchedFacts = [];

diff --git a/src/js/util.js b/src/js/util.js
@@ -80,6 +80,14 @@ export const encodeParams = (params) => {
   return qs.stringify(params);
 };
 
+export const parseUrl = (url) => {
+  const parser = document.createElement('a');
+  parser.href = url;
+
+  parser.searchparams = qs.parse(parser.search);
+  return parser;
+}
+
 export const parseFCOrigin = (url) => {
   const parser = document.createElement('a');
   parser.href = url;