Commit 7a493931 by Takatoshi Miura

アーカイブ詳細機能実装

parent b65b6b1c
...@@ -832,7 +832,18 @@ a.article:hover { ...@@ -832,7 +832,18 @@ a.article:hover {
display: none; display: none;
} }
.player {
background-color: black;
text-align : center;
}
.archive_player { .archive_player {
width: auto;
max-width: 100%;
max-height: 50vh;
}
.archive_audio_player {
width: 100%; width: 100%;
} }
...@@ -840,8 +851,7 @@ a.article:hover { ...@@ -840,8 +851,7 @@ a.article:hover {
overflow-y: auto; overflow-y: auto;
white-space: nowrap; white-space: nowrap;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
/* TODO */ height: calc(50vh - 50px);
height: calc(100vh - 600px);
} }
.fileName, .insertDate, .chatRoomName, .saveUser, .joinUser { .fileName, .insertDate, .chatRoomName, .saveUser, .joinUser {
...@@ -870,4 +880,5 @@ a.article:hover { ...@@ -870,4 +880,5 @@ a.article:hover {
.archive_user p { .archive_user p {
text-align: center; text-align: center;
overflow: hidden;
} }
...@@ -555,28 +555,30 @@ ...@@ -555,28 +555,30 @@
</div> </div>
</script> </script>
<script id="archive-detail-template" type="text/template"> <script id="archive-detail-template" type="text/template">
<div id="archive_player"> <div id="archive_player" class="player">
</div> </div>
<ul class="archive_info"> <ul class="archive_info">
<li class="fileName"> <li class="fileName">
<h5>ファイル名</h5> <h5>{{fileNameTitle}}</h5>
<p class="text-truncate">{{fileName}}</p> <p class="text-truncate">{{fileName}}</p>
</li> </li>
<li class="insertDate"> <li class="insertDate">
<h5>保存日</h5> <h5>{{saveDateTitle}}</h5>
<p class="text-truncate">{{insertDate}}</p> <p class="text-truncate">{{insertDate}}</p>
</li> </li>
<li class="chatRoomName"> <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>
<li class="saveUser"> <li class="saveUser">
<h5>保存ユーザー</h5> <h5>{{saveUserTitle}}</h5>
<ul class="save_user_list" id="save_user"> <ul class="save_user_list" id="save_user">
</ul> </ul>
</li> </li>
<li class="joinUser"> <li class="joinUser">
<h5>参加ユーザー</h5> <h5>{{attendUserTitle}}</h5>
<ul class="join_user_list" id="join_user"> <ul class="join_user_list" id="join_user">
</ul> </ul>
</li> </li>
......
...@@ -58,16 +58,46 @@ CHAT_DB.getMyGroupUsers = function() { ...@@ -58,16 +58,46 @@ CHAT_DB.getMyGroupUsers = function() {
} }
}; };
CHAT_DB.getArchiveList = function(archiveId) { CHAT_DB.getArchiveList = function() {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
// String形式をJsonに変更してReturn // String形式をJsonに変更してReturn
webkit.messageHandlers.getArchiveList.postMessage(archiveId); webkit.messageHandlers.getArchiveList.postMessage();
return JSON.parse(iosArchiveList); return JSON.parse(iosArchiveList);
} else if (CHAT_UTIL.isAndroid()) { } else if (CHAT_UTIL.isAndroid()) {
//TODO Android処理追加必要 //TODO Android処理追加必要
} }
}; };
var iosArchiveList; var iosArchiveList;
getIosArchiveList = function(archiveList) { CHAT_DB.getIosArchiveList = function(archiveList) {
iosArchiveList = 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処理追加必要
}
};
...@@ -1239,9 +1239,12 @@ CHAT_UI.refreshArchiveScreen = function() { ...@@ -1239,9 +1239,12 @@ CHAT_UI.refreshArchiveScreen = function() {
// アーカイブの様式を読み込む // アーカイブの様式を読み込む
const archiveTemplate = $('#archive-template').html(); 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) { archiveList.forEach(function(archive) {
var archiveType = ''; var archiveType = '';
...@@ -1274,7 +1277,7 @@ CHAT_UI.refreshArchiveScreen = function() { ...@@ -1274,7 +1277,7 @@ CHAT_UI.refreshArchiveScreen = function() {
id: archive.archiveId, id: archive.archiveId,
fileName: archive.archiveName, fileName: archive.archiveName,
thumbnailImage: archive.archiveUrl, thumbnailImage: archive.archiveUrl,
insertDate: archive.insertDate, insertDate: archive.archiveDate,
archiveType: archiveType, archiveType: archiveType,
archiveTypeCSS: css archiveTypeCSS: css
}); });
...@@ -1286,7 +1289,6 @@ CHAT_UI.refreshArchiveScreen = function() { ...@@ -1286,7 +1289,6 @@ CHAT_UI.refreshArchiveScreen = function() {
$('#archive_list').hide(); $('#archive_list').hide();
$('#archive_detail').show(); $('#archive_detail').show();
$('#bottomNav').hide(); $('#bottomNav').hide();
$("#backButton").show(); $("#backButton").show();
$('#backButton').off().on('click', function() { $('#backButton').off().on('click', function() {
// アーカイブ一覧に戻る // アーカイブ一覧に戻る
...@@ -1297,9 +1299,8 @@ CHAT_UI.refreshArchiveScreen = function() { ...@@ -1297,9 +1299,8 @@ CHAT_UI.refreshArchiveScreen = function() {
$('#archive_list').show(); $('#archive_list').show();
$('#bottomNav').show(); $('#bottomNav').show();
}); });
// データの受け渡し // データの受け渡し
CHAT_UI.refreshArchiveDetailScreen(archive); CHAT_UI.refreshArchiveDetailScreen(archive.archiveId);
}); });
$('#archive_list').append(obj); $('#archive_list').append(obj);
...@@ -1310,8 +1311,8 @@ CHAT_UI.refreshArchiveScreen = function() { ...@@ -1310,8 +1311,8 @@ CHAT_UI.refreshArchiveScreen = function() {
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
} }
// アーカイブ詳細画面の初期設定 // アーカイブ詳細画面の設定
CHAT_UI.refreshArchiveDetailScreen = function(archive) { CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
// loadingIndicatorを表示 // loadingIndicatorを表示
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
...@@ -1325,16 +1326,33 @@ CHAT_UI.refreshArchiveDetailScreen = function(archive) { ...@@ -1325,16 +1326,33 @@ CHAT_UI.refreshArchiveDetailScreen = function(archive) {
// アーカイブ詳細の様式を読み込む // アーカイブ詳細の様式を読み込む
const archiveDetailTemplate = $('#archive-detail-template').html(); 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, { let html = Mustache.render(archiveDetailTemplate, {
fileNameTitle: fileNameTitle,
fileName: archive.archiveName, 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); $('#archive_detail').append(obj);
// プレイヤーの切り替え // プレイヤーの切り替え
...@@ -1346,7 +1364,7 @@ CHAT_UI.refreshArchiveDetailScreen = function(archive) { ...@@ -1346,7 +1364,7 @@ CHAT_UI.refreshArchiveDetailScreen = function(archive) {
$('#archive_player').prepend('<video class="archive_player" src=' + archive.archiveUrl + ' controls autoplay muted playsinline></video>'); $('#archive_player').prepend('<video class="archive_player" src=' + archive.archiveUrl + ' controls autoplay muted playsinline></video>');
break; break;
case 2: // 音声 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>'); $('#archive_player').prepend('<img class="archive_player" src=' + "https://via.placeholder.com/1280x720" + ' </img>');
break; break;
case 3: // 文書 case 3: // 文書
...@@ -1356,6 +1374,19 @@ CHAT_UI.refreshArchiveDetailScreen = function(archive) { ...@@ -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(); const archiveUserTemplate = $('#archive-user-template').html();
......
...@@ -60,5 +60,10 @@ $.lang.en = { ...@@ -60,5 +60,10 @@ $.lang.en = {
"mygroup":"My Group", "mygroup":"My Group",
"groupChatRoom":"Group", "groupChatRoom":"Group",
"archiveListTitle":"Archive", "archiveListTitle":"Archive",
"archiveDetailTitle":"Detail" "archiveDetailTitle":"Detail",
"fileNameTitle":"File Name",
"saveDateTitle":"Save Date",
"roomNameTitle":"ChatRoom Name",
"saveUserTitle":"Save User",
"attendUserTitle":"Attend User"
} }
...@@ -60,5 +60,10 @@ $.lang.ja = { ...@@ -60,5 +60,10 @@ $.lang.ja = {
"mygroup":"マイグループ", "mygroup":"マイグループ",
"groupChatRoom":"グループ", "groupChatRoom":"グループ",
"archiveListTitle":"アーカイブ", "archiveListTitle":"アーカイブ",
"archiveDetailTitle":"詳細" "archiveDetailTitle":"詳細",
"fileNameTitle":"ファイル名",
"saveDateTitle":"保存日",
"roomNameTitle":"チャットルーム名",
"saveUserTitle":"保存ユーザー",
"attendUserTitle":"参加ユーザー"
} }
...@@ -60,5 +60,10 @@ $.lang.ko = { ...@@ -60,5 +60,10 @@ $.lang.ko = {
"mygroup":"마이그룹", "mygroup":"마이그룹",
"groupChatRoom":"그룹", "groupChatRoom":"그룹",
"archiveListTitle":"아카이브", "archiveListTitle":"아카이브",
"archiveDetailTitle":"세부 묘사" "archiveDetailTitle":"세부 묘사",
"fileNameTitle":"파일 이름",
"saveDateTitle":"저장 일",
"roomNameTitle":"대화방 이름",
"saveUserTitle":"저장 사용자",
"attendUserTitle":"참여 사용자"
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment