Merge branch 'feature/host_change' into 'develop'

Feature/host change

See merge request !212

public_new/chat_add_user.html

@@ -8,7 +8,7 @@
     content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
   <title>LiveTaskyell</title>
   <link rel="stylesheet" href="./css/notosansjp.css">
-  <link rel="stylesheet" href="./fontawesome/css/all.css" >
+  <link rel="stylesheet" href="./fontawesome/css/all.css">
   <link rel="stylesheet" href="./css/bootstrap.min.css">
   <link rel="stylesheet" href="./css/common.css">
   <link rel="stylesheet" href="./css/chat.css">
@@ -21,7 +21,7 @@
   <!-- ナビメニュー -->
   <nav>
     <div class="row h-100 align-items-center">
-      <div class="col-4 pr-0">
+      <div class="col-10 pr-0">
         <div class="nav-item">
           <div class="nav_prev">
             <a href="chat_room.html"><span>ルーム</span></a>
@@ -66,7 +66,7 @@
             <div id="myGroupListForMakeRoom"></div>
           </div>
         </div>
-      </div>
+
         <div class="tab_content" id="tab2_content">
           <div class="breadcrumb" id="groupPathAreaForAddUser"></div>
           <div class="chat_list">
@@ -79,6 +79,7 @@
                       <div class="thumbnail-icon">
                         <img src="icon/icon_prev_top.svg" alt="トップグループに戻る" />
                       </div>
+                    </div>
                     <div class="chat_item_m px-0">
                       <div class="d-flex flex-column">
                         <div class="chat_item_t">
@@ -87,7 +88,6 @@
                       </div>
                     </div>
                   </div>
-                </div>
                 </a>
               </li>
               <li class="d-flex align-items-center" id="parentGroupArea">
@@ -97,6 +97,7 @@
                       <div class="thumbnail-icon">
                         <img src="icon/icon_prev.svg" alt="上位グループに戻る" />
                       </div>
+                    </div>
                     <div class="chat_item_m px-0">
                       <div class="d-flex flex-column">
                         <div class="chat_item_t">

public_new/js/Models/coview-userinfo.js

@@ -90,7 +90,7 @@ var CoviewUserInfo = class {
 // variable name for legacy connection to agent_app.js in coview library
 var globalUserInfo = new CoviewUserInfo(
   currentUserInfo.sid,
-  currentUserInfo.loginID,
+  currentUserInfo.shopName + "_" + currentUserInfo.loginID,
   roomInfo.roomID,
   currentUserInfo.shopName
 );

public_new/js/common/native-bridge-delegate.js

@@ -117,7 +117,7 @@ NativeBridgeDelegate.joinCollaboration = function (
 
 NativeBridgeDelegate.inviteUsers = function (userIDList) {
   if (typeof android != "undefined") {
-    android.inviteUsers(userIDList, false);
+    android.inviteUsers(userIDList);
   } else {
     webkit.messageHandlers.inviteUsers.postMessage({
       userIdList: userIDList,
@@ -146,7 +146,7 @@ NativeBridgeDelegate.finishPIPMode = function (needsAndroid = false) {
   if (deviceInfo.isiOS()) {
     webkit.messageHandlers.finishPipMode.postMessage({});
   } else if (needsAndroid && typeof android != "undefined") {
-    android.finishPip();
+    android.finishPIP();
   }
 };
 

public_new/js/languages/language_en.js

@@ -53,6 +53,7 @@ $.lang.en = {
     "groupChatRoom":"Group",
     "myGroup":"My Group",
     "allGroup":"All Group",
+    "message_join": "Join",
     "message_ended" : "End",
     "returnToRootGroup":"Return to Root Group",
     "returnToParentGroup":"Return to Parent Group",

public_new/js/languages/language_ja.js

@@ -53,6 +53,7 @@ $.lang.ja = {
     "groupChatRoom":"グループ",
     "myGroup":"マイグループ",
     "allGroup":"全グループ",
+    "message_join": "参加する",
     "message_ended" : "終了しました",
     "returnToRootGroup":"トップグループに戻る",
     "returnToParentGroup":"上位グループに戻る",

public_new/js/languages/language_ko.js

@@ -53,6 +53,7 @@ $.lang.ko = {
     "groupChatRoom":"그룹",
     "myGroup":"내그룹",
     "allGroup":"전그룹",
+    "message_join": "참가하기",
     "message_ended" : "종료되었습니다.",
     "returnToRootGroup":"최상위그룹으로 돌아가기",
     "returnToParentGroup":"상위그룹으로 돌아가기",

public_new/js/views/chats/chat-room-message.js

@@ -98,7 +98,6 @@ ChatRoom.loadMessages = function (joinRoomID, joinRoomName) {
   let messages = NativeBridgeDataSource.getMessagesByRoomID(roomID);
   ChatRoom.prependMessage(messages);
 
-
   window.addEventListener(
     "load",
     function (event) {
@@ -167,9 +166,9 @@ ChatRoom.prependMessage = function (messages) {
 
     // 日付ラーベル表示
     if (
-      messageCreatedTime != checkBeforeDate 
-      && checkBeforeDate != "" 
-      && !isToday
+      messageCreatedTime != checkBeforeDate &&
+      checkBeforeDate != "" &&
+      !isToday
     ) {
       const html = ChatRoom.renderDateLabelMessage(beforeDate);
       messageElement.append(html);
@@ -255,13 +254,17 @@ ChatRoom.renderCollaborationMessage = function (message, isToday, isOtherYear) {
     collaborationInfo.collaborationType
   );
 
+  const collaborationJoinMessage =
+    message.messageType == MessageType.COMMUNICATIONEND
+      ? getLocalizedString("message_ended")
+      : getLocalizedString("message_join");
+
   const html = Mustache.render(collaborationMessageTemplate, {
     messageId: message.messageId,
     roomName: roomName,
     userCount: userInCollaboration.length,
     userList: displayUserList,
     insertDate: message.insertDate,
-    // TODO: peacekim:: should check collaborationInfo.collaborationType is string or number
     collaborationType: strCollaborationType,
     meetingId: meetingID,
     isToday: isToday,
@@ -270,6 +273,7 @@ ChatRoom.renderCollaborationMessage = function (message, isToday, isOtherYear) {
     createdAtYear: createdAtYear,
     isOtherYear: isOtherYear,
     isEnded: message.messageType == MessageType.COMMUNICATIONEND ? true : false,
+    collaborationJoinMessage: collaborationJoinMessage,
   });
   return message.message.includes("attachedImages") ||
     message.message.includes("attachedVideos")

public_new/js/views/collaboration/collaboration.js

@@ -50,6 +50,16 @@ CollaborationUI.bindDisplayUsersButton = function () {
   });
 };
 
+CollaborationUI.userListSlideOut = function () {
+  const w = $(".user_btn").width();
+  $(".user_btn").removeClass("hide");
+  $("#overlay_user_list.overlay")
+    .removeClass("slidein")
+    .css({ transform: "translateX(" & -w & ")" });
+  scrollTo(0, 0);
+  CollaborationUI.bindDisableScroll();
+};
+
 CollaborationUI.bindChangeHostButton = function () {
   $(".ch_host_btn").click(function () {
     const target = $(this).val();
@@ -130,6 +140,7 @@ CollaborationUI.makeNameCard = function (shopMemberID) {
     isFavorite: nameCardInfo.isFavorite,
     isHost: isCollaborationHost,
     whosHost: whosHost,
+    collaborationId: globalUserInfo.shopName + "_" + nameCardInfo.loginId,
   });
 
   let namecardObj = $(jQuery.parseHTML(namecardHTML)).on(

public_new/js/views/collaboration/fermi-web-socket-bridge.js

@@ -3,13 +3,12 @@ var FermiWebSocketBridge = {};
 // call from modal_collabo_profile.html
 FermiWebSocketBridge.requestHostChange = function (loginID) {
   fw.sendToMsg("others", "HOST_CHANGE_REQUEST", {
-    loginId: getFermiLoginId(loginID),
+    loginId: loginID,
   });
 };
 
 FermiWebSocketBridge.shareFileHost = function (collaborationType) {
   fw.sendToMsg("others", "SHARE_FILE_HOST", {
-    // TODO: Peacekim check collaboration type as coviewType
     collaborationType: collaborationType,
   });
 };
@@ -19,14 +18,14 @@ FermiWebSocketBridge.hostChangeResponse = function () {
   fw.sendToMsg("others", "HOST_CHANGE_RESPONSE", {
     isAndroid: deviceInfo.isAndroid(),
     isAble: deviceInfo.androidVersion >= ANDROID_SDK_VERSION.O,
-    loginId: currentUserInfo.loginID,
+    loginId: globalUserInfo.loginId,
   });
 };
 
 // PIP_END_REQUEST
 FermiWebSocketBridge.pipEndRequest = function (loginID) {
   fw.sendToMsg("others", "PIP_END_REQUEST", {
-    loginId: getFermiLoginId(loginID),
+    loginId: loginID,
   });
 };
 
@@ -46,6 +45,10 @@ FermiWebSocketBridge.hostRequestDone = function (hostID) {
 
 // GET_COLLABORATION_TYPE_RESPONSE
 FermiWebSocketBridge.getCollaborationTypeResponse = function (loginID) {
+  if (typeof meetingID == undefined) {
+    var meetingID = 0;
+  }
+
   fw.sendToMsg("others", "GET_COLLABORATION_TYPE_RESPONSE", {
     loginId: loginID,
     collaborationType: globalUserInfo.collaborationType,
@@ -65,7 +68,7 @@ FermiWebSocketBridge.captureRequest = function () {
   // todo: peacekim:: check if it's okay for loginID
   // instead of globalUserInfo.loginId
   fw.sendToMsg("others", "CAPTURE_REQUEST", {
-    name: currentUserInfo.loginID,
+    name: globalUserInfo.loginId,
   });
 };
 
@@ -83,6 +86,10 @@ FermiWebSocketBridge.changeCollaboration = function (
 // CHANGE_HOST_APPLY
 FermiWebSocketBridge.changeHostApply = function () {
   fw.sendToMsg("others", "CHANGE_HOST_APPLY", {
-    hostId: currentUserInfo.loginID,
+    hostId: globalUserInfo.loginId,
   });
 };
+
+FermiWebSocketBridge.hostUpdated = function () {
+  fw.sendToMsg("others", "HOST_UPDATED", {});
+};

public_new/js/views/collaboration/fermi-web-socket-message-handler.js

@@ -3,14 +3,14 @@ var FermiWebSocketMessageHandler = {};
 FermiWebSocketMessageHandler.bindWebSocketMessage = function () {
   fw.socket.on("message", async function (data) {
     if (g_isMainMan) {
+      // 自分がホストの場合
       FermiWebSocketMessageHandler.handleMessagesToHost(data);
     } else if (data.payload.loginId == globalUserInfo.loginId) {
       // 自分自身の場合
       FermiWebSocketMessageHandler.handleMessagesToSelf(data);
-    } else {
+    }
     // global messages
     FermiWebSocketMessageHandler.handleMessagesToAll(data);
-    }
   });
 };
 
@@ -43,7 +43,7 @@ FermiWebSocketMessageHandler.handleMessagesToSelf = function (data) {
   // 自分自身の場合
   switch (data.type) {
     case "HOST_CHANGE_REQUEST":
-      FermiWebSocketMessageHandler.hostChangeRequest();
+      FermiWebSocketMessageHandler.hostChangeRequest(data);
       break;
     case "PIP_END_REQUEST":
       if (globalUserInfo.collaborationType == COLLABORATION_TYPE.DOCUMENT) {
@@ -70,6 +70,8 @@ FermiWebSocketMessageHandler.handleMessagesToAll = function (data) {
       break;
     case "API_SEND_OWNER_CHANGE_COMPLETE":
       FermiWebSocketMessageHandler.apiSendOwnerChangeComplete(data);
+      CollaborationFeature.updateHost();
+      FermiWebSocketBridge.hostUpdated();
       break;
     case "API_SEND_OWNER_CHANGE_CONFIRM":
       if (globalUserInfo.collaborationType == COLLABORATION_TYPE.CAMERA) {
@@ -81,6 +83,7 @@ FermiWebSocketMessageHandler.handleMessagesToAll = function (data) {
       break;
     case "HOST_REQUEST_DONE":
       FermiWebSocketMessageHandler.hostRequestDone();
+      CollaborationFeature.updateHost();
       break;
     case "HOST_REQUEST_REJECT":
       FermiWebSocketMessageHandler.hostRequestReject(data);
@@ -89,6 +92,15 @@ FermiWebSocketMessageHandler.handleMessagesToAll = function (data) {
       if (globalUserInfo.joinType != COLLABORATION_JOIN_TYPE.INVITED) {
         FermiWebSocketMessageHandler.apiWelcome();
       }
+      CollaborationFeature.updateHost();
+      break;
+    case "SWITCH_VIDEO":
+      CollaborationFeature.updateHost();
+      CollaborationUI.userListSlideOut();
+      $(".profile_favorite_btn").click();
+      break;
+    case "HOST_UPDATED":
+      CollaborationFeature.updateHost();
       break;
     default:
       break;
@@ -166,8 +178,8 @@ FermiWebSocketMessageHandler.captureRequest = function (data) {
 };
 
 // HOST_CHANGE_REQUEST
-FermiWebSocketMessageHandler.hostChangeRequest = function () {
-  FermiWebSocketBridge.hostChangeRequest();
+FermiWebSocketMessageHandler.hostChangeRequest = function (data) {
+  FermiWebSocketBridge.hostChangeResponse(data);
 };
 
 // HOST_CHANGE_RESPONSE
@@ -185,7 +197,7 @@ FermiWebSocketMessageHandler.hostChangeResponse = function (data) {
   } else {
     FermiWebSocketBridge.pipEndRequest(data.payload.loginId);
     waitMillisecond(500);
-    CoviewBridge.changeHost(getFermiLoginId(data.payload.loginId));
+    CoviewBridge.changeHost(data.payload.loginId);
   }
 };
 
@@ -236,7 +248,7 @@ FermiWebSocketMessageHandler.changeHostApplyForHost = function (data) {
   waitMillisecond(500);
 
   if (confirm(getLocalizedString("norify_request_host_change", hostID))) {
-    CoviewBridge.changeHost(getFermiLoginId(hostID));
+    CoviewBridge.changeHost(hostID);
     NativeBridgeDelegate.setHostRequestFlg(HostRequestFlag.DONE);
   } else {
     FermiWebSocketBridge.hostRequestReject(hostID);
@@ -251,7 +263,7 @@ FermiWebSocketMessageHandler.hostRequestDone = function () {
 
 // HOST_REQUEST_REJECT
 FermiWebSocketMessageHandler.hostRequestReject = function (data) {
-  if (data.payload.hostId == currentUserInfo.loginID) {
+  if (data.payload.hostId == globalUserInfo.loginId) {
     alert("REJECT for owner user");
   }
   NativeBridgeDelegate.setHostRequestFlg(HostRequestFlag.DONE);
@@ -265,7 +277,8 @@ FermiWebSocketMessageHandler.getCollaborationType = function (data) {
 // GET_COLLABORATION_TYPE_RESPONSE
 FermiWebSocketMessageHandler.getCollaborationTypeResponse = function (data) {
   const collaborationType = data.payload.collaborationType;
-  const meetingID = data.payload.newMeetingId;
+  const meetingID = data.payload.newMeetingId ?? 0;
+  
   FermiWebSocketMessageHandler.updateJoinChangeCollaboration(collaborationType);
   globalUserInfo.meetingID = meetingID;
   CollaborationUI.updateScreen(globalUserInfo.collaborationType);

public_new/js/views/collaboration/share-event-listener.js

@@ -14,9 +14,15 @@ CoviewBridge.bindReadyEvent = function () {
 };
 
 CoviewBridge.bindFermiWebSocketOpenned = function () {
+  try {
     wc_api.addEventListener("open", async function (event) {
       FermiWebSocketMessageHandler.bindWebSocketMessage();
     });
+  } catch (err) {
+    setTimeout(() => {
+      CoviewBridge.bindFermiWebSocketOpenned();
+    }, 1000);
+  }
 };
 
 CoviewBridge.bindStartEvent = function () {
@@ -102,7 +108,6 @@ CoviewBridge.bindMessageEvent = function () {
     if (globalUserInfo.isLeaved) {
       return;
     }
-    let loginIDList = new Array();
     switch (json.api) {
       case "LoginResponse":
         CollaborationFeature.didReceiveLoginResponseMessage();
@@ -126,10 +131,11 @@ CoviewBridge.bindMessageEvent = function () {
       case "RoomMemberJoinedEvent":
       // fall through
       case "RoomMemberLeavedEvent":
+        attendingUsers = new Array();
         for (let key in g_participants) {
-          loginIDList.push(key);
+          attendingUsers.push(key);
         }
-        CollaborationUI.refreshJoinedCollaboration(loginIDList);
+        CollaborationUI.refreshJoinedCollaboration(attendingUsers);
         break;
       case "HostRequest":
         // to be called by
@@ -185,9 +191,7 @@ CollaborationFeature.didReceiveLoginResponseMessage = async function () {
     case COLLABORATION_JOIN_TYPE.INVITED:
     // fall through
     case COLLABORATION_JOIN_TYPE.ATTENDEE:
-      // TODO:: here to update host
       coview_api.JoinRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
-
       break;
     case COLLABORATION_JOIN_TYPE.HOST:
       let deleteRoomResult = JSON.parse(
@@ -228,9 +232,15 @@ CollaborationFeature.didReceivedJoinRoomInfoResponseMessage = function () {
   NativeBridgeDelegate.joinRoom(roomInfo.roomID, roomInfo.roomName);
 };
 
+CoviewBridge.changeHostFromModal = function () {
+  const userID = $("#changeHostModal").data("bs.modal")._config.collaborationid;
+  // call in agent_app.js
+  coview_api.HostChange(userID);
+};
+
 CoviewBridge.changeHost = function (userID) {
   // call in agent_app.js
-  changeOwnerSend(userID);
+  coview_api.HostChange(userID);
 };
 
 CoviewBridge.addLoginID = function (loginID) {
@@ -260,10 +270,11 @@ CollaborationFeature.updateHost = function () {
   }
 
   CollaborationUI.showHostMark(g_isMainManUsername);
+
+  $("#remoteVideoNameSpan").addClass("hide");
 };
 
 CollaborationUI.showHostButtons = function () {
-
   $(".host_contents").removeClass("none");
   if (globalUserInfo.collaborationType == COLLABORATION_TYPE.CAMERA) {
     $(".photo_select_button").removeClass("none");
@@ -275,7 +286,6 @@ CollaborationUI.showHostButtons = function () {
 };
 
 CollaborationUI.hideHostButtons = function () {
-
   $(".host_contents").addClass("none");
   if (globalUserInfo.collaborationType == COLLABORATION_TYPE.CAMERA) {
     $(".photo_select_button").addClass("none");
@@ -287,24 +297,29 @@ CollaborationUI.hideHostButtons = function () {
 };
 
 CollaborationUI.showHostMark = function (hostName) {
-  const currentUserLoginIDDiv = $(
-    "#collaboration_user_" + currentUserInfo.loginID
-  );
-  const replaceHostIDDiv = $(
-    "#collaboration_user_" + getReplacedLoginId(hostName)
-  );
-  const replacedMainManUserID = $(
-    "#collaboration_user_" + getReplacedLoginId(g_isMainManUsername)
-  );
+  // remove all host mark
+  attendingUsers.forEach(function (userName) {
+    // hide other user's video area
+    $(userName).hide();
+    // remove host mark
+    const user = "#collaboration_user_" + getReplacedLoginId(userName);
+    $(user).removeClass("host");
+  });
+
+  // show host video area
+  $(hostName).show();
 
+  // set host name as current user if host name is not set
   if (hostName == "") {
-    if (!currentUserLoginIDDiv.hasClass("host") && coview_api.getRoomUsers()) {
-      currentUserLoginIDDiv.addClass("host");
-    }
-  } else {
-    if (!replaceHostIDDiv.hasClass("host")) {
-      replaceHostIDDiv.addClass("host");
+    hostName = getReplacedLoginId(globalUserInfo.loginId);
   }
+
+  // find host named div
+  const hostUserDiv = $("#collaboration_user_" + getReplacedLoginId(hostName));
+
+  // add host mark
+  if (!hostUserDiv.hasClass("host")) {
+    hostUserDiv.addClass("host");
   }
 };
 
@@ -457,9 +472,9 @@ CollaborationUI.refreshJoinedCollaboration = function (loginIDList) {
     NativeBridgeDataSource.getUserListByLoginId(loginIDList);
   const sortedUserList = new Array();
 
-  loginIDList.forEach(function (userId) {
+  loginIDList.forEach(function (userID) {
     joinedUserList.forEach(function (user) {
-      if (userId == user.loginId) {
+      if (userID == user.loginId) {
         sortedUserList.push(user);
       }
     });

public_new/js/views/collaboration/share.js

@@ -2,6 +2,7 @@
 /* Functions                                           */
 /* --------------------------------------------------- */
 let coview_api = new CoviewApi();
+var attendingUsers = new Array();
 var isBoard = false;
 var backgroundFileName;
 

public_new/modal_collabo_change_host.html

@@ -15,7 +15,8 @@
             <span>キャンセル</span>
           </div>
         </button>
-        <button type="button" onclick="CoviewBridge.changeHost({{shopMemberId}});" class="profile_chat_btn border-0 bg_blue text_white">
+        <button type="button" onclick="CoviewBridge.changeHostFromModal();"
+          class="profile_chat_btn border-0 bg_blue text_white">
           <div class="d-flex flex-column">
             <span>引き渡し</span>
           </div>

public_new/modal_collabo_profile.html

@@ -22,7 +22,8 @@
           <button type="button" class="border-0 bg_navy"
             onclick="CollaborationUI.removeFavoriteUserInCollaboration({{shopMemberId}})" id="favoriteButton">
             <div class="d-flex flex-column">
-              <span class="star active shopmember_{{shopMemberId}}" onclick="CHAT_UI.favoriteUserChange('{{shopMemberId}}',this)"></span>
+              <span class="star active shopmember_{{shopMemberId}}"
+                onclick="CHAT_UI.favoriteUserChange('{{shopMemberId}}',this)"></span>
               <span>お気に入り解除</span>
             </div>
           </button>
@@ -31,14 +32,16 @@
           <button type="button" class="border-0 bg_navy"
             onclick="CollaborationUI.insertFavoriteUserInCollaboration({{shopMemberId}})" id="favoriteButton">
             <div class="d-flex flex-column">
-              <span class="star disable shopmember_{{shopMemberId}}" onclick="Namecard.favoriteUserChange('{{shopMemberId}}',this)"></span>
+              <span class="star disable shopmember_{{shopMemberId}}"
+                onclick="Namecard.favoriteUserChange('{{shopMemberId}}',this)"></span>
               <span>お気に入り登録</span>
             </div>
           </button>
           {{/isFavorite}}
           {{#isHost}}
-          <button type="button" class="ch_host_btn border-0 bg_green text_white"
-            onclick="FermiWebSocketBridge.requestHostChange('{{loginId}}');">
+          <button type="button" class="ch_host_btn border-0 bg_green text_white" data-toggle="modal"
+            data-target="#changeHostModal" value="#profileModal2" data-collaborationId='{{collaborationId}}'>
+            <!-- onclick="FermiWebSocketBridge.requestHostChange('{{collaborationId}}');"> -->
             <div class="d-flex flex-column">
               <div class="img_wrap">
                 <img src="icon/icon_change_host.svg" alt="ホスト変更">

public_new/template/template_close_collaboration_message.html

+<!-- TODO: peacekim not using this file-->
 <!-- 通話 -->
 <div class="collabo_area_container chat_message" data-messageid="{{messageId}}">
   <!-- 時刻 -->

public_new/template/template_open_collaboration_message.html

@@ -34,15 +34,10 @@
         <div class="collabo_btn">
           <button class="collaboation_join_button" type="button" name="button"
             class="d-flex flex-row justify-content-center align-items-center"
-            onclick="NativeBridgeDelegate.joinCollaboration('{{collaborationType}}', {{meetingId}})" {{#isEnded}} disabled
-            {{/isEnded}}>
+            onclick="NativeBridgeDelegate.joinCollaboration('{{collaborationType}}', {{meetingId}})" {{#isEnded}}
+            disabled {{/isEnded}}>
             <img src="icon/icon_profile_phone_white.svg" alt="通話">
-            {{#isEnded}}
-            <span class="collaboration_join_message">終了しました</span>
-            {{/isEnded}}
-            {{^isEnded}}
-            <span class="collaboration_join_message">参加する</span>
-            {{/isEnded}}
+            <span class="collaboration_join_message">{{collaborationJoinMessage}}</span>
           </button>
         </div>
       </div>