sforkowany z mirror/soapbox
Make ads horizontal cards
rodzic
f6e5df2278
commit
ad7ec8b1a6
|
@ -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<IAd> = ({ card, impression }) => {
|
|||
</Stack>
|
||||
</HStack>
|
||||
|
||||
{card.image && (
|
||||
<a href={card.url} className='rounded-[10px] overflow-hidden' target='_blank'>
|
||||
<img
|
||||
className='w-full'
|
||||
width={card.width}
|
||||
height={card.height}
|
||||
src={card.image}
|
||||
alt=''
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
<StatusCard card={card} onOpenMedia={() => {}} horizontal />
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
|
|
|
@ -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,
|
||||
}),
|
||||
|
|
|
@ -51,6 +51,7 @@ interface ICard {
|
|||
compact?: boolean,
|
||||
defaultWidth?: number,
|
||||
cacheWidth?: (width: number) => void,
|
||||
horizontal?: boolean,
|
||||
}
|
||||
|
||||
const Card: React.FC<ICard> = ({
|
||||
|
@ -61,6 +62,7 @@ const Card: React.FC<ICard> = ({
|
|||
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<ICard> = ({
|
|||
};
|
||||
|
||||
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);
|
||||
|
|
Ładowanie…
Reference in New Issue