Adds image fallback for media providers

app/browser/api/ledger.js

@@ -315,6 +315,7 @@ const getPublisherData = (result, scorekeeper) => {
     verified: result.options.verified || false,
     exclude: result.options.exclude || false,
     publisherKey: result.publisherKey,
+    providerName: result.providerName,
     siteName: result.publisherKey,
     views: result.visits,
     duration: duration,

app/common/lib/ledgerUtil.js

@@ -23,6 +23,7 @@ const {responseHasContent} = require('./httpUtil')
 const urlUtil = require('../../../js/lib/urlutil')
 const getSetting = require('../../../js/settings').getSetting
 const urlParse = require('../urlParse')
+
 /**
  * Is page an actual page being viewed by the user? (not an error page, etc)
  * If the page is invalid, we don't want to collect usage info.
@@ -223,10 +224,7 @@ const getMediaId = (data, type) => {
       }
     case ledgerMediaProviders.TWITCH:
       {
-        if (
-          data.event === 'video-play' ||
-          data.event === 'minute-watched'
-        ) {
+        if (data.event === 'minute-watched') {
           id = data.properties.channel
           let vod = data.properties.vod
 
@@ -272,6 +270,10 @@ const getMediaData = (xhr, type) => {
     case ledgerMediaProviders.TWITCH:
       {
         result = queryString.parse(parsedUrl.query)
+        if (!result.data) {
+          break
+        }
+
         let obj = Buffer.from(result.data, 'base64').toString('utf8')
         if (obj == null) {
           break
@@ -303,6 +305,25 @@ const getMediaDuration = (data, type) => {
   return duration
 }
 
+const getMediaFavicon = (providerName) => {
+  let image = null
+
+  switch (providerName) {
+    case ledgerMediaProviders.YOUTUBE:
+      {
+        image = require('../../../img/mediaProviders/youtube.png')
+        break
+      }
+    case ledgerMediaProviders.TWITCH:
+      {
+        image = require('../../../img/mediaProviders/twitch.svg')
+        break
+      }
+  }
+
+  return image
+}
+
 const getTwitchDuration = (data) => {
   let time = 0
 
@@ -356,8 +377,8 @@ const getMediaProvider = (url, firstPartyUrl, referrer) => {
   // Twitch
   if (
     (
-      firstPartyUrl.startsWith('https://www.twitch.tv') ||
-      referrer.startsWith('https://player.twitch.tv')
+      (firstPartyUrl && firstPartyUrl.startsWith('https://www.twitch.tv')) ||
+      (referrer && referrer.startsWith('https://player.twitch.tv'))
     ) &&
     url.startsWith('https://api.mixpanel.com')
   ) {
@@ -397,7 +418,8 @@ const getMethods = () => {
     getMediaData,
     getMediaKey,
     milliseconds,
-    defaultMonthlyAmounts
+    defaultMonthlyAmounts,
+    getMediaFavicon
   }
 
   let privateMethods = {}

app/renderer/components/preferences/payment/ledgerTable.js

@@ -27,6 +27,7 @@ const aboutActions = require('../../../../../js/about/aboutActions')
 const urlUtil = require('../../../../../js/lib/urlutil')
 const {SettingCheckbox, SiteSettingCheckbox} = require('../../common/settings')
 const locale = require('../../../../../js/l10n')
+const ledgerUtil = require('../../../../common/lib/ledgerUtil')
 
 class LedgerTable extends ImmutableComponent {
   get synopsis () {
@@ -153,6 +154,25 @@ class LedgerTable extends ImmutableComponent {
     ]
   }
 
+  getImage (faviconURL, providerName, publisherKey) {
+    if (!faviconURL && providerName) {
+      faviconURL = ledgerUtil.getMediaFavicon(providerName)
+    }
+
+    if (!faviconURL) {
+      return <span className={css(styles.siteData__anchor__icon_default)}>
+        <span className={globalStyles.appIcons.defaultIcon} />
+      </span>
+    }
+
+    return <img
+      className={css(styles.siteData__anchor__icon_favicon)}
+      src={faviconURL}
+      alt=''
+      onError={this.onFaviconError.bind(null, faviconURL, publisherKey)}
+    />
+  }
+
   getRow (synopsis) {
     const faviconURL = synopsis.get('faviconURL')
     const views = synopsis.get('views')
@@ -162,6 +182,7 @@ class LedgerTable extends ImmutableComponent {
     const publisherURL = synopsis.get('publisherURL')
     const percentage = pinned ? this.pinPercentageValue(synopsis) : synopsis.get('percentage')
     const publisherKey = synopsis.get('publisherKey')
+    const providerName = synopsis.get('providerName')
     const siteName = synopsis.get('siteName')
     const defaultAutoInclude = this.enabledForSite(synopsis)
 
@@ -178,11 +199,7 @@ class LedgerTable extends ImmutableComponent {
       {
         html: <div className={css(styles.siteData)}>
           <a className={css(styles.siteData__anchor)} href={publisherURL} rel='noopener' target='_blank' tabIndex={-1}>
-            {
-              faviconURL
-                ? <img className={css(styles.siteData__anchor__icon_favicon)} src={faviconURL} alt='' onError={this.onFaviconError.bind(null, faviconURL, publisherKey)} />
-                : <span className={css(styles.siteData__anchor__icon_default)}><span className={globalStyles.appIcons.defaultIcon} /></span>
-            }
+            { this.getImage(faviconURL, providerName, publisherKey) }
             <span className={css(styles.siteData__anchor__url)} data-test-id='siteName'>{siteName}</span>
           </a>
         </div>,

docs/state.md

@@ -346,6 +346,7 @@ AppStore
       publishers: {
         [publisherId]: {
           duration: number,
+          faviconName: string,
           faviconURL: string,
           options: {
             exclude: boolean,
@@ -355,6 +356,8 @@ AppStore
           },
           pinPercentage: number,
           protocol: string,
+          publisherURL: string,
+          providerName: string,
           scores: {
             concave: number,
             visits: number

test/unit/app/common/lib/ledgerUtilTest.js

@@ -380,7 +380,7 @@ describe('ledgerUtil unit test', function () {
     })
 
     it('unknown type', function () {
-      const result = ledgerUtil.getMediaData({}, 'test')
+      const result = ledgerUtil.getMediaId({}, 'test')
       assert.equal(result, null)
     })