Skip to content

A
abook_check
Commit 440612ea by Jeong Gilmo
Options

- チャットの動画アップロードの処理追加

parent d5b5b4a3
Showing with 194 additions and 83 deletions
ABVJE_Launcher_Android/assets/chat/public/js/chat.js
......@@ -441,7 +441,7 @@ socket.on('newMessage', function (message){
createdAtTime: messageTime.createdAtTime
});
// イメージの場合、img tagを追加する
html = message.text.includes('attachedImages') ? htmlDecode(html) : html;
html = message.text.includes('attachedImages') || message.text.includes('attachedVideos') ? htmlDecode(html) : html;
jQuery('#messages').append(html);
scrollToBottom();
});
......@@ -536,10 +536,19 @@ jQuery('#fileUploadButton').on('click', function(){
jQuery('#imageInputTag').click();
});
// 動画アップロード
jQuery('#fileUploadButton2').on('click', function(){
jQuery('#imageInputTag2').click();
});
jQuery('#imageInputTag').on('change', function(){
jQuery('#image-form').submit();
});
jQuery('#imageInputTag2').on('change', function(){
jQuery('#image-form2').submit();
});
jQuery('#image-form').on('submit', function(e){
e.preventDefault();
const imageInputTag = jQuery('#imageInputTag');
......@@ -561,43 +570,85 @@ jQuery('#image-form').on('submit', function(e){
uploadImage(fd)
})
}
});
// // ファイルアップロード
// jQuery.ajax({
// async: true,
// url: SERVER_URL+"/upload",
// type: "post",
// data: fd,
// contentType: false,
// processData: false
// }).done(function( res ) {
// let imgPath = SERVER_URL + res.path;
// let downloadPath = SERVER_URL + '/download' + res.path;
// // アップロードが終了した後ローディング画面から離れてメッセージをメッセージを転送する
// const lightbox = jQuery('<a/>',{href:imgPath, 'data-lightbox':'attachedImages','data-title':res.fileName});
// const image = jQuery('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
// const downloadIcon = jQuery('<a/>',{href:downloadPath, class:'fa fa-download', download:res.fileName});
// lightbox.append(image);
// lightbox.append(downloadIcon);
//
// let text = lightbox.prop('outerHTML')
// let encodedText
// try {
// encodedText = encodeURIComponent(text)
// } catch(e) {
// encodedText = text;
// }
//
// socket.emit('createMessage', {
// text: encodedText
// }, 1);
// jQuery('.overlay').removeClass('active undismissable');
// jQuery('.loader').removeClass('active');
// dismissLoadingIndicator();
// });
jQuery('#image-form2').on('submit', function(e){
e.preventDefault();
const imageInputTag2 = jQuery('#imageInputTag2');
const file = imageInputTag2.prop('files')[0];
if (file) {
jQuery('.overlay').addClass('active undismissable');
jQuery('.loader').addClass('active');
showLoadingIndicator();
var fd = new FormData($(this)[0]);
if(!file.type.includes("image")) { // video 保存
// createVideoThumbnailAndUpload(file);
createVideoThumbnailAndUpload(file, function(resizeFile, thumbnailCreated){
if(resizeFile && thumbnailCreated) {
//ただ、画像の大きさが500pixel以下の場合はthumbnailは生成されない
fd.append('thumb', resizeFile)
}
uploadImage(fd);
})
return;
}
}
});
// Video のサムネイルファイル生成する
function createVideoThumbnailAndUpload(sourceImage, callback) {
var fileReader = new FileReader();
fileReader.onload = function() {
var blob = new Blob([fileReader.result], {type: sourceImage.type});
var url = URL.createObjectURL(blob);
var video = document.createElement('video');
var timeupdate = function() {
if (snapImage()) {
video.removeEventListener('timeupdate', timeupdate);
video.pause();
}
};
video.addEventListener('loadeddata', function() {
if (snapImage()) {
video.removeEventListener('timeupdate', timeupdate);
}
});
var snapImage = function() {
var canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
fetch(canvas.toDataURL("image/jpeg"))
.then(function(res){
return res.arrayBuffer();
})
.then(function(buf){
//回転された画像をFormDataに保存
const newFile = new File([buf], sourceImage.name, {type:"image/jpeg"});
callback(newFile, true);
//ajax End
}).catch((error) => { //fetch Error catch Block
if(error) {
console.log(error)
}
});
return true;
};
video.addEventListener('timeupdate', timeupdate);
video.preload = 'metadata';
video.src = url;
// Load video in Safari / IE11
video.muted = true;
video.playsInline = true;
video.play();
};
fileReader.readAsArrayBuffer(sourceImage);
}
// Ajaxでイメージをアップロードする
function uploadImage(formData) {
jQuery.ajax({
......@@ -612,30 +663,61 @@ function uploadImage(formData) {
var imgPath = SERVER_URL + res.path;
var imageName = res.fileName
if(res.thumbnailPath && res.thumbnailPath.length > 0) {
imgPath = SERVER_URL + res.thumbnailPath;
imageName = 'thumb_' + imageName;
}
// uploadFileの判断
var extension = imageName.substr(imageName.lastIndexOf('.') + 1).toLowerCase();
let downloadPath = SERVER_URL + '/download' + res.path;
// アップロードが終了した後ローディング画面から離れてメッセージをメッセージを転送する
const lightbox = jQuery('<a/>',{href:imgPath, 'data-lightbox':'attachedImages','data-title':imageName});
const image = jQuery('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
const downloadIcon = jQuery('<a/>',{href:downloadPath, class:'fa fa-download', download:res.fileName});
lightbox.append(image);
lightbox.append(downloadIcon);
let text = lightbox.prop('outerHTML')
let encodedText
try {
encodedText = encodeURIComponent(text)
} catch(e) {
encodedText = text;
}
// 画像の処理
if (res.fileType == "jpeg" || res.fileType == "jpg" || res.fileType == "png") {
if(res.thumbnailPath && res.thumbnailPath.length > 0) {
imgPath = SERVER_URL + res.thumbnailPath;
imageName = 'thumb_' + imageName;
}
socket.emit('createMessage', {
text: encodedText
}, 1);
let downloadPath = SERVER_URL + '/download' + res.path;
// アップロードが終了した後ローディング画面から離れてメッセージをメッセージを転送する
const lightbox = jQuery('<a/>',{href:imgPath, 'data-lightbox':'attachedImages','data-title':imageName});
const image = jQuery('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
const downloadIcon = jQuery('<a/>',{href:downloadPath, class:'fa fa-download', download:res.fileName});
lightbox.append(image);
lightbox.append(downloadIcon);
let text = lightbox.prop('outerHTML')
let encodedText
try {
encodedText = encodeURIComponent(text)
} catch(e) {
encodedText = text;
}
socket.emit('createMessage', {
text: encodedText
}, 1);
} else { // 動画の処理
if (res.thumbnailPath && res.thumbnailPath.length > 0) {
imgPath = SERVER_URL + res.thumbnailPath;
}
let downloadPath = SERVER_URL + '/download' + res.path;
const aTag = jQuery('<a/>', {id:"attachedImages"})
const image = jQuery('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
const downloadIcon = jQuery('<a/>',{href:downloadPath, class:'fa fa-download', download:res.fileName});
aTag.append(image);
aTag.append(downloadIcon);
let text = aTag.prop('outerHTML');
let encodedText
try {
encodedText = encodeURIComponent(text)
} catch(e) {
encodedText = text;
}
socket.emit('createMessage', {
text: encodedText
}, 1);
}
jQuery('.overlay').removeClass('active undismissable');
jQuery('.loader').removeClass('active');
......@@ -1409,6 +1491,9 @@ function htmlElementTextInitialize(languageCode) {
$("#exitRoom").text(getLocalizedString("exitRoom")).append("<i class='fas fa-door-open'></i>")
$("#participants").text(getLocalizedString("participants"))
$("#fileUploadButton").text(getLocalizedString("photo"))
$("#fileUploadButton2").text(getLocalizedString("video"))
$("#okayLabel").text(getLocalizedString("okayLabel"))
$("#completeLabel").text(getLocalizedString("completeLabel"))
$("#thankLabel").text(getLocalizedString("thankLabel"))
......
ABVJE_Launcher_Android/assets/chat/public/js/language_en.js
......@@ -44,5 +44,7 @@ $.lang.en = {
"errorConnect":"There was a problem with the network.\n Please check the connection status of the network.",
"errorRoomNotFound":"This chat room has already been deleted.",
"serverErrorOccured":"App will not be able to communicate with the server. \n After a few moments, please try again.",
"memberDeleteTitle":"Do you want to remove selected members from the list?"
"memberDeleteTitle":"Do you want to remove selected members from the list?",
"photo":"Photo",
"video":"Video"
}
ABVJE_Launcher_Android/assets/chat/public/js/language_ja.js
......@@ -44,5 +44,7 @@ $.lang.ja = {
"errorConnect":"ネットワークに問題がありました。\nネットワークの接続状態を確認してください。",
"errorRoomNotFound":"既に削除されたチャットルームです。",
"serverErrorOccured":"サーバと通信できません。\nしばらく時間をおいて再度操作してください。",
"memberDeleteTitle":"選択したメンバーをリストから削除しますか？"
"memberDeleteTitle":"選択したメンバーをリストから削除しますか？",
"photo":"写真",
"video":"動画"
}
ABVJE_Launcher_Android/assets/chat/public/js/language_ko.js
......@@ -24,7 +24,7 @@ $.lang.ko = {
"groupListKeyword":"검색",
"groupPageSubtitle":"그룹",
"noMessages":"메시지가 없습니다.",
"image":"사진",
"image":"이미지",
"chatKeyword":"검색",
"userListKeyword":"검색",
"newRoomName":"방제목 입력",
......@@ -44,5 +44,7 @@ $.lang.ko = {
"errorConnect":"네트워크에 문제가 발생했습니다.\n네트워크 연결상태를 확인하여 주십시요.",
"errorRoomNotFound":"이미 삭제된 채팅룸입니다.",
"serverErrorOccured":"서버와 통신할 수 없습니다.\n잠시 후 다시 시도해보시기 바랍니다.",
"memberDeleteTitle":"목록에서 선택된 멤버를 삭제하시겠습니까?"
"memberDeleteTitle":"목록에서 선택된 멤버를 삭제하시겠습니까?",
"photo":"사진",
"video":"동영상"
}
ABVJE_Launcher_Android/assets/chat/public/newstart.html
......@@ -209,10 +209,24 @@
<div class="input_msg_write">
<div class="input-group">
<div class="input-group-prepend">
<button class="btn input-group-text" id="fileUploadButton" type="button"><i class="fa fa-camera"></i></button>
<form id="image-form">
<input class="d-none" type="file" name="image" id="imageInputTag" accept="image/x-png,image/jpeg">
</form>
<button class="btn input-group-text dropdown-toggle" data-toggle="dropdown" type="button"><i class="fa fa-camera"></i></button>
<!-- Video Upload -->
<div class="dropdown-menu">
<a class="dropdown-item" id="fileUploadButton" href="#">Photo
<a href="#">
<form id="image-form">
<input class="d-none" type="file" name="image" id="imageInputTag" accept="image/x-png,image/jpeg">
</form>
</a>
</a>
<a class="dropdown-item" id="fileUploadButton2" href="#">Video
<a href="#">
<form id="image-form2">
<input class="d-none" type="file" name="image" id="imageInputTag2" accept="video/mp4">
</form>
</a>
</a>
</div>
</div>
<input id="message-form" type="text" class="write_msg form-control" name="message" placeholder="Type a message" autocomplete="off">
<div class="input-group-append">
......
ABVJE_UI_Android/src/jp/agentec/abook/abv/launcher/android/OnAppDownloadReceiver.java
......@@ -44,7 +44,8 @@ public class OnAppDownloadReceiver extends BroadcastReceiver {
Toast.makeText(context, intent.getAction(), Toast.LENGTH_LONG).show();
} else {
// APK 確認することではない場合
if (!downloadedTo.toLowerCase().endsWith(".png") && !downloadedTo.toLowerCase().endsWith(".jpg") && !downloadedTo.toLowerCase().endsWith(".jpeg")) {
if (!downloadedTo.toLowerCase().endsWith(".png") && !downloadedTo.toLowerCase().endsWith(".jpg") && !downloadedTo.toLowerCase().endsWith(".jpeg")
&& !downloadedTo.toLowerCase().endsWith(".mp4") && !downloadedTo.toLowerCase().endsWith(".mov")) {
File file = new File(context.getExternalFilesDir(Environment.DIRECTORY_DOWNLOADS), ABVEnvironment.APK_FILE_NAME);
if (file.exists()) {
Intent i = new Intent(Intent.ACTION_VIEW);
......
ABVJE_UI_Android/src/jp/agentec/abook/abv/ui/home/activity/ChatWebviewActivity.java
......@@ -57,8 +57,10 @@ import jp.agentec.abook.abv.ui.common.constant.NaviConsts;
import jp.agentec.abook.abv.ui.common.dialog.ABookAlertDialog;
import jp.agentec.abook.abv.ui.common.util.ABVToastUtil;
import jp.agentec.abook.abv.ui.common.util.AlertDialogUtil;
import jp.agentec.abook.abv.ui.home.helper.ABookCheckWebViewHelper;
import jp.agentec.abook.abv.ui.home.helper.ActivityHandlingHelper;
import jp.agentec.abook.abv.ui.viewer.activity.ParentWebViewActivity;
import jp.agentec.adf.util.FileUtil;
/**
* Created by AIS-NB-048 on 2019/07/31.
......@@ -88,6 +90,11 @@ public class ChatWebviewActivity extends ParentWebViewActivity {
private BroadcastReceiver receiver;
// 絞り検索マスタ参照パス
private static final String ProfileDirFormat = "%s/ABook/operation/profileimages";
// 絞り検索マスタファイル名
private static final String ProFileName = "profileImages.json";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
......@@ -105,15 +112,6 @@ public class ChatWebviewActivity extends ParentWebViewActivity {
loginId = intent.getStringExtra("loginId");
shopName = intent.getStringExtra("shopName");
// チャットViewのクローズボタン
// final ImageButton imageButton = findViewById(R.id.chat_close_btn);
// imageButton.setOnClickListener(new View.OnClickListener() {
// @Override
// public void onClick(View view) {
// finish();
// }
// });
mChatWebView = findViewById(R.id.chatWebview2);
mChatWebView.setOverScrollMode(View.OVER_SCROLL_NEVER); //オーバースクロールしない。
mChatWebView.setVerticalScrollBarEnabled(false); //スクロールバーを消す。
......@@ -148,9 +146,14 @@ public class ChatWebviewActivity extends ParentWebViewActivity {
mChatWebView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
boolean result;
// result = startCameraIntent(ABOOK_CHECK_TASK_IMAGE, "Camera", ABookKeys.IMAGE_VIDEO, true);
result = startCameraIntent(ABOOK_CHECK_TASK_IMAGE, "Camera", ABookKeys.IMAGE, true);
boolean result = false;
// 画像が選択された場合
if (fileChooserParams.getAcceptTypes()[0].toLowerCase().indexOf(ABookKeys.IMAGE) != -1) {
result = startCameraIntent(ABOOK_CHECK_TASK_IMAGE, "Camera", ABookKeys.IMAGE, true);
// 動画が選択された場合
} else if (fileChooserParams.getAcceptTypes()[0].toLowerCase().indexOf(ABookKeys.VIDEO) != -1) {
result = startCameraIntent(ABOOK_CHECK_TASK_VIDEO, "Camera", ABookKeys.VIDEO, true);
}
if (result) {
if (mUploadMessage != null) {
mUploadMessage.onReceiveValue(null);
......@@ -296,16 +299,18 @@ public class ChatWebviewActivity extends ParentWebViewActivity {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
Logger.d("url", "url : " + url);
// イメージをダウンロードする(png, jpg, jpeg)
if (url.toLowerCase().endsWith(".png") || url.toLowerCase().endsWith(".jpg") || url.toLowerCase().endsWith(".jpeg")) {
Uri uri = Uri.parse(url);
String fileName = new File(uri.getPath()).getName();
// イメージをダウンロードする(png, jpg, jpeg, mp4, mov)
if (url.toLowerCase().endsWith(".png") || url.toLowerCase().endsWith(".jpg") || url.toLowerCase().endsWith(".jpeg")
|| url.toLowerCase().endsWith(".mov") || url.toLowerCase().endsWith(".mp4")) {
view.loadUrl("javascript:showLoadingIndicator()");
DownloadManager mdDownloadManager = (DownloadManager) getSystemService(Context.DOWNLOAD_SERVICE);
DownloadManager.Request request = new DownloadManager.Request(
Uri.parse(url));
File destinationFile = new File(
Environment.getExternalStorageDirectory(),
getFileName(url));
request.setDescription("Downloading ...");
File destinationFile = new File(Environment.getExternalStorageDirectory(), fileName); request.setDescription("Downloading ...");
request.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED);
request.setDestinationUri(Uri.fromFile(destinationFile));
mdDownloadManager.enqueue(request);
......
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