Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
import React from "react";
import { SafeAnchor } from "../SafeAnchor/SafeAnchor";
import { ImpressionStats } from "../../DiscoveryStreamImpressionStats/ImpressionStats";
import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs";
export const AdBanner = ({
spoc,
dispatch,
firstVisibleTimestamp,
row,
type,
}) => {
const getDimensions = format => {
switch (format) {
case "leaderboard":
return {
width: "728",
height: "90",
};
case "billboard":
return {
width: "970",
height: "250",
};
}
return {
// image will still render with default values
width: undefined,
height: undefined,
};
};
const { width: imgWidth, height: imgHeight } = getDimensions(spoc.format);
const handleDismissClick = () => {
dispatch(
ac.AlsoToMain({
type: at.BLOCK_URL,
data: [
{
block_key: spoc.block_key,
fetchTimestamp: spoc.fetchTimestamp,
flight_id: spoc.flight_id,
format: spoc.format,
id: spoc.id,
card_type: "spoc",
is_pocket_card: true,
position: row,
sponsor: spoc.sponsor,
title: spoc.title,
url: spoc.url || spoc.shim.url,
personalization_models: spoc.personalization_models,
priority: spoc.priority,
score: spoc.score,
alt_text: spoc.alt_text,
},
],
})
);
};
const onLinkClick = () => {
dispatch(
ac.DiscoveryStreamUserEvent({
event: "CLICK",
source: type.toUpperCase(),
// Banner ads dont have a position, but a row number
action_position: row,
value: {
card_type: "spoc",
tile_id: spoc.id,
...(spoc.shim?.click ? { shim: spoc.shim.click } : {}),
fetchTimestamp: spoc.fetchTimestamp,
firstVisibleTimestamp,
format: spoc.format,
},
})
);
};
// in the default card grid 1 would come before the 1st row of cards and 9 comes after the last row
// using clamp to make sure its between valid values (1-9)
const clampedRow = Math.max(1, Math.min(9, row));
return (
<aside className="ad-banner-wrapper" style={{ gridRow: clampedRow }}>
<div className={`ad-banner-inner ${spoc.format}`}>
<div className="ad-banner-dismiss">
<button
className="icon icon-dismiss"
onClick={handleDismissClick}
data-l10n-id="newtab-toast-dismiss-button"
></button>
</div>
<SafeAnchor
className="ad-banner-link"
url={spoc.url}
title={spoc.title}
onLinkClick={onLinkClick}
dispatch={dispatch}
>
<ImpressionStats
flightId={spoc.flight_id}
rows={[
{
id: spoc.id,
card_type: "spoc",
pos: row,
recommended_at: spoc.recommended_at,
received_rank: spoc.received_rank,
format: spoc.format,
...(spoc.shim?.impression
? { shim: spoc.shim.impression }
: {}),
},
]}
dispatch={dispatch}
firstVisibleTimestamp={firstVisibleTimestamp}
/>
<div className="ad-banner-content">
<img
src={spoc.raw_image_src}
alt={spoc.alt_text}
loading="eager"
width={imgWidth}
height={imgHeight}
/>
</div>
</SafeAnchor>
<div className="ad-banner-sponsored">
<span
className="ad-banner-sponsored-label"
data-l10n-id="newtab-topsite-sponsored"
/>
</div>
</div>
</aside>
);
};