アーカイブ詳細UI作成

public/css/chat.css

@@ -782,6 +782,11 @@ a.article:hover {
   width: 20%;
 }
 
+.archive_img img {
+  height: auto;
+  max-height: 90px;
+}
+
 .archive_ib {
   float: left;
   padding: 15px;
@@ -826,3 +831,11 @@ a.article:hover {
   /* 今回のリリースに文書とその他は含めないため非表示 */
   display: none;
 }
+
+.archive_player {
+  width: 100%;
+}
+
+.fileName, .insertDate, .chatRoomName, .saveUser, .joinUser {
+  padding: 15px;
+}

public/index.html

@@ -263,6 +263,9 @@
       </div>
     </div>
 
+    <div class="archive_detail" id="archive_detail">
+    </div>
+
     <div class="tab-pane fade" id="pills-group" role="tabpanel" aria-labelledby="pills-group-tab">
       <div class="inbox_people">
         <div class="heading_srch">
@@ -532,7 +535,7 @@
   </div>
 </script>
 <script id="archive-template" type="text/template">
-  <div class="archive_list col-12" archive-name="{{fileName}}" archive-id="{{id}}">
+  <div class="archive_list col-12">
     <div class="archive_data">
       <div class="archive_img">
         <img src={{thumbnailImage}} alt="">
@@ -540,10 +543,10 @@
       <div class="archive_ib">
         <div class="row">
           <div class="archive_date_font col-10">
-            <span class="archive_date">{{time}}</span>
+            <span class="archive_date">{{insertDate}}</span>
           </div>
           <div class="archive_type">
-            <span class="text-truncate col-2 {{type}}">{{archiveType}}</span>
+            <span class="text-truncate col-2 {{archiveTypeCSS}}">{{archiveType}}</span>
           </div>
         </div>
         <p class="text-truncate float-left">{{fileName}}</p>
@@ -560,6 +563,30 @@
     </div>
   </div>
 </script>
+<script id="archive-detail-template" type="text/template">
+  <div id="archive_player">
+  </div>
+  <div class="fileName">
+    <h5>ファイル名</h5>
+    <span class="text-truncate">{{fileName}}</span>
+  </div>
+  <div class="insertDate">
+    <h5>保存日</h5>
+    <span class="text-truncate">{{insertDate}}</span>
+  </div>
+  <div class="chatRoomName">
+    <h5>チャットルーム名</h5>
+    <span class="text-truncate">{{chatRoomName}}</span>
+  </div>
+  <div class="saveUser">
+    <h5>保存ユーザー</h5>
+
+  </div>
+  <div class="joinUser">
+    <h5>参加ユーザー</h5>
+
+  </div>
+</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/chat-ui.js

@@ -1229,6 +1229,7 @@ CHAT_UI.refreshArchiveScreen = function() {
 	CHAT_UI.showLoadingIndicator();
 
 	//画面タイトル設定
+	// TODO タイトル文字定義
 	let archiveListTitle = getLocalizedString("archiveListTitle");
 	$('.titleRoomName').text(archiveListTitle);
 
@@ -1245,44 +1246,61 @@ CHAT_UI.refreshArchiveScreen = function() {
 
 	archiveList.forEach(function(archive) {
 		var archiveType = '';
-		var type = '';
+		var css = '';
 		switch(archive.archiveType) {
 			case 0:
 				archiveType = '画像';
-				type = 'type_image';
+				css = 'type_image';
 				break;
 			case 1:
 				archiveType = '動画';
-				type = 'type_movie';
+				css = 'type_movie';
 				break;
 			case 2:
 				archiveType = '音声';
-				type = 'type_sound';
+				css = 'type_sound';
 				break;
 			case 3:
 				// 今回のリリースに文書とその他は含めないため非表示
 				archiveType = '文書';
-				type = 'type_document';
+				css = 'type_document';
 				break;
 			default:
 				// 今回のリリースに文書とその他は含めないため非表示
 				archiveType = 'その他';
-				type = 'type_other';
+				css = 'type_other';
 		}
 
-		// TODO サムネイル画像取得処理
-		archive.thumbnailImagePath = CHAT.getProfileImgUrl(archive.archiveUrl)
 		let html = Mustache.render(archiveTemplate, {
 			id: archive.archiveId,
 			fileName: archive.archiveName,
-			thumbnailImage: archive.thumbnailImagePath,
-			time: archive.insertDate,
+			thumbnailImage: archive.archiveUrl,
+			insertDate: archive.insertDate,
 			archiveType: archiveType,
-			type: type
+			archiveTypeCSS: css
 		});
 
 		let obj = $(jQuery.parseHTML(html)).on('click', function(){
-			//TODO アーカイブ詳細画面へ遷移する処理
+			// アーカイブ詳細画面へ遷移
+			$('#homeButton').hide();
+			$('.titleRoomName').show();
+			$('#archive_list').hide();
+			$('#archive_detail').show();
+			$('#bottomNav').hide();
+
+			$("#backButton").show();
+			$('#backButton').off().on('click', function() {
+				// アーカイブ一覧に戻る
+				$('#homeButton').show();
+				$("#backButton").hide();
+				$('.titleRoomName').show();
+				$('#archive_detail').hide();
+				$('#archive_list').show();
+				$('#bottomNav').show();
+			});
+
+			// データの受け渡し
+			CHAT_UI.refreshArchiveDetailScreen(archive);
 		});
 
 		$('#archive_list').append(obj);
@@ -1292,3 +1310,54 @@ CHAT_UI.refreshArchiveScreen = function() {
 	// loadingIndicatorを非表示
  	CHAT_UI.dismissLoadingIndicator();
 }
+
+// アーカイブ詳細画面の初期設定
+CHAT_UI.refreshArchiveDetailScreen = function(archive) {
+	// loadingIndicatorを表示
+	CHAT_UI.showLoadingIndicator();
+
+	//画面タイトル設定
+	// TODO タイトル文字定義
+	let archiveDetailTitle = getLocalizedString("archiveDetailTitle");
+	$('.titleRoomName').text(archiveDetailTitle);
+
+	// 初期化
+	$('#archive_detail').html('');
+
+   	// アーカイブ詳細の様式を読み込む
+   	const archiveDetailTemplate = $('#archive-detail-template').html();
+
+   	// アーカイブ情報を表示
+   	let html = Mustache.render(archiveDetailTemplate, {
+		fileName: archive.archiveName,
+ 		insertDate: archive.insertDate,
+   		chatRoomName: "チャットルーム名"
+  	});
+
+	let obj = $(jQuery.parseHTML(html)).on('click', function(){
+	});
+
+	$('#archive_detail').append(obj);
+
+	// プレイヤーの切り替え
+	switch(archive.archiveType) {
+		case 0: // 画像
+			$('#archive_player').prepend('<img class="archive_player" src=' + archive.archiveUrl + '" </img>');
+			break;
+		case 1: // 動画
+			$('#archive_player').prepend('<video class="archive_player" src=' + archive.archiveUrl + ' controls autoplay muted playsinline></video>');
+			break;
+		case 2: // 音声
+			$('#archive_player').prepend('<audio class="archive_player" src=' + archive.archiveUrl + ' controls></audio>');
+			$('#archive_player').prepend('<img class="archive_player" src=' + "https://via.placeholder.com/1280x720" + ' </img>');
+			break;
+		case 3: // 文書
+			// リリースに文書とその他は含めないため今回は非表示
+			break;
+		default:
+			// リリースに文書とその他は含めないため今回は非表示
+	}
+
+	// loadingIndicatorを非表示
+	CHAT_UI.dismissLoadingIndicator();
+}