tor-browser

AdBanner.jsx (5695B)

---

/* 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,
* You can obtain one at http://mozilla.org/MPL/2.0/. */

import React, { useState } from "react";
import { SafeAnchor } from "../SafeAnchor/SafeAnchor";
import { ImpressionStats } from "../../DiscoveryStreamImpressionStats/ImpressionStats";
import { actionCreators as ac } from "common/Actions.mjs";
import { AdBannerContextMenu } from "../AdBannerContextMenu/AdBannerContextMenu";
import { PromoCard } from "../PromoCard/PromoCard.jsx";

const PREF_SECTIONS_ENABLED = "discoverystream.sections.enabled";
const PREF_OHTTP_UNIFIED_ADS = "unifiedAds.ohttp.enabled";
const PREF_REPORT_ADS_ENABLED = "discoverystream.reportAds.enabled";
const PREF_PROMOCARD_ENABLED = "discoverystream.promoCard.enabled";
const PREF_PROMOCARD_VISIBLE = "discoverystream.promoCard.visible";

/**
* A new banner ad that appears between rows of stories: leaderboard or billboard size.
*
* @param spoc
* @param dispatch
* @param firstVisibleTimestamp
* @param row
* @param type
* @param prefs
* @returns {Element}
* @class
*/
export const AdBanner = ({
 spoc,
 dispatch,
 firstVisibleTimestamp,
 row,
 type,
 prefs,
}) => {
 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 promoCardEnabled =
   spoc.format === "billboard" &&
   prefs[PREF_PROMOCARD_ENABLED] &&
   prefs[PREF_PROMOCARD_VISIBLE];

 const sectionsEnabled = prefs[PREF_SECTIONS_ENABLED];
 const ohttpEnabled = prefs[PREF_OHTTP_UNIFIED_ADS];
 const showAdReporting = prefs[PREF_REPORT_ADS_ENABLED];
 const ohttpImagesEnabled = prefs.ohttpImagesConfig?.enabled;
 const [menuActive, setMenuActive] = useState(false);
 const adBannerWrapperClassName = `ad-banner-wrapper ${menuActive ? "active" : ""} ${promoCardEnabled ? "promo-card" : ""}`;

 const { width: imgWidth, height: imgHeight } = getDimensions(spoc.format);

 const onLinkClick = () => {
   dispatch(
     ac.DiscoveryStreamUserEvent({
       event: "CLICK",
       source: type.toUpperCase(),
       // Banner ads don't have a position, but a row number
       action_position: parseInt(row, 10),
       value: {
         card_type: "spoc",
         tile_id: spoc.id,
         ...(spoc.shim?.click ? { shim: spoc.shim.click } : {}),
         fetchTimestamp: spoc.fetchTimestamp,
         firstVisibleTimestamp,
         format: spoc.format,
         ...(sectionsEnabled
           ? {
               section: spoc.format,
               section_position: parseInt(row, 10),
             }
           : {}),
       },
     })
   );
 };

 const toggleActive = active => {
   setMenuActive(active);
 };

 // 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));

 const secureImage = ohttpImagesEnabled && ohttpEnabled;

 let rawImageSrc = spoc.raw_image_src;

 // Wraps the image URL with the moz-cached-ohttp:// protocol.
 // This enables Firefox to load resources over Oblivious HTTP (OHTTP),
 // providing privacy-preserving resource loading.
 // Applied only when inferred personalization is enabled.
 // See: https://firefox-source-docs.mozilla.org/browser/components/mozcachedohttp/docs/index.html
 if (secureImage) {
   rawImageSrc = `moz-cached-ohttp://newtab-image/?url=${encodeURIComponent(spoc.raw_image_src)}`;
 }

 return (
   <aside className={adBannerWrapperClassName} style={{ gridRow: clampedRow }}>
     <div className={`ad-banner-inner ${spoc.format}`}>
       <SafeAnchor
         className="ad-banner-link"
         url={spoc.url}
         title={spoc.title || spoc.sponsor || spoc.alt_text}
         onLinkClick={onLinkClick}
         dispatch={dispatch}
         isSponsored={true}
       >
         <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={rawImageSrc}
             alt={spoc.alt_text}
             loading="eager"
             width={imgWidth}
             height={imgHeight}
           />
         </div>
         <div className="ad-banner-sponsored">
           <span
             className="ad-banner-sponsored-label"
             data-l10n-id="newtab-label-sponsored-fixed"
           />
         </div>
       </SafeAnchor>
       <div className="ad-banner-hover-background">
         <AdBannerContextMenu
           dispatch={dispatch}
           spoc={spoc}
           position={row}
           type={type}
           showAdReporting={showAdReporting}
           toggleActive={toggleActive}
         />
       </div>
     </div>
     {promoCardEnabled && <PromoCard />}
   </aside>
 );
};