Skip to content

GitLab

T
tangled
Commit 087d0349 authored by Eriksson Monteiro's avatar Eriksson Monteiro
Browse files
Options

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

parent baff5d7a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 262 additions and 70 deletions
chrome/browser/browser_resources.grd
View file @ 087d0349
......@@ -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
View file @ 087d0349
......@@ -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
View file @ 087d0349
/* 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('');
$targetPhrase.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');
clearTimeout(fetchAdvertisementTimeout);
fetchAdvertisementTimeout = setTimeout(() => fetchAdvertisement(), ADVERTISEMENT_ROTATION_TIME_EMPTY);
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
View file @ 087d0349
......@@ -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/resources/millix/vendor/moment.min.js 0 → 100644
View file @ 087d0349
This diff is collapsed.
chrome/browser/ui/webui/millix/millix_bar.cc
View file @ 087d0349
......@@ -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",
......
millix_node/tangled-advertisement.js
View file @ 087d0349
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment