diff --git a/app/soapbox/features/ads/components/ad.tsx b/app/soapbox/features/ads/components/ad.tsx index 2515241cd..6fe75efb9 100644 --- a/app/soapbox/features/ads/components/ad.tsx +++ b/app/soapbox/features/ads/components/ad.tsx @@ -2,6 +2,7 @@ import React, { useEffect } from 'react'; import { FormattedMessage } from 'react-intl'; import { Stack, HStack, Card, Avatar, Text, Icon } from 'soapbox/components/ui'; +import StatusCard from 'soapbox/features/status/components/card'; import { useAppSelector } from 'soapbox/hooks'; import type { Card as CardEntity } from 'soapbox/types/entities'; @@ -53,17 +54,7 @@ const Ad: React.FC = ({ card, impression }) => { - {card.image && ( - - - - )} + {}} horizontal /> ); diff --git a/app/soapbox/features/ads/providers/rumble.ts b/app/soapbox/features/ads/providers/rumble.ts index 17c4abea8..ac9beb569 100644 --- a/app/soapbox/features/ads/providers/rumble.ts +++ b/app/soapbox/features/ads/providers/rumble.ts @@ -31,7 +31,8 @@ const RumbleAdProvider: AdProvider = { return data.ads.map(item => ({ impression: item.impression, card: normalizeCard({ - type: item.type === 1 ? 'Link' : 'Rich', + type: item.type === 1 ? 'link' : 'rich', + title: 'Sponsored post', image: item.asset, url: item.click, }), diff --git a/app/soapbox/features/status/components/card.tsx b/app/soapbox/features/status/components/card.tsx index 90ddc27e3..f3b18d663 100644 --- a/app/soapbox/features/status/components/card.tsx +++ b/app/soapbox/features/status/components/card.tsx @@ -51,6 +51,7 @@ interface ICard { compact?: boolean, defaultWidth?: number, cacheWidth?: (width: number) => void, + horizontal?: boolean, } const Card: React.FC = ({ @@ -61,6 +62,7 @@ const Card: React.FC = ({ compact = false, cacheWidth, onOpenMedia, + horizontal, }): JSX.Element => { const [width, setWidth] = useState(defaultWidth); const [embedded, setEmbedded] = useState(false); @@ -132,7 +134,7 @@ const Card: React.FC = ({ }; const interactive = card.type !== 'link'; - const horizontal = interactive || embedded; + horizontal = typeof horizontal === 'boolean' ? horizontal : interactive || embedded; const className = classnames('status-card', { horizontal, compact, interactive }, `status-card--${card.type}`); const ratio = getRatio(card); const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);