Missing configuration: data-relay-domains and data-channel-id required.
'; @@ -586,7 +708,7 @@ function initChannelPreview(container) { container.innerHTML = 'Failed to load channel preview.
'; return; } - render(container, data, channelLink); + render(container, data, channelLink, showAppBadges); }); } @@ -620,7 +742,7 @@ async function fetchPreview(relayScheme, relayDomains, channelLink, channelId) { return linkMismatch ? 'link_mismatch' : null; } -function render(container, data, channelLink) { +function render(container, data, channelLink, showAppBadges) { const { channel, members, messages } = data; const membersMap = {}; for (const m of members) { @@ -652,13 +774,12 @@ function render(container, data, channelLink) { const infoContent = document.createElement('div'); infoContent.className = 'simplex-preview-info-content'; - renderInfoContent(infoContent, data, channelLink, members.length); + renderInfoContent(infoContent, data, channelLink, members.length, showAppBadges); info.appendChild(infoContent); container.appendChild(info); - header.addEventListener('click', (e) => { - if (e.target.closest('.simplex-preview-join-btn')) return; + header.addEventListener('click', () => { if (window.innerWidth < 1000) { info.classList.add('open'); main.style.overflow = 'hidden'; @@ -704,22 +825,16 @@ function renderHeader(channel, channelLink, subscriberCount) { header.appendChild(info); if (channelLink) { - const btn = document.createElement('a'); + const btn = document.createElement('button'); btn.className = 'simplex-preview-join-btn'; btn.textContent = 'Join'; - try { - btn.href = platformSimplexUri(channelLink); - } catch(e) { - btn.href = channelLink; - } - btn.target = '_blank'; header.appendChild(btn); } return header; } -function renderInfoContent(container, data, channelLink, subscriberCount) { +function renderInfoContent(container, data, channelLink, subscriberCount, showAppBadges) { const { channel } = data; const avatar = document.createElement('img'); @@ -765,19 +880,116 @@ function renderInfoContent(container, data, channelLink, subscriberCount) { } if (channelLink) { - const btn = document.createElement('a'); - btn.className = 'simplex-preview-join-btn'; - btn.textContent = 'Join'; - try { - btn.href = platformSimplexUri(channelLink); - } catch(e) { - btn.href = channelLink; + const conversion = document.createElement('div'); + conversion.className = 'simplex-preview-conversion'; + if (isMobile.any()) { + renderMobileConversion(conversion, channelLink, showAppBadges); + } else { + renderDesktopConversion(conversion, channelLink, showAppBadges); } - btn.target = '_blank'; - container.appendChild(btn); + container.appendChild(conversion); } } +function renderDesktopConversion(container, channelLink, showAppBadges) { + const qrContainer = document.createElement('div'); + qrContainer.className = 'simplex-preview-qr-container'; + const canvas = document.createElement('canvas'); + qrContainer.appendChild(canvas); + + const caption = document.createElement('p'); + caption.className = 'simplex-preview-qr-caption'; + caption.textContent = 'Scan from mobile app to join'; + qrContainer.appendChild(caption); + container.appendChild(qrContainer); + + try { + QRCode.toCanvas(canvas, channelLink, { + errorCorrectionLevel: 'M', + color: { dark: '#062D56' }, + width: 400, + margin: 1 + }).then(function() { + canvas.style.width = '200px'; + canvas.style.height = '200px'; + }).catch(function() { + qrContainer.style.display = 'none'; + }); + } catch(e) { + qrContainer.style.display = 'none'; + } + + if (showAppBadges) { + const badges = document.createElement('div'); + badges.className = 'simplex-preview-badges'; + badges.innerHTML = + '
' +
+ '
';
+ container.appendChild(badges);
+ }
+
+ const copySection = document.createElement('div');
+ copySection.className = 'simplex-preview-copy-section';
+ copySection.innerHTML = 'Or copy link for desktop app:';
+
+ const copyRow = document.createElement('div');
+ copyRow.className = 'simplex-preview-copy-row';
+
+ const linkText = document.createElement('span');
+ linkText.className = 'simplex-preview-copy-link';
+ linkText.textContent = channelLink;
+ copyRow.appendChild(linkText);
+
+ const copyBtn = document.createElement('button');
+ copyBtn.className = 'simplex-preview-copy-btn';
+ copyBtn.innerHTML = COPY_ICON_SVG;
+ copyBtn.title = 'Copy to clipboard';
+ copyBtn.addEventListener('click', function() {
+ navigator.clipboard.writeText(channelLink).then(function() {
+ copyBtn.title = 'Copied!';
+ setTimeout(function() { copyBtn.title = 'Copy to clipboard'; }, 2000);
+ });
+ });
+ copyRow.appendChild(copyBtn);
+
+ copySection.appendChild(copyRow);
+ container.appendChild(copySection);
+}
+
+function renderMobileConversion(container, channelLink, showAppBadges) {
+ if (showAppBadges) {
+ const stepLabel = document.createElement('p');
+ stepLabel.className = 'simplex-preview-step-label';
+ stepLabel.textContent = 'Install SimpleX App';
+ container.appendChild(stepLabel);
+
+ const badges = document.createElement('div');
+ badges.className = 'simplex-preview-badges';
+
+ if (isMobile.Android()) {
+ badges.innerHTML =
+ '' +
+ '
' +
+ '
';
+ } else if (isMobile.iOS()) {
+ badges.innerHTML =
+ '' +
+ '
';
+ } else {
+ badges.innerHTML =
+ '' +
+ '';
+ }
+ container.appendChild(badges);
+ }
+
+ const openBtn = document.createElement('a');
+ openBtn.className = 'simplex-preview-open-btn';
+ openBtn.textContent = 'Open SimpleX App';
+ openBtn.href = channelLink;
+ container.appendChild(openBtn);
+}
+
function setupExpandCollapse(section, readMore) {
if (section._measured) return;
const lineHeight = parseFloat(getComputedStyle(section).lineHeight);