fix(game): own export chooser modal; PNG option outside in-app webviews only
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 59s
CI / conformance (pull_request) Successful in 9s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m26s

Telegram's native showPopup delivers its callback with no user
activation, so navigator.share (TG iOS) and clipboard writes (TG
Android GCG copy) silently fail from it — the chooser is now always the
app's own modal, keeping the button click's gesture alive for the
delivery APIs.

The data:URL preview modal is dropped: the Android TG/VK long-press
menu mangles data: URLs (dead download, black-screen open, base64
clipboard garbage), so a binary PNG has no working client-side route in
those webviews at all. The image option is withheld there until the
server-rendered signed-URL delivery (Telegram downloadFile /
VKWebAppDownloadFile) lands; the plain web and mobile browsers keep it.

On-device findings by the owner on the test contour (TG iOS, TG
Android, VK Android).
This commit is contained in:
Ilia Denisov
2026-07-02 17:16:05 +02:00
parent a0eacf3011
commit 946420db93
9 changed files with 95 additions and 202 deletions
+22 -68
View File
@@ -22,12 +22,12 @@
import { variantNameKey, usesStarBlank, BLANK_STAR } from '../lib/variants';
import { alphabetLetters, hasAlphabet } from '../lib/alphabet';
import { hintsLeft } from '../lib/hints';
import { blobToDataURL, canCopyImage, copyImageToClipboard, shareOrDownloadGcg, shareOrDownloadImage } from '../lib/share';
import { shareOrDownloadGcg, shareOrDownloadImage } from '../lib/share';
import { insideVK, vkCopyText } from '../lib/vk';
import { getCachedGame, setCachedGame, setCachedDraft, type CachedGame } from '../lib/gamecache';
import { patchLobbyGame } from '../lib/lobbycache';
import { applyGameOver, applyMoveDelta, applyOpponentJoined, type DeltaResult } from '../lib/gamedelta';
import { insideTelegram, telegramDialogsAvailable, telegramShowConfirm, telegramShowPopup } from '../lib/telegram';
import { insideTelegram, telegramDialogsAvailable, telegramShowConfirm } from '../lib/telegram';
import { haptic } from '../lib/haptics';
import {
BLANK,
@@ -928,26 +928,18 @@
}
// The finished-game export offers two formats — the GCG file and the rendered PNG image —
// behind one 📤 button: a native Telegram popup where available, the app's own modal
// elsewhere (the onResignClick pattern).
// behind one 📤 button, always through the app's own modal. Never Telegram's native popup
// here: its callback runs with NO user activation, so navigator.share / clipboard writes
// silently fail from it (verified on-device, TG iOS + Android). A real DOM button click in
// the modal keeps the gesture alive for the delivery APIs.
let exportOpen = $state(false);
let exportPreviewUrl = $state('');
let exportBlob: Blob | null = null;
// The PNG option is withheld in an in-app WebView (Telegram / VK) for now: a binary image
// has no working delivery there (no Web Share, a dead <a download>, text-only clipboard,
// and the long-press menu mangles data: URLs). It returns with the server-rendered
// signed-URL delivery (Telegram downloadFile / VKWebAppDownloadFile).
const exportImageAvailable = $derived(!(insideTelegram() || insideVK()));
async function onExportClick() {
if (insideTelegram() && telegramDialogsAvailable()) {
const choice = await telegramShowPopup({
message: t('game.exportChoice'),
buttons: [
{ id: 'image', type: 'default', text: t('game.exportImageOpt') },
{ id: 'gcg', type: 'default', text: t('game.exportGcgOpt') },
{ type: 'cancel' },
],
});
if (choice === 'image') void exportImage();
else if (choice === 'gcg') void exportGcg();
return;
}
function onExportClick() {
exportOpen = true;
}
@@ -963,38 +955,21 @@
}
// exportImage renders the finished game as a PNG (lib/gameimage, dynamically imported so the
// renderer stays out of the startup bundle) and delivers it: Web Share / download where they
// work, else the preview modal (Android Telegram/VK WebView and the desktop VK iframe, where
// neither exists for a binary file) with a long-press/right-click save hint.
// renderer stays out of the startup bundle) and delivers it Web Share where the platform
// supports it, else a download (only reachable outside the in-app WebViews, see
// exportImageAvailable).
async function exportImage() {
if (!view) return;
try {
const { renderGameImage } = await import('../lib/gameimage');
const blob = await renderGameImage(view.game, moves, { actionLabel: moveActionLabel });
const file = new File([blob], `game-${id.slice(0, 8)}.png`, { type: 'image/png' });
const outcome = await shareOrDownloadImage(file, insideTelegram() || insideVK());
if (outcome === 'preview') {
exportBlob = blob;
exportPreviewUrl = await blobToDataURL(blob);
}
await shareOrDownloadImage(file);
} catch (e) {
handleError(e);
}
}
function closeExportPreview() {
exportPreviewUrl = '';
exportBlob = null;
}
async function copyExportImage() {
if (exportBlob && (await copyImageToClipboard(exportBlob))) {
showToast(t('game.imageCopied'), 'info');
} else {
showToast(t('error.generic'), 'error');
}
}
// The GCG export copies to the clipboard in an Android in-app WebView (no Web Share, a dead
// <a download>): VKWebAppCopyText inside VK — which also works in the desktop VK iframe, where
// navigator.clipboard is blocked — and navigator.clipboard elsewhere.
@@ -1512,11 +1487,13 @@
{#if exportOpen}
<Modal title={t('game.exportGcg')} onclose={() => (exportOpen = false)}>
<div class="export-opts">
<button class="confirm" onclick={() => { exportOpen = false; void exportImage(); }}>
{t('game.exportImageOpt')}
</button>
{#if exportImageAvailable}
<button class="confirm" onclick={() => { exportOpen = false; void exportImage(); }}>
{t('game.exportImageOpt')}
</button>
{/if}
<button
class="export-alt"
class={exportImageAvailable ? 'export-alt' : 'confirm'}
onclick={() => { exportOpen = false; void exportGcg(); }}
disabled={!connection.online}
>
@@ -1526,16 +1503,6 @@
</Modal>
{/if}
{#if exportPreviewUrl}
<Modal title={t('game.exportImageOpt')} onclose={closeExportPreview}>
<img class="export-preview" src={exportPreviewUrl} alt={t('game.exportGcg')} />
<p class="export-hint">{t('game.imageSaveHint')}</p>
{#if canCopyImage()}
<button class="confirm" onclick={copyExportImage}>{t('game.imageCopy')}</button>
{/if}
</Modal>
{/if}
<style>
.scoreboard {
position: relative;
@@ -1939,19 +1906,6 @@
.export-alt:disabled {
opacity: 0.5;
}
/* Preview modal (webviews with no Web Share / download): the image itself is the artifact —
the user saves it with a long-press (or right-click in the desktop VK iframe). */
.export-preview {
display: block;
width: 100%;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.export-hint {
margin: 8px 0;
color: var(--text-muted);
font-size: 0.85rem;
}
/* --- Landscape (wide) layout ------------------------------------------------------------
When the viewport is wider than tall the game lays out as two columns: a left panel (rack,