fix(web): hide browser URL preview for player artists
ci / ts / ts (packages + web) (push) Successful in 4m37s
ci / ts / ts (packages + web) (push) Successful in 4m37s
This commit is contained in:
1 parent
7fa7ee2c7d
commit
eed7038109
3 files changed
+36
-7
No files matched your search
@@ -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) => {
|
test('mobile player keeps the island above navigation and exposes the queue', async ({ page }, info) => {
|
||||||
await page.setViewportSize({ width: 320, height: 740 });
|
await page.setViewportSize({ width: 320, height: 740 });
|
||||||
await login(page, 'alice');
|
await login(page, 'alice');
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import type { components } from '@pipu/api-client';
|
import type { components } from '@pipu/api-client';
|
||||||
import { unwrap } from '@pipu/core';
|
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 { useVirtualizer } from '@tanstack/react-virtual';
|
||||||
import { Fragment, useRef, useState, type CSSProperties, type MouseEvent, type ReactNode } from 'react';
|
import { Fragment, useRef, useState, type CSSProperties, type MouseEvent, type ReactNode } from 'react';
|
||||||
import { AddToPlaylist } from './playlists';
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
{artists.map((a, i) => (
|
{artists.map((a, i) => (
|
||||||
<Fragment key={a.id}>
|
<Fragment key={a.id}>
|
||||||
{i > 0 && ', '}
|
{i > 0 && ', '}
|
||||||
<Link to="/artist/$id" params={{ id: a.id }} className={s.link}>
|
{hideUrlPreview ? <button type="button" role="link" className={s.link}
|
||||||
|
onClick={() => void navigate({ to: '/artist/$id', params: { id: a.id } })}>
|
||||||
{a.name}
|
{a.name}
|
||||||
</Link>
|
</button> : <Link to="/artist/$id" params={{ id: a.id }} className={s.link}>
|
||||||
|
{a.name}
|
||||||
|
</Link>}
|
||||||
</Fragment>
|
</Fragment>
|
||||||
))}
|
))}
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -119,8 +119,8 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
|
|||||||
)}
|
)}
|
||||||
<div className={s.meta}>
|
<div className={s.meta}>
|
||||||
<span className={s.title} title={track.title}>{track.title}</span>
|
<span className={s.title} title={track.title}>{track.title}</span>
|
||||||
<span className={s.artists} title={track.artists.map((artist) => artist.name).join(', ')}>
|
<span className={s.artists}>
|
||||||
<ArtistLinks artists={track.artists} />
|
<ArtistLinks artists={track.artists} hideUrlPreview />
|
||||||
</span>
|
</span>
|
||||||
{source &&
|
{source &&
|
||||||
(ctx?.type === 'album' && ctx.id ? (
|
(ctx?.type === 'album' && ctx.id ? (
|
||||||
@@ -328,7 +328,7 @@ function NowPlayingSheet({
|
|||||||
{track.title}
|
{track.title}
|
||||||
</Link>
|
</Link>
|
||||||
<span className={s.artists}>
|
<span className={s.artists}>
|
||||||
<ArtistLinks artists={track.artists} />
|
<ArtistLinks artists={track.artists} hideUrlPreview />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className={s.progress}>
|
<div className={s.progress}>
|
||||||
|
|||||||
Reference in new issue
Block a user