bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make ads horizontal cards

Browse source
This commit is contained in:
Alex Gleason 2022-08-02 20:14:28 -05:00
parent f6e5df2278
commit ad7ec8b1a6
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 7 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/soapbox/features/ads/components/ad.tsx
View file

@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { Stack, HStack, Card, Avatar, Text, Icon } from 'soapbox/components/ui'; 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 { useAppSelector } from 'soapbox/hooks';
import type { Card as CardEntity } from 'soapbox/types/entities'; import type { Card as CardEntity } from 'soapbox/types/entities';
@ -53,17 +54,7 @@ const Ad: React.FC<IAd> = ({ card, impression }) => {
</Stack> </Stack>
</HStack> </HStack>
{card.image && ( <StatusCard card={card} onOpenMedia={() => {}} horizontal />
<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>
)}
</Stack> </Stack>
</Card> </Card>
); );

3
app/soapbox/features/ads/providers/rumble.ts
View file

@ -31,7 +31,8 @@ const RumbleAdProvider: AdProvider = {
return data.ads.map(item => ({ return data.ads.map(item => ({
impression: item.impression, impression: item.impression,
card: normalizeCard({ card: normalizeCard({
type: item.type === 1 ? 'Link' : 'Rich', type: item.type === 1 ? 'link' : 'rich',
title: 'Sponsored post',
image: item.asset, image: item.asset,
url: item.click, url: item.click,
}), }),

4
app/soapbox/features/status/components/card.tsx
View file

@ -51,6 +51,7 @@ interface ICard {
compact?: boolean, compact?: boolean,
defaultWidth?: number, defaultWidth?: number,
cacheWidth?: (width: number) => void, cacheWidth?: (width: number) => void,
horizontal?: boolean,
} }
const Card: React.FC<ICard> = ({ const Card: React.FC<ICard> = ({
@ -61,6 +62,7 @@ const Card: React.FC<ICard> = ({
compact = false, compact = false,
cacheWidth, cacheWidth,
onOpenMedia, onOpenMedia,
horizontal,
}): JSX.Element => { }): JSX.Element => {
const [width, setWidth] = useState(defaultWidth); const [width, setWidth] = useState(defaultWidth);
const [embedded, setEmbedded] = useState(false); const [embedded, setEmbedded] = useState(false);
@ -132,7 +134,7 @@ const Card: React.FC<ICard> = ({
}; };
const interactive = card.type !== 'link'; 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 className = classnames('status-card', { horizontal, compact, interactive }, `status-card--${card.type}`);
const ratio = getRatio(card); const ratio = getRatio(card);
const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio); const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);