音声共有、文書共有レイアウト修正

public_new/collaboration.html

@@ -39,15 +39,13 @@
       <div class="collabo_nav_r">
         <div class="text-right d-flex align-items-center">
           <button type="button" name="button"
-            class="btn user_btn collaboration_contents picture_contents video_contents board_contents"></button>
+            class="btn user_btn"></button>
           <button type="button" name="button" class="btn add_user_btn none"></button>
           <div class="menu-icon menu_btn host_contents" onclick="this.classList.toggle('hover');">
             <div class="menu-bar menu-bar1"></div>
             <div class="menu-bar menu-bar2"></div>
             <div class="menu-bar menu-bar3"></div>
           </div>
-          <button type="button" name="button" class="btn start_pip_btn collaboration_contents document_contents"
-            onclick="startPipMode();"></button>
           <!-- <button type="button" name="button" class="btn exit_btn" onclick="Coview_exitCollaboration();"></button> -->
         </div>
       </div>
@@ -59,6 +57,24 @@
   <!-- コンテンツ -->
   <main id="collabo_main" class="none">
     <div class="document_wrap">
+       <!-- 音声共有 -->
+       <div class="talking_area icon_talking_wrap d-flex flex-column justify-content-center align-items-center h-100 collaboration_contents voice_contents none">
+        <div class="talking_img_wrap">
+          <img src="icon/icon_talking_white.png" alt="通話中">
+        </div>
+        <span class="text-white mt-4">通話中</span>
+      </div>
+      <!-- 文書共有 -->
+      
+        <div class="start_pip_area d-flex flex-column justify-content-center align-items-center h-100 collaboration_contents document_contents none">
+          <div class="start_pip_img_wrap">
+            <a href="javascript:startPipMode();">
+              <img src="icon/icon_start_pip.png" alt="文書共有">
+            </a>
+          </div>
+          <span class="text-white mt-2">共有する</span>
+        </div>
+
       <div class="coview_share_body coview_share_area" id="coviewShare" style="z-index: 1;">
       </div>
     </div>
@@ -97,7 +113,9 @@
   <div id="footer_collabo"></div>
   <div id="loadingArea"></div>
   <div class="pip_indicator none" onclick="finishPipMode();">
-    <div style="vertical-align: middle;display: table-cell;">共有中
+    <div style="vertical-align: middle;display: table-cell;">
+      <img src="icon/icon_end_pip.png" alt="文書共有" style="width: 30px;height: 30px;">
+      <span style="font-size: 20px;vertical-align: middle;">戻る</span>
     </div>
   </div>
   <div class="before_loading_indicator">

public_new/css/collaboration.css

@@ -138,6 +138,48 @@
   height: 100%;
 }
 
+#collabo_main .talking_area img {
+  width: 60px;
+  height: 60px;
+}
+#collabo_main .talking_area,#collabo_main .start_pip_area {
+  position: relative;
+  z-index: 2;
+}
+.talking_img_wrap {
+position: relative;
+display: flex;
+align-items: center;
+justify-content: center;
+width: 90px;
+height: 90px;
+border-radius: 50%;
+border: 1px solid #fff;
+box-shadow: 0 0 20px #ffffff;
+cursor: pointer;
+}
+.talking_img_wrap::before, .talking_img_wrap::after {
+content: "";
+display: block;
+position: absolute;
+top: 0;
+bottom: 0;
+left: 0;
+right: 0;
+margin: auto;
+width: 100%;
+height: 100%;
+border: 1px solid #fff;
+border-radius: 50%;
+box-sizing: border-box;
+pointer-events: none;
+animation: pulsate 2s linear infinite;
+}
+
+
+
+
+
 /**************************** overlay *************************/
 .btn {
   background-color: transparent;
@@ -771,7 +813,7 @@ input[name="tab_item"] {
   top: 0px;
   width: 100%;
   height: 100vh;
-  background-color: steelblue;
+  background-color: #20304c;
   color: azure;
   position: fixed;
   z-index: 1000;

public_new/js/share.js

@@ -599,6 +599,12 @@ function Coview_moveToVideoShareArea() {
   $("#collabo_main").removeClass("none");
 }
 
+function Coview_moveToAudioShareArea() {
+  $(".coview_share_area").addClass("none");
+  $("#collabo_main").removeClass("none");
+  $(".talking_area").removeClass("none");
+}
+
 function changeCollaboration(changeCollaborationType) {
   recordStop(function () {
     var newMeetingId = 0;
@@ -717,17 +723,6 @@ async function initCollaborationUI(changeCollaborationType) {
     case COLLABORATION_TYPE.AUDIO:
       $(".collaboration_contents").addClass("none");
       $(".voice_contents").removeClass("none");
-      var w = $(".user_btn").width();
-      $(".user_btn").toggleClass("hide");
-      $("#overlay_user_list.overlay")
-        .toggleClass("slidein")
-        .css({ transform: "translateX(" & -w & ")" });
-      $("#collabo_main").toggleClass("noscroll");
-      if ($("#overlay_user_list.overlay").hasClass("noscroll")) {
-        $("#overlay_user_list.overlay").removeClass("noscroll");
-      } else {
-        $("#overlay_user_list.overlay").addClass("noscroll");
-      }
       break;
 
     case COLLABORATION_TYPE.CAMERA:
@@ -743,17 +738,6 @@ async function initCollaborationUI(changeCollaborationType) {
     case COLLABORATION_TYPE.DOCUMENT:
       $(".collaboration_contents").addClass("none");
       $(".document_contents").removeClass("none");
-      var w = $(".user_btn").width();
-      $(".user_btn").toggleClass("hide");
-      $("#overlay_user_list.overlay")
-        .toggleClass("slidein")
-        .css({ transform: "translateX(" & -w & ")" });
-      $("#collabo_main").toggleClass("noscroll");
-      if ($("#overlay_user_list.overlay").hasClass("noscroll")) {
-        $("#overlay_user_list.overlay").removeClass("noscroll");
-      } else {
-        $("#overlay_user_list.overlay").addClass("noscroll");
-      }
       break;
 
     case COLLABORATION_TYPE.BOARD:
@@ -872,7 +856,7 @@ function Coview_connect_audio_collaboration() {
   coview_api.deleteRoom(globalUserInfo.roomId);
   coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
   Coview_moveToVideoShareArea();
-
+  Coview_moveToAudioShareArea();
   $(".coview_share_title_name").text("音声通話");
 }
 

public_new/modal_chat_menu.html

@@ -8,7 +8,7 @@
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
-      <div class="modal-body">
+      <div class="modal-body pt-0">
         <ul>
           <li><a id="room_name_change_button" href="chat_change_room_name.html"><img src="icon/icon_change_room_name.png" alt="ルーム名変更">ルーム名変更</a>
           </li>