From f32af3b76102b15639668917138605f037698a7f Mon Sep 17 00:00:00 2001 From: DongHyun Song Date: Thu, 21 Apr 2022 20:10:38 +0900 Subject: [PATCH] [DeviceHome][VD] Support preview display on client When there are d2dservice apps having preview data, - 'click' event is for listing preview data - 'dblclick' event is for opening the UI offloading page For the deeplink, when the preview icon is clicked on client side, then it will request appcontrol with 'action' parameter as 'PAYLAOAD' Parent patch: https://review.tizen.org/gerrit/274112/ Change-Id: I8c367802aed101644f6d086a9e30ae9dcc6f7eae Signed-off-by: DongHyun Song --- device_home/client/client.html | 5 ++ device_home/client/css/style.css | 13 ++++++ device_home/client/js/myApps.js | 98 ++++++++++++++++++++++++++++++++-------- 3 files changed, 96 insertions(+), 20 deletions(-) mode change 100755 => 100644 device_home/client/client.html mode change 100755 => 100644 device_home/client/css/style.css mode change 100755 => 100644 device_home/client/js/myApps.js diff --git a/device_home/client/client.html b/device_home/client/client.html old mode 100755 new mode 100644 index 025676a..e6c5461 --- a/device_home/client/client.html +++ b/device_home/client/client.html @@ -53,6 +53,11 @@
+
+
+
+
+
My Device App
diff --git a/device_home/client/css/style.css b/device_home/client/css/style.css old mode 100755 new mode 100644 index 3e7b5eb..56afa8b --- a/device_home/client/css/style.css +++ b/device_home/client/css/style.css @@ -50,6 +50,7 @@ box-sizing: border-box; width: 100%; } + .app-dummy-payment input.ui-inline { width: auto; display: inline; @@ -74,3 +75,15 @@ body { .app-display-none { display: none; } + +.app-preview-img { + width: 100px; +} + +#preview-section { + display: none; +} + +#preview-list { + display: none; +} \ No newline at end of file diff --git a/device_home/client/js/myApps.js b/device_home/client/js/myApps.js old mode 100755 new mode 100644 index 167feb9..869db93 --- a/device_home/client/js/myApps.js +++ b/device_home/client/js/myApps.js @@ -24,7 +24,6 @@ const NEW_WINDOW_TIMEOUT = 1000; const myappsmodule = {}; (function () { - var xhr; function emptyElement(elm) { while (elm.firstChild) { elm.removeChild(elm.firstChild); @@ -45,6 +44,26 @@ const myappsmodule = {}; }, NEW_WINDOW_TIMEOUT); }; + function request(method, json, api, body) { + return new Promise( + (resolve, reject) => { + const xhr = new XMLHttpRequest(); + xhr.onreadystatechange = function () { + if (xhr.readyState === xhr.DONE) { + if (xhr.status === 200 || xhr.status === 201) { + resolve(xhr.responseText); + } else { + reject(xhr.responseText); + } + } + }; + xhr.open(method, `${serverURL}:${serverPort}/${api}`); + if (json) + xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8'); + body ? xhr.send(body) : xhr.send(); + }); + } + function showListView(dataArray) { var formResult = document.getElementById("d2dApps"), imgResult = document.getElementById("d2dAppList"), @@ -71,24 +90,37 @@ const myappsmodule = {}; d2dApp = dataArray[i]['d2dApp']; if (d2dApp.hasOwnProperty("appName")) { if (d2dApp.iconPath) { - icon = d2dApp.iconPath.substring(d2dApp.iconPath.indexOf('/',10)+1); + icon = d2dApp.iconPath.substring(d2dApp.iconPath.indexOf('/', 10) + 1); imgObj.src = `/d2dIcon/${icon}`; } else { imgObj.src = `./images/icon.png`; } imgObj.className = "app-icon-img"; imgObj.alt = d2dApp.appName; + imgObj.setAttribute('pkgId', d2dApp.pkgId); + imgObj.setAttribute('appId', d2dApp.appId); textObj.style.display = "block"; textObj.style.margin = "0 auto"; textObj.style.fontSize = "14px"; textObj.innerHTML = d2dApp.appName; } - imgObj.addEventListener("click", actions.launchAppOnTV( - d2dApp.pkgId, - d2dApp.appId, - function (response) { - openAppWindow(response); - })); + imgObj.addEventListener("click", function () { + var pkgId = this.getAttribute('pkgId'); + var appId = this.getAttribute('appId'); + showPreview(pkgId, appId); + }, false); + imgObj.addEventListener("dblclick", function () { + var pkgId = this.getAttribute('pkgId'); + var appId = this.getAttribute('appId'); + actions.launchAppOnTV( + pkgId, + appId, + '', + function (response) { + // TODO: should check if the app provides client page or not + openAppWindow(response); + }) + }, false); formObj.appendChild(imgObj); formObj.appendChild(textObj); @@ -103,19 +135,45 @@ const myappsmodule = {}; } } + function showPreview(pkgId, appId) { + const reqBody = JSON.stringify({ pkgId, appId }); + request('POST', true, 'previewData', reqBody).then((body) => { + const preview = JSON.parse(body); + if (!preview.result.sections || !preview.result.sections.length) + return; + const previewSection = document.getElementById('preview-section'); + previewSection.style.display = 'block'; + previewSection.innerHTML = 'Preview'; + const previewList = document.getElementById('preview-list'); + previewList.style.display = 'grid'; + previewList.innerHTML = ''; + preview.result.sections.forEach(section => { + if (!section.tiles) + return; + section.tiles.forEach(tile => { + if (!tile.image_url) + return; + const img = document.createElement('img'); + img.src = tile.image_url; + img.border = 0; + img.className = 'app-preview-img'; + img.onclick = function () { + actions.launchAppOnTV( + pkgId, + appId, + tile.action_play_url, + function () { console.log('preview resumed') }); + } + previewList.appendChild(img); + }); + }); + }); + } + function showList() { - xhr = new XMLHttpRequest(); - xhr.onreadystatechange = function () { - if (xhr.readyState === xhr.DONE) { - if (xhr.status === 200 || xhr.status === 201) { - showListView(JSON.parse(xhr.responseText)); - } else { - console.error(xhr.responseText); - } - } - }; - xhr.open('GET', serverURL + ':' + serverPort + '/appList'); - xhr.send(); + request('GET', false, 'appList').then((body) => { + showListView(JSON.parse(body)); + }) } function init() { -- 2.7.4