Compare revisions

David Trattnig · David Trattnig · David Trattnig · David Trattnig · David Trattnig · David Trattnig
--- a/.gitignore
+++ b/.gitignore
-/node_modules/
-/public/build/
-/dist
+node_modules
+
+# Output
+/*.backup
+.output
+.vercel
 /.hypothesis
+/.svelte-kit
+/build
+/dist
+/dist-js
+/static/dist-js
+/bundle
+
+# OS
 .DS_Store
-sync.sh
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+# Config
 /config/settings.json
-/config/*.settings.json
\ No newline at end of file
+/config/*.settings.json
+
+# Integration
+sync.sh
\ No newline at end of file
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
-image: node:16.17-buster
+image: node:20.11-buster

 stages:
  # - test
@@ -90,7 +90,7 @@ deploy-play-demo:
    - lftp -c "set ftp:ssl-allow no; open -u $FTP_AURA_RADIO_USER,$FTP_AURA_RADIO_PWD $FTP_AURA_RADIO_HOST; mirror -Rnev ./public/ ./play.aura.radio --ignore-time --parallel=10 --exclude-glob .git* --exclude .git/"
    - echo "AURA Play Demo successfully deployed."
  dependencies:
-  - do_build
+    - do_build
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
      when: always
@@ -104,11 +104,10 @@ deploy-play-proxy:
    - lftp -c "set ftp:ssl-allow no; open -u $FTP_AURA_RADIO_USER,$FTP_AURA_RADIO_PWD $FTP_AURA_RADIO_HOST; mirror -Rnev ./contrib/cba-api-proxy/ ./cba.aura.radio --ignore-time --parallel=10 --exclude-glob .git* --exclude .git/"
    - echo "AURA Play CBA API Proxy successfully deployed."
  dependencies:
-  - do_build
+    - do_build
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
      when: always
-
 # release_job:
 #   stage: release
 #   needs:

--- a/.husky/pre-commit
+++ b/.husky/pre-commit
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"

-make lint
+# make lint
--- a/.npmrc
+++ b/.npmrc
+engine-strict=true
--- a/.prettierignore
+++ b/.prettierignore
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
--- a/.prettierrc
+++ b/.prettierrc
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}
--- a/Makefile
+++ b/Makefile
-include build/base.Makefile
-include build/docker.Makefile
+-include script/build/base.Makefile
+-include script/build/docker.Makefile

 help::
 	@echo "$(APP_NAME) targets:"
@@ -9,7 +9,7 @@ help::
 	@echo "    spell           - check spelling of text"
 	@echo "    clean           - clean artifacts"
 	@echo "    build           - build a production bundle"
-	@echo "    dist            - create a dist package"
+	@echo "    dist            - create a dist and js bundle package"
 	@echo "    run             - start app in development mode"
 	@echo "    start           - start app with sirv server (public)"
 	$(call docker_help)
@@ -46,7 +46,11 @@ spell::

 clean::
 	rm -rf dist
-	mkdir -p dist/assets
+	rm -rf dist-js
+	rm -rf static/dist-js
+	rm -rf bundle
+	mkdir -p static/dist-js
+	mkdir -p bundle/assets

 build:: TARGET:=dev
 build::
@@ -55,16 +59,30 @@ build::
 	npm run build
 	cp config/.backup.settings.json config/settings.json

+build-js::
+	npm run build-js
+
 dist::clean
 dist::build
+dist::build-js
 dist::
-	cp public/service-worker.js dist
-	cp public/manifest.json dist
-	cp public/build/smui-dark.css dist
-	cp public/build/smui.css dist
-	cp public/build/aura-play-bundle.* dist
-	cp public/assets/*.svg dist/assets
-	rm dist/assets/aura_fav.svg
+	@echo "Built svelte & vanilla JS components"
+	mv dist-js/lib/components.js dist-js/lib/aura-play-components.js
+	mv dist-js/lib/components.umd.cjs dist-js/lib/aura-play-components.umd.cjs
+	cp -r dist-js/* static/dist-js
+	@echo "✨ Stored vanilla JS demo build in 'static/dist-js'!"
+	@echo
+
+	@echo "Create bundle..."
+	cp static/service-worker.js bundle
+	cp static/manifest.json bundle
+	cp static/assets/*.svg bundle/assets
+	cp static/css/smui-dark.css bundle
+	cp static/css/smui.css bundle
+	cp dist-js/style.css bundle/aura-play.css
+	cp -r dist-js/lib bundle
+	rm bundle/assets/aura_fav.svg
+	@echo "✨ Created vanilla JS and asset bundle for '$(TARGET)' website integration."

 run::
 	npm run dev

--- a/README.md
+++ b/README.md
@@ -12,13 +12,13 @@ Some of the components are provided as true [HTML 5 Web Components](https://en.w

 Component features:

- [Cards Design Pattern](https://www.justinmind.com/blog/cards-ui-design/)
- Based on [Material Design](https://material.io/), more specifically [SMUI](https://sveltematerialui.com/)
- [Responsive Design](https://en.wikipedia.org/wiki/Responsive_web_design), supporting a wide variety of mobile and desktop devices
- Solid foundation for [accessibility](https://material.io/design/usability/accessibility.html#understanding-accessibility) requirements
+- [Cards Design Pattern](https://www.justinmind.com/blog/cards-ui-design/).
+- Based on [Material Design](https://material.io/), more specifically [SMUI](https://sveltematerialui.com/).
+- [Responsive Design](https://en.wikipedia.org/wiki/Responsive_web_design), supporting a wide variety of mobile and desktop devices.
+- Solid foundation for [accessibility](https://material.io/design/usability/accessibility.html#understanding-accessibility) requirements.
 - Themeable and stylable, including dark themes.
- [TypeScript](https://www.typescriptlang.org/) support
- [SCSS](https://sass-lang.com/) support
+- [JSDoc](https://jsdoc.app/) support, including TypeScript types.
+- [SCSS](https://sass-lang.com/) support.

 Provided components:

@@ -36,38 +36,37 @@ Provided components:

 <!-- TOC -->

-1. [AURA Play](#aura-play)
-   1. [Website Integration](#website-integration)
-   2. [Components](#components)
-      1. [Media Player](#media-player)
-      2. [Media Player Button](#media-player-button)
-      3. [Now Playing Widget](#now-playing-widget)
-      4. [Programme Information](#programme-information)
-      5. [Track Service](#track-service)
-      6. [Online Status (Toast Notification)](#online-status-toast-notification)
-      7. [Host](#host)
-         1. [Host List Component](#host-list-component)
-         2. [Host Detail Component](#host-detail-component)
-      8. [Show](#show)
-         1. [Show List Component](#show-list-component)
-         2. [Show Detail Component](#show-detail-component)
-      9. [Episode](#episode)
-         1. [Episode Detail Component](#episode-detail-component)
-      10. [Category](#category)
-          1. [Category List Component](#category-list-component)
-   3. [Progressive Web App](#progressive-web-app)
-      1. [Service Worker](#service-worker)
-      2. [Manifest](#manifest)
-      3. [Offline mode](#offline-mode)
-         1. [Offline mode with cached pages](#offline-mode-with-cached-pages)
-         2. [Offline mode with `offline.html`](#offline-mode-with-offlinehtml)
-   4. [Development](#development)
-      1. [Requirements](#requirements)
-      2. [Install](#install)
-      3. [Run](#run)
-   5. [Production](#production)
-2. [License](#license)
-3. [Read more](#read-more)
+1. [Website Integration](#website-integration)
+2. [Components](#components)
+   1. [Media Player](#media-player)
+   2. [Media Player Button](#media-player-button)
+   3. [Now Playing Widget](#now-playing-widget)
+   4. [Programme Information](#programme-information)
+   5. [Track Service](#track-service)
+   6. [Online Status (Toast Notification)](#online-status-toast-notification)
+   7. [Host](#host)
+      1. [Host List Component](#host-list-component)
+      2. [Host Detail Component](#host-detail-component)
+   8. [Show](#show)
+      1. [Show List Component](#show-list-component)
+      2. [Show Detail Component](#show-detail-component)
+   9. [Episode](#episode)
+      1. [Episode Detail Component](#episode-detail-component)
+   10. [Category](#category)
+       1. [Category List Component](#category-list-component)
+3. [Progressive Web App](#progressive-web-app)
+   1. [Service Worker](#service-worker)
+   2. [Manifest](#manifest)
+   3. [Offline mode](#offline-mode)
+      1. [Offline mode with cached pages](#offline-mode-with-cached-pages)
+      2. [Offline mode with `offline.html`](#offline-mode-with-offlinehtml)
+4. [Development](#development)
+   1. [Requirements](#requirements)
+   2. [Install](#install)
+   3. [Run](#run)
+5. [Production](#production)
+6. [License](#license)
+7. [Read more](#read-more)

 <!-- /TOC -->

@@ -371,7 +370,7 @@ This repository also provides a sample app, allowing you to test the PWA beforeh

 ### Service Worker

-A production-ready Service Worker with offline functionality can be found under `public/service-worker.js`. Copy the Service worker to your web server and modify at least following variables:
+A production-ready Service Worker with offline functionality can be found under `static/service-worker.js`. Copy the Service worker to your web server and modify at least following variables:

 ```javascript
 let OFFLINE_URL = '/offline.html' // Match your offline page URL
@@ -401,7 +400,7 @@ The Service Worker is based on a network-first strategy:

 ### Manifest

-A sample Web Manifest is located in `public/manifest.json`. Copy this file to your web server and modify it according to your needs.
+A sample Web Manifest is located in `static/manifest.json`. Copy this file to your web server and modify it according to your needs.

 ### Offline mode

@@ -422,7 +421,7 @@ Perform following steps to verify the pre-cache to be working:
 To test the pages where the offline page is served as a fallback, do following:

 1. Start the development server and visit the start page. Do not visit the `/online.html` page yet, to avoid being cached in the runtime cache.
-2. Now the Service Worker is installed, pages in `public/pre-cache.json` plus `public/offline.html` are pre-cached.
+2. Now the Service Worker is installed, pages in `static/pre-cache.json` plus `static/offline.html` are pre-cached.
 3. Stop the development server, but do not close the start page.
 4. Visit the URL `/online.html` via the link on the start page. Since this document is not stored in the cache, the default `/offline.html` will be returned.

@@ -474,17 +473,17 @@ Now include the bundle in your theme, template, dependency management system or

 1. Copy the artifacts `aura-play-bundle.js` and `aura-play-bundle.css` to your website assets. For pre-defined Material Design styles also grab `smui.css` and `smui-dark.css`.
 2. Instantiate required components, as described in the [Components](#Components) section above.
-3. Style the components using CSS. You can use the provided demo `public/aura-play-theme.css` as a starter.
+3. Style the components using CSS. You can use the provided demo `static/aura-play-theme.css` as a starter.

 In the future we may provide explicit support NPM installation and for SvelteKit integration.

-# License
+## License

 - Source code is licensed under [GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3)](LICENSE).
 - The project icons and logos are by Martin Lasinger and licensed under [Creative Commons BY-NC-SA v3.0](https://creativecommons.org/licenses/by-nc-sa/3.0/).
 - Component icons are from [Material Design Icons](https://materialdesignicons.com/) and licensed under [Pictogrammers Free License](https://github.com/Templarian/MaterialDesign/blob/master/LICENSE).

-# Read more
+## Read more

 - [docs.aura.radio](https://docs.aura.radio)
 - [aura.radio](https://aura.radio)
--- a/config/dev-settings.json
+++ b/config/dev-settings.json
 {
-    "appVersion": "__APP_VERSION__",
-    "mediaPlayer": {
-        "popupUrl": "/player_popup.html",
-        "popupSettings": "location=no,height=632,width=344,scrollbars=no,status=no"
-    },
-    "api": {
-        "url": "https://prog-info.o94.at/api.php",
-        "endpoints": {
-            "host": "hosts",
-            "show": "shows",
-            "episode": "timeslots",
-            "category": "categories",
-            "programmeCurrent": "current",
-            "programmeToday": "today",
-            "programmeDaily": "daily",
-            "trackservice": "trackservice"
-        },
-        "pollRefresh": 5
-    },
-    "cba": {
-        "allowedDomains": [
-            "https://cba.media/",
-            "https://cba.fro.at/",
-            "https://cba.o94.at/"
-        ],
-        "api": {
-            "url": "https://cba.aura.radio/",
-            "key": "Z5dBO91ktM1-hFQu",
-            "endpoints": {
-                "media": "media"
-            }
-        },
-        "embed": "/embed?audio&q=1&waveform=false&title=false&socialmedia=true"
-    }
-}
\ No newline at end of file
+	"mediaPlayer": {
+		"popupUrl": "/player_popup.html",
+		"popupSettings": "location=no,height=690,width=344,scrollbars=no,status=no"
+	},
+	"api": {
+		"url": "https://prog-info.o94.at/api.php",
+		"endpoints": {
+			"host": "hosts",
+			"show": "shows",
+			"episode": "timeslots",
+			"category": "categories",
+			"programmeCurrent": "current",
+			"programmeToday": "today",
+			"programmeDaily": "daily",
+			"trackservice": "trackservice"
+		},
+		"pollRefresh": 5
+	},
+	"cba": {
+		"allowedDomains": ["https://cba.media/", "https://cba.fro.at/", "https://cba.o94.at/"],
+		"api": {
+			"url": "https://cba.aura.radio/",
+			"key": "Z5dBO91ktM1-hFQu",
+			"endpoints": {
+				"media": "media"
+			}
+		},
+		"embed": "/embed?audio&q=1&waveform=false&title=false&socialmedia=true"
+	}
+}
--- a/config/sample-settings.json
+++ b/config/sample-settings.json
 {
-    "appVersion": "__APP_VERSION__",
-    "mediaPlayer": {
-        "popupUrl": "/player_popup.html",
-        "popupSettings": "location=no,height=632,width=344,scrollbars=no,status=no"
-    },
-    "api": {
-        "url": "--your-aura-api-base-url",
-        "endpoints": {
-            "host": "hosts",
-            "show": "shows",
-            "episode": "timeslots",
-            "category": "categories",
-            "programmeCurrent": "current",
-            "programmeToday": "today",
-            "programmeDaily": "daily",
-            "trackservice": "trackservice"
-        },
-        "pollRefresh": 5
-    },
-    "cba": {
-        "allowedDomains": [
-            "https://cba.media/",
-            "https://cba.fro.at/",
-            "https://cba.o94.at/"
-        ],
-        "api": {
-            "url": "https://cba.your-radio-domain.at/wp-json/wp/v2",
-            "key": "--your-api-key--",
-            "endpoints": {
-                "media": "media"
-            }
-        },
-        "embed": "/embed?audio&q=1&waveform=false&title=false&socialmedia=true"
-    }
-}
\ No newline at end of file
+	"mediaPlayer": {
+		"popupUrl": "/player_popup.html",
+		"popupSettings": "location=no,height=690,width=344,scrollbars=no,status=no"
+	},
+	"api": {
+		"url": "--your-aura-api-base-url",
+		"endpoints": {
+			"host": "hosts",
+			"show": "shows",
+			"episode": "timeslots",
+			"category": "categories",
+			"programmeCurrent": "current",
+			"programmeToday": "today",
+			"programmeDaily": "daily",
+			"trackservice": "trackservice"
+		},
+		"pollRefresh": 5
+	},
+	"cba": {
+		"allowedDomains": ["https://cba.media/", "https://cba.fro.at/", "https://cba.o94.at/"],
+		"api": {
+			"url": "https://cba.your-radio-domain.at/wp-json/wp/v2",
+			"key": "--your-api-key--",
+			"endpoints": {
+				"media": "media"
+			}
+		},
+		"embed": "/embed?audio&q=1&waveform=false&title=false&socialmedia=true"
+	}
+}
--- a/contrib/cba-api-proxy/media.php
+++ b/contrib/cba-api-proxy/media.php
@@ -28,6 +28,9 @@ $allowed_origins = [
    'http://localhost:5000',
    'http://127.0.0.1:5000',
    'http://0.0.0.0:5000',
+    'http://localhost:5173',
+    'http://127.0.0.1:5173',
+    'http://0.0.0.0:5173',
    'http://o94.home',
    'https://www-dev.o94.at',
    'https://o94.at',
@@ -57,4 +60,3 @@ $response = curl_exec($c);
 curl_close($c);

 echo $response;
-?>
--- a/eslint.config.js
+++ b/eslint.config.js
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import prettier from 'eslint-config-prettier';
+import globals from 'globals';
+
+/** @type {import('eslint').Linter.FlatConfig[]} */
+export default [
+	js.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/']
+	}
+];
--- a/jsconfig.json
+++ b/jsconfig.json
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"module": "NodeNext",
+		"moduleResolution": "NodeNext"
+	}
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
 {
-  "name": "aura-play",
-  "type": "module",
-  "version": "0.9.0",
-  "author": {
-    "name": "David Trattnig",
-    "email": "david.trattnig@subsquare.at",
-    "url": "https://subsquare.at"
-  },
-  "license": "AGPL-3.0-only",
-  "homepage": "https://aura.radio",
-  "repository": {
-    "type": "git",
-    "url": "git@gitlab.servus.at:aura/play.git"
-  },
-  "scripts": {
-    "prepare": "npx husky install && npm run smui-theme-light && npm run smui-theme-dark",
-    "smui-theme-light": "smui-theme compile public/build/smui.css -i src/theme",
-    "smui-theme-dark": "smui-theme compile public/build/smui-dark.css -i src/theme/dark",
-    "spell": "npx cspell -c cspell.json **/*.{txt,js,ts,md}",
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
-    "start": "sirv public --no-clear --host"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^17.0.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^11.0.0",
-    "@rollup/plugin-typescript": "^8.3.0",
-    "@smui/button": "^6.1.0",
-    "@smui/card": "^6.1.0",
-    "@smui/ripple": "^6.1.0",
-    "@tsconfig/svelte": "^2.0.1",
-    "@zerodevx/svelte-toast": "^0.6.1",
-    "amplitudejs": "^5.3.2",
-    "husky": "^8.0.1",
-    "node-sass": "^6.0.1",
-    "postcss-import": "^14.0.2",
-    "rollup": "^2.3.4",
-    "rollup-plugin-css-only": "^3.1.0",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-postcss": "^4.0.1",
-    "rollup-plugin-svelte": "^7.0.0",
-    "rollup-plugin-terser": "^7.0.0",
-    "sass": "^1.43.3",
-    "smui-theme": "^6.1.0",
-    "svelte": "^3.0.0",
-    "svelte-check": "^2.7.0",
-    "svelte-material-ui": "^6.0.0-beta.15",
-    "svelte-preprocess": "^4.10.6",
-    "tslib": "^2.3.1",
-    "typescript": "^4.6.4"
-  },
-  "dependencies": {
-    "@rollup/plugin-replace": "^4.0.0",
-    "rollup-plugin-delete": "^2.0.0",
-    "sirv-cli": "^1.0.0"
-  }
+	"name": "aura-play",
+	"version": "0.9.1",
+	"author": {
+		"name": "David Trattnig",
+		"email": "david@subsquare.at",
+		"url": "https://subsquare.at"
+	},
+	"license": "AGPL-3.0-only",
+	"homepage": "https://aura.radio",
+	"repository": {
+		"type": "git",
+		"url": "git@gitlab.servus.at:aura/play.git"
+	},
+	"scripts": {
+		"build": "vite build && npm run package",
+		"build-js": "vite build --config vite.js.config.js && npm run package",
+		"dev": "vite dev",
+		"preview": "vite preview",
+		"start": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+		"test": "npm run test:integration && npm run test:unit",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
+		"test:integration": "playwright test",
+		"test:unit": "vitest",
+		"prepare": "npx husky install && npm run smui-theme-light && npm run smui-theme-dark",
+		"smui-theme-light": "smui-theme compile static/css/smui.css -i src/theme",
+		"smui-theme-dark": "smui-theme compile static/css/smui-dark.css -i src/theme/dark",
+		"spell": "npx cspell -c cspell.json **/*.{txt,js,ts,md}"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.28.1",
+		"@smui/button": "^7.0.0",
+		"@smui/card": "^7.0.0",
+		"@smui/ripple": "^7.0.0",
+		"@sveltejs/adapter-static": "^3.0.2",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@types/eslint": "^8.56.7",
+		"@zerodevx/svelte-toast": "^0.9.5",
+		"amplitudejs": "^5.3.2",
+		"eslint": "^9.0.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
+		"husky": "^8.0.1",
+		"postcss-import": "^14.0.2",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"publint": "^0.1.9",
+		"sass": "^1.77.8",
+		"smui-theme": "^7.0.0",
+		"svelte": "^4.2.7",
+		"svelte-check": "^3.6.0",
+		"svelte-material-ui": "^7.0.0",
+		"svelte-preprocess": "^5.0.3",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.11",
+		"vitest": "^1.2.0"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module"
 }
--- a/playwright.config.js
+++ b/playwright.config.js
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+const config = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	},
+	testDir: 'tests',
+	testMatch: /(.+\.)?(test|spec)\.[jt]s/
+};
+
+export default config;
--- a/public/aura-play-theme.css
+++ b/public/aura-play-theme.css
-
-/** MATERIAL DESIGN SETTINGS **/
-
-/* Theme colors. */
-:root {
-    --mdc-theme-primary: #40b3ff;
-    --mdc-theme-secondary: #676778;
-    --mdc-theme-background: #fff;
-    --mdc-theme-surface: #eee;
-    --mdc-theme-error: #b71c1c;
-    --mdc-theme-on-primary: #fff;
-    --mdc-theme-on-secondary: #fff;
-    --mdc-theme-on-surface: #000;
-    --mdc-theme-on-error: #fff;
-    --mdc-theme-text-primary-on-background: rgba(0, 0, 0, 0.87);
-    --mdc-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);
-    --mdc-theme-text-hint-on-background: rgba(0, 0, 0, 0.38);
-    --mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);
-    --mdc-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);
-    --mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
-    --mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
-    --mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
-    --mdc-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);
-    --mdc-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
-    --mdc-theme-text-primary-on-dark: #fff;
-    --mdc-theme-text-secondary-on-dark: hsla(0, 0%, 100%, 0.7);
-    --mdc-theme-text-hint-on-dark: hsla(0, 0%, 100%, 0.5);
-    --mdc-theme-text-disabled-on-dark: hsla(0, 0%, 100%, 0.5);
-    --mdc-theme-text-icon-on-dark: hsla(0, 0%, 100%, 0.5);
-  }
-
-  /* Layout grid spacing. */
-  :root {
-    --mdc-layout-grid-margin-desktop: 24px;
-    --mdc-layout-grid-gutter-desktop: 24px;
-    --mdc-layout-grid-column-width-desktop: 72px;
-    --mdc-layout-grid-margin-tablet: 16px;
-    --mdc-layout-grid-gutter-tablet: 16px;
-    --mdc-layout-grid-column-width-tablet: 72px;
-    --mdc-layout-grid-margin-phone: 16px;
-    --mdc-layout-grid-gutter-phone: 16px;
-    --mdc-layout-grid-column-width-phone: 72px;
-  }
-
-
-/** AURA ICONS **/
-
-.aura-icons > div {
-  background-image: url(assets/aura-logo.png);
-  background-size: 70px;
-  background-position: center -5px;
-}
-.aura-icon.cba {
-  background-image: url("https://cba.media/wp-content/themes/cba2020/images/cba_logo.svg");
-  color: transparent;
-}
-
-/** RESPONSIVE SETTINGS **/
-
-/* Custom, iPhone Retina */
-@media only screen and (min-width : 320px) {
-  .card-container .aura-card h1 {
-    font-size: 1.3rem;
-  }
-  .card-container .aura-card h2 {
-    font-size: 1.2rem;
-  }
-  .card-container .aura-card h3 {
-    font-size: 1.0rem;
-  }
-  .card-container .aura-card h4 {
-    font-size: 0.9rem;
-  }
-  .heading.subtitle {
-    font-size: 1.2rem;
-  }
-}
-
-/* Extra Small Devices, Phones */
-@media only screen and (min-width : 480px) {
-}
-
-/* Small Devices, Tablets */
-@media only screen and (min-width : 768px) {
-  .card-container .aura-card h1 {
-    font-size: 1.8rem;
-  }
-  .card-container .aura-card h2 {
-    font-size: 1.5rem;
-  }
-  .card-container .aura-card h3 {
-    font-size: 1.3rem;
-  }
-  .card-container .aura-card h4 {
-    font-size: 1.2rem;
-  }
-  .heading.subtitle {
-    font-size: 1.5rem;
-  }
-  .card-container.list .aura-card.category {
-    width: 400px;
-  }
-  .card-container.list:not(.contained) .aura-card.show {
-    width: calc(50% - 32px);
-  }
-  .card-container.detail .aura-card.show .show-image {
-    width: 320px;
-    height: 180px;
-  }
-  .card-container.list:not(.contained) .aura-card.host {
-    width: 280px;
-    height: 280px;
-  }
-}
-
-/* Medium Devices, Desktops */
-@media only screen and (min-width : 992px) {
-}
-
-/* Large Devices, Wide Screens */
-@media only screen and (min-width : 1200px) {
-}
\ No newline at end of file
--- a/public/deprecated-player.html
+++ b/public/deprecated-player.html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-
-    <title>AURA Play Bundle</title>
-
-    <link rel="shortcut icon" href="/assets/aura_fav96x96.png" />
-    <link rel="manifest" href="/manifest.json" />
-    <meta name="description" content="AURA PWA and Web Component Demo" />
-    <meta name="theme-color" content="#2196f3" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-    <meta name="apple-mobile-web-app-title" content="AURA PWA" />
-    <link rel="stylesheet" href="/aura-demo.css" />
-
-    <link rel="stylesheet" href="/build/smui.css" />
-    <link rel="stylesheet" href="/build/aura-play-bundle.css" />
-    <link rel="stylesheet" href="/aura-play-theme.css" />
-    <script defer src="/build/aura-play-bundle.js"></script>
-  </head>
-  <style></style>
-
-  <body>
-    <div id="common-area">
-      <a href="/">
-        <img id="aura-logo" src="/assets/aura-logo.png" width="128" />
-      </a>
-      <h1>Player Component</h1>
-      <p></p>
-    </div>
-
-    <aura-service-worker></aura-service-worker>
-
-    <div id="aura-player" class="component-container"></div>
-    <script>
-      /** Inject component into HTML **/
-      document.addEventListener('DOMContentLoaded', function (event) {
-        new AuraPlayer({
-          target: document.getElementById('aura-player'),
-          props: {
-            renderHtml: true,
-            liveurl: 'https://o94.at/de/player/live',
-          },
-        })
-      })
-    </script>
-  </body>
-</html>
--- a/public/index.html
+++ b/public/index.html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-
-    <title>AURA Play Bundle</title>
-
-    <link rel="shortcut icon" href="/assets/aura_fav96x96.png" />
-    <link rel="manifest" href="/manifest.json" />
-    <meta name="description" content="AURA PWA and Web Component Demo" />
-    <meta name="theme-color" content="#2196f3" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-    <meta name="apple-mobile-web-app-title" content="AURA PWA" />
-    <link rel="stylesheet" href="/aura-demo.css" />
-
-    <link rel="stylesheet" href="/build/smui.css" />
-    <link rel="stylesheet" href="/build/aura-play-bundle.css" />
-    <link rel="stylesheet" href="/aura-play-theme.css" />
-    <script defer src="/build/aura-play-bundle.js"></script>
-  </head>
-  <style></style>
-
-  <body>
-    <div id="common-area">
-      <a href="/">
-        <img id="aura-logo" src="/assets/aura-logo.png" width="128" />
-      </a>
-      <h1>AURA Play Components</h1>
-      <p>
-        This is a minimal PWA to illustrate and test the AURA Play components.
-        It also provides a production-ready Service Worker with offline
-        functionality (network-first strategy) to be integrated on your website.
-      </p>
-      <ul class="aura-demo-menu">
-        <li><a href="/online.html">Am I online or offline?</a></li>
-        <li><a href="/player.html">Media Player Component</a></li>
-        <li><a href="/player.html">Media Player Button Component</a></li>
-        <li><a href="/player.html">Now Playing Widget Component</a></li>
-        <li><a href="/host-list.html">Host List Component</a></li>
-        <li><a href="/host-detail.html">Host Detail Component</a></li>
-        <li><a href="/show-list.html">Show List Component</a></li>
-        <li><a href="/show-detail.html">Show Detail Component</a></li>
-        <li><a href="/episode-detail.html">Episode Detail Component</a></li>
-        <li>
-          <a href="/programme-cards.html">Programme Component (Card View)</a>
-        </li>
-        <li>
-          <a href="/programme-paper.html">Programme Component (Paper View)</a>
-        </li>
-        <li><a href="/trackservice.html">TrackService Component</a></li>
-        <li><a href="/category-list.html">Category List Component</a></li>
-        <li>
-          <a href="/deprecated-player.html">
-            Deprecated: Old o94 player popup button
-          </a>
-        </li>
-      </ul>
-    </div>
-
-    <aura-service-worker></aura-service-worker>
-
-    <div id="online-status-container" class="component-container"></div>
-    <script>
-      /** Inject component into HTML **/
-      document.addEventListener('DOMContentLoaded', function (event) {
-        new OnlineStatus({
-          target: document.getElementById('online-status-container'),
-          props: {
-            onlinetext: 'You are back online.',
-            offlinetext: 'You have no connection.',
-          },
-        })
-      })
-    </script>
-  </body>
-</html>
--- a/public/pre-cache.json
+++ b/public/pre-cache.json
-[
-    "/manifest.json",
-    "/assets/aura_fav96x96.png",
-    "/assets/aura-logo.png",
-    "/build/aura-play-bundle.js",
-    "/build/aura-play-bundle.css",
-    "/aura-demo.css",
-    "/aura-play-theme.css",
-    "/",
-    "/index.html",
-    "/index.html?homescreen=1",
-    "/?homescreen=1",
-    "/player.html",
-    "/programme-cards.html",
-    "/programme-paper.html",
-    "/category-list.html",
-    "/episode-detail.html",
-    "/host-detail.html",
-    "/host-list.html",
-    "/show-detail.html",
-    "/show-list.html",
-    "/trackservice.html"
-]
\ No newline at end of file
No results found