aheh/mirotalk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[mirotalk] - add gravatar email functionality

Browse Source
This commit is contained in:
Miroslav Pejic
2023-12-28 13:23:53 +01:00
parent dd269805c3
commit b35bbe37c6
5 changed files with 48 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/server.js
+1 -1
View File
@@ -38,7 +38,7 @@ dependencies: {
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.2.65
* @version 1.2.66
*
*/
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.2.65",
"version": "1.2.66",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
public/css/client.css
+7
View File
@@ -571,6 +571,12 @@ body {
border-radius: 50%;
}
.peer-img {
width: 48px;
height: 48px;
border-radius: 50px !important;
}
.private-msg-bubble,
.msg-bubble {
/* max-width: 200px; */
@@ -984,6 +990,7 @@ button:hover {
margin-top: 10px;
width: 64px;
height: 64px;
border-radius: 50px;
}
#myPeerNameSetBtn,
public/js/client.js
+36 -7
View File
@@ -15,7 +15,7 @@
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.2.65
* @version 1.2.66
*
*/
@@ -1364,6 +1364,8 @@ async function whoAreYou() {
hideClass: { popup: 'animate__animated animate__fadeOutUp' },
inputValidator: async (value) => {
if (!value) return 'Please enter your name';
// Long name
if (value.length > 30) return 'Name must be max 30 char';
// prevent xss execution itself
myPeerName = filterXSS(value);
@@ -3089,6 +3091,31 @@ function adaptAspectRatio() {
setAspectRatio(isMobileDevice ? mobile : desktop);
}
/**
* Get Gravatar from email
* @param {string} email
* @param {integer} size
* @returns object image
*/
function genGravatar(email, size = false) {
const hash = md5(email.toLowerCase().trim());
const gravatarURL = `https://www.gravatar.com/avatar/${hash}` + (size ? `?s=${size}` : '?s=250');
return gravatarURL;
function md5(input) {
return CryptoJS.MD5(input).toString();
}
}
/**
* Check if valid email
* @param {string} email
* @returns boolean
*/
function isValidEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
/**
* Create round svg image with first 2 letters of peerName in center
* Thank you: https://github.com/phpony
@@ -3145,7 +3172,7 @@ function setPeerAvatarImgName(videoAvatarImageId, peerName) {
const videoAvatarImageElement = getId(videoAvatarImageId);
if (useAvatarSvg) {
const avatarImgSize = isMobileDevice ? 128 : 256;
const avatarImgSvg = genAvatarSvg(peerName, avatarImgSize);
const avatarImgSvg = isValidEmail(peerName) ? genGravatar(peerName) : genAvatarSvg(peerName, avatarImgSize);
videoAvatarImageElement.setAttribute('src', avatarImgSvg);
} else {
videoAvatarImageElement.setAttribute('src', images.avatar);
@@ -3158,7 +3185,7 @@ function setPeerAvatarImgName(videoAvatarImageId, peerName) {
* @param {string} peerName me or peer name
*/
function setPeerChatAvatarImgName(avatar, peerName) {
const avatarImg = genAvatarSvg(peerName, 32);
const avatarImg = isValidEmail(peerName) ? genGravatar(peerName) : genAvatarSvg(peerName, 32);
switch (avatar) {
case 'left':
@@ -6463,7 +6490,7 @@ function handleSpeechTranscript(config) {
const { peer_name, text_data } = config;
const time_stamp = getFormatDate(new Date());
const avatar_image = genAvatarSvg(peer_name, 32);
const avatar_image = isValidEmail(peer_name) ? genGravatar(peer_name) : genAvatarSvg(peer_name, 32);
if (!isCaptionBoxVisible) showCaptionDraggable();
@@ -6660,11 +6687,11 @@ async function msgerAddPeers(peers) {
const exsistMsgerPrivateDiv = getId(peer_id + '_pMsgDiv');
// if there isn't add it....
if (!exsistMsgerPrivateDiv) {
const avatarSvg = genAvatarSvg(peer_name, 24);
const avatarSvg = isValidEmail(peer_name) ? genGravatar(peer_name) : genAvatarSvg(peer_name, 24);
const msgerPrivateDiv = `
<div id="${peer_id}_pMsgDiv" class="msger-peer-inputarea">
<span style="display: none">${peer_name}</span>
<img id="${peer_id}_pMsgAvatar" src="${avatarSvg}">
<img id="${peer_id}_pMsgAvatar" class="peer-img" src="${avatarSvg}">
<textarea
rows="1"
cols="1"
@@ -7166,7 +7193,9 @@ function handlePeerName(config) {
const msgerPeerName = getId(peer_id + '_pMsgBtn');
const msgerPeerAvatar = getId(peer_id + '_pMsgAvatar');
if (msgerPeerName) msgerPeerName.value = peer_name;
if (msgerPeerAvatar) msgerPeerAvatar.src = genAvatarSvg(peer_name, 32);
if (msgerPeerAvatar) {
msgerPeerAvatar.src = isValidEmail(peer_name) ? genGravatar(peer_name) : genAvatarSvg(peer_name, 32);
}
// refresh also peer video avatar name
setPeerAvatarImgName(peer_id + '_avatar', peer_name);
}
public/views/client.html
+3
View File
@@ -879,6 +879,7 @@ access to use this app.
- https://www.npmjs.com/package/qrious (https://github.com/neocotic/qrious)
- https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js (https://github.com/missive/emoji-mart)
- https://mozilla.github.io/pdf.js/ (https://github.com/mozilla/pdf.js)
- https://www.jsdelivr.com/package/npm/crypto-js (https://github.com/brix/crypto-js/)
- https://www.npmjs.com/package/tippy.js (https://github.com/atomiks/tippyjs)
- https://flatpickr.js.org/ (https://github.com/flatpickr/flatpickr)
-->
@@ -891,6 +892,8 @@ access to use this app.
<script defer src="https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/build/pdf.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
<!-- <script defer src="https://cdn.jsdelivr.net/npm/crypto-js@4.2.0/index.min.js"></script> -->
<script defer src="https://unpkg.com/@popperjs/core@2"></script>
<script defer src="https://unpkg.com/tippy.js@6"></script>
<script defer src="https://cdn.jsdelivr.net/npm/flatpickr"></script>