@dpgradio/creative 7.6.0-beta.2 → 8.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpgradio/creative",
-  "version": "7.6.0-beta.2",
+  "version": "8.1.0",
   "description": "Support package for standalone Javascript applications",
   "main": "src/index.js",
   "scripts": {
@@ -10,7 +10,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/dpgradio/creative.git"
+    "url": "git+https://github.com/dpgradio/creative.git"
   },
   "keywords": [
     "qmusic"

package/src/analytics/dataLayer.js

@@ -5,13 +5,37 @@ import loadScript from '../utils/loadScript.js'
 
 class DataLayer {
   constructor() {
+    if (typeof window === 'undefined') {
+      return
+    }
+
     window.dataLayer = window.dataLayer || []
     this.campaignDetails = {}
     this.userInformation = {}
   }
 
-  initialize(gtmId = 'GTM-TW99VZN') {
-    loadScript(`https://www.googletagmanager.com/gtm.js?id=${gtmId}`)
+  /**
+   * @param {Object} parameters   The parameters object.
+   * @param {string} [parameters.gtmId]   The GTM ID - Defaults to our default GTM tag
+   * @param {string} [parameters.nonce]   The nonce value for the script tag (Used for CSP).
+   */
+  initialize(parameters) {
+    // Backwards compatability
+    if (typeof parameters === 'string') {
+      parameters = { gtmId: parameters }
+
+      // Deprecation warning in development
+      if (process.env.NODE_ENV === 'development') {
+        console.warn(
+          '@dpgmedia/creative',
+          'DEPRECATION WARNING: new Datalayer(gtmId) is deprecated, please use new Datalayer({ gtmId }) instead.'
+        )
+      }
+    }
+
+    const { gtmId = 'GTM-TW99VZN', nonce } = parameters || {}
+
+    loadScript(`https://www.googletagmanager.com/gtm.js?id=${gtmId}`, { nonce })
 
     this.pushGtmStart()
     this.pushUserWhenAuthenticated()

package/src/analytics/mixpanel.js

@@ -1,4 +1,4 @@
-import privacy from '../privacy/privacy'
+import privacy from '../privacy/privacy.js'
 
 class Mixpanel {
   constructor() {
@@ -7,11 +7,11 @@ class Mixpanel {
     this.mixpanel = null
   }
 
-  initialize(Mixpanel, { mixpanelId, track_pageview = true }) {
+  initialize(Mixpanel, { mixpanelId, trackPageview = true }) {
     this.mixpanel = Mixpanel
     privacy.push('analytics', () => {
       this.mixpanel.init(mixpanelId, {
-        track_pageview,
+        track_pageview: trackPageview,
         persistence: 'localStorage',
         api_host: 'https://api-eu.mixpanel.com',
       })
@@ -20,10 +20,12 @@ class Mixpanel {
         const { eventName, properties } = this.trackBacklog.shift()
         this.mixpanel.track(eventName, properties)
       }
+
+      this.trackingEvents = true
     })
   }
 
-  trackEvent(eventName, properties) {
+  pushEvent(eventName, properties) {
     if (this.trackingEvents) {
       this.mixpanel.track(eventName, properties)
     } else {

package/src/api/request.js

@@ -1,5 +1,8 @@
 import tap from '../utils/tap.js'
+import authentication from '../app/authentication.js'
 
+let authenticationRetries = 0
+let tokenRefreshPromise = null
 export default class Request {
   constructor(baseUrl, version, errorHandlers = []) {
     this.baseUrl = baseUrl
@@ -76,6 +79,21 @@ export default class Request {
     })
 
     if (!response.ok) {
+      if (response.status === 401 && authenticationRetries < 2) {
+        if (!tokenRefreshPromise) {
+          tokenRefreshPromise = authentication.refreshToken()
+        }
+
+        try {
+          const newToken = await tokenRefreshPromise
+          authenticationRetries++
+          this.withHeader('Authorization', `Bearer ${newToken}`)
+          return await this.fetchJson(endpoint, method)
+        } finally {
+          tokenRefreshPromise = null
+        }
+      }
+
       this.errorHandlers.forEach((handler) => handler({ response }))
 
       throw new Error(
@@ -84,6 +102,9 @@ export default class Request {
       )
     }
 
+    // reset authentication retries
+    this.authenticationRetries = 0
+
     try {
       return await response.json()
     } catch (error) {

package/src/app/authentication.js

@@ -22,11 +22,14 @@ class Authentication {
   }
 
   initialize() {
-    hybrid.appLoaded().then((radioToken) => {
-      if (radioToken) {
-        this.setToken(radioToken)
-      }
-    })
+    hybrid
+      .appLoaded()
+      .then((radioToken) => {
+        if (radioToken) {
+          this.setToken(radioToken)
+        }
+      })
+      .catch(() => {}) // We don't have to do anything if there is no radio token at app load
     hybrid.on('authenticated', ({ radioToken }) => {
       this.setToken(radioToken)
     })
@@ -110,6 +113,38 @@ class Authentication {
       }
     })
   }
+
+  async refreshToken() {
+    if (hybrid.isNativeApp()) {
+      const updatedToken = Promise.race([
+        new Promise((resolve) => {
+          hybrid.on('authenticated', (token) => resolve(token))
+        }),
+        new Promise((_, reject) => {
+          setTimeout(() => reject(new Error('Timeout: no token received')), 2000)
+        }),
+      ])
+
+      hybrid.call('refreshExpiredToken')
+
+      return (await updatedToken).radioToken
+    } else {
+      try {
+        const response = await fetch('/login/refresh', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        })
+        const token = (await response.json()).radioToken
+        localStorage.setItem(RADIO_TOKEN_LOCAL_STORAGE_KEY, token)
+        return token
+      } catch (e) {
+        localStorage.removeItem(RADIO_TOKEN_LOCAL_STORAGE_KEY)
+        throw e
+      }
+    }
+  }
 }
 
 export default new Authentication()

package/src/app/hybrid.js

@@ -17,6 +17,10 @@ class Hybrid {
   }
 
   constructor() {
+    if (typeof window === 'undefined') {
+      return
+    }
+
     // Hook this on window so it can be required in multiple packs
     window._hybridEventSubscriptions = window._hybridEventSubscriptions || {}
 

package/src/config/config.js

@@ -18,10 +18,10 @@ class Configuration {
   /**
    * Retrieve the configuration for the current hostname or present query parameter and the given app (optional).
    */
-  async retrieveConfigForDetectedStation(appId = null) {
+  async retrieveConfigForDetectedStation(appId = null, { parameterName = 'stationId' } = {}) {
     const parameters = new URLSearchParams(window.location.search)
-    if (parameters.has('stationId')) {
-      return this.retrieveConfigForStation(parameters.get('stationId'), appId)
+    if (parameters.has(parameterName)) {
+      return this.retrieveConfigForStation(parameters.get(parameterName), appId)
     }
     return this.retrieveConfigByHostname(appId)
   }

package/src/privacy/privacy.js

@@ -3,6 +3,10 @@ import loadScript from '../utils/loadScript.js'
 
 class Privacy {
   constructor() {
+    if (typeof window === 'undefined') {
+      return
+    }
+
     window._privacy = window._privacy || []
 
     this.consent = undefined
@@ -15,11 +19,14 @@ class Privacy {
    * @param {string}  privacyManagerId   e.g. '148844'
    * @param {string}  websiteUrl         e.g. 'https://qmusic.nl'
    * @param {string}  cmpCname           e.g. 'https://cmp.qmusic.nl'
+   * @param {Object}  options            Additional options.
+   * @param {string}  [options.nonce]    The nonce value for the script tag (Used for CSP).
    */
   initialize(
     privacyManagerId = config('privacy_manager_id'),
     websiteUrl = config('website_url'),
-    cmpCname = config('cmp_cname')
+    cmpCname = config('cmp_cname'),
+    { nonce = undefined } = {}
   ) {
     window.cmpProperties = {
       privacyManagerId,
@@ -28,7 +35,7 @@ class Privacy {
       language: 'nl',
     }
 
-    loadScript('https://myprivacy-static.dpgmedia.net/consent.js')
+    loadScript('https://myprivacy-static.dpgmedia.net/consent.js', { nonce })
 
     this.requestConsentInformation()
   }
@@ -49,10 +56,39 @@ class Privacy {
       this.consentSubscribers.forEach((subscriber) => subscriber(null))
     }, timeoutTime)
 
-    this.pushFunctional(() => {
-      clearTimeout(timeout)
-      this.consent = new Consent(window._privacy.consentString, window._privacy.purposesProvider.enabledPurposes)
-      this.consentSubscribers.forEach((subscriber) => subscriber(this.consent))
+    this.pushConsentGiven((consentData) => {
+      let updatedConsentData = {
+        consentString: consentData.tcString,
+        purposes: new Set(consentData.dpgConsentString.split('|')),
+      }
+      const iabPurposePromises = []
+
+      // We have 10 IAB purposes, so we create 10 promises that resolve with the purpose number or null if the purpose is not given.
+      for (let i = 1; i < 11; i++) {
+        iabPurposePromises.push(
+          new Promise((resolve) => {
+            this.push(
+              i,
+              () => resolve(i), // Resolve with the purpose number
+              () => resolve(null) // Resolve without a value, indicating that the purpose is not given
+            )
+          })
+        )
+      }
+
+      Promise.all(iabPurposePromises).then((purposeConsents) => {
+        updatedConsentData = purposeConsents.reduce((acc, purpose) => {
+          if (purpose) {
+            acc.purposes.add(purpose)
+          }
+          return acc
+        }, updatedConsentData)
+
+        this.consent = new Consent(updatedConsentData)
+        this.consentSubscribers.forEach((subscriber) => subscriber(this.consent))
+
+        clearTimeout(timeout)
+      })
     })
   }
 
@@ -75,8 +111,12 @@ class Privacy {
     })
   }
 
-  push(type, callback) {
-    window._privacy.push([type, callback])
+  push(type, successCallback, failCallback = () => {}) {
+    window._privacy.push([type, successCallback, failCallback])
+  }
+
+  pushConsentGiven(callback) {
+    this.push('consentgiven', callback)
   }
 
   pushFunctional(callback) {
@@ -84,16 +124,14 @@ class Privacy {
   }
 }
 
-const targetedAdvertisingPurposes = [3, 4]
-
 class Consent {
-  constructor(consentString, purposes) {
-    this.consentString = consentString
-    this.purposes = purposes
+  constructor(consentData) {
+    this.consentString = consentData.consentString
+    this.purposes = consentData.purposes
   }
 
   allowsTargetedAdvertising() {
-    return targetedAdvertisingPurposes.every((purpose) => this.purposes.has(purpose.toString()))
+    return this.purposes.has('targeted_advertising')
   }
 }
 

package/src/share/ShareResult.js

@@ -1,4 +1,4 @@
-import openLink from '../utils/openLink.js'
+import openExternalUrl from '../utils/openExternalUrl.js'
 
 export default class ShareResult {
   constructor(shareable, { url, image }) {
@@ -20,14 +20,14 @@ export default class ShareResult {
   }
 
   openFacebookUrl() {
-    openLink(this.facebookUrl())
+    openExternalUrl(this.facebookUrl())
   }
 
   openWhatsappUrl() {
-    openLink(this.whatsappUrl())
+    openExternalUrl(this.whatsappUrl())
   }
 
   openInstagramUrl() {
-    openLink(this.instagramUrl())
+    openExternalUrl(this.instagramUrl())
   }
 }

package/src/share/Shareable.js

@@ -1,5 +1,3 @@
-// eslint-disable-next-line import/no-unresolved -- TODO: Needs a rewrite to fetch
-import axios from 'axios'
 import ShareResult from './ShareResult.js'
 
 export default class Shareable {
@@ -36,21 +34,21 @@ export default class Shareable {
     return this
   }
 
-  generateUsingImage(imageGeneratorProperties) {
-    return new Promise((resolve, reject) => {
-      axios({
-        url: 'https://dba1du5ckc.execute-api.eu-west-3.amazonaws.com/prod/',
-        method: 'post',
-        data: {
-          title: this.title,
-          description: this.description,
-          image_generator: imageGeneratorProperties.toJson(),
-          redirect_url: this.redirectUrl,
-          domain: this.domain,
-        },
-      })
-        .then((response) => resolve(new ShareResult(this, response.data)))
-        .catch(reject)
+  async generateUsingImage(imageGeneratorProperties) {
+    const response = await fetch('https://dba1du5ckc.execute-api.eu-west-3.amazonaws.com/prod/', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        title: this.title,
+        description: this.description,
+        image_generator: imageGeneratorProperties.toJson(),
+        redirect_url: this.redirectUrl,
+        domain: this.domain,
+      }),
     })
+    const data = await response.json()
+    return new ShareResult(this, data)
   }
 }

package/src/utils/loadScript.js

@@ -1,12 +1,15 @@
 // From: https://github.com/medialaan/radio-radioplayer-frontend/blob/develop/src/general/utils/loadScript.js
 // TODO: Refactor
 
-export default function loadScript(url, { timeout = undefined } = {}) {
+export default function loadScript(url, { timeout = undefined, nonce = undefined } = {}) {
   return new Promise((resolve, reject) => {
     let script = document.createElement('script')
     const firstScript = document.getElementsByTagName('script')[0]
     script.async = true
     script.defer = true
+    if (nonce) {
+      script.nonce = nonce
+    }
 
     const loadScriptTimeout = timeout ? setTimeout(() => reject(`Loading script [${url}] blocked.`), timeout) : null
 

package/styles/colors/qmusic.css

@@ -1,17 +1,13 @@
 :root {
   --q-red: 237 54 36;
-  --q-grey: 61 61 61;
-  --q-teal: 0 191 179;
-  --q-yellow: 249 212 35;
-  --q-purple: 210 110 230;
-  --q-green: 151 215 0;
-  --q-blue: 2 134 255;
+  --q-red-dark: 217 46 32;
 
-  --q-red-dark: 205 34 17;
-  --q-blue-dark: 9 0 134;
+  --q-grey: 61 61 61;
+  --q-grey-light: 230 230 230;
+  --q-grey-dark: 43 43 43;
 
-  --q-blue-light: 91 194 231;
-  --q-teal-light: 184 229 209;
-  --q-grey-light: 249 249 250;
-  --q-purple-light: 244 224 249;
+  --q-green: 168 216 50;
+  --q-yellow: 249 243 197;
+  --q-purple: 252 104 182;
+  --q-blue: 124 186 247;
 }

package/styles/fonts/qmusic.css

@@ -41,8 +41,11 @@
 }
 
 @font-face {
-	font-family: QMarkMyWords;
-	src: url(https://fonts.qmusic.be/qmarkmywords-webfont.ttf), url(https://fonts.qmusic.be/qmarkmywords-webfont.eot), url(https://fonts.qmusic.be/qmarkmywords-webfont.woff), url(https://fonts.qmusic.be/qmarkmywords-webfont.woff2), url(https://fonts.qmusic.be/qmarkmywords-webfont.svg);
-	font-weight: 400;
-	font-style: normal
+	font-family: BlackBones;
+	src: url(https://fonts.qmusic.be/black-bones.ttf), url(https://fonts.qmusic.be/black-bones.eot), url(https://fonts.qmusic.be/black-bones.woff), url(https://fonts.qmusic.be/black-bones.woff2), url(https://fonts.qmusic.be/black-bones.svg);
+   	font-weight: normal;
+	font-style: normal;
+	font-display: fallback;
 }
+
+