[wip] NTP SBW

components/brave_new_tab_ui/api/brandedWallpaper.ts

@@ -0,0 +1,49 @@
+// Copyright (c) 2019 The Brave Authors. All rights reserved.
+// 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 wallpaperImageUrl from '../data/dummy-branded-backgrounds/2560x1440.png'
+import brandingImageUrl from '../data/dummy-branded-backgrounds/branding.png'
+
+export function getHasBrandedWallpaper () {
+  return Promise.resolve(true)
+}
+
+export function getBrandedWallpaper (): Promise<NewTab.BrandedWallpaper> {
+  return Promise.resolve({
+    wallpaperImageUrl,
+    logo: {
+      image: brandingImageUrl,
+      alt: 'my logo',
+      destinationUrl: 'https://brave.com'
+    }
+  })
+}
+
+const viewsTillShouldShowStorageKey = 'NTP.BrandedWallpaper.ViewsTillShouldShow'
+const maxViewCountUntilBranded = 4
+
+export function getShouldShow (): boolean {
+  const valueRaw = localStorage.getItem(viewsTillShouldShowStorageKey)
+  const value = valueRaw ? parseInt(valueRaw) : NaN
+  if (Number.isInteger(value)) {
+    return value === 1
+  }
+  return false
+}
+
+export function registerViewCount (): void {
+  // TODO: keep this value as singleton in C++ since we want it to show on the
+  // 2nd view (after wallpapers and branded wallpapers are enabled) and then
+  // every 4 views
+  const valueRaw = localStorage.getItem(viewsTillShouldShowStorageKey)
+  const value = valueRaw ? parseInt(valueRaw) : NaN
+  let newValue = maxViewCountUntilBranded
+  if (Number.isInteger(value)) {
+    if (value > 1 && value <= maxViewCountUntilBranded) {
+      newValue = value - 1
+    }
+  }
+  localStorage.setItem(viewsTillShouldShowStorageKey, newValue.toString())
+}

components/brave_new_tab_ui/api/initialData.ts

@@ -7,12 +7,15 @@ import * as preferencesAPI from './preferences'
 import * as statsAPI from './stats'
 import * as privateTabDataAPI from './privateTabData'
 import * as topSitesAPI from './topSites'
+import * as brandedWallpaper from './brandedWallpaper'
 
 export type InitialData = {
   preferences: preferencesAPI.Preferences
   stats: statsAPI.Stats
   privateTabData: privateTabDataAPI.PrivateTabData
-  topSites: topSitesAPI.TopSitesData
+  topSites: topSitesAPI.TopSitesData,
+  brandedWallpaperData: NewTab.BrandedWallpaper,
+  shouldShowBrandedWallpaper: boolean
 }
 
 export type PreInitialRewardsData = {
@@ -32,18 +35,29 @@ export type InitialRewardsData = {
 export async function getInitialData (): Promise<InitialData> {
   try {
     console.timeStamp('Getting initial data...')
-    const [preferences, stats, privateTabData, topSites] = await Promise.all([
+    const [
+      preferences,
+      stats,
+      privateTabData,
+      topSites,
+      brandedWallpaperData,
+      shouldShowBrandedWallpaper
+    ] = await Promise.all([
       preferencesAPI.getPreferences(),
       statsAPI.getStats(),
       privateTabDataAPI.getPrivateTabData(),
-      topSitesAPI.getTopSites()
+      topSitesAPI.getTopSites(),
+      brandedWallpaper.getBrandedWallpaper(),
+      brandedWallpaper.getShouldShow()
     ])
     console.timeStamp('Got all initial data.')
     return {
       preferences,
       stats,
       privateTabData,
-      topSites
+      topSites,
+      brandedWallpaperData,
+      shouldShowBrandedWallpaper
     }
   } catch (e) {
     console.error(e)

components/brave_new_tab_ui/containers/newTab/index.tsx

@@ -39,37 +39,56 @@ interface State {
   backgroundHasLoaded: boolean
 }
 
+function GetBackgroundImageSrc (props: Props) {
+  if (!props.newTabData.showBackgroundImage) {
+    return undefined
+  }
+  if (props.newTabData.shouldShowBrandedWallpaper) {
+    const wallpaperData = props.newTabData.brandedWallpaperData
+    if (wallpaperData && wallpaperData.wallpaperImageUrl) {
+      return wallpaperData.wallpaperImageUrl
+    }
+  }
+  if (props.newTabData.backgroundImage && props.newTabData.backgroundImage.source) {
+    return props.newTabData.backgroundImage.source
+  }
+  return undefined
+}
+
 class NewTabPage extends React.Component<Props, State> {
   state = {
     onlyAnonWallet: false,
     showSettingsMenu: false,
     backgroundHasLoaded: false
   }
 
+  imageSource?: string = undefined
+
   componentDidMount () {
     // if a notification is open at component mounting time, close it
     this.props.actions.onHideSiteRemovalNotification()
+    this.imageSource = GetBackgroundImageSrc(this.props)
     this.trackCachedImage()
   }
 
   componentDidUpdate (prevProps: Props) {
-    if (!prevProps.newTabData.showBackgroundImage &&
-          this.props.newTabData.showBackgroundImage) {
+    const oldImageSource = GetBackgroundImageSrc(prevProps)
+    const newImageSource = GetBackgroundImageSrc(this.props)
+    this.imageSource = newImageSource
+    if (newImageSource && oldImageSource !== newImageSource) {
       this.trackCachedImage()
     }
-    if (prevProps.newTabData.showBackgroundImage &&
-      !this.props.newTabData.showBackgroundImage) {
+    if (oldImageSource &&
+      !newImageSource) {
       // reset loaded state
       this.setState({ backgroundHasLoaded: false })
     }
   }
 
   trackCachedImage () {
-    if (this.props.newTabData.showBackgroundImage &&
-        this.props.newTabData.backgroundImage &&
-        this.props.newTabData.backgroundImage.source) {
+    if (this.imageSource) {
       const imgCache = new Image()
-      imgCache.src = this.props.newTabData.backgroundImage.source
+      imgCache.src = this.imageSource
       console.timeStamp('image start loading...')
       imgCache.onload = () => {
         console.timeStamp('image loaded')
@@ -171,17 +190,19 @@ class NewTabPage extends React.Component<Props, State> {
       return null
     }
 
+    const hasImage = this.imageSource !== null
+
     return (
       <App dataIsReady={newTabData.initialDataLoaded}>
         <PosterBackground
-          hasImage={newTabData.showBackgroundImage}
+          hasImage={hasImage}
           imageHasLoaded={this.state.backgroundHasLoaded}
         >
-          {newTabData.showBackgroundImage && newTabData.backgroundImage &&
-            <img src={newTabData.backgroundImage.source} />
+          {hasImage &&
+            <img src={this.imageSource} />
           }
         </PosterBackground>
-        {newTabData.showBackgroundImage &&
+        {hasImage &&
           <Gradient
             imageHasLoaded={this.state.backgroundHasLoaded}
           />

components/brave_new_tab_ui/reducers/new_tab_reducer.tsx

@@ -16,6 +16,7 @@ import * as gridAPI from '../api/topSites/grid'
 import { InitialData, InitialRewardsData, PreInitialRewardsData } from '../api/initialData'
 import * as bookmarksAPI from '../api/topSites/bookmarks'
 import * as dndAPI from '../api/topSites/dnd'
+import { registerViewCount } from '../api/brandedWallpaper'
 import * as storage from '../storage'
 import { getTotalContributions } from '../rewards-utils'
 
@@ -43,8 +44,11 @@ export const newTabReducer: Reducer<NewTab.State | undefined> = (state: NewTab.S
         ...initialDataPayload.preferences,
         stats: initialDataPayload.stats,
         ...initialDataPayload.privateTabData,
-        topSites: initialDataPayload.topSites
+        topSites: initialDataPayload.topSites,
+        shouldShowBrandedWallpaper: initialDataPayload.shouldShowBrandedWallpaper,
+        brandedWallpaperData: initialDataPayload.brandedWallpaperData,
       }
+      // TODO: only get backgroundImage if no sponsored background this time
       if (initialDataPayload.preferences.showBackgroundImage) {
         state.backgroundImage = backgroundAPI.randomBackgroundImage()
       }
@@ -62,6 +66,10 @@ export const newTabReducer: Reducer<NewTab.State | undefined> = (state: NewTab.S
       addToDispatchQueue(() => {
         gridAPI.calculateGridSites(state)
       })
+      // Run side-effects
+      setTimeout(function () {
+        registerViewCount()
+      }, 0)
       break
     case types.BOOKMARK_ADDED:
       const topSite: NewTab.Site | undefined = state.topSites.find((site) => site.url === payload.url)

components/brave_new_tab_ui/storage.ts

@@ -31,6 +31,7 @@ const defaultState: NewTab.State = {
     httpsUpgradesStat: 0,
     fingerprintingBlockedStat: 0
   },
+  shouldShowBrandedWallpaper: false,
   rewardsState: {
     adsEstimatedEarnings: 0,
     balance: {
@@ -49,7 +50,7 @@ const defaultState: NewTab.State = {
     walletCreating: false,
     walletCreateFailed: false,
     walletCorrupted: false
-  }
+  },
 }
 
 if (chrome.extension.inIncognitoContext) {

components/definitions/newTab.d.ts

@@ -1,4 +1,20 @@
+// Copyright (c) 2019 The Brave Authors. All rights reserved.
+// 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/.
+
 declare namespace NewTab {
+
+  export type BrandedWallpaperLogo = {
+    image: string
+    alt: string
+    destinationUrl: string
+  }
+
+  export interface BrandedWallpaper {
+    wallpaperImageUrl: string
+    logo: BrandedWallpaperLogo
+  }
   export interface ApplicationState {
     newTabData: State | undefined
   }
@@ -64,7 +80,11 @@ declare namespace NewTab {
     showClock: boolean
     showTopSites: boolean
     showRewards: boolean
-    stats: Stats
+    stats: Stats,
+    // TODO: remove word 'should' and differentiate wallpaper availability
+    // and user pref to show it
+    shouldShowBrandedWallpaper: boolean,
+    brandedWallpaperData?: BrandedWallpaper
   }
 
   export interface RewardsWidgetState {