@dpgradio/creative 5.0.0

package/src/socket/SocketConnection.js

@@ -0,0 +1,169 @@
+import SockJS from 'sockjs-client/dist/sockjs'
+
+export default class SocketConnection {
+  constructor(host, options) {
+    this.host = host
+    this.options = options
+
+    this.lastId = 0
+    this.subscriptions = {}
+    this.authData = []
+    this.messages = []
+    this.lastAttempt = 1
+    this.reconnecting = false
+
+    this.connect()
+  }
+
+  connect() {
+    this.socket = new SockJS(this.host)
+
+    this.socket.onopen = () => {
+      this.log('Connected')
+
+      // Reset lastAttempt counter
+      this.lastAttempt = 1
+
+      if (this.reconnecting) {
+        this._reauthenticate()
+        this._resubscribeSubscriptions()
+      }
+
+      this.reconnecting = false
+      this.flushMessages()
+    }
+
+    this.socket.onmessage = (event) => {
+      this.log('>>>', event.data)
+
+      try {
+        const message = JSON.parse(event.data)
+        this.processMessage(message)
+      } catch (e) {
+        this.log('Failed to parse server response', event.data)
+        return
+      }
+    }
+
+    this.socket.onclose = (event) => {
+      this.log(`Disconnected ${event.code}`, event)
+
+      // This is a technical issue, try again
+      if ([1000, 1001, 1002, 1003, 1004, 1005, 1006, 2000].includes(event.code)) {
+        this.reconnecting = true
+        setTimeout(() => {
+          this.connect()
+        }, this.lastAttempt * 1000)
+
+        this.lastAttempt *= 2
+        if (this.lastAttempt > this.options.maxRetryTimeout) {
+          this.lastAttempt = this.options.maxRetryTimeout
+        }
+      }
+    }
+  }
+
+  processMessage(message) {
+    if (message.action !== 'data') {
+      return
+    }
+    const payload = JSON.parse(message.data)
+
+    // Contribute internal ID
+    payload._push_id = message.key || null
+
+    for (const n of message.ids) {
+      try {
+        const callback = this.subscriptions[n]?.callback
+
+        callback(payload.data, payload)
+      } catch (error) {
+        this.log(error)
+
+        if (!this.options.catchErrors) {
+          throw error
+        }
+      }
+    }
+  }
+
+  flushMessages() {
+    if (this.isConnected()) {
+      for (const msg of this.messages) {
+        this.send(...msg)
+      }
+      this.messages = []
+    }
+  }
+
+  isConnected() {
+    return this.socket.readyState === 1
+  }
+
+  send(...args) {
+    if (this.isConnected()) {
+      this.log('<<<', ...args)
+      this.socket.send(args)
+    } else {
+      this.messages.push(args)
+    }
+  }
+
+  log(...args) {
+    if (this.options.debug) {
+      console?.log(...args)
+    }
+  }
+
+  _registerSubscription(subscription) {
+    const subscriptionId = this.lastId++
+
+    this.subscriptions[subscriptionId] = subscription
+
+    this._sendSubscription(subscription, subscriptionId)
+
+    return subscriptionId
+  }
+
+  _registerAuthentication(authentication) {
+    this.authData.push(authentication)
+
+    this._sendAuthentication(authentication)
+  }
+
+  _unregister(id) {
+    delete this.subscriptions[id]
+  }
+
+  _sendSubscription(subscription, id) {
+    const msg = {
+      action: 'join',
+      id,
+      sub: subscription.sub,
+    }
+
+    if (subscription.backlog) {
+      msg.backlog = subscription.backlog
+    }
+
+    this.send(JSON.stringify(msg))
+  }
+
+  _sendAuthentication(params) {
+    const msg = { action: 'authenticate', ...params }
+
+    this.send(JSON.stringify(msg))
+  }
+
+  _resubscribeSubscriptions() {
+    for (const [id, subscription] of Object.entries(this.subscriptions)) {
+      this._sendSubscription({ sub: subscription.sub }, id)
+    }
+  }
+
+  _reauthenticate() {
+    for (const auth of this.authData) {
+      this._sendAuthentication(auth)
+    }
+  }
+}

package/src/socket/SocketStation.js

@@ -0,0 +1,16 @@
+import SocketSubscription from './SocketSubscription'
+
+export default class SocketStation {
+  constructor(connection, station) {
+    this.connection = connection
+    this.station = station
+  }
+
+  subscribe(entity) {
+    return new SocketSubscription(this.connection, this.station, entity)
+  }
+
+  authenticate(method, authParams) {
+    this.connection._registerAuthentication({ station: this.station, method, ...authParams })
+  }
+}

package/src/socket/SocketSubscription.js

@@ -0,0 +1,47 @@
+export default class SocketSubscription {
+  constructor(connection, station, entity) {
+    this.connection = connection
+    this.station = station
+    this.entity = entity
+
+    this.callbacks = {}
+  }
+
+  subscribe(entity) {
+    this.connection.subscribe(entity)
+  }
+
+  listen(callback, options = {}) {
+    this.on(null, callback, options)
+
+    return this
+  }
+
+  on(action, callback, options = {}) {
+    const id = this.connection._registerSubscription({
+      sub: {
+        station: this.station,
+        entity: this.entity,
+        action,
+        scope: options.scope,
+      },
+      callback,
+      backlog: options.backlog,
+    })
+
+    this.callbacks[action] = id
+
+    return this
+  }
+
+  off(action) {
+    const id = this.callbacks[action]
+    this.connection._unregister(id)
+  }
+
+  unsubscribe() {
+    for (const id of Object.values(this.callbacks)) {
+      this.connection._unregister(id)
+    }
+  }
+}

package/src/socket/socket.js

@@ -0,0 +1,36 @@
+import SocketConnection from './SocketConnection'
+import SocketStation from './SocketStation'
+
+// This is a JS rewrite of [https://github.com/medialaan/radio-sockets-server/blob/master/dist/q.coffee] with some minor additional functionality.
+class Socket {
+  constructor() {
+    this.connections = {}
+  }
+
+  connect(station, host = 'https://socket.qmusic.be/api', options = {}) {
+    const connectionOptions = {
+      debug: false,
+      catchErrors: false,
+      maxRetryTimeout: 10,
+      ...options,
+    }
+
+    if (!this.connections[host]) {
+      this.connections[host] = new SocketConnection(host, connectionOptions)
+    }
+
+    return new SocketStation(this.connections[host], station)
+  }
+
+  /**
+   * Shortcut for subscribing to an entity action.
+   *
+   * Instead of `socket.connect('station').subscribe('entity').on('action', () => { ... })`
+   * you can use `socket.join({ station: 'station', entity: 'entity', action: 'action' }, () => { ... })`.
+   */
+  join({ station, entity, action, options = {} }, callback) {
+    return this.connect(station).subscribe(entity).on(action, callback, options)
+  }
+}
+
+export default new Socket()

package/src/utils/cdnUrl.js

@@ -0,0 +1,12 @@
+const baseUrl = 'https://cdn-radio.dpgmedia.net'
+
+export const cdnImageUrl = (endpoint, size = 'w480') => {
+  if (!endpoint) {
+    return null
+  }
+  return `${baseUrl}/site/${size}/${endpoint}`
+}
+
+export const cdnUrl = (endpoint) => {
+  return `${baseUrl}/${endpoint}`
+}

package/src/utils/loadScript.js

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

package/src/utils/openLink.js

@@ -0,0 +1,14 @@
+import hybrid from '../app/hybrid'
+
+export default function openLink(url) {
+  const chromeAgent = navigator.userAgent.indexOf('Chrome') > -1
+  const safariAgent = chromeAgent ? false : navigator.userAgent.indexOf('Safari') > -1
+
+  if (hybrid.isNativeApp()) {
+    hybrid.call('navigateTo', { url, inApp: false })
+  } else if (!safariAgent) {
+    window.open(url)
+  } else {
+    window.location = url
+  }
+}

package/src/utils/tap.js

@@ -0,0 +1,10 @@
+/**
+ * @template T
+ * @param {T} value
+ * @param {function(T): void} callback
+ * @returns {T}
+ */
+export default function tap(value, callback) {
+  callback(value)
+  return value
+}

package/styles/colors/joe.css

@@ -0,0 +1,19 @@
+:root {
+  --joe-lime: 206 220 0;
+
+  --joe-purple: 150 4 99;
+  --joe-purple-dark: 92 29 84;
+  --joe-purple-light: 220 50 130;
+
+  --joe-green: 3 112 108;
+  --joe-green-dark: 9 76 89;
+  --joe-green-light: 20 160 140;
+
+  --joe-red: 186 22 52;
+  --joe-red-dark: 154 23 54;
+  --joe-red-light: 240 40 70;
+
+  --joe-blue: 7 77 163;
+  --joe-blue-dark: 44 45 119;
+  --joe-blue-light: 0 130 220;
+}

package/styles/colors/qmusic.css

@@ -0,0 +1,17 @@
+: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: 205 34 17;
+  --q-blue-dark: 9 0 134;
+
+  --q-blue-light: 91 194 231;
+  --q-teal-light: 184 229 209;
+  --q-grey-light: 249 249 250;
+  --q-purple-light: 244 224 249;
+}

package/styles/fonts/joe.css

@@ -0,0 +1,34 @@
+@font-face {
+	font-family: geomanist;
+	src: url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-light-webfont.eot), url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-light-webfont.woff), url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-light-webfont.woff2);
+	font-weight: 200;
+	font-style: normal
+}
+
+@font-face {
+	font-family: geomanist;
+	src: url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-book-webfont.eot), url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-book-webfont.woff), url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-book-webfont.woff2);
+	font-weight: 300;
+	font-style: normal
+}
+
+@font-face {
+	font-family: geomanist;
+	src: url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-regular-webfont.eot), url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-regular-webfont.woff), url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-regular-webfont.woff2);
+	font-weight: 400;
+	font-style: normal
+}
+
+@font-face {
+	font-family: geomanist;
+	src: url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-medium-webfont.eot), url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-medium-webfont.woff), url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-medium-webfont.woff2);
+	font-weight: 500;
+	font-style: normal
+}
+
+@font-face {
+	font-family: geomanist;
+	src: url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-bold-webfont.eot), url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-bold-webfont.woff), url(https://static1.qmusic.medialaancdn.be/store/static/fonts/geomanist-bold-webfont.woff2);
+	font-weight: 600;
+	font-style: normal
+}

package/styles/fonts/qmusic.css

@@ -0,0 +1,48 @@
+@font-face {
+	font-family: Cervo;
+	src: url(https://fonts.qmusic.be/cervo-light-webfont.ttf), url(https://fonts.qmusic.be/cervo-light-webfont.eot), url(https://fonts.qmusic.be/cervo-light-webfont.woff), url(https://fonts.qmusic.be/cervo-light-webfont.woff2), url(https://fonts.qmusic.be/cervo-light-webfont.svg);
+	font-weight: 400;
+	font-style: normal
+}
+
+@font-face {
+	font-family: Cervo;
+	src: url(https://fonts.qmusic.be/cervo-medium-webfont.ttf), url(https://fonts.qmusic.be/cervo-medium-webfont.eot), url(https://fonts.qmusic.be/cervo-medium-webfont.woff), url(https://fonts.qmusic.be/cervo-medium-webfont.woff2), url(https://fonts.qmusic.be/cervo-medium-webfont.svg);
+	font-weight: 600;
+	font-style: normal
+}
+
+@font-face {
+	font-family: Qarla;
+	src: url(https://fonts.qmusic.be/qarla-bold-webfont.ttf), url(https://fonts.qmusic.be/qarla-bold-webfont.eot), url(https://fonts.qmusic.be/qarla-bold-webfont.woff), url(https://fonts.qmusic.be/qarla-bold-webfont.woff2), url(https://fonts.qmusic.be/qarla-bold-webfont.svg);
+	font-weight: 700;
+	font-style: normal
+}
+
+@font-face {
+	font-family: Qarla;
+	src: url(https://fonts.qmusic.be/qarla-bolditalic-webfont.ttf), url(https://fonts.qmusic.be/qarla-bolditalic-webfont.eot), url(https://fonts.qmusic.be/qarla-bolditalic-webfont.woff), url(https://fonts.qmusic.be/qarla-bolditalic-webfont.woff2), url(https://fonts.qmusic.be/qarla-bolditalic-webfont.svg);
+	font-weight: 700;
+	font-style: italic
+}
+
+@font-face {
+	font-family: Qarla;
+	src: url(https://fonts.qmusic.be/qarla-italic-webfont.ttf), url(https://fonts.qmusic.be/qarla-italic-webfont.eot), url(https://fonts.qmusic.be/qarla-italic-webfont.woff), url(https://fonts.qmusic.be/qarla-italic-webfont.woff2), url(https://fonts.qmusic.be/qarla-italic-webfont.svg);
+	font-weight: 400;
+	font-style: italic
+}
+
+@font-face {
+	font-family: Qarla;
+	src: url(https://fonts.qmusic.be/qarla-regular-webfont.ttf), url(https://fonts.qmusic.be/qarla-regular-webfont.eot), url(https://fonts.qmusic.be/qarla-regular-webfont.woff), url(https://fonts.qmusic.be/qarla-regular-webfont.woff2), url(https://fonts.qmusic.be/qarla-regular-webfont.svg);
+	font-weight: 400;
+	font-style: normal
+}
+
+@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
+}

package/styles/fonts/willy.css

@@ -0,0 +1,2 @@
+@import url("https://fonts.googleapis.com/css2?family=Anton&family=Mulish:ital,wght@0,400;0,700;1,400;1,700&display=swap");
+@import url("https://use.typekit.net/ijq2qjl.css");