Merge pull request #7111 from brave/brave-today-publisher

browser/brave_profile_prefs.cc

@@ -274,6 +274,7 @@ void RegisterProfilePrefs(user_prefs::PrefRegistrySyncable* registry) {
 
   // Brave Today
   registry->RegisterDictionaryPref(kBraveTodaySources);
+  registry->RegisterBooleanPref(kBraveTodayIntroDismissed, false);
 
   // Brave Wallet
 #if BUILDFLAG(BRAVE_WALLET_ENABLED)

browser/ui/webui/new_tab_page/brave_new_tab_message_handler.cc

@@ -109,6 +109,9 @@ base::DictionaryValue GetPreferencesDictionary(PrefService* prefs) {
   pref_data.SetBoolean(
       "isBrandedWallpaperNotificationDismissed",
       prefs->GetBoolean(kBrandedWallpaperNotificationDismissed));
+  pref_data.SetBoolean(
+      "isBraveTodayIntroDismissed",
+      prefs->GetBoolean(kBraveTodayIntroDismissed));
   pref_data.SetBoolean(
       "showBinance",
       prefs->GetBoolean(kNewTabPageShowBinance));
@@ -449,6 +452,8 @@ void BraveNewTabMessageHandler::HandleSaveNewTabPagePref(
     settingsKey = kNewTabPageShowStats;
   } else if (settingsKeyInput == "showToday") {
     settingsKey = kNewTabPageShowToday;
+  } else if (settingsKeyInput == "isBraveTodayIntroDismissed") {
+    settingsKey = kBraveTodayIntroDismissed;
   } else if (settingsKeyInput == "showRewards") {
     settingsKey = kNewTabPageShowRewards;
   } else if (settingsKeyInput == "isBrandedWallpaperNotificationDismissed") {

common/pref_names.cc

@@ -69,6 +69,7 @@ const char kNewTabPageShowGemini[] = "brave.new_tab_page.show_gemini";
 const char kNewTabPageShowTogether[] = "brave.new_tab_page.show_together";
 const char kNewTabPageShowsOptions[] = "brave.new_tab_page.shows_options";
 const char kBraveTodaySources[] = "brave.today.sources";
+const char kBraveTodayIntroDismissed[] = "brave.today.intro_dismissed";
 const char kBraveEnabledMediaRouter[] = "brave.enable_media_router";
 const char kBinanceAccessToken[] = "brave.binance.access_token";
 const char kBinanceRefreshToken[] = "brave.binance.refresh_token";

common/pref_names.h

@@ -61,6 +61,7 @@ extern const char kNewTabPageShowGemini[];
 extern const char kNewTabPageShowTogether[];
 extern const char kNewTabPageShowsOptions[];
 extern const char kBraveTodaySources[];
+extern const char kBraveTodayIntroDismissed[];
 extern const char kBraveEnabledMediaRouter[];
 extern const char kAlwaysShowBookmarkBarOnNTP[];
 extern const char kAutocompleteEnabled[];

components/brave_new_tab_ui/actions/new_tab_actions.ts

@@ -8,7 +8,6 @@ import { action } from 'typesafe-actions'
 
 // Constants
 import { types } from '../constants/new_tab_types'
-import { Preferences } from '../api/preferences'
 import { Stats } from '../api/stats'
 import { PrivateTabData } from '../api/privateTabData'
 import { TorTabData } from '../api/torTabData'
@@ -32,7 +31,7 @@ export const dismissBrandedWallpaperNotification = (isUserAction: boolean) =>
     isUserAction
   })
 
-export const preferencesUpdated = (preferences: Preferences) =>
+export const preferencesUpdated = (preferences: NewTab.Preferences) =>
   action(types.NEW_TAB_PREFERENCES_UPDATED, preferences)
 
 export const clockWidgetUpdated = (showClockWidget: boolean,

components/brave_new_tab_ui/api/initialData.ts

@@ -10,7 +10,7 @@ import * as torTabDataAPI from './torTabData'
 import * as brandedWallpaper from './brandedWallpaper'
 
 export type InitialData = {
-  preferences: preferencesAPI.Preferences
+  preferences: NewTab.Preferences
   stats: statsAPI.Stats
   privateTabData: privateTabDataAPI.PrivateTabData
   torTabData: torTabDataAPI.TorTabData

components/brave_new_tab_ui/api/preferences.ts

@@ -10,22 +10,10 @@
 // especially string keys.
 //
 
-export type Preferences = {
-  showBackgroundImage: boolean
-  brandedWallpaperOptIn: boolean
-  showStats: boolean
-  showToday: boolean
-  showClock: boolean
-  clockFormat: string
-  showTopSites: boolean
-  showRewards: boolean
-  isBrandedWallpaperNotificationDismissed: boolean
-}
-
-type PreferencesUpdatedHandler = (prefData: Preferences) => void
+type PreferencesUpdatedHandler = (prefData: NewTab.Preferences) => void
 
-export function getPreferences (): Promise<Preferences> {
-  return window.cr.sendWithPromise<Preferences>('getNewTabPagePreferences')
+export function getPreferences (): Promise<NewTab.Preferences> {
+  return window.cr.sendWithPromise<NewTab.Preferences>('getNewTabPagePreferences')
 }
 
 function sendSavePref (key: string, value: any) {
@@ -84,6 +72,10 @@ export function saveShowCryptoDotCom (value: boolean): void {
   sendSavePref('showCryptoDotCom', value)
 }
 
+export function saveIsBraveTodayIntroDismissed (value: boolean): void {
+  sendSavePref('isBraveTodayIntroDismissed', value)
+}
+
 export function addChangeListener (listener: PreferencesUpdatedHandler): void {
   window.cr.addWebUIListener('preferences-changed', listener)
 }

components/brave_new_tab_ui/apiEventsToStore.ts

@@ -11,7 +11,7 @@ import * as privateTabDataAPI from './api/privateTabData'
 import * as torTabDataAPI from './api/torTabData'
 import { getInitialData, getRewardsInitialData, getRewardsPreInitialData } from './api/initialData'
 
-async function updatePreferences (prefData: preferencesAPI.Preferences) {
+async function updatePreferences (prefData: NewTab.Preferences) {
   getActions().preferencesUpdated(prefData)
 }
 
@@ -27,7 +27,7 @@ async function updateTorTabData (data: torTabDataAPI.TorTabData) {
   getActions().torTabDataUpdated(data)
 }
 
-function onRewardsToggled (prefData: preferencesAPI.Preferences): void {
+function onRewardsToggled (prefData: NewTab.Preferences): void {
   if (prefData.showRewards) {
     rewardsInitData()
   }

components/brave_new_tab_ui/components/default/braveToday/cards/cardIntro.tsx

@@ -5,19 +5,38 @@
 
 import * as React from 'react'
 import { getLocale } from '../../../../../common/locale'
+import VisibilityTimer from '../../../../helpers/visibilityTimer'
 import * as Card from '../cardIntro'
-import BraveTodayLogo from '../braveTodayLogo.svg'
+import BraveTodayLogoUrl from '../braveTodayLogo.svg'
 
-class HeaderBlock extends React.PureComponent<{}, {}> {
-  render () {
-    return (
-      <Card.Intro>
-        <Card.Image src={BraveTodayLogo} />
-        <Card.Heading>{getLocale('braveTodayIntroTitle')}</Card.Heading>
-        <Card.Text>{getLocale('braveTodayIntroDescription')}</Card.Text>
-      </Card.Intro>
-    )
-  }
+const timeToHideMs = 4000
+
+type Props = {
+  onRead: () => void
 }
 
-export default HeaderBlock
+export default function IntroCard (props: Props) {
+  const introElementRef = React.useRef(null)
+
+  // Only mark as 'read' when it's been in the viewport for a
+  // specific amount of time, and the tab is active.
+  React.useEffect(() => {
+    const element = introElementRef.current
+    if (!element) {
+      return
+    }
+    const observer = new VisibilityTimer(props.onRead, timeToHideMs, element)
+    observer.startTracking()
+    return () => {
+      observer.stopTracking()
+    }
+  }, [introElementRef.current, props.onRead])
+
+  return (
+    <Card.Intro innerRef={introElementRef}>
+      <Card.Image src={BraveTodayLogoUrl} />
+      <Card.Heading>{getLocale('braveTodayIntroTitle')}</Card.Heading>
+      <Card.Text>{getLocale('braveTodayIntroDescription')}</Card.Text>
+    </Card.Intro>
+  )
+}

components/brave_new_tab_ui/components/default/braveToday/index.tsx

@@ -12,6 +12,7 @@ const Content = React.lazy(() => import('./content'))
 
 type State = {
   hasInteractionStarted: boolean
+  isIntroCardVisible: boolean
 }
 
 export type OnReadFeedItem = (args: ReadFeedItemPayload) => any
@@ -20,6 +21,7 @@ export type OnSetPublisherPref = (publisherId: string, enabled: boolean) => any
 export type Props = {
   isFetching: boolean
   isUpdateAvailable: boolean
+  isIntroDismissed: boolean
   feed?: BraveToday.Feed
   publishers?: BraveToday.Publishers
   articleToScrollTo?: BraveToday.FeedItem
@@ -31,14 +33,20 @@ export type Props = {
   onCustomizeBraveToday: () => any
   onRefresh: () => any
   onCheckForUpdate: () => any
+  onReadCardIntro: () => any
 }
 
 class BraveToday extends React.PureComponent<Props, State> {
   braveTodayHitsViewportObserver: IntersectionObserver
   scrollTriggerToFocusBraveToday: any // React.RefObject<any>
 
-  state = {
-    hasInteractionStarted: false
+  constructor (props: Props) {
+    super(props)
+    // Don't remove Intro Card until the page refreshes
+    this.state = {
+      hasInteractionStarted: false,
+      isIntroCardVisible: !props.isIntroDismissed
+    }
   }
 
   componentDidMount () {
@@ -70,9 +78,9 @@ class BraveToday extends React.PureComponent<Props, State> {
           ref={scrollTrigger => (this.scrollTriggerToFocusBraveToday = scrollTrigger)}
           style={{ position: 'sticky', top: '100px' }}
         />
-
-        <CardIntro />
-
+        { !this.props.isIntroDismissed &&
+        <CardIntro onRead={this.props.onReadCardIntro} />
+        }
         { shouldDisplayContent &&
         <React.Suspense fallback={(<CardLoading />)}>
           <Content {...this.props} />

components/brave_new_tab_ui/containers/app.tsx

@@ -27,36 +27,40 @@ interface Props {
   braveTodayData: BraveTodayState
 }
 
-class DefaultPage extends React.Component<Props, {}> {
-  render () {
-    const { newTabData, braveTodayData, gridSitesData, actions } = this.props
+function dismissBraveTodayIntroCard () {
+  PreferencesAPI.saveIsBraveTodayIntroDismissed(true)
+}
 
-    // don't render if user prefers an empty page
-    if (this.props.newTabData.showEmptyPage && !this.props.newTabData.isIncognito) {
-      return <div />
-    }
+function DefaultPage (props: Props) {
+  const { newTabData, braveTodayData, gridSitesData, actions } = props
 
-    return this.props.newTabData.isIncognito
-      ? <NewPrivateTabPage newTabData={newTabData} actions={actions} />
-      : (
-        <NewTabPage
-          newTabData={newTabData}
-          todayData={braveTodayData}
-          gridSitesData={gridSitesData}
-          actions={actions}
-          saveShowBackgroundImage={PreferencesAPI.saveShowBackgroundImage}
-          saveShowStats={PreferencesAPI.saveShowStats}
-          saveShowToday={PreferencesAPI.saveShowToday}
-          saveShowRewards={PreferencesAPI.saveShowRewards}
-          saveShowTogether={PreferencesAPI.saveShowTogether}
-          saveShowBinance={PreferencesAPI.saveShowBinance}
-          saveShowGemini={PreferencesAPI.saveShowGemini}
-          saveShowBitcoinDotCom={PreferencesAPI.saveShowBitcoinDotCom}
-          saveShowCryptoDotCom={PreferencesAPI.saveShowCryptoDotCom}
-          saveBrandedWallpaperOptIn={PreferencesAPI.saveBrandedWallpaperOptIn}
-        />
-      )
+  // don't render if user prefers an empty page
+  if (props.newTabData.showEmptyPage && !props.newTabData.isIncognito) {
+    return <div />
   }
+
+  return props.newTabData.isIncognito
+    ? <NewPrivateTabPage newTabData={newTabData} actions={actions} />
+    : (
+      <NewTabPage
+        newTabData={newTabData}
+        todayData={braveTodayData}
+        gridSitesData={gridSitesData}
+        actions={actions}
+        saveShowBackgroundImage={PreferencesAPI.saveShowBackgroundImage}
+        saveShowStats={PreferencesAPI.saveShowStats}
+        saveShowToday={PreferencesAPI.saveShowToday}
+        saveShowRewards={PreferencesAPI.saveShowRewards}
+        saveShowTogether={PreferencesAPI.saveShowTogether}
+        saveShowBinance={PreferencesAPI.saveShowBinance}
+        saveShowAddCard={PreferencesAPI.saveShowAddCard}
+        saveShowGemini={PreferencesAPI.saveShowGemini}
+        saveShowBitcoinDotCom={PreferencesAPI.saveShowBitcoinDotCom}
+        saveShowCryptoDotCom={PreferencesAPI.saveShowCryptoDotCom}
+        saveBrandedWallpaperOptIn={PreferencesAPI.saveBrandedWallpaperOptIn}
+        onReadBraveTodayIntroCard={dismissBraveTodayIntroCard}
+      />
+    )
 }
 
 const mapStateToProps = (state: ApplicationState): Partial<Props> => ({

components/brave_new_tab_ui/containers/newTab/index.tsx

@@ -61,6 +61,7 @@ interface Props {
   saveShowBitcoinDotCom: (value: boolean) => void
   saveShowCryptoDotCom: (value: boolean) => void
   saveBrandedWallpaperOptIn: (value: boolean) => void
+  onReadBraveTodayIntroCard: () => any
 }
 
 interface State {
@@ -1108,6 +1109,7 @@ class NewTabPage extends React.Component<Props, State> {
           publishers={this.props.todayData.publishers}
           isFetching={this.props.todayData.isFetching === true}
           isUpdateAvailable={this.props.todayData.isUpdateAvailable}
+          isIntroDismissed={this.props.newTabData.isBraveTodayIntroDismissed}
           onRefresh={this.props.actions.today.refresh}
           onAnotherPageNeeded={this.props.actions.today.anotherPageNeeded}
           onInteracting={this.onBraveTodayInteracting}
@@ -1116,6 +1118,7 @@ class NewTabPage extends React.Component<Props, State> {
           onReadFeedItem={this.props.actions.today.readFeedItem}
           onSetPublisherPref={this.props.actions.today.setPublisherPref}
           onCheckForUpdate={this.props.actions.today.checkForUpdate}
+          onReadCardIntro={this.props.onReadBraveTodayIntroCard}
         />
         }
         <Settings

components/brave_new_tab_ui/helpers/visibilityTimer.ts

@@ -4,24 +4,40 @@
 // you can obtain one at http://mozilla.org/MPL/2.0/.
 
 /**
- * Waits until the viewport has been in view for a certain number of seconds
+ * Waits until the viewport (and an optional element) has been in view for a certain number of seconds
  * continuously before calling a provided function.
  */
 export default class VisibilityTimer {
+  private element?: HTMLElement
   private timerId?: number = undefined
+  private isIntersecting: boolean
   private viewTimeMs: number = 0
   private onTimerExpired: Function
+  private intersectionObserver?: IntersectionObserver
 
-  constructor (onTimerExpired: Function, viewTimeMs: number) {
+  constructor (onTimerExpired: Function, viewTimeMs: number, elementToObserve?: HTMLElement) {
+    this.element = elementToObserve
     this.onTimerExpired = onTimerExpired
     this.viewTimeMs = viewTimeMs
+    this.isIntersecting = elementToObserve ? false : true
+    if (elementToObserve) {
+      this.intersectionObserver = new IntersectionObserver(entries => {
+        this.isIntersecting = entries.some(entry => entry.isIntersecting)
+        this.handleVisibility()
+      }, {
+        threshold: 1.0
+      })
+    }
   }
 
   startTracking () {
     document.addEventListener(
       'visiblitychange',
       this.handleVisibility
     )
+    if (this.intersectionObserver && this.element) {
+      this.intersectionObserver.observe(this.element)
+    }
     this.handleVisibility()
   }
 
@@ -32,10 +48,13 @@ export default class VisibilityTimer {
       'visiblitychange',
       this.handleVisibility
     )
+    if (this.intersectionObserver && this.element) {
+      this.intersectionObserver.unobserve(this.element)
+    }
   }
 
   private handleVisibility = () => {
-    if (document.visibilityState === 'visible') {
+    if (document.visibilityState === 'visible' && this.isIntersecting) {
       if (!this.timerId) {
         // Start the timer again
         this.startWaiting()

components/brave_new_tab_ui/reducers/new_tab_reducer.ts

@@ -124,7 +124,7 @@ export const newTabReducer: Reducer<NewTab.State | undefined> = (state: NewTab.S
       break
 
     case types.NEW_TAB_PREFERENCES_UPDATED:
-      const preferences = payload as preferencesAPI.Preferences
+      const preferences = payload as NewTab.Preferences
       const newState = {
         ...state,
         ...preferences

components/brave_new_tab_ui/storage/new_tab_storage.ts

@@ -27,6 +27,7 @@ export const defaultState: NewTab.State = {
   showCryptoDotCom: false,
   brandedWallpaperOptIn: false,
   isBrandedWallpaperNotificationDismissed: true,
+  isBraveTodayIntroDismissed: false,
   showEmptyPage: false,
   togetherSupported: false,
   geminiSupported: false,