写真協業実装

public_new/collaboration_picture.html

@@ -38,11 +38,21 @@
   <!-- 拡大縮小機能 -->
   <div id="zoom"></div>
   <!-- コンテンツ -->
-  <main id="collabo_main">
+  <main id="collabo_main" class="none">
     <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">
+    <button id="coviewSharePhotoCamera" class="coview_share_photo_select_bubble_in_button cam">
+    </button>
+    <BR>
+    <button id="coviewSharePhotoGalary" class="coview_share_photo_select_bubble_in_button gal">
+    </button>
+  </div>
+
   <!-- ユーザー追加オーバーレイ -->
   <div id="overlay_add_user_list" class="none">
     <nav>
@@ -99,7 +109,7 @@
       <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>
@@ -113,7 +123,7 @@
         </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>
@@ -139,27 +149,64 @@
   </footer>
   <!-- フッター -->
   <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/common.js"></script>
+  <script src="./js/constant.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://app.coview.co.kr:7443/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_profile2").load("./modal_collabo_profile2.html");
-  $("#modal_collabo_profile").load("./modal_collabo_profile.html");
-  $("#modal_collabo_capture").load("./modal_collabo_capture.html");
-  $("#collabotarion_overlay_user_list").load("./collabotarion_overlay_user_list.html");
-  $("#collaboration_video_overlay_menu").load("./collaboration_video_overlay_menu.html");
-  $("#zoom").load("./zoom.html");
+    $("#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_profile2").load("./modal_collabo_profile2.html");
+    $("#modal_collabo_profile").load("./modal_collabo_profile.html");
+    $("#modal_collabo_capture").load("./modal_collabo_capture.html");
+    $("#collabotarion_overlay_user_list").load("./collabotarion_overlay_user_list.html");
+    $("#collaboration_video_overlay_menu").load("./collaboration_video_overlay_menu.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;
 
+    if (typeof(android) != "undefined") {
+      android.getLoginParameter();
+      android.getGlobalParameter();
+    } else {
+    }
 
+    async function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
+      CHAT_SERVER_URL = chatServerUrl;
+      CMS_SERVER_URL = cmsServerUrl;
+      PLATFORM = platform;
+      IS_MOBILE = isMobile;
+      IS_ONLINE = isOnline;
+      globalUserInfo.coWorkType = collaborationTypeKey.CAMERA;
+      CHAT_SOCKET.connectSocket();
+      socket.emit('join', CHAT.globalLoginParameter, function() {
+      });
+    };
   </script>
 </body>
 

public_new/css/share.css

@@ -21,7 +21,7 @@
 }
 .coview_share_body{
     width: 100%;
-    height: calc(100vh - 58px);
+    height: 100%;
 }
 
 .coview_share_dropdown_bar{
@@ -144,3 +144,7 @@
     border: none;
     border-radius: 5px;
 }
+
+.coview_on_screen_btn_area {
+    display: none; !important;
+}
\ No newline at end of file

public_new/footer_collabo.html

@@ -3,7 +3,7 @@
     <div class="d-flex justify-content-around h-100">
       <div class="footer_item">
         <a href="#">
-          <div class="img_wrap bg_gray">
+          <div class="img_wrap bg_red" id="micBtn">
             <img src="icon/icon_voice_gray.png" alt="音声">
           </div>
         </a>

public_new/js/chat-ui.js

@@ -1177,6 +1177,11 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
       , function(text) {
         systemMessageTemplate = text;
     });
+    var openCollaborationMessageTemplate;
+    $.get({ url: "./template/template_open_collaboration_message.html", async: false }
+      , function(text) {
+        openCollaborationMessageTemplate = text;
+    });
     var topUserListTemplate;
     $.get({ url: "./template/template_chatroom_user_list.html", async: false }
       , function(text) {
@@ -1214,6 +1219,9 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
         if (message.messageType == messageType.SYSTEM) {
             template = systemMessageTemplate;
         }
+        if (message.messageType == messageType.COMMUNICATIONSTART) {
+            template = openCollaborationMessageTemplate;
+        }
         let messageTime = CHAT_UTIL.formatDate(message.insertDate);
         // ユーザの様式を読み込む
 

public_new/js/chat.js

@@ -244,7 +244,6 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam
     if (!languageCode) {
         languageCode = "en"
     }
-    CHAT_UI.htmlElementTextInitialize(languageCode);
 
     // fermi coview share
     globalUserInfo.sid = sid;
@@ -254,6 +253,7 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam
     globalUserInfo.roomName = roomName;
     globalUserInfo.languageCode = languageCode;
 
+    CHAT_UI.htmlElementTextInitialize(languageCode);
     CHAT_UI.dismissLoadingIndicator();
 }
 

public_new/js/collaboration.js

@@ -85,4 +85,30 @@ $(function () {
       $("#add_user_list").html(data);
     });
   });
+
+  $('#penBtn').click(function () {
+    $('#coviewPenCtrBtn').click();
+    if ($('#penBtn').hasClass('bg_red')) {
+        $('#penBtn').removeClass('bg_red');
+        $('#penBtn').addClass('bg_blue');
+    } else {
+        $('#penBtn').addClass('bg_red');
+        $('#penBtn').removeClass('bg_blue');
+    }
+  })
+
+  $('#eraserBtn').click(function () {
+    $('#coviewEraserCtrBtn').click();
+  })
+
+  $('#micBtn').click(function () {
+    $('#coviewMicCtrBtn').click();
+    if ($('#micBtn').hasClass('bg_red')) {
+        $('#micBtn').removeClass('bg_red');
+        $('#micBtn').addClass('bg_blue');
+    } else {
+        $('#micBtn').addClass('bg_red');
+        $('#micBtn').removeClass('bg_blue');
+    }
+  })
 });

public_new/js/constant.js

@@ -14,7 +14,8 @@ const messageType = {
     IMAGE : 1 ,
     VIDEO : 2 ,
     SYSTEM : 3 ,
-    COMMUNICATION : 4
+    COMMUNICATIONSTART : 4,
+    COMMUNICATIONEND : 5
 }
 
 const userAPICmd = {
@@ -36,5 +37,11 @@ const nameCardAreaId = {
     USER : "userNamecard"
 }
 
+const collaborationTypeKey = {
+    CAMERA : "camera",
+    AUDIO : "audio",
+    VIDEO : "video"
+}
+
 const messageSeperator = "<::split>";
 const dataMessageScheme = "::NOT_MESSAGE";

public_new/template/template_open_collaboration_message.html

@@ -7,7 +7,7 @@
   <div class="collabo_area">
     <div class="collabo_desc">
       <div class="collabo_room_name d-flex flex-row">
-        <span>ルーム名ルーム名ルーム名ルーム名</span>
+        <span>{{roomName}}</span>
         <span>の通話</span>
       </div>
       <div class="d-flex flex-row justify-content-between">