ボード協業実装

dd28d628 · Lee Munkyeong · 4f062177 · dd28d628 · dd28d628 · dd28d628
Commit dd28d628 authored May 14, 2021 by Lee Munkyeong
8 changed files
--- a/public_new/chat_room.html
+++ b/public_new/chat_room.html
@@ -125,7 +125,7 @@
          </div>
          <!--リリース後開発予定-->
          <div class="footer_item">
-              <img src="icon/icon_whiteboard_gray.png" alt="ホワイトボードアイコン" onclick="alert(getLocalizedString('notify_not_released'));">
+              <img src="icon/icon_whiteboard_gray.png" alt="ホワイトボードアイコン" onclick="javascript:CHAT_UI.startCollaboration(collaborationType.BOARD);">
              <p>ボード</p>
          </div>
        </div>

--- a/public_new/collaboration_video.html
+++ b/public_new/collaboration_video.html
@@ -100,7 +100,7 @@
        </div>
      </div>
      <div class="d-flex align-items-center h-100">
-        <div class="footer_menu_item none">
+        <div class="footer_menu_item">
 <!--          <a href="#" data-toggle="modal" data-target="#captyaModal">-->
          <a href="#">
            <div class="img_wrap wide bg_blue" id="captureBtn">

--- a/public_new/collaboration_whiteboard.html
+++ b/public_new/collaboration_whiteboard.html
@@ -14,6 +14,7 @@
  <link rel="stylesheet" href="./css/collaboration.css">
  <link rel="stylesheet" href="./css/footer.css">
  <link rel="stylesheet" href="./css/font-awesome.css">
+  <link rel="stylesheet" href="./css/share.css">
 </head>
 <body>
@@ -21,81 +22,55 @@
  <header id="collabo_header">
    <div class="d-flex align-items-center h-100">
      <div class="collabo_nav_l text-left w-100">
-        通話中
-        <span>15:20</span>
      </div>
      <div class="collabo_nav_r">
        <div class="text-right d-flex align-items-center">
          <button type="button" name="button" class="btn user_btn"></button>
-          <button type="button" name="button" class="btn add_user_btn"></button>
+          <button type="button" name="button" class="btn add_user_btn none"></button>
-          <button type="button" name="button" class="btn menu_btn"></button>
+          <!-- <button type="button" name="button" class="btn exit_btn" onclick="Coview_exitCollaboration();"></button> -->
        </div>
      </div>
    </div>
  </header><!-- header -->
  <!-- 拡大縮小機能 -->
-  <!--#include virtual="zoom.html" -->
+  <div id="zoom"></div>
  <!-- コンテンツ -->
-  <main id="collabo_main">
+  <main id="collabo_main" class="none white_board">
-    <div class="whiteboard_wrap">
+    <div class="document_wrap">
+      <div class="coview_share_body coview_share_area" id="coviewShare" style="z-index: 1;">
+      </div>
    </div>
  </main>
-  <!-- ユーザー追加オーバーレイ -->
+  <div class="coview_share_photo_select_bubble none">
-  <div id="overlay_add_user_list" class="none">
+    <button id="coviewSharePhotoCamera" class="coview_share_photo_select_bubble_in_button cam">
-    <nav>
+    </button>
-      <div class="row h-100 align-items-center">
+    <BR>
-        <div class="col-4 pr-0">
+    <button id="coviewSharePhotoGallery" class="coview_share_photo_select_bubble_in_button gal">
-          <div class="nav-item">
+    </button>
-            <a href="#" class="close_btn">閉じる</a>
-          </div>
-        </div>
-        <div class="col-4 p-0">
-          <div class="nav-item p-0">
-            <h1 class="nav-ttl">ユーザー選択</h1>
-          </div>
-        </div>
-        <div class="col-4 pl-0">
-          <div class="nav-item text-right">
-            <a href="#" class="inv_btn">招待</a>
-          </div>
-        </div><!-- .col -->
-      </div><!-- .row -->
-    </nav><!-- nav -->
-    <!-- ユーザー検索 -->
-    <div class="search_form">
-      <form>
-        <input type="search" name="search" placeholder="ユーザー検索" maxlength="30">
-        <span class="src_icon"></span>
-        <a href="#" class="cancel none">キャンセル</a>
-      </form>
-    </div>
-    <!-- ユーザーリスト -->
-    <div id="add_user_list"></div>
  </div>
-  <!-- オーバーレイ　メニュー -->
+  <!-- ユーザー追加オーバーレイ -->
-  <!--#include virtual="collaboration_video_overlay_menu.html" -->
+  <div id="add_user_list"></div>
+  <div id="modal_add_user_confirm" ></div>
+  <!-- オーバーレイ　メニュー -->
+  <div id="collaboration_picture_overlay_menu"></div>
  <!-- オーバーレイ　ユーザーリスト -->
  <div id="overlay_user_list" class="overlay noscroll">
-    <!--#include virtual="collabotarion_overlay_user_list.html" -->
+    <div id="collaboration_overlay_user_list"></div>
  </div>
  <!-- キャプチャ　モーダル -->
-  <!--#include virtual="modal_collabo_capture.html" -->
+  <div id="modal_collabo_capture"></div>
  <!-- プロフィールモーダル -->
-  <!--#include virtual="modal_collabo_profile.html" -->
+  <div id="userProfileModalInCollaboration"></div>
-  <!--#include virtual="modal_collabo_profile2.html" -->
+  <div id="modal_collabo_profile2"></div>
  <!-- ホスト変更モーダル -->
-  <!--#include virtual="modal_collabo_change_host.html" -->
+  <div id="modal_collabo_change_host"></div>
  <!-- ホストリクエストモーダル -->
-  <!--#include virtual="modal_collabo_host_request.html" -->
+  <div id="modal_collabo_host_request"></div>
  <!-- フッター -->
  <footer id="collabo_footer_menu" class="active">
@@ -104,12 +79,12 @@
      <div class="d-flex align-items-center h-100">
        <div class="footer_menu_item">
          <a href="#">
-            <div class="img_wrap bg_blue">
+            <div class="img_wrap bg_red" id="penBtn">
              <img src="icon/icon_collabo_pen_white.png" alt="ペン">
            </div>
          </a>
        </div>
-        <div class="footer_menu_item">
+        <div class="footer_menu_item none">
          <a href="#">
            <div class="img_wrap bg_blue">
              <img src="icon/icon_collabo_place_white.png" alt="場所">
@@ -118,30 +93,107 @@
        </div>
        <div class="footer_menu_item">
          <a href="#">
-            <div class="img_wrap bg_blue">
+            <div class="img_wrap bg_blue" id="eraserBtn">
              <img src="icon/icon_collabo_delete_white.png" alt="削除">
            </div>
          </a>
        </div>
      </div>
-      <div class="d-flex align-items-center h-100">
+      <div class="d-flex align-items-center h-100 none">
        <div class="footer_menu_item">
+          <a href="#">
+            <div class="img_wrap bg_gray">
+              <img src="icon/icon_collabo_rewind_white.png" alt="戻る">
+            </div>
+          </a>
        </div>
        <div class="footer_menu_item">
+          <a href="#">
+            <div class="img_wrap bg_gray">
+              <img src="icon/icon_collabo_forward_white.png" alt="進む">
+            </div>
+          </a>
        </div>
      </div>
    </div>
  </footer>
  <!-- フッター -->
-  <!--#include virtual="footer_collabo.html" -->
+  <div id="footer_collabo"></div>
  <script src="./js/libs/jquery-3.3.1.min.js"></script>
+  <script src="./js/libs/socket.io.js"></script>
  <script src="./js/libs/moment.js"></script>
+  <script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
+  <script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
+  <script src="./js/libs/mustache.min.js"></script>
  <script src="./js/libs/bootstrap.min.js"></script>
  <script src="./js/libs/jquery.mark.min.js"></script>
-  <script src="./js/chat.js"></script>
+  <script src="./js/constant.js"></script>
-  <script src="./js/common.js"></script>
  <script src="./js/collaboration.js"></script>
+  <script src="./js/common.js"></script>
+  <script src="./js/chat.js"></script>
+  <script src="./js/chat-ui.js"></script>
+  <script src="./js/chat-util.js"></script>
+  <script src="./js/chat-db.js"></script>
+  <script src="./js/language.js"></script>
+  <script src="./js/language_ko.js" charset="UTF-8"></script>
+  <script src="./js/language_ja.js" charset="UTF-8"></script>
+  <script src="./js/language_en.js" charset="UTF-8"></script>
+  <script src="./js/chat-websocket.js"></script>
+  <script src="https://livetaskyell.abookcloud.com/coview_api.js"></script>
+  <script src="./js/share.js"></script>
+  <script>
+    $("#footer_collabo").load("./footer_collabo.html");
+    $("#modal_collabo_host_request").load("./modal_collabo_host_request.html");
+    $("#modal_collabo_change_host").load("./modal_collabo_change_host.html");
+    $("#modal_collabo_capture").load("./modal_collabo_capture.html");
+    $("#modal_collabo_profile2").load("./modal_collabo_profile2.html");
+    $("#collaboration_picture_overlay_menu").load("./collaboration_picture_overlay_menu.html");
+    $("#add_user_list").load("./modal_add_user_list.html");
+    $("#zoom").load("./zoom.html");
+    let CHAT_SERVER_URL = '';
+    let CMS_SERVER_URL = '';
+    let ASSET_PATH = './';
+    let PLATFORM = '';
+    let IS_MOBILE = true;
+    let IS_ONLINE = false;
+    let collaborationJoinFlg = 0;
+    let roomType;
+    if (typeof(android) != "undefined") {
+      android.getLoginParameter();
+      android.getGlobalParameter();
+      roomType = android.getRoomType();
+    } else {
+      webkit.messageHandlers.loginInfoRequestMessageHandlerId.postMessage({});
+      webkit.messageHandlers.getGlobalParameter.postMessage({});
+      roomType = CHAT_DB.getRoomType();
+    }
+    if (roomType == chatRoomType.DM) {
+        $('.add_user_btn').removeClass('none');
+    }
+    async function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
+      CHAT_SERVER_URL = chatServerUrl;
+      CMS_SERVER_URL = cmsServerUrl;
+      PLATFORM = platform;
+      IS_MOBILE = isMobile;
+      IS_ONLINE = isOnline;
+      if (CHAT_UTIL.isIOS()) {
+        collaborationJoinFlg = CHAT_DB.getCollaborationJoinFlg();
+      } else if (CHAT_UTIL.isAndroid()) {
+        collaborationJoinFlg = android.getCollaborationJoinFlg();
+      }
+      globalUserInfo.coWorkType = collaborationTypeKey.BOARD;
+      if (collaborationJoinFlg != '2') {
+        CHAT_SOCKET.connectSocket();
+        socket.emit('join', CHAT.globalLoginParameter, function() {
+        });
+      }
+    };
+  </script>
 </body>
 </html>
\ No newline at end of file
--- a/public_new/css/share.css
+++ b/public_new/css/share.css
@@ -2,6 +2,9 @@
    padding-top: 9px;
 }
+.white_board #canvasRemote {
+    background-color: white !important;
+}
 .coview_share_area{
    display: none;

--- a/public_new/footer_collabo.html
+++ b/public_new/footer_collabo.html
@@ -8,7 +8,7 @@
          </div>
        </a>
      </div>
-      <div class="footer_item none">
+      <div class="footer_item">
        <a href="#">
          <div class="img_wrap bg_gray" id="recordBtn">
            <img src="icon/icon_record.png" alt="録音">

--- a/public_new/img/board_background.png
+++ b/public_new/img/board_background.png
--- a/public_new/js/constant.js
+++ b/public_new/js/constant.js
@@ -41,14 +41,16 @@ const collaborationTypeKey = {
    AUDIO : "audio",
    CAMERA : "camera",
    VIDEO : "video" ,
-    DOCUMENT : "document"
+    DOCUMENT : "document",
+    BOARD : "board"
 }
 const collaborationType = {
    AUDIO : 0,
    CAMERA : 2,
    VIDEO : 3,
-    DOCUMENT : 4
+    DOCUMENT : 4,
+    BOARD : 5
 }
 const makeRoomFlg = {

--- a/public_new/js/share.js
+++ b/public_new/js/share.js
@@ -3,8 +3,9 @@
 /* --------------------------------------------------- */
 let coview_api = new CoviewApi();
 var isDocument = false;
+var isBoard = false;
 let isLeaved = false;
+var backgroundFileName;
 $(function () {
  var coviewApiActive = coview_api.Init({
    testSTRParam: "param1",
@@ -111,12 +112,6 @@ $(function () {
    $(".coview_share_title_name").text("LIVE");
  });
-  //     $("#coviewShareDoc").on("click", function(){
-  //         console.log("ON click coviewShareDoc");
-  //         alert("INTO a document share mode (only audio)");
-  //         globalUserInfo.coWorkType = "audio";
-  //     });
  coview_api.addEventListener("ready", function () {
    console.log("=============> READY : ready for coview api");
    Coview_addLoginId(globalUserInfo.loginId);
@@ -168,6 +163,10 @@ $(function () {
          isDocument = true;
          globalUserInfo.coWorkType = collaborationTypeKey.AUDIO;
        }
+        if (globalUserInfo.coWorkType == collaborationTypeKey.BOARD) {
+          isBoard = true;
+          globalUserInfo.coWorkType = collaborationTypeKey.CAMERA;
+        }
        if (collaborationJoinFlg == "1") {
          coview_api.JoinRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
          if (isDocument) {
@@ -193,6 +192,7 @@ $(function () {
          coview_api.JoinRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
        }
        Coview_moveToVideoShareArea();
        break;
      case "CreateRoomResponse":
        if (json.resultCode == 200) {
@@ -206,6 +206,13 @@ $(function () {
              CHAT_UTIL.getCollaborationType(collaborationTypeKey.DOCUMENT) +
              messageSeperator +
              meetingId;
+          } else if (isBoard) {
+            coviewInviteMessage =
+              "" +
+              messageSeperator +
+              messageType.COMMUNICATIONSTART +
+              messageSeperator +
+              collaborationType.BOARD;
          } else {
            coviewInviteMessage =
              "" +
@@ -221,6 +228,11 @@ $(function () {
            },
            0
          );
+          if (isBoard) {
+            $('#open_file_upload').on("click",function(e){
+                e.preventDefault();
+            });
+          }
        } else {
        }
        break;
@@ -263,6 +275,16 @@ $(function () {
        // wc_api.dispatchEvent (new Event ("message"), {"HostRequest":"userID"});
        console.log("consoleLog", json);
        break;
+      case "fileChange":
+        LoadMobileShareFile(json.fileName);
+        backgroundFileName = json.fileName;
+        console.log("fileChange", json);
+        break;
+      case "ReceiveMediaResponse":
+        if (isBoard && g_isMainMan) {
+          wc_api.dispatchEvent (new Event ("message"), {"api":"fileChange","fileName":backgroundFileName});
+        }
+        break;
      default:
        console.log("Unrecognized api", json);
        break;