アーカイブUI適用

public_new/css/archive.css

@@ -46,6 +46,21 @@
 }
 
 /**************************** archive detail *************************/
+.player {
+  background-color: black;
+  text-align : center;
+}
+
+.archive_player {
+  width: auto;
+  max-width: 100%;
+  max-height: 50vh;
+}
+
+.archive_audio_player {
+  width: 100%;
+}
+
 .archive_detail .ttl{
   font-size: 18px;
   font-weight: bold;
@@ -68,6 +83,20 @@
   width: 90px;
 }
 
+#joinChatRoom {
+  -webkit-appearance: none;
+  border: none;
+  width: 24px;
+  height: auto;
+  padding: 0;
+  background: white;
+}
+
+#joinChatRoom img {
+  width: 24px;
+  height: 24px;
+}
+
 @media screen and (max-width: 768px){
   .archive_name{
     font-size: 14px;

public_new/js/chat-ui.js

@@ -850,6 +850,14 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
 
     $("#favorite-seperator").text(getLocalizedString("favorite"))
     $("#mygroup-seperator").text(getLocalizedString("mygroup"))
+
+    $(".ttl_archive").text(getLocalizedString("archive"))
+    $(".ttl_detail").text(getLocalizedString("detail"))
+    $("#archiveFileName").text(getLocalizedString("archiveFileName"))
+    $("#archiveInsertDate").text(getLocalizedString("archiveInsertDate"))
+    $("#archiveRoomName").text(getLocalizedString("archiveRoomName"))
+    $("#archiveSaveUser").text(getLocalizedString("archiveSaveUser"))
+    $("#archiveAttendUser").text(getLocalizedString("archiveAttendUser"))
 }
 
 // 画像の読み込みが全て終わったタイミングでコールバック実行
@@ -1368,3 +1376,221 @@ CHAT_UI.toggleCategory = function(category) {
   $(category).toggleClass("open");
   $(category).next().slideToggle();
 };
+
+
+// アーカイブ一覧
+CHAT_UI.refreshArchiveScreen = function() {
+	// loadingIndicatorを表示
+	CHAT_UI.showLoadingIndicator();
+
+	// 初期化
+	$('#archiveList').html('');
+
+	// アーカイブの様式を読み込む
+	const archiveTemplate = $('#archive-template').html();
+
+
+    // if (IS_ONLINE == 'true') {
+	// 	CHAT_DB.updateArchiveList();
+	// }
+
+	// // アーカイブ一覧取得＆表示
+	// var archiveList = CHAT_DB.getArchiveList();
+    
+	// archiveList.forEach(function(archive) {
+    //     var typeImage = "";
+	// 	switch(archive.archiveType) {
+	// 		case 0: // 画像
+    //             typeImage = "icon/icon_collabo_picture.png";
+	// 		    break;
+	// 	    case 1: // 動画
+    //             typeImage = "icon/icon_collabo_videocam.png";
+	// 		    break;
+	// 	    case 2: // 音声
+    //             typeImage = "icon/icon_collabo_headset.png";
+	// 		    break;
+	// 	    case 3: // 文書
+    //             typeImage = "icon/icon_collabo_document.png";
+	// 		    break;
+	// 	    default: // その他
+    //             typeImage = "";
+	// 	}
+
+	// 	let html = Mustache.render(archiveTemplate, {
+    //         fileName: archive.archiveName,
+    //         insertDate: archive.archiveDate,
+    //         typeImage: typeImage
+	// 	});
+
+	// 	let obj = $(jQuery.parseHTML(html)).on('click', function() {
+	// 		// データの受け渡し
+	// 		CHAT_UI.refreshArchiveDetailScreen(archive.archiveId);
+	// 	});
+
+	// 	$('#archiveList').append(obj);
+	// });
+
+    /*** デバック用 ****************************************************************************/
+    
+    var archiveList = [1,1,1,1,1,1,1,1];
+    archiveList.forEach(function() {
+        var typeImage = "";
+
+        // データ1個目
+        switch(0) {
+            case 0: // 画像
+                typeImage = "icon/icon_collabo_picture.png";
+                break;
+            case 1: // 動画
+                typeImage = "icon/icon_collabo_videocam.png";
+                break;
+            case 2: // 音声
+                typeImage = "icon/icon_collabo_headset.png";
+                break;
+            case 3: // 文書
+                typeImage = "icon/icon_collabo_document.png";
+                break;
+            default: // その他
+                typeImage = "";
+        }
+
+        let html = Mustache.render(archiveTemplate, {
+            fileName: "ファイル名",
+            insertDate: "2021/03/03 16:14",
+            typeImage: typeImage
+        });
+
+        let obj = $(jQuery.parseHTML(html)).on('click', function() {
+            // データの受け渡し
+            CHAT_UI.refreshArchiveDetailScreen(1);
+        });
+
+        $('#archiveList').append(obj);
+    });
+    /*** デバック用終了 ****************************************************************************/
+
+    // loadingIndicatorを非表示
+ 	CHAT_UI.dismissLoadingIndicator();
+};
+
+
+// アーカイブ詳細
+CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
+	// loadingIndicatorを表示
+	CHAT_UI.showLoadingIndicator();
+
+	// 初期化
+	$('#archiveDetail').html('');
+
+   	// アーカイブ詳細の様式を読み込む
+   	const archiveDetailTemplate = $('#archive-detail-template').html();
+
+    // if (IS_ONLINE == 'true') {
+	// 	CHAT_DB.updateArchiveDetail(archiveId);
+	// // }
+    
+	// // アーカイブ詳細取得
+	// var archive = CHAT_DB.getArchiveDetail(archiveId);
+
+	// // チャットルーム情報を取得
+	// var roomId = archive.roomId;
+	// var roomInfo = CHAT_DB.getChatRoomInfo(roomId);
+
+   	// // アーカイブ情報を表示
+   	// let html = Mustache.render(archiveDetailTemplate, {
+	// 	fileName: archive.archiveName,
+ 	// 	insertDate: archive.archiveDate,
+   	// 	chatRoomName: roomInfo.chatRoomName,
+    //     profileImage: "",
+    //     userName: archive.userName
+  	// });
+
+    // アーカイブ情報を表示
+   	var html = Mustache.render(archiveDetailTemplate, {
+		fileName: "ファイル名",
+ 		insertDate: "2021/04/01 18:00",
+   		chatRoomName: "チャットルーム名",
+        profileImage: "https://img01.suumo.com/front/gazo/chumon/220/67/main/10646700010021p01.jpg",
+        userName: "ユーザ名"
+  	});
+
+    var obj = $(jQuery.parseHTML(html)).on('click', function() {
+    });
+    $('#archiveDetail').append(obj);
+
+    // プレイヤーの切り替え
+	// switch(archive.archiveType) {
+    switch(archiveId) {
+		case "0": // 画像
+			$('#archive_player').prepend('<img class="archive_player" src="https://img01.suumo.com/front/gazo/chumon/220/67/main/10646700010021p01.jpg" />');
+			break;
+		case "1": // 動画
+			$('#archive_player').prepend('<video class="archive_player" src=' + "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" + ' controls autoplay muted playsinline></video>');
+			break;
+		case "2": // 音声
+			$('#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" + ' />');
+			break;
+		case "3": // 文書
+			// リリースに文書とその他は含めないため今回は非表示
+			break;
+		default:
+			// リリースに文書とその他は含めないため今回は非表示
+	}
+
+	// ユーザの様式を読み込む
+	const archiveUserTemplate = $('#archive-user-template').html();
+
+    // 参加ユーザ情報を表示
+	// let attendUserList = archive.attendUserId;
+    let attendUserList = [1,1,1,1,1,1,1,1,1];
+	attendUserList.forEach(function(user) {
+		// TODO ユーザIDからユーザ情報を取得
+		var html = Mustache.render(archiveUserTemplate, {
+ 			profileImage: "https://img01.suumo.com/front/gazo/chumon/220/67/main/10646700010021p01.jpg",
+ 			userName: "ユーザ名"
+ 		});
+
+ 		var obj = $(jQuery.parseHTML(html)).on('click', function() {
+			// ネームカード表示
+            const namecardTemplate = $('#archive-namecard-template').html();
+
+            let namecardHtml = Mustache.render(namecardTemplate, {
+                shopMemberId: 1,
+                profileImage: "https://img01.suumo.com/front/gazo/chumon/220/67/main/10646700010021p01.jpg",
+                name: "ユーザ名",
+                groupPathList: "",
+                chat: getLocalizedString("chat"),
+                voice: getLocalizedString("voice"),
+                favorite: getLocalizedString("addFavorite"),
+                isFavorite: ""
+            });
+
+            let namecardObj = $(jQuery.parseHTML(namecardHtml)).on('click', function() {
+            });
+
+            $('#userProfileModal').html(namecardObj);
+            $('#userNameCard').modal('show');
+		});
+
+		$('#attendUser').append(obj);
+	})
+
+    CHAT_UI.htmlElementTextInitialize(navigator.language);
+
+    // チャットルームへのリンク付け
+ 	document.getElementById('joinChatRoom').onclick = function() {
+        //  		socket.emit('joinRoom', roomId, roomInfo.chatRoomName, function () {
+        //   			$('#archive_detail').html('');
+        // 			$('#messages').html('');
+        // 			$('.titleRoomName').text(roomInfo.chatRoomName).data('roomName', roomInfo.chatRoomName);
+        // 			$('#pills-chat-tab').tab('show');
+        // 		});
+        console.log("遷移");
+    }
+        
+    // loadingIndicatorを非表示
+    CHAT_UI.dismissLoadingIndicator();
+};
+
+

public_new/js/language_en.js

@@ -69,5 +69,12 @@ $.lang.en = {
     "groupUser":" Member List",
     "chat":"Chat",
     "voice":"Call",
-    "addFavorite":"Add Favorite"
+    "addFavorite":"Add Favorite",
+    "archive":"Archive",
+    "detail":"Detail",
+    "archiveFileName":"File Name",
+    "archiveInsertDate":"Save Date",
+    "archiveRoomName":"ChatRoom Name",
+    "archiveSaveUser":"Save User",
+    "archiveAttendUser":"Attend User"
 }

public_new/js/language_ja.js

@@ -69,5 +69,12 @@ $.lang.ja = {
     "groupUser":"所属ユーザ",
     "chat":"チャット",
     "voice":"通話",
-    "addFavorite":"お気に入り追加"
+    "addFavorite":"お気に入り追加",
+    "archive":"アーカイブ",
+    "detail":"詳細",
+    "archiveFileName":"ファイル名",
+    "archiveInsertDate":"保存日",
+    "archiveRoomName":"チャットルーム名",
+    "archiveSaveUser":"保存ユーザー",
+    "archiveAttendUser":"参加ユーザー"
 }

public_new/js/language_ko.js

@@ -69,5 +69,12 @@ $.lang.ko = {
     "groupUser":"소속 사용자",
     "chat":"채팅",
     "voice":"통화",
-    "addFavorite":"즐겨찾기추가"
+    "addFavorite":"즐겨찾기추가",
+    "archive":"아카이브",
+    "detail":"자세한",
+    "archiveFileName":"파일 이름",
+    "archiveInsertDate":"저장 일",
+    "archiveRoomName":"대화방 이름",
+    "archiveSaveUser":"저장 사용자",
+    "archiveAttendUser":"참여자"
 }