diff --git a/css/converse.css b/css/converse.css index c05f0def6..f439caca9 100644 --- a/css/converse.css +++ b/css/converse.css @@ -9631,7 +9631,7 @@ body.reset { #conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote, #conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li, #conversejs fieldset, #conversejs form, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody, - #conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details, + #conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs details, #conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu, #conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video { margin: 0; @@ -9669,7 +9669,7 @@ body.reset { color: var(--subdued-color); } #conversejs a.fa:hover, #conversejs a.far:hover, #conversejs a.fas:hover, #conversejs a:visited.fa:hover, #conversejs a:visited.far:hover, #conversejs a:visited.fas:hover, #conversejs a:not([href]):not([tabindex]).fa:hover, #conversejs a:not([href]):not([tabindex]).far:hover, #conversejs a:not([href]):not([tabindex]).fas:hover { color: var(--gray-color); } - #conversejs canvas { + #conversejs svg { border-radius: var(--chatbox-border-radius); } #conversejs .fa, #conversejs .far, #conversejs .fas { color: var(--subdued-color); } diff --git a/dist/converse.js b/dist/converse.js index 84b818817..7729dca14 100644 --- a/dist/converse.js +++ b/dist/converse.js @@ -58492,8 +58492,10 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var backbone_overview__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! backbone.overview */ "./node_modules/backbone.overview/backbone.overview.js"); /* harmony import */ var backbone_overview__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(backbone_overview__WEBPACK_IMPORTED_MODULE_2__); /* harmony import */ var _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @converse/headless/converse-core */ "./src/headless/converse-core.js"); -/* harmony import */ var templates_chatboxes_html__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! templates/chatboxes.html */ "./src/templates/chatboxes.html"); -/* harmony import */ var templates_chatboxes_html__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(templates_chatboxes_html__WEBPACK_IMPORTED_MODULE_4__); +/* harmony import */ var templates_avatar_svg__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! templates/avatar.svg */ "./src/templates/avatar.svg"); +/* harmony import */ var templates_avatar_svg__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(templates_avatar_svg__WEBPACK_IMPORTED_MODULE_4__); +/* harmony import */ var templates_chatboxes_html__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! templates/chatboxes.html */ "./src/templates/chatboxes.html"); +/* harmony import */ var templates_chatboxes_html__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(templates_chatboxes_html__WEBPACK_IMPORTED_MODULE_5__); // Converse.js // http://conversejs.org // @@ -58504,6 +58506,7 @@ __webpack_require__.r(__webpack_exports__); + const _converse$env = _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].env, Backbone = _converse$env.Backbone, _ = _converse$env._, @@ -58519,27 +58522,12 @@ const AvatarMixin = { } const image_type = this.model.vcard.get('image_type'), - image = this.model.vcard.get('image'), - img_src = "data:" + image_type + ";base64," + image, - img = new Image(); - return new Promise((resolve, reject) => { - img.onload = () => { - const ctx = canvas_el.getContext('2d'), - ratio = img.width / img.height; - ctx.clearRect(0, 0, canvas_el.width, canvas_el.height); - - if (ratio < 1) { - const scaled_img_with = canvas_el.width * ratio, - x = Math.floor((canvas_el.width - scaled_img_with) / 2); - ctx.drawImage(img, x, 0, scaled_img_with, canvas_el.height); - } else { - ctx.drawImage(img, 0, 0, canvas_el.width, canvas_el.height * ratio); - } - - resolve(); - }; - - img.src = img_src; + image = this.model.vcard.get('image'); + canvas_el.outerHTML = templates_avatar_svg__WEBPACK_IMPORTED_MODULE_4___default()({ + 'classes': canvas_el.getAttribute('class'), + 'width': canvas_el.width, + 'height': canvas_el.height, + 'image': "data:" + image_type + ";base64," + image }); } @@ -58618,11 +58606,11 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].plugins render() { try { - this.el.innerHTML = templates_chatboxes_html__WEBPACK_IMPORTED_MODULE_4___default()(); + this.el.innerHTML = templates_chatboxes_html__WEBPACK_IMPORTED_MODULE_5___default()(); } catch (e) { this._ensureElement(); - this.el.innerHTML = templates_chatboxes_html__WEBPACK_IMPORTED_MODULE_4___default()(); + this.el.innerHTML = templates_chatboxes_html__WEBPACK_IMPORTED_MODULE_5___default()(); } this.row_el = this.el.querySelector('.row'); @@ -61766,14 +61754,13 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins msg_content.innerHTML = _.flow(_.partial(utils_emoji__WEBPACK_IMPORTED_MODULE_8__["default"].geoUriToHttp, _, _converse.geouri_replacement), _.partial(utils_emoji__WEBPACK_IMPORTED_MODULE_8__["default"].addMentionsMarkup, _, this.model.get('references'), this.model.collection.chatbox), utils_emoji__WEBPACK_IMPORTED_MODULE_8__["default"].addHyperlinks, utils_emoji__WEBPACK_IMPORTED_MODULE_8__["default"].renderNewLines, _.partial(utils_emoji__WEBPACK_IMPORTED_MODULE_8__["default"].addEmoji, _converse, _))(text); } - const promises = []; - promises.push(utils_emoji__WEBPACK_IMPORTED_MODULE_8__["default"].renderImageURLs(_converse, msg_content)); + const promise = utils_emoji__WEBPACK_IMPORTED_MODULE_8__["default"].renderImageURLs(_converse, msg_content); if (this.model.get('type') !== 'headline') { - promises.push(this.renderAvatar(msg)); + this.renderAvatar(msg); } - await Promise.all(promises); + await promise; this.replaceElement(msg); this.model.collection.trigger('rendered', this); }, @@ -100974,6 +100961,34 @@ return __p /***/ }), +/***/ "./src/templates/avatar.svg": +/*!**********************************!*\ + !*** ./src/templates/avatar.svg ***! + \**********************************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + +var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./node_modules/lodash/escape.js")}; +module.exports = function(o) { +var __t, __p = '', __e = _.escape; +__p += '\n\n \n\n'; +return __p +}; + +/***/ }), + /***/ "./src/templates/bookmark.html": /*!*************************************!*\ !*** ./src/templates/bookmark.html ***! @@ -102892,7 +102907,7 @@ __e(o.image) + } ; __p += '\n '; if (!o.image) { ; -__p += '\n \n '; +__p += '\n \n '; } ; __p += '\n \n \n \n
\n
\n