@dpgradio/creative 5.0.0

package/src/api/endpoints/Endpoint.js

@@ -0,0 +1,37 @@
+// eslint-disable-next-line no-unused-vars -- used in JSDoc
+import { Api } from '../api.js'
+// eslint-disable-next-line no-unused-vars -- used in JSDoc
+import Request from '../request.js'
+
+export default class Endpoint {
+  /**
+   * @param {Api} api
+   */
+  constructor(api) {
+    this.api = api
+  }
+
+  /**
+   * Callback for requesting data.
+   *
+   * @callback requestCallback
+   * @param {Request} request
+   * @returns {object}
+   */
+
+  /**
+   * @param {requestCallback} callback
+   * @returns {object}
+   */
+  async requestData(callback, key = 'data') {
+    const response = await callback(this.api.request())
+
+    if (response === null) {
+      throw new Error(`Endpoint returned invalid JSON.`)
+    }
+    if (response[key] === undefined) {
+      throw new Error(`Key '${key}' not found in response: ${JSON.stringify(response)}`)
+    }
+    return response[key]
+  }
+}

package/src/api/endpoints/Members.js

@@ -0,0 +1,7 @@
+import Endpoint from './Endpoint.js'
+
+export default class Members extends Endpoint {
+  async me() {
+    return await this.api.request().get('/members/me')
+  }
+}

package/src/api/request.js

@@ -0,0 +1,100 @@
+import tap from '../utils/tap.js'
+
+export default class Request {
+  constructor(baseUrl, version) {
+    this.baseUrl = baseUrl
+    this.version = version
+    this.queryParameters = {}
+    this.data = null
+    this.headers = {}
+    this.fetchOptions = {}
+  }
+
+  withQueryParameters(queryParameters) {
+    this.queryParameters = { ...this.queryParameters, ...queryParameters }
+
+    return this
+  }
+
+  withData(data) {
+    this.data = { ...(this.data || {}), ...data }
+
+    return this
+  }
+
+  withFetchOptions(fetchOptions) {
+    this.fetchOptions = { ...this.fetchOptions, ...fetchOptions }
+
+    return this
+  }
+
+  withHeader(key, value) {
+    return this.withHeaders({ [key]: value })
+  }
+
+  withHeaders(headers) {
+    this.headers = { ...this.headers, ...headers }
+
+    return this
+  }
+
+  async get(endpoint, parameters = {}) {
+    return await this.withQueryParameters(parameters).fetchJson(endpoint)
+  }
+
+  async post(endpoint, data = {}, parameters = {}) {
+    return await this.withData(data).withQueryParameters(parameters).fetchJson(endpoint, 'POST')
+  }
+
+  async put(endpoint, data = {}, parameters = {}) {
+    return await this.withData(data).withQueryParameters(parameters).fetchJson(endpoint, 'PUT')
+  }
+
+  async patch(endpoint, data = {}, parameters = {}) {
+    return await this.withData(data).withQueryParameters(parameters).fetchJson(endpoint, 'PATCH')
+  }
+
+  async delete(endpoint, data = {}, parameters = {}) {
+    return await this.withData(data).withQueryParameters(parameters).fetchJson(endpoint, 'DELETE')
+  }
+
+  async fetchJson(endpoint, method = 'GET') {
+    const url = this.constructUrl(endpoint)
+
+    this.withHeader('Accept', 'application/json')
+
+    if (this.data !== null) {
+      this.withHeader('Content-Type', 'application/json')
+      this.withFetchOptions({ body: JSON.stringify(this.data) })
+    }
+
+    const response = await fetch(url, {
+      method,
+      headers: this.headers,
+      ...this.fetchOptions,
+    })
+
+    if (!response.ok) {
+      throw new Error(
+        `API request (${method} ${url}) failed: [${response.status}] ${response.statusText}\n\n` +
+          `RESPONSE\n--------\n${await response.text()}`
+      )
+    }
+
+    try {
+      return await response.json()
+    } catch (error) {
+      return null
+    }
+  }
+
+  constructUrl(endpoint) {
+    const baseUrlWithProtocol = this.baseUrl.startsWith('http') ? this.baseUrl : `https://${this.baseUrl}`
+
+    const endpointWithoutSlash = endpoint.replace(/^\/+/, '')
+
+    return tap(new URL(`${baseUrlWithProtocol}/${this.version}/${endpointWithoutSlash}`), (url) => {
+      url.search = new URLSearchParams(this.queryParameters).toString()
+    })
+  }
+}

package/src/app/hybrid.js

@@ -0,0 +1,107 @@
+import jwtDecode from 'jwt-decode'
+
+// Modern versions of the radio apps set up specific User-Agents:
+// Android User-Agent: Qmusic/7.6.1 (nl.qmusic.app; build:21726; Android 11; Sdk:30; Manufacturer:OnePlus; Model: IN2013) OkHttp/ 4.9.1
+// iOS User-Agent: Joe/265 (be.vmma.joe.app; build:1; iOS 14.8.1) Alamofire/265
+const androidRegexp =
+  /^(?<brand>.+)\/(?<storeVersion>[0-9.]+) \((?<buildName>.+); build:(?<buildVersion>\d+); (?<platform>Android) (?<osVersion>\d+); Sdk:(?<sdkVersion>\d+); Manufacturer:(?<manufacturer>.+); Model: (?<model>.+)\)/
+const iOSRegexp =
+  /^(?<brand>.+)\/(?<buildVersion>[0-9.]+) \((?<buildName>.+); build:(?<internalBuildVersion>\d+); (?<platform>iOS) (?<osVersion>\d+\.\d+\.\d+)\)/
+
+class Hybrid {
+  constructor() {
+    // Hook this on window so it can be required in multiple packs
+    window._hybridEventSubscriptions = window._hybridEventSubscriptions || {}
+
+    this.appInfo = this.detectApp(window.appVersion || navigator.userAgent)
+
+    this._cachedRadioTokenOnLoad = undefined
+    this.on('appLoad', (context) => {
+      this._cachedRadioTokenOnLoad = context?.radioToken ?? null
+    })
+  }
+
+  isNativeApp() {
+    return this.appInfo.platform !== 'browser'
+  }
+
+  isVersion({ android, ios }) {
+    const { platform, buildName, buildVersion } = this.appInfo
+
+    return (
+      (platform === 'Android' && android[buildName] && android[buildName] <= parseInt(buildVersion, 10)) ||
+      (platform === 'iOS' && ios <= parseInt(buildVersion, 10))
+    )
+  }
+
+  call(method, options = {}) {
+    if (window.webkit && window.webkit.messageHandlers) {
+      const handler = window.webkit.messageHandlers[method]
+      handler && handler.postMessage(options)
+    } else if (window.Android) {
+      // Note: It's important to either directly call window.Android[method], or bind it with
+      //   const ref = window.android[method].bind(Android)
+      //   ref()
+      // ref: https://bugs.chromium.org/p/chromium/issues/detail?id=514628
+      window.Android[method](JSON.stringify(options))
+    } else {
+      console.error('Call on unsupported device', method, options)
+    }
+  }
+
+  on(method, fn, once = false) {
+    if (!window._hybridEventSubscriptions[method]) {
+      window._hybridEventSubscriptions[method] = []
+    }
+    window._hybridEventSubscriptions[method].push({ fn, once })
+    this.ensureTriggerExists(method)
+  }
+
+  one(method, fn) {
+    this.one(method, fn, true)
+  }
+
+  appLoaded() {
+    return new Promise((resolve, reject) => {
+      if (this._cachedRadioTokenOnLoad !== undefined) {
+        return resolve(this._cachedRadioTokenOnLoad)
+      }
+      this.on('appLoad', (context) => {
+        context?.radioToken ? resolve(context.radioToken) : reject('No radio token provided')
+      })
+    })
+  }
+
+  ensureTriggerExists(method) {
+    if (window[method]) {
+      return
+    }
+
+    window[method] = (args) => {
+      const callbacks = window._hybridEventSubscriptions[method] || []
+      for (const callback of callbacks) {
+        callback.fn(args)
+        if (callback.once) {
+          callback.delete = true // Mark for deletion
+        }
+      }
+      window._hybridEventSubscriptions[method] = callbacks.filter((callback) => !callback.delete) // Delete all marked
+    }
+  }
+
+  detectApp(userAgent) {
+    for (const regexp of [androidRegexp, iOSRegexp]) {
+      const match = userAgent.match(regexp)
+      if (match) {
+        return match.groups
+      }
+    }
+    return { platform: 'browser' }
+  }
+
+  decodeRadioToken(token) {
+    return jwtDecode(token)
+  }
+}
+
+export default new Hybrid()

package/src/config/config.js

@@ -0,0 +1,60 @@
+import api from '../api/api.js'
+
+const dotSyntaxAccess = (object, path) => path.split('.').reduce((o, p) => o[p], object)
+
+class Configuration {
+  constructor() {
+    this.stationId = null
+    this.appId = null
+    this.rawConfig = null
+  }
+
+  setStation(stationId) {
+    this.stationId = stationId
+
+    return this
+  }
+
+  async retrieveConfig(appId, ...stationIds) {
+    this.appId = appId
+    this.stationId = stationIds[0]
+
+    this.rawConfig = await api.global().config.app(appId, stationIds)
+
+    return this
+  }
+
+  config(property = null) {
+    if (!this.rawConfig) {
+      throw new Error('No config retrieved. First use [config.retrieveConfig] to retrieve the configuration.')
+    }
+    if (!this.stationId) {
+      throw new Error('No station set. First use [config.setStation] to set the station.')
+    }
+    if (!this.appId) {
+      throw new Error('No app identifier set. First use [config.retrieveConfig] to retrieve the configuration.')
+    }
+    if (!this.rawConfig[this.stationId]?.[this.appId]) {
+      throw new Error(
+        `No configuration found for station [${this.stationId}] and app [${this.appId}]. Make sure the app is enabled for this station.`
+      )
+    }
+
+    const stationConfig = {
+      ...this.rawConfig[this.stationId],
+      app: this.rawConfig[this.stationId][this.appId],
+    }
+
+    return property ? dotSyntaxAccess(stationConfig, property) : stationConfig
+  }
+
+  async replaceSchema(appId, schema) {
+    await api.global().config.updateSchema(appId, schema)
+  }
+}
+
+const configuration = new Configuration()
+
+export default configuration
+
+export const config = configuration.config.bind(configuration)

package/src/index.js

@@ -0,0 +1,15 @@
+export { default as hybrid } from './app/hybrid'
+
+export { default as privacy } from './privacy/privacy'
+export { default as dataLayer } from './privacy/dataLayer'
+
+export { default as socket } from './socket/socket'
+
+export { default as configuration, config } from './config/config'
+
+export { default as api } from './api/api'
+
+export { default as loadScript } from './utils/loadScript'
+export { default as openLink } from './utils/openLink'
+export { default as tap } from './utils/tap'
+export { cdnImageUrl, cdnUrl } from './utils/cdnUrl'

package/src/privacy/dataLayer.js

@@ -0,0 +1,73 @@
+import hybrid from '../app/hybrid'
+import { config } from '../config/config'
+import loadScript from '../utils/loadScript'
+
+class DataLayer {
+  constructor() {
+    window.dataLayer = window.dataLayer || []
+  }
+
+  initialize(gtmId = 'GTM-TW99VZN') {
+    loadScript(`https://www.googletagmanager.com/gtm.js?id=${gtmId}`)
+
+    this.pushGtmStart()
+    this.pushUserWhenAuthenticated()
+  }
+
+  push(data) {
+    window.dataLayer.push(data)
+  }
+
+  pushGtmStart() {
+    this.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' })
+  }
+
+  pushEvent(event, data) {
+    this.push({ event, ...data })
+  }
+
+  pushUserWhenAuthenticated() {
+    hybrid.on('authenticated', ({ radioToken }) => {
+      if (radioToken) {
+        this.pushEvent('account_id', this._formatUserInformation(radioToken))
+      }
+    })
+  }
+
+  async pushVirtualPageView(brand = config('gtm_brand')) {
+    const user = await this._getUserInformationOnLoad()
+
+    this.pushEvent('VirtualPageView', {
+      virtualPageURL: {
+        ...window.location,
+        platform: 'browser',
+        brand,
+      },
+      ...user,
+    })
+  }
+
+  async _getUserInformationOnLoad() {
+    if (!hybrid.isNativeApp()) {
+      return {}
+    }
+    try {
+      const radioToken = await hybrid.appLoaded()
+      return this._formatUserInformation(radioToken)
+    } catch (error) {
+      console.error('User information could not be loaded:', error)
+      return {}
+    }
+  }
+
+  _formatUserInformation(radioToken) {
+    return {
+      user: {
+        account_id: hybrid.decodeRadioToken(radioToken).uid,
+        loggedIn: true,
+      },
+    }
+  }
+}
+
+export default new DataLayer()

package/src/privacy/privacy.js

@@ -0,0 +1,100 @@
+import { config } from '../config/config'
+import loadScript from '../utils/loadScript'
+
+class Privacy {
+  constructor() {
+    window._privacy = window._privacy || []
+
+    this.consent = undefined
+    this.consentSubscribers = []
+  }
+
+  /**
+   * Load the CMP script asynchronously.
+   *
+   * @param {string}  privacyManagerId   e.g. '148844'
+   * @param {string}  websiteUrl         e.g. 'https://qmusic.nl'
+   * @param {string}  cmpCname           e.g. 'https://cmp.qmusic.nl'
+   */
+  initialize(
+    privacyManagerId = config('privacy_manager_id'),
+    websiteUrl = config('website_url'),
+    cmpCname = config('cmp_cname')
+  ) {
+    window.cmpProperties = {
+      privacyManagerId,
+      cmpCname,
+      baseUrl: websiteUrl,
+      language: 'nl',
+    }
+
+    loadScript('https://myprivacy-static.dpgmedia.net/consent.js')
+
+    this.requestConsentInformation()
+  }
+
+  /**
+   * Request consent information from the CMP.
+   *
+   * This method should be called immediately after loading the page.
+   * The timeout is set to 10 seconds, after which we assume the CMP could not be loaded (potentially blocked by the browser).
+   * In that case, we set the consent to null to indicate that we don't know the consent status.
+   * When {@link waitForConsent} is called, it will immediately resolve with null instead of waiting for its own timeout.
+   *
+   * @param {number} timeoutTime
+   */
+  requestConsentInformation(timeoutTime = 10000) {
+    const timeout = setTimeout(() => {
+      this.consent = null
+      this.consentSubscribers.forEach((subscriber) => subscriber(null))
+    }, timeoutTime)
+
+    this.pushFunctional(() => {
+      clearTimeout(timeout)
+      this.consent = new Consent(window._privacy.consentString, window._privacy.purposesProvider.purposes)
+      this.consentSubscribers.forEach((subscriber) => subscriber(this.consent))
+    })
+  }
+
+  /**
+   * Wait for {@param timeoutTime} milliseconds for consent information to be available.
+   *
+   * @param {number} timeoutTime
+   * @returns {Promise<Consent>}
+   */
+  waitForConsent(timeoutTime = 1000) {
+    return new Promise((resolve, reject) => {
+      if (this.consent) {
+        return resolve(this.consent)
+      }
+      const timeout = setTimeout(() => reject(new Error('Retrieving consent information timed out.')), timeoutTime)
+      this.consentSubscribers.push((consent) => {
+        clearTimeout(timeout)
+        resolve(consent)
+      })
+    })
+  }
+
+  push(type, callback) {
+    window._privacy.push([type, callback])
+  }
+
+  pushFunctional(callback) {
+    this.push('functional', callback)
+  }
+}
+
+const targetedAdvertisingPurposes = [3, 4]
+
+class Consent {
+  constructor(consentString, purposes) {
+    this.consentString = consentString
+    this.purposes = purposes
+  }
+
+  allowsTargetedAdvertising() {
+    return targetedAdvertisingPurposes.every((purpose) => this.purposes.has(purpose.toString()))
+  }
+}
+
+export default new Privacy()

package/src/share/ImageGeneratorProperties.js

@@ -0,0 +1,28 @@
+export default class ImageGeneratorProperties {
+  constructor(url) {
+    this.url = url
+    this.width = 800
+    this.height = 800
+    this.payload = {}
+  }
+
+  withDimensions(width, height) {
+    this.width = width
+    this.height = height
+    return this
+  }
+
+  withPayload(payload) {
+    this.payload = payload
+    return this
+  }
+
+  toJson() {
+    return {
+      url: this.url,
+      width: this.width,
+      height: this.height,
+      payload: this.payload,
+    }
+  }
+}

package/src/share/ShareResult.js

@@ -0,0 +1,33 @@
+import openLink from '../utils/openLink'
+
+export default class ShareResult {
+  constructor(shareable, { url, image }) {
+    this.shareable = shareable
+    this.url = url
+    this.image = image
+  }
+
+  facebookUrl() {
+    return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(this.url)}`
+  }
+
+  whatsappUrl() {
+    return `https://api.whatsapp.com/send?text=${encodeURIComponent(this.shareable.messageText)}%20${this.url}`
+  }
+
+  instagramUrl() {
+    return this.image
+  }
+
+  openFacebookUrl() {
+    openLink(this.facebookUrl())
+  }
+
+  openWhatsappUrl() {
+    openLink(this.whatsappUrl())
+  }
+
+  openInstagramUrl() {
+    openLink(this.instagramUrl())
+  }
+}

package/src/share/Shareable.js

@@ -0,0 +1,55 @@
+import axios from 'axios'
+import ShareResult from './ShareResult'
+
+export default class Shareable {
+  constructor() {
+    this.title = ''
+    this.description = ''
+    this.messageText = ''
+    this.redirectUrl = ''
+    this.domain = ''
+  }
+
+  withTitle(title) {
+    this.title = title
+    return this
+  }
+
+  withDescription(description) {
+    this.description = description
+    return this
+  }
+
+  withMessageText(messageText) {
+    this.messageText = messageText
+    return this
+  }
+
+  redirectTo(redirectUrl) {
+    this.redirectUrl = redirectUrl
+    return this
+  }
+
+  fromDomain(domain) {
+    this.domain = domain
+    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)
+    })
+  }
+}

package/src/share.js

@@ -0,0 +1,5 @@
+import Shareable from './share/Shareable'
+import ImageGeneratorProperties from './share/ImageGeneratorProperties'
+import ShareResult from './share/ShareResult'
+
+export { ShareResult, Shareable, ImageGeneratorProperties }