ナビゲーションUI(メンバー表示、時間表示)作成

public/css/chat.css

@@ -798,6 +798,16 @@ a.article:hover {
   margin: 0;
 }
 
+p#coview_time {
+  font-family: Noto Sans JP;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 16px;
+  line-height: 14px;
+  padding-left: 10px;
+  color: #FFFFFF;
+}
+
 .coview_share_title_right_area {
   display: inline-block!important;
   height: 58px;
@@ -973,8 +983,9 @@ a.article:hover {
 .coview_member_area, .coview_add_member_area, .coview_type_area {
   position: absolute;
   width: 100%;
-  height: calc(100vh - 58px);
-  bottom: 0px;
+  height: calc(100vh - 178px);
+  bottom: 120px;
+  overflow-y: scroll;
   text-align: center;
   z-index: 4;
   background: #525252;
@@ -1012,3 +1023,42 @@ a.article:hover {
   -webkit-appearance: none;
   border: none;
 }
+
+.member_profile_btn, .member_profile_btn_host {
+  width: 50vw;
+  height: 50vw;
+  padding: 0;
+  background: #525252;
+  float: left;
+  -webkit-appearance: none;
+  border: none;
+  position: relative;
+}
+
+.member_profile_btn_host::before {
+  content: "";
+  top: 0;
+  right: 0;
+  border-bottom: 5em solid transparent;
+  border-right: 5em solid #FF4747;
+  position: absolute;
+  z-index: 100;
+}
+
+.member_profile_btn_host::after {
+  display: block;
+  content: "ホスト";
+  font-family: Noto Sans JP;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 20px;
+  top: 15px;
+  right: 5px;
+  transform: rotate(45deg);
+  color: #FFFFFF;
+  position: absolute;
+  z-index: 101;
+}
+
+

public/index.html

@@ -30,6 +30,9 @@
   <div class="coview_share_area">
     <div class="coview_share_title">
         <div class="coview_share_title_left_area col-3 coview_share_title_name" href="#">LIVE</div>
+        <div class="coview_share_title_left_area">
+            <p id="coview_time">00:00</p>
+        </div>
         <div class="coview_share_title_right_area">
             <button class="btn coview_share_title_btn" type="button" id="coviewChangeTypeButton">
                 <img class="" src="./icon/ic_collaboration_type.png" alt="">
@@ -58,8 +61,7 @@
     <div class="coview_add_member_area">
         メンバー招待
     </div>
-    <div class="coview_member_area">
-        メンバー表示
+    <div class="coview_member_area" id="coview_member_area">
     </div>
     <div class="coview_on_screen_btn_area">
         <button class="coview_bottom_btn"  id="coviewMicBtn">
@@ -625,6 +627,11 @@
     </div>
   </div>
 </script>
+<script id="coview-member-template" type="text/template">
+  <button class="{{className}}">
+    <img class="" src="{{profileImage}}" alt="">
+  </button>
+</script>
 <script src="./socket.io/dist/socket.io.js"></script>
 <script src="./js/libs/socket.io.js"></script>
 <script src="./js/libs/jquery-3.3.1.min.js"></script>

public/js/share.js

@@ -93,7 +93,6 @@ $(function() {
         $("#coviewMemberButton").hide();
         $("#coviewShareCloseButton").show();
         // メンバー表示
-        coview_api.GetMemberList();
         $(".coview_member_area").show();
     });
 
@@ -322,6 +321,10 @@ function Coview_moveToVideoShareArea() {
     $("#coviewShareCloseButton").hide();
     // 設定
     Coview_setCoviewTypeBtn();
+    Coview_setCoviewMember();
+    // 時間計測開始
+    startTime = new Date().getTime();
+    timerId = setTimeout(Coview_setTime, 1000);
 }
 
 // 協業タイプ選択画面の設定
@@ -353,3 +356,52 @@ function Coview_setCoviewTypeBtn() {
     }
 }
 
+// 協業参加メンバー画面の設定
+function Coview_setCoviewMember() {
+    // メンバー取得
+    var memberList = coview_api.GetMemberList();
+
+    // 様式を読み込む
+    const memberTemplate = $('#coview-member-template').html();
+
+    memberList.forEach(function(member) {
+        // ホストの場合は右上に帯を追加
+        // TODO ホスト判定＆プロフィール画像取得
+        var className = "member_profile_btn_host";//(member == 4 ? "member_profile_btn_host":"member_profile_btn");
+        let html = Mustache.render(memberTemplate, {
+            className: className,
+            profileImage: ""
+		});
+
+        let obj = $(jQuery.parseHTML(html)).on('click', function() {
+            // TODO ネームカード表示
+        });
+
+        $('#coview_member_area').append(obj);
+    });
+}
+
+// 経過時間の計算・表示
+var timerId;
+var startTime;
+function Coview_setTime() {
+    // 経過時間計算
+    nowTime = new Date().getTime();
+    diff = new Date(nowTime - startTime);
+
+    // 時間表示
+    var sec = diff.getSeconds();
+    var min = diff.getMinutes();
+    var strSec = "" + sec;
+    if ( strSec.length < 2){
+        strSec = "0" + strSec;
+    }
+    strMin = "" + min;
+    if ( strMin.length < 2){
+        strMin = "0" + strMin;
+    }
+    var strTime = strMin + ":" + strSec;
+    document.getElementById("coview_time").innerHTML = strTime;
+    timerId = setTimeout(Coview_setTime, 1000);
+}
+