[CALLS-700]Call history design implementation

danney-chun · danney-chun · commit 79509241a4c9 · 2020-05-14T10:49:37.000+09:00
1. intentation size change.
2. voice call bug fix in the call log
diff --git a/lib/components/App.js b/lib/components/App.js
@@ -1,5 +1,5 @@
 import BaseElement from "./BaseElement";
-import { jss, sheet, classes } from "../css/styles.js";
+import { jss, sheet } from "../css/styles.js";
 
 export default class App extends BaseElement {
   constructor({ id, className, pages, styles, args }) {
diff --git a/lib/components/Header.js b/lib/components/Header.js
@@ -5,92 +5,92 @@ import Menu from "../components/Menu";
 import { sheet, classes } from "../css/styles";
 
 export default class Header extends BaseElement {
-    constructor({ id, className, parent, element, args } = {}) {
-        super({ id, className, parent, element, args });
-        this.element = element;
-        this.parent = parent;
+  constructor({ id, className, parent, element, args } = {}) {
+    super({ id, className, parent, element, args });
+    this.element = element;
+    this.parent = parent;
 
-        this.settingItems = [
-            {
-                'label': 'Device settings',
-                'callback': () => { this.sendToParent('show_settings') }
-            },
-            {
-                'label': 'Sign out',
-                'callback': () => { 
-                    SendBirdCall.deauthenticate();
-                    this.sendToParent('deauthenticate'); 
-                }
-            }
-        ];
+    this.settingItems = [
+      {
+        'label': 'Device settings',
+        'callback': () => { this.sendToParent('show_settings') }
+      },
+      {
+        'label': 'Sign out',
+        'callback': () => { 
+            SendBirdCall.deauthenticate();
+            this.sendToParent('deauthenticate'); 
+        }
+      }
+    ];
 
-        this.args = args;
-        this.parent = parent;
-    }
+    this.args = args;
+    this.parent = parent;
+  }
 
-    build() {
-       const userDiv = createDiv({
-            id: 'header_user_div',
-            className: `${classes['userDiv']} ${classes['center']}`
-        });
+  build() {
+    const userDiv = createDiv({
+      id: 'header_user_div',
+      className: `${classes['userDiv']} ${classes['center']}`
+    });
 
-        let profileImg;
-        if (this.args.user && this.args.user.profileUrl) {
-            sheet.update({ profileUrl: this.args.user.profileUrl });
-            profileImg = createDiv({ id: 'header_profile_img', className: classes['profileSmall'] });
-        } else {
-            profileImg = createDiv({ id: 'header_avatar', className: `${classes['avatar']}` });
-        }
+    let profileImg;
+    if (this.args.user && this.args.user.profileUrl) {
+      sheet.update({ profileUrl: this.args.user.profileUrl });
+      profileImg = createDiv({ id: 'header_profile_img', className: classes['profileSmall'] });
+    } else {
+      profileImg = createDiv({ id: 'header_avatar', className: `${classes['avatar']}` });
+    }
 
-        const headerInfo = createDiv({ id: 'header_info', className: `${classes['headerInfo']}` });
-        const userId = createDiv({
-            id: 'header_user_id',
-            className: `${classes['headerUserId']} ${classes['fontNormal']} ${classes['fontHeavy']}`,
-            innerText: this.args.user.userId || ''
-        });
-        const nickname = createDiv({
-            id: 'header_nickname',
-            className: `${classes['headerNickname']} ${classes['fontSmall']}`,
-            innerText: this.args.user.nickname || 'no nickname'
-        });
-        headerInfo.appendChild(userId);
-        headerInfo.appendChild(nickname);
+    const headerInfo = createDiv({ id: 'header_info', className: `${classes['headerInfo']}` });
+    const userId = createDiv({
+      id: 'header_user_id',
+      className: `${classes['headerUserId']} ${classes['fontNormal']} ${classes['fontHeavy']}`,
+      innerText: this.args.user.userId || ''
+    });
+    const nickname = createDiv({
+      id: 'header_nickname',
+      className: `${classes['headerNickname']} ${classes['fontSmall']}`,
+      innerText: this.args.user.nickname || 'no nickname'
+    });
+    headerInfo.appendChild(userId);
+    headerInfo.appendChild(nickname);
 
-        userDiv.appendChild(profileImg);
-        userDiv.appendChild(headerInfo);
+    userDiv.appendChild(profileImg);
+    userDiv.appendChild(headerInfo);
 
-        const headerButtons = createDiv({
-            id: 'header_buttons',
-            className: `${classes['headerButtons']} ${classes['row']} ${classes['center']}`
-        });
-        const settingsButton = new Menu({
-            id: 'settings_button',
-            element: createDiv({ className: `${classes['settingsButton']}` }),
-            items: this.settingItems
-        });
+    const headerButtons = createDiv({
+      id: 'header_buttons',
+      className: `${classes['headerButtons']} ${classes['row']} ${classes['center']}`
+    });
+    const settingsButton = new Menu({
+      id: 'settings_button',
+      element: createDiv({ className: `${classes['settingsButton']}` }),
+      items: this.settingItems
+    });
 
-        const closeButton = createDiv({
-            id: 'close_button',
-            className: `${classes['closeButton']}`
-        });
-        closeButton.onclick = () => {
-            this.parent.sendToParent('widgetclose');
-        };
-        settingsButton.appendToHTML(headerButtons);
-        headerButtons.appendChild(closeButton);
+    const closeButton = createDiv({
+      id: 'close_button',
+      className: `${classes['closeButton']}`
+    });
+    closeButton.onclick = () => {
+      this.parent.sendToParent('widgetclose');
+    };
+    settingsButton.appendToHTML(headerButtons);
+    headerButtons.appendChild(closeButton);
 
-        const divider = createDiv({
-            id: 'header_divider',
-            className: classes['headerDivider']
-        });
+    const divider = createDiv({
+      id: 'header_divider',
+      className: classes['headerDivider']
+    });
 
-        this.element.appendChild(userDiv);
-        this.element.appendChild(divider);
-        this.element.appendChild(headerButtons);
+    this.element.appendChild(userDiv);
+    this.element.appendChild(divider);
+    this.element.appendChild(headerButtons);
 
-        if( !this.args.isWidget ){
-            const headerLogo = createDiv({ id: 'header_logo', className: `${classes['headerLogo']}`});
-            this.element.appendChild(headerLogo);
-        }
+    if( !this.args.isWidget ){
+      const headerLogo = createDiv({ id: 'header_logo', className: `${classes['headerLogo']}`});
+      this.element.appendChild(headerLogo);
     }
+  }
 }
diff --git a/lib/views/CallLogItem.js b/lib/views/CallLogItem.js
@@ -140,7 +140,7 @@ export class CallLogItem {
       eventhandler(event, {peerId: this.destPeerID, isVideoCall: true, callOption: null});
     };
     this.btnCallVoice.onclick = (event) => {
-      eventhandler(event, {peerId: this.destPeerID, isVideoCall: true, callOption: null});
+      eventhandler(event, {peerId: this.destPeerID, isVideoCall: false, callOption: null});
     };
   }
 }
diff --git a/lib/views/CallLogView.js b/lib/views/CallLogView.js
@@ -5,74 +5,74 @@ import { createList, createDiv } from "../utils/domUtil";
 import { CallLogItem } from "./CallLogItem";
 
 export default class CallLogView extends BaseElement{
-    constructor({ args }) {
-        super({
-          id: 'calllog_view',
-          className: `${classes['container']} ${classes['center']} ${classes['viewDial']}`,
-          args
-        });
+  constructor({ args }) {
+    super({
+      id: 'calllog_view',
+      className: `${classes['container']} ${classes['center']} ${classes['viewDial']}`,
+      args
+    });
 
-        this.callLogQuery = null;
-        this.callLogQueryData = [];
-        this.args = args;
-    }
+    this.callLogQuery = null;
+    this.callLogQueryData = [];
+    this.args = args;
+  }
 
-    build() {
-        const callLogList = createList({ id: 'call_log_list', className: `${classes['callLogListContainer']}` });
-        this.callLogQuery = SendBirdCall.createDirectCallLogListQuery({ limit: 30 });
+  build() {
+    const callLogList = createList({ id: 'call_log_list', className: `${classes['callLogListContainer']}` });
+    this.callLogQuery = SendBirdCall.createDirectCallLogListQuery({ limit: 30 });
+    this.getCallLogs(callLogList);
+    callLogList.onscroll = (e) => {
+      let scrollposition = e.target.scrollHeight - e.target.clientHeight;
+      if( scrollposition === e.target.scrollTop ) {
         this.getCallLogs(callLogList);
-        callLogList.onscroll = (e) => {
-            let scrollposition = e.target.scrollHeight - e.target.clientHeight;
-            if( scrollposition === e.target.scrollTop ) {
-                this.getCallLogs(callLogList);
-            }
-        };
+      }
+    };
 
-        if( this.args.isWidget ) {
-            callLogList.classList.add(classes['widgetCallLog']);
-            this.element.appendChild(callLogList);
-        }
-        else{
-            const callLogDescription = createDiv({ id: 'call_log_desc', className: `${classes['callLogListDesc']}` });
-            const callLogDescLogo = createDiv({ className: `${classes['callLogDescLogo']}` });
-            const callLogDescTitle = createDiv({ innerText: 'Sendbird Calls Quickstart', className: `${classes['callLogDescTitle']} ${classes['font24']} ${classes['fontDemi']}` });
-            const callLogDescLabel = createDiv({ innerText: 'This is the Sendbird Calls Quickstart page. Lorem ipsum', className: `${classes['callLogDescLabel']} ${classes['fontNormal']} ${classes['fontHeavy']}` });
-            callLogDescription.appendChild(callLogDescLogo);
-            callLogDescription.appendChild(callLogDescTitle);
-            callLogDescription.appendChild(callLogDescLabel);
+    if( this.args.isWidget ) {
+      callLogList.classList.add(classes['widgetCallLog']);
+      this.element.appendChild(callLogList);
+    }
+    else{
+      const callLogDescription = createDiv({ id: 'call_log_desc', className: `${classes['callLogListDesc']}` });
+      const callLogDescLogo = createDiv({ className: `${classes['callLogDescLogo']}` });
+      const callLogDescTitle = createDiv({ innerText: 'Sendbird Calls Quickstart', className: `${classes['callLogDescTitle']} ${classes['font24']} ${classes['fontDemi']}` });
+      const callLogDescLabel = createDiv({ innerText: 'This is the Sendbird Calls Quickstart page. Lorem ipsum', className: `${classes['callLogDescLabel']} ${classes['fontNormal']} ${classes['fontHeavy']}` });
+      callLogDescription.appendChild(callLogDescLogo);
+      callLogDescription.appendChild(callLogDescTitle);
+      callLogDescription.appendChild(callLogDescLabel);
 
-            this.element.appendChild(callLogList);
-            this.element.appendChild(callLogDescription);
-        }
+      this.element.appendChild(callLogList);
+      this.element.appendChild(callLogDescription);
     }
+  }
+
+  getCallLogs(element){
+    if( this.callLogQuery.hasNext && !this.callLogQuery.isLoading ) {
+      this.callLogQuery.next((directCallLog) => {
+        if( directCallLog ){
+          if( directCallLog.length > 0 ) {
+            for( let i = 0; i < directCallLog.length; i++ ){
+              let callItem = null;
+              if( i === 0 ){
+                callItem = new CallLogItem({ callLogInfo: directCallLog[i], className: `${classes['callLogItemWrap']}` });
+              }
+              else {
+                callItem = new CallLogItem({ callLogInfo: directCallLog[i], className: `${classes['callLogItemWrap']} ${classes['callLogItemWarpBorder']}` }); 
+              }
+              callItem.onclick = (event, args) => {
+                this.sendToParent('dial', args);              
+              };
 
-    getCallLogs(element){
-        if( this.callLogQuery.hasNext && !this.callLogQuery.isLoading ) {
-            this.callLogQuery.next((directCallLog) => {
-                if( directCallLog ){
-                    if( directCallLog.length > 0 ) {
-                        for( let i = 0; i < directCallLog.length; i++ ){
-                            let callItem = null;
-                            if( i === 0 ){
-                                callItem = new CallLogItem({ callLogInfo: directCallLog[i], className: `${classes['callLogItemWrap']}` });
-                            }
-                            else {
-                                callItem = new CallLogItem({ callLogInfo: directCallLog[i], className: `${classes['callLogItemWrap']} ${classes['callLogItemWarpBorder']}` }); 
-                            }
-                            callItem.onclick = (event, args) => {
-                                this.sendToParent('dial', args);              
-                            };
-    
-                            element.appendChild(callItem.element);
-                        }
-                    }
-                    else{
-                        // empty call log
-                        const emptyCallLog = new CallLogItem({ className: `${classes['callLogEmptyWrap']}` });
-                        element.appendChild(emptyCallLog.element);
-                    }
-                }
-            });
+              element.appendChild(callItem.element);
+            }
+          }
+          else{
+            // empty call log
+            const emptyCallLog = new CallLogItem({ className: `${classes['callLogEmptyWrap']}` });
+            element.appendChild(emptyCallLog.element);
+          }
         }
+      });
     }
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -140,7 +140,7 @@ export class CallLogItem {`
`140`	`140`	`eventhandler(event, {peerId: this.destPeerID, isVideoCall: true, callOption: null});`
`141`	`141`	`};`
`142`	`142`	`this.btnCallVoice.onclick = (event) => {`
`143`		`- eventhandler(event, {peerId: this.destPeerID, isVideoCall: true, callOption: null});`
	`143`	`+ eventhandler(event, {peerId: this.destPeerID, isVideoCall: false, callOption: null});`
`144`	`144`	`};`
`145`	`145`	`}`
`146`	`146`	`}`