Skip to content

C
chat_webview
Commit c1fc89a1 by Takatoshi Miura
Options

アーカイブ詳細UI作成

parent 061b4250
Showing with 124 additions and 15 deletions
public/css/chat.css
...@@ -782,6 +782,11 @@ a.article:hover { ...@@ -782,6 +782,11 @@ a.article:hover {
width: 20%; width: 20%;
} }
.archive_img img {
height: auto;
max-height: 90px;
}
.archive_ib { .archive_ib {
float: left; float: left;
padding: 15px; padding: 15px;
...@@ -826,3 +831,11 @@ a.article:hover { ...@@ -826,3 +831,11 @@ a.article:hover {
/* 今回のリリースに文書とその他は含めないため非表示 */ /* 今回のリリースに文書とその他は含めないため非表示 */
display: none; display: none;
} }
.archive_player {
width: 100%;
}
.fileName, .insertDate, .chatRoomName, .saveUser, .joinUser {
padding: 15px;
}
public/index.html
...@@ -263,6 +263,9 @@ ...@@ -263,6 +263,9 @@
</div> </div>
</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="tab-pane fade" id="pills-group" role="tabpanel" aria-labelledby="pills-group-tab">
<div class="inbox_people"> <div class="inbox_people">
<div class="heading_srch"> <div class="heading_srch">
...@@ -532,7 +535,7 @@ ...@@ -532,7 +535,7 @@
</div> </div>
</script> </script>
<script id="archive-template" type="text/template"> <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_data">
<div class="archive_img"> <div class="archive_img">
<img src={{thumbnailImage}} alt=""> <img src={{thumbnailImage}} alt="">
...@@ -540,10 +543,10 @@ ...@@ -540,10 +543,10 @@
<div class="archive_ib"> <div class="archive_ib">
<div class="row"> <div class="row">
<div class="archive_date_font col-10"> <div class="archive_date_font col-10">
<span class="archive_date">{{time}}</span> <span class="archive_date">{{insertDate}}</span>
</div> </div>
<div class="archive_type"> <div class="archive_type">
<span class="text-truncate col-2 {{type}}">{{archiveType}}</span> <span class="text-truncate col-2 {{archiveTypeCSS}}">{{archiveType}}</span>
</div> </div>
</div> </div>
<p class="text-truncate float-left">{{fileName}}</p> <p class="text-truncate float-left">{{fileName}}</p>
...@@ -560,6 +563,30 @@ ...@@ -560,6 +563,30 @@
</div> </div>
</div> </div>
</script> </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="./socket.io/dist/socket.io.js"></script>
<script src="./js/libs/socket.io.js"></script> <script src="./js/libs/socket.io.js"></script>
<script src="./js/libs/jquery-3.3.1.min.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() { ...@@ -1229,6 +1229,7 @@ CHAT_UI.refreshArchiveScreen = function() {
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
//画面タイトル設定 //画面タイトル設定
// TODO タイトル文字定義
let archiveListTitle = getLocalizedString("archiveListTitle"); let archiveListTitle = getLocalizedString("archiveListTitle");
$('.titleRoomName').text(archiveListTitle); $('.titleRoomName').text(archiveListTitle);
...@@ -1245,44 +1246,61 @@ CHAT_UI.refreshArchiveScreen = function() { ...@@ -1245,44 +1246,61 @@ CHAT_UI.refreshArchiveScreen = function() {
archiveList.forEach(function(archive) { archiveList.forEach(function(archive) {
var archiveType = ''; var archiveType = '';
var type = ''; var css = '';
switch(archive.archiveType) { switch(archive.archiveType) {
case 0: case 0:
archiveType = '画像'; archiveType = '画像';
type = 'type_image'; css = 'type_image';
break; break;
case 1: case 1:
archiveType = '動画'; archiveType = '動画';
type = 'type_movie'; css = 'type_movie';
break; break;
case 2: case 2:
archiveType = '音声'; archiveType = '音声';
type = 'type_sound'; css = 'type_sound';
break; break;
case 3: case 3:
// 今回のリリースに文書とその他は含めないため非表示 // 今回のリリースに文書とその他は含めないため非表示
archiveType = '文書'; archiveType = '文書';
type = 'type_document'; css = 'type_document';
break; break;
default: default:
// 今回のリリースに文書とその他は含めないため非表示 // 今回のリリースに文書とその他は含めないため非表示
archiveType = 'その他'; archiveType = 'その他';
type = 'type_other'; css = 'type_other';
} }
// TODO サムネイル画像取得処理
archive.thumbnailImagePath = CHAT.getProfileImgUrl(archive.archiveUrl)
let html = Mustache.render(archiveTemplate, { let html = Mustache.render(archiveTemplate, {
id: archive.archiveId, id: archive.archiveId,
fileName: archive.archiveName, fileName: archive.archiveName,
thumbnailImage: archive.thumbnailImagePath, thumbnailImage: archive.archiveUrl,
time: archive.insertDate, insertDate: archive.insertDate,
archiveType: archiveType, archiveType: archiveType,
type: type archiveTypeCSS: css
}); });
let obj = $(jQuery.parseHTML(html)).on('click', function(){ 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); $('#archive_list').append(obj);
...@@ -1292,3 +1310,54 @@ CHAT_UI.refreshArchiveScreen = function() { ...@@ -1292,3 +1310,54 @@ CHAT_UI.refreshArchiveScreen = function() {
// loadingIndicatorを非表示 // loadingIndicatorを非表示
CHAT_UI.dismissLoadingIndicator(); 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();
}
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