diff --git a/index.css b/index.css index c71d584..3cb751b 100644 --- a/index.css +++ b/index.css @@ -517,6 +517,16 @@ body { } } +/* Embed PAYSAGE dans le cadre vertical : la boîte de l'iframe suit le16:9 + (sinon le lecteur étire ou réduit la vidéo dans un cadre 9:16). */ +.shorts-frame iframe.embed-wide { + top: 50%; + bottom: auto; + height: auto; + aspect-ratio: 16 / 9; + transform: translateY(-50%); +} + /* --- Shorts immersive stage (façon YouTube) -------------------------------- */ /* Plein écran vertical : le cadre 9:16 flotte sur un fond d'ambiance tiré de la vignette courante. `100dvh` (barres navigateur mobiles) avec repli. */ diff --git a/src/app/search/shorts-catalog.spec.ts b/src/app/search/shorts-catalog.spec.ts index c7752d0..cc0db62 100644 --- a/src/app/search/shorts-catalog.spec.ts +++ b/src/app/search/shorts-catalog.spec.ts @@ -1,5 +1,6 @@ import { catalogShortToVideo, + isWideEmbed, formatShortMeta, formatCapturedAgo, formatCompactFr, @@ -32,6 +33,13 @@ function assertEqual(actual: unknown, expected: unknown, message: string): void const NOW = 1700000000000; +console.log('--- isWideEmbed ---'); +assertEqual(isWideEmbed({ width: 1920, height: 1080 }, 'rumble'), true, '16:9 connu → paysage'); +assertEqual(isWideEmbed({ width: 720, height: 1280 }, 'youtube'), false, 'vertical connu → pas paysage'); +assertEqual(isWideEmbed({}, 'rumble'), true, 'Rumble sans dimensions → paysage (repli plateforme)'); +assertEqual(isWideEmbed({}, 'youtube'), false, 'dimensions inconnues hors Rumble → on ne tranche pas'); +assertEqual(isWideEmbed(null, 'rumble'), true, 'item nul → repli plateforme'); + console.log('--- catalogShortToVideo ---'); assertEqual(catalogShortToVideo(null), null, 'null → null'); assertEqual(catalogShortToVideo({} as any), null, 'sans id → null (pas de fantôme)'); diff --git a/src/app/search/shorts-catalog.ts b/src/app/search/shorts-catalog.ts index 7e979a7..1c590a7 100644 --- a/src/app/search/shorts-catalog.ts +++ b/src/app/search/shorts-catalog.ts @@ -91,6 +91,24 @@ export function catalogShortToVideo(item: VideoItem | null | undefined): Video | }; } +/** + * La vidéo est-elle PAYSAGE dans le cadre vertical (9:16) de /shorts ? + * + * Rumble n'expose ni largeur ni hauteur et sa plateforme est16:9 : sans cela + * son embed est écrasé dans un cadre portrait (étiré ou réduit à un tiers de + * l'écran). Dimensions connues => orientation réelle ; inconnues => repli sur + * la nature de la plateforme (rumble = paysage, les autres = on ne tranche pas). + */ +export function isWideEmbed( + v: { width?: number | null; height?: number | null } | null | undefined, + provider: string, +): boolean { + const w = Number(v?.width) || 0; + const h = Number(v?.height) || 0; + if (w > 0 && h > 0) return w > h; + return provider === 'rumble'; +} + /** Nombre compact fr (« 12 k », « 3,4 M ») — `Intl` plutôt qu'un format maison. */ export function formatCompactFr(n: number): string { if (!Number.isFinite(n) || n < 0) return ''; diff --git a/src/components/shorts/watch-short.component.html b/src/components/shorts/watch-short.component.html index 5d1c163..2c6bc5a 100644 --- a/src/components/shorts/watch-short.component.html +++ b/src/components/shorts/watch-short.component.html @@ -18,19 +18,12 @@