@dpgradio/creative 5.0.5 → 5.1.1

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.5",
+  "version": "5.1.1",
   "description": "Support package for standalone Javascript applications",
   "main": "src/index.js",
   "scripts": {

package/src/api/endpoints/Config.js

@@ -1,12 +1,14 @@
 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', this.withoutNullValues({ 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}`, this.withoutNullValues({ station_ids: stationIds, domains }))
+    )
   }
 
   async updateSchema(appId, schema) {

package/src/api/endpoints/Endpoint.js

@@ -55,4 +55,8 @@ export default class Endpoint {
 
     return new PaginatedResponse(response, key)
   }
+
+  withoutNullValues(object) {
+    return Object.fromEntries(Object.entries(object).filter(([, value]) => value !== null))
+  }
 }

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);