diff --git a/apps/web/e2e/mobile.spec.ts b/apps/web/e2e/mobile.spec.ts index 5a6de45..02fa75f 100644 --- a/apps/web/e2e/mobile.spec.ts +++ b/apps/web/e2e/mobile.spec.ts @@ -92,6 +92,31 @@ for (const [width, username] of [[320, 'mobile-admin'], [390, 'moderator'], [430 }); } +for (const width of [390, 1280]) { + test(`player artist opens without a browser URL preview at ${width}px`, async ({ page }) => { + await page.setViewportSize({ width: 390, height: 844 }); + await login(page, 'alice'); + await page.setViewportSize({ width, height: 844 }); + const box = page.getByRole('combobox', { name: 'Поиск', exact: true }); + await box.fill('кино'); + await box.press('Enter'); + await page.getByRole('link', { name: /Группа крови/ }).first().click(); + await page.getByRole('listitem').first().click(); + const artist = page.getByRole('contentinfo', { name: 'Плеер' }).getByRole('link', { name: 'Кино', exact: true }); + await artist.hover(); + await expect(artist).not.toHaveAttribute('href'); + expect(await artist.evaluate((el) => Boolean(el.closest('[title], a[href]')))).toBe(false); + if (width === 390) { + await artist.focus(); + await page.keyboard.press('Enter'); + } else { + await artist.click(); + } + await expect(page).toHaveURL(/\/artist\//); + await expect(page.getByRole('heading', { name: 'Кино', exact: true })).toBeVisible(); + }); +} + test('mobile player keeps the island above navigation and exposes the queue', async ({ page }, info) => { await page.setViewportSize({ width: 320, height: 740 }); await login(page, 'alice'); diff --git a/apps/web/src/entities/catalog.tsx b/apps/web/src/entities/catalog.tsx index 724fda9..2c3b1f0 100644 --- a/apps/web/src/entities/catalog.tsx +++ b/apps/web/src/entities/catalog.tsx @@ -1,6 +1,6 @@ import type { components } from '@pipu/api-client'; import { unwrap } from '@pipu/core'; -import { Link } from '@tanstack/react-router'; +import { Link, useNavigate } from '@tanstack/react-router'; import { useVirtualizer } from '@tanstack/react-virtual'; import { Fragment, useRef, useState, type CSSProperties, type MouseEvent, type ReactNode } from 'react'; import { AddToPlaylist } from './playlists'; @@ -71,15 +71,19 @@ export function Cover({ } /** Исполнители через запятую, каждый — ссылка. */ -export function ArtistLinks({ artists }: { artists: ArtistRef[] }) { +export function ArtistLinks({ artists, hideUrlPreview = false }: { artists: ArtistRef[]; hideUrlPreview?: boolean }) { + const navigate = useNavigate(); return ( <> {artists.map((a, i) => ( {i > 0 && ', '} - + {hideUrlPreview ? : + {a.name} + } ))} diff --git a/apps/web/src/widgets/PlayerBar.tsx b/apps/web/src/widgets/PlayerBar.tsx index 8c14998..b05a66a 100644 --- a/apps/web/src/widgets/PlayerBar.tsx +++ b/apps/web/src/widgets/PlayerBar.tsx @@ -119,8 +119,8 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) { )}
{track.title} - artist.name).join(', ')}> - + + {source && (ctx?.type === 'album' && ctx.id ? ( @@ -328,7 +328,7 @@ function NowPlayingSheet({ {track.title} - +