update ad module. show ad only once. improve slow ad feedback

chrome/browser/browser_resources.grd

@@ -122,8 +122,9 @@
         <include name="IDR_MILLIX_BAR_JS" file="resources\millix\millix_bar.js" type="BINDATA" />
         <include name="IDR_MILLIX_WS_HTML" file="resources\millix\millix_ws.html" type="BINDATA" />
         <include name="IDR_MILLIX_WS_JS" file="resources\millix\millix_ws.js" type="BINDATA" />
-        <include name="IDR_MILLIX_WS_JQUERY" file="resources\millix\vendor\jquery.js" type="BINDATA" />
-        <include name="IDR_MILLIX_WS_JQUERY_NICE_SCROLL" file="resources\millix\vendor\jquery.nicescroll.js" type="BINDATA" />
+        <include name="IDR_MILLIX_BAR_MOMENTJS" file="resources\millix\vendor\moment.min.js" type="BINDATA" />
+        <include name="IDR_MILLIX_BAR_JQUERY" file="resources\millix\vendor\jquery.js" type="BINDATA" />
+        <include name="IDR_MILLIX_BAR_JQUERY_NICE_SCROLL" file="resources\millix\vendor\jquery.nicescroll.js" type="BINDATA" />
         <!-- app -->
         <include name="IDR_MILLIX_APP_HTML" file="resources\millix\millix_app.html" type="BINDATA" />
         <include name="IDR_MILLIX_APP_JS" file="resources\millix\millix_app.js" type="BINDATA" />

chrome/browser/resources/millix/millix_bar.html

@@ -10,6 +10,7 @@
   <script src="tangled://resources/js/util.js"></script>
   <script src="vendor/jquery.js"></script>
   <script src="vendor/jquery.nicescroll.js"></script>
+  <script src="vendor/moment.min.js"></script>
   <script src="strings.js"></script>
   <script src="millix_bar.js"></script>
 </head>
@@ -221,7 +222,7 @@
       </div>
     </div>
   </div>
-  <iframe id="frame_millix_api" src="chrome-untrusted://millix-ws/" class="hidden-element"
+  <iframe id="frame_millix_api" src="./millix_ws.html" class="hidden-element"
     onload="millix_bar.onApiFrameReady()"></iframe>
 </body>
 

chrome/browser/resources/millix/millix_bar.js

-/* for test
-class _cr{
+let CHILD_FRAME_ID = 'chrome-untrusted://millix-ws/'
+
+// UNCOMMENT ON TEST MODE ONLY
+/*
+CHILD_FRAME_ID = "*";
+const cr = {
     define(n, f) {
         globalThis[n] = f();
-    }
+    },
+    addWebUIListener() { }
 }
-let cr = new _cr();*/
+
+const loadTimeData = {
+    getBoolean() { return false }
+}
+
+chrome.send = () => { }
+
+const NODE_ID = '15R1pfUjf7rxctfgfTqdygvTWMm2aZ5SVF';
+const NODE_SIGNATURE = '4d9yMgPRHhFYJ85GuAQcZ1TW7VZkgofY5PhyK7A8rNjtggVUCrFh2nxHUkC5rzmxtHvZNfn6AA7hR61cRFK8ar95';
+setTimeout(() => {
+    millix_bar.connectToWallet({ node_id: NODE_ID, node_signature: NODE_SIGNATURE })
+    millix_bar.activateWallet()
+}, 1000)
+*/
+// END TEST
 
 cr.define('millix_bar', function () {
     'use strict';
@@ -13,11 +32,17 @@ cr.define('millix_bar', function () {
     let lastKnownTransaction = undefined;
     let reloadTimeout = undefined;
     let fetchAdvertisementTimeout = undefined;
-    const ADVERTISEMENT_ROTATION_TIME = 30000;
-    const ADVERTISEMENT_ROTATION_TIME_EMPTY = 15000;
+    let transactionTimestampUpdateTimeout = undefined;
+    const ADVERTISEMENT_ROTATION_TIME = 60000;
+    const ADVERTISEMENT_ROTATION_TIME_EMPTY = 5000;
     let walletLocked = true;
     let unlockFromBar = false;
     const audioDeposit = new Audio('/deposit.mp3');
+    let stopAdvertisementRendering = false;
+    let advertisementRenderingTimestampStart = undefined;
+    let advertisementRenderingTimestampPaused = undefined;
+    let advertisementPaymentTimestampLast = undefined;
+    let sessionStart = undefined;
 
     function refreshThemeStyles(data) {
         if (data.is_dark_theme) {
@@ -43,15 +68,15 @@ cr.define('millix_bar', function () {
         millixAPIFrame.contentWindow.postMessage({
             type: 'api_config',
             ...apiConfig
-        }, 'chrome-untrusted://millix-ws/');
+        }, CHILD_FRAME_ID);
 
         millixAPIFrame.contentWindow.postMessage({
             type: 'get_session'
-        }, 'chrome-untrusted://millix-ws/');
+        }, CHILD_FRAME_ID);
 
         millixAPIFrame.contentWindow.postMessage({
             type: 'api_check'
-        }, 'chrome-untrusted://millix-ws/');
+        }, CHILD_FRAME_ID);
     }
 
     function showMillixWallet() {
@@ -65,9 +90,28 @@ cr.define('millix_bar', function () {
     function showNewAdvertisement(advertisement) {
         const $headline = $('#advertisement_headline');
         const $targetPhrase = $('#advertisement_deck');
+        console.error("last ad payment", moment(new Date(advertisementPaymentTimestampLast)).fromNow())
         if (!advertisement || !advertisement.advertisement_url) {
-            $headline.text('');
+            const aMinuteAgo = Date.now() - 60000;
+            const twoMinutesAgo = Date.now() - 120000;
+            const thirtyMinutesAgo = Date.now() - 1800000;
+            const aDayAgo = Date.now() - 86400000;
+            if (thirtyMinutesAgo > sessionStart && (!!advertisementPaymentTimestampLast && aDayAgo > advertisementPaymentTimestampLast)) {
+                $headline.text('unable to find ads');
+                $targetPhrase.text(`please click "help -> report issue" to resolve`);
+            } else {
+                $headline.text('searching for ad...');
+
+                if (aMinuteAgo > sessionStart && (!!advertisementPaymentTimestampLast && twoMinutesAgo > advertisementPaymentTimestampLast)) {
+                    $targetPhrase.text(`it has been ${moment(new Date(advertisementPaymentTimestampLast)).fromNow()} since your last ad payment`);
+                } else {
                     $targetPhrase.text('');
+                }
+            }
+
+            $headline.css('font-weight', 'normal');
+            $headline.css('color', 'lightgray');
+            $targetPhrase.css('color', 'lightgray');
 
             $headline.prop("href", undefined);
             $targetPhrase.prop("href", undefined);
@@ -78,10 +122,17 @@ cr.define('millix_bar', function () {
             $headline.off('click');
             $targetPhrase.off('click');
 
+            advertisementRenderingTimestampStart = undefined;
+
+            if (!stopAdvertisementRendering) {
                 clearTimeout(fetchAdvertisementTimeout);
                 fetchAdvertisementTimeout = setTimeout(() => fetchAdvertisement(), ADVERTISEMENT_ROTATION_TIME_EMPTY);
+            }
 
         } else {
+            $headline.css('font-weight', '');
+            $headline.css('color', '');
+            $targetPhrase.css('color', '');
 
             if ($(".arrow-icon").hasClass('open')) { //ads container not visible
                 return;
@@ -126,6 +177,8 @@ cr.define('millix_bar', function () {
             $targetPhrase.off('click');
             $headline.on('click', () => chrome.send('showMillixWallet', ['new_tab', advertisement.advertisement_url]));
             $targetPhrase.on('click', () => chrome.send('showMillixWallet', ['new_tab', advertisement.advertisement_url]));
+
+            advertisementRenderingTimestampStart = Date.now();
         }
     }
 
@@ -144,15 +197,33 @@ cr.define('millix_bar', function () {
 
         millixAPIFrame.contentWindow.postMessage({
             type: 'get_next_tangled_advertisement'
-        }, 'chrome-untrusted://millix-ws/');
+        }, CHILD_FRAME_ID);
         fetchAdvertisementTimeout = setTimeout(() => fetchAdvertisement(), ADVERTISEMENT_ROTATION_TIME);
     }
 
+    function updateLastTransactionTimestamp(updateNow) {
+        clearTimeout(transactionTimestampUpdateTimeout);
+
+        if (updateNow) {
+            millixAPIFrame.contentWindow.postMessage({
+                type: 'get_last_transaction_timestamp'
+            }, CHILD_FRAME_ID);
+        }
+
+        transactionTimestampUpdateTimeout = setTimeout(() => updateLastTransactionTimestamp(), 10000);
+    }
+
     function activateWallet() {
         if (!walletLocked) {
             return;
         }
 
+        sessionStart = Date.now();
+        advertisementPaymentTimestampLast = Date.now();
+
+        updateLastTransactionTimestamp(true);
+
+
         $('#wallet_unlock').addClass('hidden');
         $('#wallet_restart').addClass('hidden');
         $('#wallet').removeClass('hidden');
@@ -168,7 +239,7 @@ cr.define('millix_bar', function () {
         console.log("[activateWallet]");
         millixAPIFrame.contentWindow.postMessage({
             type: 'read_stat_start'
-        }, 'chrome-untrusted://millix-ws/');
+        }, CHILD_FRAME_ID);
         unlockFromBar = false;
 
         setTimeout(() => fetchAdvertisement(), 2000);
@@ -186,7 +257,7 @@ cr.define('millix_bar', function () {
 
         millixAPIFrame.contentWindow.postMessage({
             type: 'read_stat_stop'
-        }, 'chrome-untrusted://millix-ws/');
+        }, CHILD_FRAME_ID);
 
         disableAdvertisementFetch();
     }
@@ -312,7 +383,16 @@ cr.define('millix_bar', function () {
             type: 'get_transaction',
             transaction_id: lastKnownTransaction.transaction_id,
             shard_id: lastKnownTransaction.shard_id,
-        }, 'chrome-untrusted://millix-ws/');
+        }, CHILD_FRAME_ID);
+    }
+
+    function onLastTransactionTimestampUpdate(data) {
+        if(!data.timestamp){
+            advertisementPaymentTimestampLast = undefined;
+        } else {
+            advertisementPaymentTimestampLast = data.timestamp * 1000;
+        }
+        updateLastTransactionTimestamp();
     }
 
     function changeVolume(data) {
@@ -358,6 +438,28 @@ cr.define('millix_bar', function () {
         }
     }
 
+    function onVisibilityChange() {
+        if (document.hidden) {
+            stopAdvertisementRendering = true;
+            advertisementRenderingTimestampPaused = Date.now();
+            clearInterval(fetchAdvertisementTimeout);
+            console.error("pausing advertisement rendering")
+        } else {
+            stopAdvertisementRendering = false;
+            console.error("resuming advertisement rendering")
+            if (advertisementRenderingTimestampStart) {
+                const remainingAdvertisementRendingTime = ADVERTISEMENT_ROTATION_TIME - (advertisementRenderingTimestampPaused - advertisementRenderingTimestampStart);
+                if (remainingAdvertisementRendingTime > 0) {
+                    console.error(Math.floor(remainingAdvertisementRendingTime / 1000) + " seconds remaining");
+                    fetchAdvertisementTimeout = setTimeout(() => fetchAdvertisement(), remainingAdvertisementRendingTime);
+                    return;
+                }
+            }
+            console.error("prepare to get a new ad");
+            fetchAdvertisement();
+        }
+    }
+
     // Return an object with all of the exports.
     return {
         initialize,
@@ -369,9 +471,11 @@ cr.define('millix_bar', function () {
         updateNodeStat,
         onApiFrameReady,
         onLastTransactionUpdate,
+        onLastTransactionTimestampUpdate,
         expandView,
         onTransaction,
-        showNewAdvertisement
+        showNewAdvertisement,
+        onVisibilityChange
     };
 });
 
@@ -381,6 +485,9 @@ window.addEventListener('message', ({ data }) => {
         case 'last_transaction':
             millix_bar.onLastTransactionUpdate(data.data);
             break;
+        case 'last_transaction_timestamp':
+            millix_bar.onLastTransactionTimestampUpdate(data.data);
+            break;
         case 'new_transaction':
             millix_bar.onTransaction(data.data);
             break;
@@ -416,6 +523,8 @@ window.addEventListener('message', ({ data }) => {
 
 document.addEventListener('DOMContentLoaded', millix_bar.initialize);
 
+document.addEventListener("visibilitychange", millix_bar.onVisibilityChange);
+
 $(document).ready(() => {
     $(".arrow-icon").click(function () {
         const $this = $(this);

chrome/browser/resources/millix/millix_ws.js

@@ -3,6 +3,7 @@ class _API {
     static NODE_API = `${_API.HOST}/api`;
     static HOST_TANGLED = 'https://localhost:15555';
     static TANGLED_API = `${_API.HOST_TANGLED}/api`;
+    static PARENT_FRAME_ID = "*"; //'tangled://millix-bar';
 
     constructor() {
         this.nodeID = undefined;
@@ -34,14 +35,14 @@ class _API {
             return fetch(`${_API.HOST}`)
                 .then(response => {
                     if (this.apiHealthCheckFail >= 4) {
-                        window.parent.postMessage({ type: 'node_restarted' }, 'tangled://millix-bar');
+                        window.parent.postMessage({ type: 'node_restarted' }, _API.PARENT_FRAME_ID);
                     }
                     this.apiHealthCheckFail = 0;
                     return response.json();
                 }).catch(e => {
                     this.apiHealthCheckFail++;
                     if (this.apiHealthCheckFail === 4) {
-                        window.parent.postMessage({ type: 'node_error' }, 'tangled://millix-bar');
+                        window.parent.postMessage({ type: 'node_error' }, _API.PARENT_FRAME_ID);
                     }
                     throw e;
                 });
@@ -169,12 +170,22 @@ class _API {
             return Promise.reject(e)
         }
     }
+
+    getLastTransactionTimestamp() {
+        try {
+            return fetch(this.getTangledURL() +  `/AQ82j88MiEyoe3zi`)
+                .then(response => response.json());
+        }
+        catch (e) {
+            return Promise.reject(e);
+        }
+    }
 }
 
 const API = new _API();
 
 document.addEventListener('DOMContentLoaded', () => {
-    window.parent.postMessage({ type: "initialize" }, 'tangled://millix-bar');
+    window.parent.postMessage({ type: "initialize" }, _API.PARENT_FRAME_ID);
 });
 
 
@@ -183,7 +194,7 @@ let addressKeyIdentifier = null;
 function readStat() {
     API.getNodeStat()
         .then(data => {
-            window.parent.postMessage({ type: "node_stat", data }, 'tangled://millix-bar');
+            window.parent.postMessage({ type: "node_stat", data }, _API.PARENT_FRAME_ID);
 
             if (!addressKeyIdentifier) {
                 return API.getSession()
@@ -191,13 +202,13 @@ function readStat() {
                         if (data.wallet) {
                             addressKeyIdentifier = data.wallet.address_key_identifier;
                             return API.getLastTransaction(addressKeyIdentifier)
-                                .then(data => window.parent.postMessage({ type: "last_transaction", data: data[0] }, 'tangled://millix-bar'))
+                                .then(data => window.parent.postMessage({ type: "last_transaction", data: data[0] }, _API.PARENT_FRAME_ID))
                         }
                     });
             }
 
             return API.getLastTransaction(addressKeyIdentifier)
-                .then(data => window.parent.postMessage({ type: "last_transaction", data: data[0] }, 'tangled://millix-bar'))
+                .then(data => window.parent.postMessage({ type: "last_transaction", data: data[0] }, _API.PARENT_FRAME_ID))
         })
         .then(() => readStatHandlerID = setTimeout(() => readStat(), 1000))
         .catch(() => readStatHandlerID = setTimeout(() => readStat(), 1000));
@@ -224,7 +235,7 @@ window.addEventListener('message', ({ data }) => {
                     if (data.wallet) {
                         addressKeyIdentifier = data.wallet.address_key_identifier;
                     }
-                    window.parent.postMessage({ type: 'millix_session', data }, 'tangled://millix-bar')
+                    window.parent.postMessage({ type: 'millix_session', data }, _API.PARENT_FRAME_ID)
                 }).catch(_ => setTimeout(() => window.postMessage({ type: 'get_session' }), 1000));
             break;
         case 'new_session':
@@ -233,15 +244,18 @@ window.addEventListener('message', ({ data }) => {
                     if (data.wallet) {
                         addressKeyIdentifier = data.wallet.address_key_identifier;
                     }
-                    window.parent.postMessage({ type: 'millix_session', data }, 'tangled://millix-bar')
+                    window.parent.postMessage({ type: 'millix_session', data }, _API.PARENT_FRAME_ID)
                 });
             break;
         case 'get_transaction':
             API.getTransaction(data.transaction_id, data.shard_id)
                 .then(data => {
-                    window.parent.postMessage({ type: 'new_transaction', data }, 'tangled://millix-bar')
+                    window.parent.postMessage({ type: 'new_transaction', data }, _API.PARENT_FRAME_ID)
                 });
             break;
+        case 'get_last_transaction_timestamp':
+            API.getLastTransactionTimestamp()
+                .then(data => window.parent.postMessage({ type: 'last_transaction_timestamp', data }, _API.PARENT_FRAME_ID))
         case 'read_stat_start':
             if (!readStatHandlerID) {
                 readStat();
@@ -255,8 +269,8 @@ window.addEventListener('message', ({ data }) => {
             break;
         case 'get_next_tangled_advertisement':
             API.getNextAdvertisementToRender()
-                .then(data => window.parent.postMessage({ type: 'next_tangled_advertisement', data }, 'tangled://millix-bar'))
-                .catch(() => window.parent.postMessage({ type: 'next_tangled_advertisement', data: null }, 'tangled://millix-bar'));
+                .then(data => window.parent.postMessage({ type: 'next_tangled_advertisement', data }, _API.PARENT_FRAME_ID))
+                .catch(() => window.parent.postMessage({ type: 'next_tangled_advertisement', data: null }, _API.PARENT_FRAME_ID));
             break;
         case 'api_check':
             if (!apiCheckHandlerID) {

chrome/browser/ui/webui/millix/millix_bar.cc

@@ -144,9 +144,10 @@ MillixBarUI::MillixBarUI(content::WebUI* web_ui)
   // Add required resources.
   html_source->AddResourcePath("millix_bar.css", IDR_MILLIX_BAR_CSS);
   html_source->AddResourcePath("millix_bar.js", IDR_MILLIX_BAR_JS);
-  html_source->AddResourcePath("vendor/jquery.js", IDR_MILLIX_WS_JQUERY);
+  html_source->AddResourcePath("vendor/moment.min.js", IDR_MILLIX_BAR_MOMENTJS);
+  html_source->AddResourcePath("vendor/jquery.js", IDR_MILLIX_BAR_JQUERY);
   html_source->AddResourcePath("vendor/jquery.nicescroll.js",
-                               IDR_MILLIX_WS_JQUERY_NICE_SCROLL);
+                               IDR_MILLIX_BAR_JQUERY_NICE_SCROLL);
   html_source->AddResourcePath("deposit.mp3", IDR_MILLIX_APP_DEPOSIT_MP3);
   html_source->AddBoolean(
       "is_dark_theme",