[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 <dh81.song@samsung.com>

diff --git a/device_home/client/client.html b/device_home/client/client.html
old mode 100755 (executable)
new mode 100644 (file)
index 025676a..e6c5461
--- a/device_home/client/client.html
+++ b/device_home/client/client.html
@@ -53,6 +53,11 @@
                                <div class="app-image-grid" id="d2dAppList">
                                </div>
                        </div>
+                       <div class="ui-content-subheader" id="preview-section"></div>
+                       <div class="ui-content-area">
+                               <div class="app-image-grid" id="preview-list">
+                               </div>
+                       </div>
                        <div class="ui-drawer" data-position="left" id="leftDrawer" data-drag-edge="0">
                                <div class="ui-drawer-header">
                                        <div class="ui-drawer-title">My Device App</div>

diff --git a/device_home/client/css/style.css b/device_home/client/css/style.css
old mode 100755 (executable)
new mode 100644 (file)
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 (executable)
new mode 100644 (file)
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() {