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
-4
View File
@@ -311,12 +311,8 @@ export const en = {
'stats.guestHint': 'Sign in to track your statistics.',
'game.exportGcg': 'Export game',
'game.exportChoice': 'Export the finished game as:',
'game.exportImageOpt': 'Image (PNG)',
'game.exportGcgOpt': 'GCG file',
'game.imageSaveHint': 'Long-press (or right-click) the image to save it.',
'game.imageCopy': 'Copy image',
'game.imageCopied': 'Image copied to the clipboard.',
'game.gcgActiveOnly': 'Available once the game is finished.',
'game.gcgCopied': 'GCG copied to the clipboard.',
'game.addFriendShort': 'Add friend?',
-4
View File
@@ -311,12 +311,8 @@ export const ru: Record<MessageKey, string> = {
'stats.guestHint': 'Войдите, чтобы вести статистику.',
'game.exportGcg': 'Экспорт партии',
'game.exportChoice': 'Экспортировать завершённую партию как:',
'game.exportImageOpt': 'Картинка (PNG)',
'game.exportGcgOpt': 'Файл GCG',
'game.imageSaveHint': 'Чтобы сохранить картинку — долгое нажатие (или правый клик).',
'game.imageCopy': 'Скопировать картинку',
'game.imageCopied': 'Картинка скопирована в буфер обмена.',
'game.gcgActiveOnly': 'Доступно после завершения игры.',
'game.gcgCopied': 'GCG скопирован в буфер обмена.',
'game.addFriendShort': 'В друзья?',
+6 -20
View File
@@ -87,19 +87,13 @@ describe('pickImageDelivery', () => {
const canShareNav = { canShare: () => true, share: async () => {} };
const noShareNav = { canShare: () => false, share: async () => {} };
it('shares when the platform can share files, even in an in-app webview (iOS)', () => {
expect(pickImageDelivery(canShareNav, file, false)).toBe('share');
expect(pickImageDelivery(canShareNav, file, true)).toBe('share');
});
it('previews in an in-app webview that cannot share files (a binary PNG has no clipboard-text fallback)', () => {
expect(pickImageDelivery(noShareNav, file, true)).toBe('preview');
expect(pickImageDelivery(undefined, file, true)).toBe('preview');
it('shares when the platform can share files', () => {
expect(pickImageDelivery(canShareNav, file)).toBe('share');
});
it('downloads on a plain browser without Web Share (desktop)', () => {
expect(pickImageDelivery(noShareNav, file, false)).toBe('download');
expect(pickImageDelivery(undefined, file, false)).toBe('download');
expect(pickImageDelivery(noShareNav, file)).toBe('download');
expect(pickImageDelivery(undefined, file)).toBe('download');
});
});
@@ -121,7 +115,7 @@ describe('shareOrDownloadImage', () => {
const share = vi.fn().mockRejectedValue(new DOMException('cancelled', 'AbortError'));
const { createElement } = stubEnv(true, share);
expect(await shareOrDownloadImage(png(), false)).toBe('shared');
expect(await shareOrDownloadImage(png())).toBe('shared');
expect(share).toHaveBeenCalledOnce();
expect(createElement).not.toHaveBeenCalled();
@@ -130,20 +124,12 @@ describe('shareOrDownloadImage', () => {
it('downloads via an anchor on a desktop browser that cannot share files', async () => {
const { anchor, createElement } = stubEnv(false, vi.fn());
expect(await shareOrDownloadImage(png(), false)).toBe('downloaded');
expect(await shareOrDownloadImage(png())).toBe('downloaded');
expect(createElement).toHaveBeenCalledWith('a');
expect(anchor.click).toHaveBeenCalledOnce();
expect(anchor.download).toBe('game-1.png');
});
it('hands an in-app webview over to the preview modal (no share, no dead download)', async () => {
const { createElement } = stubEnv(false, vi.fn());
expect(await shareOrDownloadImage(png(), true)).toBe('preview');
expect(createElement).not.toHaveBeenCalled();
});
});
describe('pickTextShare', () => {
+16 -58
View File
@@ -81,19 +81,14 @@ function downloadFile(content: Blob | string, filename: string, type = 'applicat
}
/**
* pickImageDelivery decides how to deliver the PNG game image. Web Share (with the file) wins
* wherever it exists — mobile browsers and the iOS Telegram Mini App; a plain desktop browser
* downloads the Blob. The remaining webviews (Android Telegram/VK, the desktop VK iframe) can
* neither share a file nor honour <a download>, and unlike the tiny GCG text a binary PNG has
* no clipboard-text fallback — there the caller shows the image in a preview modal ('preview')
* for a long-press/right-click save, with a clipboard-image copy where supported. Pure, so it
* is unit-tested with a mock navigator.
* pickImageDelivery decides how to deliver the PNG game image: Web Share (with the file)
* wherever it exists — mobile browsers and the iOS Telegram Mini App — else a Blob download.
* The image option is not offered inside the in-app WebViews at all (Android Telegram/VK, the
* desktop VK iframe): a binary PNG has no working route there until the server-rendered
* signed-URL delivery lands, so this decision never sees them. Pure, unit-tested with a mock
* navigator.
*/
export function pickImageDelivery(
nav: ShareNav | undefined,
file: File,
inAppWebView: boolean,
): 'share' | 'download' | 'preview' {
export function pickImageDelivery(nav: ShareNav | undefined, file: File): 'share' | 'download' {
if (
nav &&
typeof nav.canShare === 'function' &&
@@ -102,23 +97,18 @@ export function pickImageDelivery(
) {
return 'share';
}
return inAppWebView ? 'preview' : 'download';
return 'download';
}
/**
* shareOrDownloadImage delivers the rendered game image by the best available route and reports
* which it took — 'shared', 'downloaded' or 'preview' (the caller opens its preview modal). The
* Web Share invariant matches shareOrDownloadGcg: a cancelled or failed share is a deliberate
* no-op, never a Blob-download fallback (an <a download> strands the iOS WKWebView on the blob:
* URL).
* shareOrDownloadImage delivers the rendered game image and reports the route taken. The Web
* Share invariant matches shareOrDownloadGcg: a cancelled or failed share is a deliberate
* no-op, never a Blob-download fallback (an <a download> strands the iOS WKWebView on the
* blob: URL).
*/
export async function shareOrDownloadImage(
file: File,
inAppWebView: boolean,
): Promise<'shared' | 'downloaded' | 'preview'> {
export async function shareOrDownloadImage(file: File): Promise<'shared' | 'downloaded'> {
const nav = typeof navigator !== 'undefined' ? navigator : undefined;
const decision = pickImageDelivery(nav, file, inAppWebView);
if (decision === 'share' && nav) {
if (pickImageDelivery(nav, file) === 'share' && nav) {
try {
await nav.share({ files: [file], title: file.name });
} catch {
@@ -126,40 +116,8 @@ export async function shareOrDownloadImage(
}
return 'shared';
}
if (decision === 'download') downloadFile(file, file.name, file.type);
return decision === 'download' ? 'downloaded' : 'preview';
}
/** canCopyImage reports whether the clipboard-image API (ClipboardItem) is available, so the
* preview modal offers a copy button only where it can work. */
export function canCopyImage(): boolean {
return (
typeof navigator !== 'undefined' &&
typeof ClipboardItem !== 'undefined' &&
typeof navigator.clipboard?.write === 'function'
);
}
/** copyImageToClipboard writes the PNG blob to the system clipboard (where canCopyImage). */
export async function copyImageToClipboard(blob: Blob): Promise<boolean> {
if (!canCopyImage()) return false;
try {
await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
return true;
} catch {
return false;
}
}
/** blobToDataURL inlines a blob as a data: URL — the preview modal's <img> source (a data URL
* survives long-press "save image" in webviews where a blob: URL may not). */
export function blobToDataURL(blob: Blob): Promise<string> {
return new Promise((resolve, reject) => {
const r = new FileReader();
r.onload = () => resolve(String(r.result));
r.onerror = () => reject(r.error ?? new Error('blobToDataURL failed'));
r.readAsDataURL(blob);
});
downloadFile(file, file.name, file.type);
return 'downloaded';
}
type TextShareNav = Pick<Navigator, 'share'> & { canShare?: Navigator['canShare'] };