Skip to content

Commit 627e929

Browse files
miroslavpejic85miroslavpejic85
committed
[mirotalk] - t(chat): add emoji reactions to chat messages
1 parent 13cbe05 commit 627e929

8 files changed

Lines changed: 494 additions & 32 deletions

File tree

‎.env.template‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# ====================================================
2-
# MiroTalk P2P v.1.8.07 - Environment Configuration
2+
# MiroTalk P2P v.1.8.08 - Environment Configuration
33
# ====================================================
44

55
# App environment

‎app/src/config.template.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
/**
44
* ==============================================
5-
* MiroTalk P2P v.1.8.07 - Configuration File
5+
* MiroTalk P2P v.1.8.08 - Configuration File
66
* ==============================================
77
*
88
* This file is the central configuration source.

‎app/src/server.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ dependencies: {
4545
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
4646
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
4747
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
48-
* @version 1.8.07
48+
* @version 1.8.08
4949
*
5050
*/
5151

‎package-lock.json‎

Lines changed: 10 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mirotalk",
3-
"version": "1.8.07",
3+
"version": "1.8.08",
44
"description": "A free WebRTC browser-based video call",
55
"main": "server.js",
66
"scripts": {
@@ -47,13 +47,13 @@
4747
"@mattermost/client": "11.6.0",
4848
"@ngrok/ngrok": "1.7.0",
4949
"@sentry/node": "^10.49.0",
50-
"axios": "^1.15.1",
50+
"axios": "^1.15.2",
5151
"chokidar": "^5.0.0",
5252
"colors": "^1.4.0",
5353
"compression": "^1.8.1",
5454
"cors": "^2.8.6",
5555
"crypto-js": "^4.2.0",
56-
"dompurify": "^3.4.0",
56+
"dompurify": "^3.4.1",
5757
"dotenv": "^17.4.2",
5858
"express": "^5.2.1",
5959
"express-openid-connect": "^2.20.2",

‎public/css/client.css‎

Lines changed: 202 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1604,11 +1604,12 @@ body {
16041604

16051605
.private-msg-bubble,
16061606
.msg-bubble {
1607+
position: relative;
16071608
width: auto;
16081609
max-width: min(78%, 720px);
16091610
padding: 12px 14px;
16101611
border-radius: 20px;
1611-
overflow: hidden;
1612+
overflow: visible;
16121613
}
16131614

16141615
.msg-caption-bubble {
@@ -1648,18 +1649,216 @@ body {
16481649
border-top: 1px solid rgba(255, 255, 255, 0.12);
16491650
}
16501651

1651-
.msg-text button {
1652+
.msg-actions {
1653+
display: flex;
1654+
flex-wrap: wrap;
1655+
align-items: center;
1656+
gap: 6px;
1657+
}
1658+
1659+
.msg-footer {
1660+
display: flex;
1661+
flex-direction: column;
1662+
margin-top: 6px;
1663+
}
1664+
1665+
.msg-actions button {
16521666
display: inline-flex;
16531667
align-items: center;
16541668
justify-content: center;
16551669
width: 30px;
16561670
height: 30px;
16571671
padding: 0;
1658-
margin-right: 6px;
16591672
border-radius: 10px;
16601673
background: var(--body-bg) !important;
16611674
}
16621675

1676+
.reaction-picker {
1677+
display: flex;
1678+
align-items: center;
1679+
flex-wrap: wrap;
1680+
gap: 6px;
1681+
margin-top: 8px;
1682+
padding: 6px;
1683+
border-radius: 12px;
1684+
border: var(--border);
1685+
background: rgba(18, 18, 20, 0.95);
1686+
box-shadow: 0 14px 24px rgba(0, 0, 0, 0.22);
1687+
}
1688+
1689+
.reaction-emoji-btn {
1690+
width: 32px;
1691+
height: 32px;
1692+
border: none;
1693+
border-radius: 10px;
1694+
padding: 0;
1695+
font-size: 18px;
1696+
line-height: 1;
1697+
background: rgba(255, 255, 255, 0.12);
1698+
cursor: pointer;
1699+
}
1700+
1701+
.reaction-emoji-btn:hover {
1702+
transform: translateY(-1px);
1703+
background: rgba(255, 255, 255, 0.22);
1704+
}
1705+
1706+
.reaction-emoji-btn:focus {
1707+
outline: 2px solid rgba(102, 170, 255, 0.6);
1708+
outline-offset: 2px;
1709+
}
1710+
1711+
.reaction-toggle-btn {
1712+
font-size: 16px;
1713+
}
1714+
1715+
.message-reactions {
1716+
display: flex;
1717+
flex-wrap: wrap;
1718+
gap: 4px;
1719+
margin-top: 6px;
1720+
}
1721+
1722+
.reaction-badge {
1723+
position: relative;
1724+
display: inline-flex;
1725+
align-items: center;
1726+
justify-content: center;
1727+
min-width: 32px;
1728+
height: 24px;
1729+
padding: 1px 5px;
1730+
border-radius: 999px;
1731+
background: rgba(255, 255, 255, 0.12);
1732+
border: 1px solid rgba(255, 255, 255, 0.2);
1733+
font-size: 11px;
1734+
line-height: 1.2;
1735+
cursor: pointer;
1736+
transition: all 0.2s ease;
1737+
user-select: none;
1738+
}
1739+
1740+
.reaction-badge:hover {
1741+
background: rgba(255, 255, 255, 0.18);
1742+
border-color: rgba(255, 255, 255, 0.32);
1743+
transform: translateY(-1px);
1744+
}
1745+
1746+
.reaction-badge:active {
1747+
transform: translateY(1px) scale(0.97);
1748+
}
1749+
1750+
.reaction-badge.my-reaction {
1751+
background: rgba(53, 125, 255, 0.3);
1752+
border-color: rgba(102, 170, 255, 0.8);
1753+
font-weight: 500;
1754+
}
1755+
1756+
.reaction-badge.my-reaction:hover {
1757+
background: rgba(53, 125, 255, 0.4);
1758+
border-color: rgba(102, 170, 255, 1);
1759+
}
1760+
1761+
.reaction-badge::before {
1762+
content: '';
1763+
position: absolute;
1764+
inset: -1px;
1765+
border-radius: 999px;
1766+
border: 1px solid rgba(102, 170, 255, 0.5);
1767+
opacity: 0;
1768+
transition: opacity 0.2s ease;
1769+
}
1770+
1771+
.reaction-badge.my-reaction::before {
1772+
opacity: 1;
1773+
}
1774+
1775+
.reaction-badge:hover::after {
1776+
content: attr(data-peers);
1777+
position: absolute;
1778+
left: 50%;
1779+
bottom: calc(100% + 8px);
1780+
transform: translateX(-50%);
1781+
max-width: 280px;
1782+
width: max-content;
1783+
padding: 6px 10px;
1784+
border-radius: 8px;
1785+
font-size: 12px;
1786+
font-weight: 500;
1787+
line-height: 1.4;
1788+
color: #fff;
1789+
background: rgba(0, 0, 0, 0.95);
1790+
white-space: nowrap;
1791+
overflow: hidden;
1792+
text-overflow: ellipsis;
1793+
pointer-events: none;
1794+
z-index: 1000;
1795+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
1796+
}
1797+
1798+
/* Mobile optimizations for emoji reactions */
1799+
@media (max-width: 768px) {
1800+
.reaction-emoji-btn {
1801+
width: 44px;
1802+
height: 44px;
1803+
font-size: 22px;
1804+
}
1805+
1806+
.msg-actions button {
1807+
width: 40px;
1808+
height: 40px;
1809+
}
1810+
1811+
.reaction-picker {
1812+
gap: 10px;
1813+
padding: 10px;
1814+
}
1815+
1816+
.reaction-badge {
1817+
min-width: 30px;
1818+
height: 22px;
1819+
padding: 1px 4px;
1820+
font-size: 11px;
1821+
}
1822+
}
1823+
1824+
@media (max-width: 768px) and (hover: none) {
1825+
.reaction-emoji-btn:hover {
1826+
transform: none;
1827+
background: rgba(255, 255, 255, 0.12);
1828+
}
1829+
1830+
.reaction-emoji-btn:active {
1831+
transform: scale(1.15) translateY(-3px);
1832+
background: rgba(255, 255, 255, 0.25);
1833+
}
1834+
1835+
.reaction-badge:hover {
1836+
transform: none;
1837+
}
1838+
1839+
.reaction-badge:active {
1840+
transform: scale(0.95);
1841+
}
1842+
}
1843+
1844+
@media (max-width: 600px) {
1845+
.reaction-emoji-btn {
1846+
width: 48px;
1847+
height: 48px;
1848+
}
1849+
1850+
.msg-actions {
1851+
gap: 8px;
1852+
}
1853+
1854+
.reaction-badge {
1855+
min-width: 28px;
1856+
height: 20px;
1857+
padding: 0px 3px;
1858+
font-size: 11px;
1859+
}
1860+
}
1861+
16631862
.msg-text iframe {
16641863
width: 100%;
16651864
}

‎public/js/brand.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ let brand = {
109109
},
110110
about: {
111111
imageUrl: '../images/mirotalk-logo.gif',
112-
title: 'WebRTC P2P v1.8.07',
112+
title: 'WebRTC P2P v1.8.08',
113113
html: `
114114
<button
115115
id="support-button"

0 commit comments

Comments
 (0)