Commit f5d56708 authored by Yang Wang's avatar Yang Wang Committed by Sébastien Blin
Browse files

chatview: add video player in message window

Change-Id: I97da36dc1af6eee62b3a8944d7f1cc4aebcbd2f3
parent 6c939d1f
.internal_mes_wrapper { .internal_mes_wrapper {
margin: 3px 0 0 0; margin: 3px 0 0 0;
} }
.message_wrapper { .message_wrapper {
padding: 1em; padding: 1em;
} }
.sender_image { .sender_image {
margin: 10px; margin: 10px;
} }
.message_out + .message_out .message_wrapper { .message_out + .message_out .message_wrapper {
border-top-right-radius: 10px; border-top-right-radius: 10px;
} }
.message_in + .message_in .message_wrapper { .message_in + .message_in .message_wrapper {
border-top-left-radius: 10px; border-top-left-radius: 10px;
} }
.message_in + .message_in .sender_image { .message_in + .message_in .sender_image {
visibility: hidden; visibility: hidden;
} }
.message_out + .message_out .sender_image { .message_out + .message_out .sender_image {
visibility: hidden; visibility: hidden;
} }
.message_text { .message_text {
hyphens: auto; hyphens: auto;
word-break: break-word; word-break: break-word;
word-wrap: break-word; word-wrap: break-word;
} }
.nav-right { .nav-right {
align-self: flex-end; align-self: flex-end;
} }
.nav-left { .nav-left {
align-self: flex-start; align-self: flex-start;
} }
#nav-contactid { #nav-contactid {
margin: 0px; margin: 0px;
margin-left: 5px; margin-left: 5px;
padding: 0px; padding: 0px;
height: 100%; height: 100%;
font-family: emoji; font-family: emoji;
/* enable selection (it is globally disabled in the body) */ /* enable selection (it is globally disabled in the body) */
-webkit-user-select: auto; -webkit-user-select: auto;
/* contactid field should take as much place as possible, but it should /* contactid field should take as much place as possible, but it should
also be the first one to shrink if necesary. */ also be the first one to shrink if necesary. */
flex-grow: 2; flex-grow: 2;
flex-shrink: 2; flex-shrink: 2;
min-width: 0; /* necessary for child to be able to shrink correctly */ min-width: 0; /* necessary for child to be able to shrink correctly */
/* center vertically */ /* center vertically */
display: flex; display: flex;
align-items: center; align-items: center;
} }
#nav-contactid-wrapper { #nav-contactid-wrapper {
width: 100%; width: 100%;
} }
#nav-contactid-alias { #nav-contactid-alias {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
margin-bottom: 3px; margin-bottom: 3px;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
#nav-contactid-bestId { #nav-contactid-bestId {
font-size: 11px; font-size: 11px;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.oneEntry #nav-contactid-bestId { .oneEntry #nav-contactid-bestId {
display: none; display: none;
}
video {
width: 320px;
height: 180px;
align-items: center;
} }
\ No newline at end of file
...@@ -201,4 +201,10 @@ pre { ...@@ -201,4 +201,10 @@ pre {
display: flex; display: flex;
border-radius: 16px; border-radius: 16px;
cursor: auto; cursor: auto;
}
video {
width: 320px;
height: 180px;
align-items: center;
} }
\ No newline at end of file
...@@ -607,6 +607,14 @@ a:hover { ...@@ -607,6 +607,14 @@ a:hover {
max-width: none; max-width: none;
} }
.message_type_audio_video_transfer {
display: flex;
flex-direction: column;
padding: 0;
width: auto !important;
max-width: none;
}
.transfer_info_wrapper { .transfer_info_wrapper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -1046,6 +1054,16 @@ audio { ...@@ -1046,6 +1054,16 @@ audio {
align-self: center; align-self: center;
} }
.no-video-overlay {
overflow: visible;
}
video {
width: 320px;
height: 180px;
align-items: center;
}
/* classic screens */ /* classic screens */
@media screen and (max-width: 1920px), screen and (max-height: 1080px) { @media screen and (max-width: 1920px), screen and (max-height: 1080px) {
.message_in { .message_in {
......
...@@ -1030,13 +1030,17 @@ function updateFileInteraction(message_div, message_object, forceTypeToFile = fa ...@@ -1030,13 +1030,17 @@ function updateFileInteraction(message_div, message_object, forceTypeToFile = fa
if (isAudio(message_text) && message_delivery_status === "finished" && displayLinksEnabled && !forceTypeToFile) { if (isAudio(message_text) && message_delivery_status === "finished" && displayLinksEnabled && !forceTypeToFile) {
// Replace the old wrapper by the downloaded audio // Replace the old wrapper by the downloaded audio
var old_wrapper = message_div.querySelector(".internal_mes_wrapper") if (use_qt) {
var old_wrapper = message_div.querySelector(".message_wrapper")
} else {
var old_wrapper = message_div.querySelector(".internal_mes_wrapper")
}
if (old_wrapper) { if (old_wrapper) {
old_wrapper.parentNode.removeChild(old_wrapper) old_wrapper.parentNode.removeChild(old_wrapper)
} }
var errorHandler = function () { var errorHandler = function () {
var wrapper = message_div.querySelector(".internal_mes_wrapper") var wrapper = message_div.querySelector(".message_type_audio_video_transfer")
wrapper.parentNode.classList.remove("no-audio-overlay") wrapper.parentNode.classList.remove("no-audio-overlay")
var message_wrapper = message_div.querySelector(".message_wrapper") var message_wrapper = message_div.querySelector(".message_wrapper")
if (message_wrapper) { if (message_wrapper) {
...@@ -1069,14 +1073,82 @@ function updateFileInteraction(message_div, message_object, forceTypeToFile = fa ...@@ -1069,14 +1073,82 @@ function updateFileInteraction(message_div, message_object, forceTypeToFile = fa
new_wrapper.setAttribute("type", audio_type) new_wrapper.setAttribute("type", audio_type)
new_wrapper.setAttribute("class", "audio") new_wrapper.setAttribute("class", "audio")
const internal_mes_wrapper = document.createElement("div") const internal_mes_wrapper = document.createElement("div")
internal_mes_wrapper.setAttribute("class", "internal_mes_wrapper") internal_mes_wrapper.setAttribute("class", "message_type_audio_video_transfer")
internal_mes_wrapper.appendChild(new_wrapper) internal_mes_wrapper.appendChild(new_wrapper)
message_div.insertBefore(internal_mes_wrapper, message_div.querySelector(".menu_interaction")) if (use_qt) {
message_div.querySelector(".msg_cell").appendChild(internal_mes_wrapper)
} else {
message_div.insertBefore(internal_mes_wrapper, message_div.querySelector(".menu_interaction"))
}
internal_mes_wrapper.parentNode.classList.add("no-audio-overlay") internal_mes_wrapper.parentNode.classList.add("no-audio-overlay")
return return
} }
if (isVideo(message_text) && message_delivery_status === "finished" && displayLinksEnabled && !forceTypeToFile) {
// Replace the old wrapper by the downloaded audio
if (use_qt) {
var old_wrapper = message_div.querySelector(".message_wrapper")
} else {
var old_wrapper = message_div.querySelector(".internal_mes_wrapper")
}
if (old_wrapper) {
old_wrapper.parentNode.removeChild(old_wrapper)
}
var errorHandler = function () {
var wrapper = message_div.querySelector(".message_type_audio_video_transfer")
wrapper.parentNode.classList.remove("no-video-overlay")
var message_wrapper = message_div.querySelector(".message_wrapper")
if (message_wrapper) {
message_wrapper.parentNode.removeChild(message_wrapper)
}
var media_wrapper = message_div.querySelector(".video")
if (media_wrapper) {
media_wrapper.parentNode.removeChild(media_wrapper)
}
var new_interaction = fileInteraction(message_id)
var new_message_wrapper = new_interaction.querySelector(".message_wrapper")
wrapper.prepend(new_message_wrapper)
updateFileInteraction(message_div, message_object, true)
}
var hideContext = function () {return false;}
const new_wrapper = document.createElement("video")
new_wrapper.onerror = errorHandler
new_wrapper.oncontextmenu = hideContext
new_wrapper.setAttribute("src", "file://" + message_text)
new_wrapper.setAttribute("controls", "controls")
var audio_type = "video/mp4"
if (message_text.toLowerCase().match(/\.(mp4)$/)) {
audio_type = "video/mp4"
} else if (message_text.toLowerCase().match(/\.(avi)$/)) {
audio_type = "video/avi"
} else if (message_text.toLowerCase().match(/\.(mov)$/)) {
audio_type = "video/mov"
} else if (message_text.toLowerCase().match(/\.(webm)$/)) {
audio_type = "video/webm"
} else if (message_text.toLowerCase().match(/\.(rmvb)$/)) {
audio_type = "video/rmvb"
}
new_wrapper.setAttribute("type", audio_type)
new_wrapper.setAttribute("class", "video")
const internal_mes_wrapper = document.createElement("div")
internal_mes_wrapper.setAttribute("class", "message_type_audio_video_transfer")
internal_mes_wrapper.appendChild(new_wrapper)
if (use_qt) {
message_div.querySelector(".msg_cell").appendChild(internal_mes_wrapper)
} else {
message_div.insertBefore(internal_mes_wrapper, message_div.querySelector(".menu_interaction"))
}
internal_mes_wrapper.parentNode.classList.add("no-video-overlay")
return
}
// Set informations text // Set informations text
var informations_div = message_div.querySelector(".informations") var informations_div = message_div.querySelector(".informations")
informations_div.innerText = buildFileInformationText(message_object) informations_div.innerText = buildFileInformationText(message_object)
...@@ -1148,7 +1220,7 @@ function isImage(file) { ...@@ -1148,7 +1220,7 @@ function isImage(file) {
} }
/** /**
* Return if a file is an image * Return if a file is an audio
* @param file * @param file
*/ */
function isAudio(file) { function isAudio(file) {
...@@ -1156,10 +1228,18 @@ function isAudio(file) { ...@@ -1156,10 +1228,18 @@ function isAudio(file) {
} }
/** /**
* Return if a file is a youtube video * Return if a file is an video
* @param file * @param file
*/ */
function isVideo(file) { function isVideo(file) {
return file.toLowerCase().match(/\.(mp4|avi|webm|mov|rmvb)$/) !== null
}
/**
* Return if a file is a youtube video
* @param file
*/
function isYoutubeVideo(file) {
const availableProtocols = ["http:", "https:"] const availableProtocols = ["http:", "https:"]
const videoHostname = ["youtube.com", "www.youtube.com", "youtu.be"] const videoHostname = ["youtube.com", "www.youtube.com", "youtu.be"]
const urlParser = document.createElement("a") const urlParser = document.createElement("a")
...@@ -1577,7 +1657,7 @@ function buildNewMessage(message_object) { ...@@ -1577,7 +1657,7 @@ function buildNewMessage(message_object) {
const links = DOMMsg.querySelectorAll("a") const links = DOMMsg.querySelectorAll("a")
if (DOMMsg.childNodes.length && links.length) { if (DOMMsg.childNodes.length && links.length) {
var isTextToShow = (DOMMsg.childNodes[0].childNodes.length > 1) var isTextToShow = (DOMMsg.childNodes[0].childNodes.length > 1)
const ytid = (isVideo(message_text)) ? youtube_id(message_text) : "" const ytid = (isYoutubeVideo(message_text)) ? youtube_id(message_text) : ""
if (!isTextToShow && (ytid || isImage(message_text))) { if (!isTextToShow && (ytid || isImage(message_text))) {
type = "media" type = "media"
message_div.append(mediaInteraction(message_id, message_direction, message_text, ytid)) message_div.append(mediaInteraction(message_id, message_direction, message_text, ytid))
......
Supports Markdown
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