@dpgradio/creative 5.0.4 → 5.1.0

package/README.md

@@ -14,8 +14,8 @@ The variables and fonts are no longer available as scss variables/imports.
 Example:
 
 ```css
-@import "q-creative/styles/colors/qmusic";
-@import "q-creative/styles/fonts/qmusic";
+@import "@dpgradio/creative/styles/colors/qmusic";
+@import "@dpgradio/creative/styles/fonts/qmusic";
 
 body, html {
   background-color: rgb(var(--q-teal));
@@ -24,6 +24,12 @@ body, html {
 }
 ```
 
+Use the following to import the colors and fonts of all brands:
+  
+```css
+@import "@dpgradio/creative/styles/all";
+```
+
 ## Config
 
 ### Usage
@@ -34,7 +40,12 @@ The configuration will also be used by other components of this package (e.g. pr
 ```js
 import { configuration } from '@dpgradio/creative'
 
-await configuration.retrieveConfig(appId, stationIdA, stationIdB, stationIdC)
+await configuration.retrieveConfigForDetectedStation(appId) // Default, by hostname or query parameter
+
+// Or, if you want to retrieve the config by hostnames only.
+await configuration.retrieveConfigByHostname(appId)
+// Or, if you want to retrieve the config for a specific station:
+await configuration.retrieveConfigByStation(appId, stationIdA, stationIdB, stationIdC)
 
 // By default the first station ID (stationIdA) is used as the current station of the configuration.
 // If you want to use a different station, you can do so by calling:
@@ -190,7 +201,7 @@ hybrid.decodeRadioToken(radioToken)
 Example:
 
 ```js
-import { Shareable, ImageGeneratorProperties } from 'q-creative/share'
+import { Shareable, ImageGeneratorProperties } from '@dpgradio/creative/share'
 
 const shareable = new Shareable()
   .withTitle(`${this.name} is mijn seventies match!`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpgradio/creative",
-  "version": "5.0.4",
+  "version": "5.1.0",
   "description": "Support package for standalone Javascript applications",
   "main": "src/index.js",
   "scripts": {

package/src/api/PaginatedResponse.js

@@ -0,0 +1,41 @@
+import api from './api'
+
+export default class PaginatedResponse {
+  constructor(response, dataKey = 'data') {
+    this.pagination = response.pagination
+    this.data = response[dataKey]
+    this.dataKey = dataKey
+  }
+
+  async fetchNext() {
+    const response = await api.onVersion(null).request().get(this.pagination.next)
+    this.pagination.next = response.pagination.next
+    this.data = [...this.data, ...response[this.dataKey]]
+
+    return response[this.dataKey]
+  }
+
+  async fetchPrevious() {
+    const response = await api.onVersion(null).request().get(this.pagination.previous)
+    this.pagination.previous = response.pagination.previous
+    this.data = [...response[this.dataKey], ...this.data]
+
+    return response[this.dataKey]
+  }
+
+  async fetchAllNext() {
+    while ((await this.fetchNext()).length > 0) {
+      continue
+    }
+
+    return this.data
+  }
+
+  async fetchAllPrevious() {
+    while ((await this.fetchPrevious()).length > 0) {
+      continue
+    }
+
+    return this.data
+  }
+}

package/src/api/api.js

@@ -69,6 +69,8 @@ export class Api {
 
   clone() {
     return tap(new Api(this.baseUrlOverride, this.version), (api) => {
+      api.apiKey = this.apiKey
+      api.radioToken = this.radioToken
       api.requestModifiers = this.requestModifiers
       api.errorHandlers = this.errorHandlers
     })

package/src/api/endpoints/Config.js

@@ -1,12 +1,12 @@
 import Endpoint from './Endpoint.js'
 
 export default class Config extends Endpoint {
-  async global() {
-    return await this.requestData((r) => r.get('/config'))
+  async global({ stationIds = null, domains = null }) {
+    return await this.requestData((r) => r.get('/config', { station_ids: stationIds, domains }))
   }
 
-  async app(appId, stationIds) {
-    return await this.requestData((r) => r.get(`/config/${appId}`, { station_ids: stationIds }))
+  async app(appId, { stationIds = null, domains = null }) {
+    return await this.requestData((r) => r.get(`/config/${appId}`, { station_ids: stationIds, domains }))
   }
 
   async updateSchema(appId, schema) {

package/src/api/endpoints/Endpoint.js

@@ -2,6 +2,7 @@
 import { Api } from '../api.js'
 // eslint-disable-next-line no-unused-vars -- used in JSDoc
 import Request from '../request.js'
+import PaginatedResponse from '../PaginatedResponse.js'
 
 export default class Endpoint {
   /**
@@ -34,4 +35,24 @@ export default class Endpoint {
     }
     return response[key]
   }
+
+  /**
+   * @param {requestCallback} callback
+   * @returns {PaginatedResponse}
+   */
+  async requestPaginatedData(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)}`)
+    }
+    if (response.pagination === undefined) {
+      throw new Error(`Key 'pagination' not found in response: ${JSON.stringify(response)}`)
+    }
+
+    return new PaginatedResponse(response, key)
+  }
 }

package/src/api/endpoints/Ratings.js

@@ -2,7 +2,7 @@ import Endpoint from './Endpoint.js'
 
 export default class Ratings extends Endpoint {
   async allForMember() {
-    return await this.requestData((r) => r.get('/members/me/ratings'), 'ratings')
+    return await this.requestPaginatedData((r) => r.get('/members/me/ratings'), 'ratings')
   }
 
   async like(selectorCode) {

package/src/api/request.js

@@ -96,8 +96,13 @@ export default class Request {
 
     const endpointWithoutSlash = endpoint.replace(/^\/+/, '')
 
-    return tap(new URL(`${baseUrlWithProtocol}/${this.version}/${endpointWithoutSlash}`), (url) => {
-      url.search = new URLSearchParams(this.queryParameters).toString()
+    const urlParts = [baseUrlWithProtocol, this.version, endpointWithoutSlash].filter(Boolean)
+
+    return tap(new URL(urlParts.join('/')), (url) => {
+      url.search = new URLSearchParams({
+        ...Object.fromEntries(new URLSearchParams(url.search)),
+        ...this.queryParameters,
+      }).toString()
     })
   }
 }

package/src/config/config.js

@@ -15,11 +15,38 @@ class Configuration {
     return this
   }
 
-  async retrieveConfig(appId, ...stationIds) {
+  async retrieveConfigForDetectedStation(appId) {
+    const parameters = new URLSearchParams(window.location.search)
+    if (parameters.has('stationId')) {
+      return this.retrieveConfigForStation(appId, parameters.get('stationId'))
+    }
+    return this.retrieveConfigByHostname(appId)
+  }
+
+  /**
+   * Retrieve the configuration for the given app and the current hostname.
+   */
+  async retrieveConfigByHostname(appId) {
+    this.appId = appId
+
+    // This is not the most robust way to get the hostname without subdomains, e.g. .co.uk domains will break.
+    // However, for the TLDs we use, this should be fine.
+    const hostname = window.location.hostname.split('.').splice(-2).join('.')
+    this.rawConfig = await api.global().config.app(appId, { domains: [hostname] })
+
+    this.stationId = Object.keys(this.rawConfig)[0]
+
+    return this
+  }
+
+  /**
+   * Retrieve the configuration for the given app and the given station(s).
+   */
+  async retrieveConfigForStation(appId, ...stationIds) {
     this.appId = appId
     this.stationId = stationIds[0]
 
-    this.rawConfig = await api.global().config.app(appId, stationIds)
+    this.rawConfig = await api.global().config.app(appId, { stationIds })
 
     return this
   }

package/styles/all.css

@@ -0,0 +1,9 @@
+/* Colors */
+@import url(./colors/joe.css);
+@import url(./colors/qmusic.css);
+@import url(./colors/willy.css);
+
+/* Fonts */
+@import url(./fonts/joe.css);
+@import url(./fonts/qmusic.css);
+@import url(./fonts/willy.css);