import React, { memo } from 'react'; import { fp as _ } from '../../../../common/utils/fp'; import { SBox } from '../../../../common/s-components/layout/s-box'; import { theme } from '../../../../app/theme'; import { TCardVariant, TPlaylist } from '../../../types'; import { TVendor } from '../../../../common/types'; import { Header } from './header'; import { Body } from './body'; import { Footer } from './footer'; import { goToPlaylistPlacement } from '../../../services'; import { TouchableCard } from '../../../../common/components/touchable-card'; import { StarredLabel } from '../../../../common/components/starred-label'; import { ROUTE_PARAMS } from '../../../../app/constants'; type TProps = TPlaylist & { variant: TCardVariant; vendor: TVendor; streams?: any; streamsType?: string; }; export const PlaylistCard: React.FC = memo(props => { const { image_url, name, current_position, trend, country_code, is_new, personalized, updated, moved, variant, vendor, id, streams, starred, streamsType, } = props; const CARD_WIDTH = 283; const CARD_HEIGHT = 160; const fullsize = _.includes('fullsize', variant); const [cardVariant] = _.split('-')(variant); const width = fullsize ? 'auto' : CARD_WIDTH; const height = CARD_HEIGHT; const borderRadius = 8; return ( { goToPlaylistPlacement({ playlistId: id as string, playlistMarket: country_code, playlistVendor: vendor, playlistImageUrl: _.path('image_url')(props), playlistName: _.path('name')(props), [ROUTE_PARAMS.placementVariant]: cardVariant === 'adds' ? 'current' : 'past', }); }} borderRadius={borderRadius} height={height} variant="shadow" bgImage={image_url} bgStyle={{ bg: theme.colors.fiord }} gradient={{ tapped: { colors: theme.gradients.cardPlaylistTapped, }, default: { colors: theme.gradients.cardPlaylist }, }} >