アーカイブ詳細機能実装

public/css/chat.css

@@ -832,7 +832,18 @@ a.article:hover {
   display: none;
 }
 
+.player {
+  background-color: black;
+  text-align : center;
+}
+
 .archive_player {
+  width: auto;
+  max-width: 100%;
+  max-height: 50vh;
+}
+
+.archive_audio_player {
   width: 100%;
 }
 
@@ -840,8 +851,7 @@ a.article:hover {
   overflow-y: auto;
   white-space: nowrap;
   -webkit-overflow-scrolling: touch;
-  /* TODO */
-  height: calc(100vh - 600px);
+  height: calc(50vh - 50px);
 }
 
 .fileName, .insertDate, .chatRoomName, .saveUser, .joinUser {
@@ -870,4 +880,5 @@ a.article:hover {
 
 .archive_user p {
   text-align: center;
+  overflow: hidden;
 }

public/index.html

@@ -555,28 +555,30 @@
   </div>
 </script>
 <script id="archive-detail-template" type="text/template">
-  <div id="archive_player">
+  <div id="archive_player" class="player">
   </div>
   <ul class="archive_info">
     <li class="fileName">
-      <h5>ファイル名</h5>
+      <h5>{{fileNameTitle}}</h5>
       <p class="text-truncate">{{fileName}}</p>
     </li>
     <li class="insertDate">
-      <h5>保存日</h5>
+      <h5>{{saveDateTitle}}</h5>
       <p class="text-truncate">{{insertDate}}</p>
     </li>
     <li class="chatRoomName">
-      <h5>チャットルーム名</h5>
-      <p class="text-truncate">{{chatRoomName}}</p>
+      <h5>{{roomNameTitle}}</h5>
+      <p class="text-truncate">{{chatRoomName}}
+      <input type="button" value="＞" id="joinChatRoom">
+      </p>
     </li>
     <li class="saveUser">
-      <h5>保存ユーザー</h5>
+      <h5>{{saveUserTitle}}</h5>
       <ul class="save_user_list" id="save_user">
       </ul>
     </li>
     <li class="joinUser">
-      <h5>参加ユーザー</h5>
+      <h5>{{attendUserTitle}}</h5>
       <ul class="join_user_list" id="join_user">
       </ul>
     </li>

public/js/chat-db.js

@@ -58,16 +58,46 @@ CHAT_DB.getMyGroupUsers = function() {
     }
 };
 
-CHAT_DB.getArchiveList = function(archiveId) {
+CHAT_DB.getArchiveList = function() {
 	if (CHAT_UTIL.isIOS()) {
 		// String形式をJsonに変更してReturn
-		webkit.messageHandlers.getArchiveList.postMessage(archiveId);
+		webkit.messageHandlers.getArchiveList.postMessage();
 		return JSON.parse(iosArchiveList);
-    } else if (CHAT_UTIL.isAndroid()) {
-        //TODO Android処理追加必要
-    }
+	} else if (CHAT_UTIL.isAndroid()) {
+ 		//TODO Android処理追加必要
+	}
 };
 var iosArchiveList;
-getIosArchiveList = function(archiveList) {
+CHAT_DB.getIosArchiveList = function(archiveList) {
 	iosArchiveList = archiveList;
 };
+
+CHAT_DB.updateArchiveList = function() {
+	if (CHAT_UTIL.isIOS()) {
+		webkit.messageHandlers.updateArchiveList.postMessage();
+	} else if (CHAT_UTIL.isAndroid()) {
+		//TODO Android処理追加必要
+	}
+};
+
+CHAT_DB.getArchiveDetail = function(archiveId) {
+	if (CHAT_UTIL.isIOS()) {
+		// String形式をJsonに変更してReturn
+		webkit.messageHandlers.getArchiveList.postMessage({archiveId});
+		return JSON.parse(iosArchiveDetail);
+	} else if (CHAT_UTIL.isAndroid()) {
+ 		//TODO Android処理追加必要
+	}
+};
+var iosArchiveDetail;
+CHAT_DB.getIosArchiveDetail = function(archive) {
+	iosArchiveDetail = archive;
+};
+
+CHAT_DB.updateArchiveDetail = function(archiveId) {
+	if (CHAT_UTIL.isIOS()) {
+		webkit.messageHandlers.updateArchiveDetail.postMessage({archiveId});
+	} else if (CHAT_UTIL.isAndroid()) {
+		//TODO Android処理追加必要
+	}
+};

public/js/chat-ui.js

@@ -1239,9 +1239,12 @@ CHAT_UI.refreshArchiveScreen = function() {
 	// アーカイブの様式を読み込む
 	const archiveTemplate = $('#archive-template').html();
 
-	// アーカイブ情報取得＆表示
-	// TODO archiveId取得処理
-	var archiveList = CHAT_DB.getArchiveList(archiveId);
+	if (IS_ONLINE == 'true') {
+		CHAT_DB.updateArchiveList();
+	}
+
+	// アーカイブ一覧取得＆表示
+	var archiveList = CHAT_DB.getArchiveList();
 
 	archiveList.forEach(function(archive) {
 		var archiveType = '';
@@ -1274,7 +1277,7 @@ CHAT_UI.refreshArchiveScreen = function() {
 			id: archive.archiveId,
 			fileName: archive.archiveName,
 			thumbnailImage: archive.archiveUrl,
-			insertDate: archive.insertDate,
+			insertDate: archive.archiveDate,
 			archiveType: archiveType,
 			archiveTypeCSS: css
 		});
@@ -1286,7 +1289,6 @@ CHAT_UI.refreshArchiveScreen = function() {
 			$('#archive_list').hide();
 			$('#archive_detail').show();
 			$('#bottomNav').hide();
-
 			$("#backButton").show();
 			$('#backButton').off().on('click', function() {
 				// アーカイブ一覧に戻る
@@ -1297,9 +1299,8 @@ CHAT_UI.refreshArchiveScreen = function() {
 				$('#archive_list').show();
 				$('#bottomNav').show();
 			});
-
 			// データの受け渡し
-			CHAT_UI.refreshArchiveDetailScreen(archive);
+			CHAT_UI.refreshArchiveDetailScreen(archive.archiveId);
 		});
 
 		$('#archive_list').append(obj);
@@ -1310,8 +1311,8 @@ CHAT_UI.refreshArchiveScreen = function() {
  	CHAT_UI.dismissLoadingIndicator();
 }
 
-// アーカイブ詳細画面の初期設定
-CHAT_UI.refreshArchiveDetailScreen = function(archive) {
+// アーカイブ詳細画面の設定
+CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
 	// loadingIndicatorを表示
 	CHAT_UI.showLoadingIndicator();
 
@@ -1325,16 +1326,33 @@ CHAT_UI.refreshArchiveDetailScreen = function(archive) {
    	// アーカイブ詳細の様式を読み込む
    	const archiveDetailTemplate = $('#archive-detail-template').html();
 
+	if (IS_ONLINE == 'true') {
+		CHAT_DB.updateArchiveDetail(archiveId);
+	}
+	// アーカイブ詳細取得＆表示
+	var archive = CHAT_DB.getArchiveDetail(archiveId);
+
+	// TODO チャットIDからルーム名を取得
+
+	// タイトル文字取得
+ 	let fileNameTitle = getLocalizedString("fileNameTitle");
+  	let saveDateTitle = getLocalizedString("saveDateTitle");
+   	let roomNameTitle = getLocalizedString("roomNameTitle");
+   	let saveUserTitle = getLocalizedString("saveUserTitle");
+   	let attendUserTitle = getLocalizedString("attendUserTitle");
+
    	// アーカイブ情報を表示
    	let html = Mustache.render(archiveDetailTemplate, {
+		fileNameTitle: fileNameTitle,
 		fileName: archive.archiveName,
- 		insertDate: archive.insertDate,
-   		chatRoomName: "チャットルーム名"
+		saveDateTitle: saveDateTitle,
+ 		insertDate: archive.archiveDate,
+		roomNameTitle: roomNameTitle,
+   		chatRoomName: "チャットルーム名",
+		saveUserTitle: saveUserTitle,
+ 		attendUserTitle: attendUserTitle
   	});
-
-	let obj = $(jQuery.parseHTML(html)).on('click', function(){
-	});
-
+	let obj = $(jQuery.parseHTML(html));
 	$('#archive_detail').append(obj);
 
 	// プレイヤーの切り替え
@@ -1346,7 +1364,7 @@ CHAT_UI.refreshArchiveDetailScreen = function(archive) {
 			$('#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('<audio class="archive_audio_player" src=' + archive.archiveUrl + ' controls></audio>');
 			$('#archive_player').prepend('<img class="archive_player" src=' + "https://via.placeholder.com/1280x720" + ' </img>');
 			break;
 		case 3: // 文書
@@ -1356,6 +1374,19 @@ CHAT_UI.refreshArchiveDetailScreen = function(archive) {
 			// リリースに文書とその他は含めないため今回は非表示
 	}
 
+	// チャットルームへのリンク付け
+ 	document.getElementById('joinChatRoom').onclick = function() {
+ 		var roomId = archive.roomId;
+		// TODO
+ 		var roomName = "test3,test2";
+ 		socket.emit('joinRoom', roomId, roomName, function (){
+  			$('#archive_detail').html('');
+			$('#messages').html('');
+			$('.titleRoomName').text(roomName).data('roomName', roomName);
+			$('#pills-chat-tab').tab('show');
+		});
+	}
+
 	// ユーザの様式を読み込む
 	const archiveUserTemplate = $('#archive-user-template').html();
 

public/js/language_en.js

@@ -60,5 +60,10 @@ $.lang.en = {
     "mygroup":"My Group",
     "groupChatRoom":"Group",
     "archiveListTitle":"Archive",
-    "archiveDetailTitle":"Detail"
+    "archiveDetailTitle":"Detail",
+    "fileNameTitle":"File Name",
+    "saveDateTitle":"Save Date",
+    "roomNameTitle":"ChatRoom Name",
+    "saveUserTitle":"Save User",
+    "attendUserTitle":"Attend User"
 }

public/js/language_ja.js

@@ -60,5 +60,10 @@ $.lang.ja = {
     "mygroup":"マイグループ",
     "groupChatRoom":"グループ",
     "archiveListTitle":"アーカイブ",
-    "archiveDetailTitle":"詳細"
+    "archiveDetailTitle":"詳細",
+    "fileNameTitle":"ファイル名",
+    "saveDateTitle":"保存日",
+    "roomNameTitle":"チャットルーム名",
+    "saveUserTitle":"保存ユーザー",
+    "attendUserTitle":"参加ユーザー"
 }

public/js/language_ko.js

@@ -60,5 +60,10 @@ $.lang.ko = {
     "mygroup":"마이그룹",
     "groupChatRoom":"그룹",
     "archiveListTitle":"아카이브",
-    "archiveDetailTitle":"세부 묘사"
+    "archiveDetailTitle":"세부 묘사",
+    "fileNameTitle":"파일 이름",
+    "saveDateTitle":"저장 일",
+    "roomNameTitle":"대화방　이름",
+    "saveUserTitle":"저장　사용자",
+    "attendUserTitle":"참여　사용자"
 }