アーカイブ詳細機能実装

7a493931 · Takatoshi Miura · b65b6b1c · 7a493931 · 7a493931 · 7a493931
Commit 7a493931 authored Mar 05, 2021 by Takatoshi Miura
Showing with 123 additions and 34 deletions

public/css/chat.css
+13 -2

public/index.html
+9 -7

public/js/chat-db.js
+36 -6

public/js/chat-ui.js
+47 -16

public/js/language_en.js
+6 -1

public/js/language_ja.js
+6 -1

public/js/language_ko.js
+6 -1

No files found.
--- a/public/css/chat.css
+++ b/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(50vh - 50px);
-  height: calc(100vh - 600px);
 }
 .fileName, .insertDate, .chatRoomName, .saveUser, .joinUser {
@@ -870,4 +880,5 @@ a.article:hover {
 .archive_user p {
  text-align: center;
+  overflow: hidden;
 }
--- a/public/index.html
+++ b/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>
+      <h5>{{roomNameTitle}}</h5>
-      <p class="text-truncate">{{chatRoomName}}</p>
+      <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>

--- a/public/js/chat-db.js
+++ b/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()) {
+	} else if (CHAT_UTIL.isAndroid()) {
-        //TODO Android処理追加必要
+ 		//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処理追加必要
+	}
+};
--- a/public/js/chat-ui.js
+++ b/public/js/chat-ui.js
@@ -1239,9 +1239,12 @@ CHAT_UI.refreshArchiveScreen = function() {
 	// アーカイブの様式を読み込む
 	const archiveTemplate = $('#archive-template').html();
-	// アーカイブ情報取得＆表示
+	if (IS_ONLINE == 'true') {
-	// TODO archiveId取得処理
+		CHAT_DB.updateArchiveList();
-	var archiveList = CHAT_DB.getArchiveList(archiveId);
+	}
+	// アーカイブ一覧取得＆表示
+	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,
+		saveDateTitle: saveDateTitle,
-   		chatRoomName: "チャットルーム名"
+ 		insertDate: archive.archiveDate,
+		roomNameTitle: roomNameTitle,
+   		chatRoomName: "チャットルーム名",
+		saveUserTitle: saveUserTitle,
+ 		attendUserTitle: attendUserTitle
  	});
+	let obj = $(jQuery.parseHTML(html));
-	let obj = $(jQuery.parseHTML(html)).on('click', function(){
-	});
 	$('#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();

--- a/public/js/language_en.js
+++ b/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"
 }
--- a/public/js/language_ja.js
+++ b/public/js/language_ja.js
@@ -60,5 +60,10 @@ $.lang.ja = {
    "mygroup":"マイグループ",
    "groupChatRoom":"グループ",
    "archiveListTitle":"アーカイブ",
-    "archiveDetailTitle":"詳細"
+    "archiveDetailTitle":"詳細",
+    "fileNameTitle":"ファイル名",
+    "saveDateTitle":"保存日",
+    "roomNameTitle":"チャットルーム名",
+    "saveUserTitle":"保存ユーザー",
+    "attendUserTitle":"参加ユーザー"
 }
--- a/public/js/language_ko.js
+++ b/public/js/language_ko.js
@@ -60,5 +60,10 @@ $.lang.ko = {
    "mygroup":"마이그룹",
    "groupChatRoom":"그룹",
    "archiveListTitle":"아카이브",
-    "archiveDetailTitle":"세부 묘사"
+    "archiveDetailTitle":"세부 묘사",
+    "fileNameTitle":"파일 이름",
+    "saveDateTitle":"저장 일",
+    "roomNameTitle":"대화방　이름",
+    "saveUserTitle":"저장　사용자",
+    "attendUserTitle":"참여　사용자"
 }