Makefile

@@ -82,7 +82,7 @@ dist::
 	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 website integration."
+	@echo "✨ Created vanilla JS and asset bundle for '$(TARGET)' website integration."
 
 run::
 	npm run dev

config/dev-settings.json

 {
-	"appVersion": "__APP_VERSION__",
 	"mediaPlayer": {
 		"popupUrl": "/player_popup.html",
 		"popupSettings": "location=no,height=690,width=344,scrollbars=no,status=no"

config/sample-settings.json

 {
-	"appVersion": "__APP_VERSION__",
 	"mediaPlayer": {
 		"popupUrl": "/player_popup.html",
 		"popupSettings": "location=no,height=690,width=344,scrollbars=no,status=no"

package.json

 {
 	"name": "aura-play",
-	"version": "0.9.0",
+	"version": "0.9.1",
 	"author": {
 		"name": "David Trattnig",
 		"email": "david@subsquare.at",

src/lib/common/Common.svelte

@@ -2,7 +2,8 @@
 	import * as localJsonConfig from '../config/settings.json';
 
 	/* Global settings */
-	export let settings = localJsonConfig;
+	export let settings = Object.assign({}, localJsonConfig);
+	settings.version = __APP_VERSION__;
 
 	/* Encode strings with extended character set */
 	export function encodeUTF8(value) {

src/lib/components/Programme.svelte

@@ -50,7 +50,7 @@
 
 		let apiQuery = `${settings.api.url}/${endpoint}/${date}`;
 		continuousFetch(apiQuery, refreshTime, processResponse);
-		console.log(`Initialized Programme v${settings.appVersion}`);
+		console.log(`Initialized Programme v${settings.version}`);
 	});
 
 	/* Callback to process the API response */

src/lib/components/ShowDetail.svelte

 <script>
-  import { onMount, setContext } from "svelte";
-  import Spinner from "../common/Spinner.svelte";
-  import { settings, fetchApi, formatApiDate } from "../common/Common.svelte";
-  import ShowCardBig from "../cards/ShowCardBig.svelte";
-
-  export let showSlug = undefined;
-  export let expandAllEpisodes = false;
-  export let episodeDaysFuture = 360;
-  export let episodeDaysPast = 180;
-  export let maxFutureEpisodes = 8;
-  export let defaultPastEpisodes = 7;
-
-  export let renderHtml = false;
-  export let displayCatTitle = false;
-  export let displayCatIcons = false;
-  export let displayLangIcons = false;
-  export let labelCurrentEpisodes = "Latest Episodes";
-  export let labelCurrentNone = "No current episodes";
-  export let labelAllEpisodes = "All Episodes";
-  export let labelShowMore = undefined;
-  export let labelWebsite = "Website";
-  export let urlHostDetail = undefined;
-  export let urlEpisodeDetail = undefined;
-  export let urlShowList = undefined;
-  export let radioEpoch = new Date("1998-08-17");
-
-  setContext("show", {
-    renderHtml: renderHtml,
-  });
-  setContext("host", {
-    renderHtml: renderHtml,
-  });
-  setContext("episode", {
-    renderHtml: renderHtml,
-  });
-
-  let endpointShow = settings.api.endpoints.show;
-  let endpointEpisode = settings.api.endpoints.episode;
-  let tmp_show; // FIXME Workaround for current API limitations: It's not possible to fetch everything in one request (see below)
-  let show;
-  let episodes;
-  let episodesNext;
-  let labelEpisodes;
-  let hasMoreEpisodes = true;
-
-  // #TODO AURA API - The API to fetch episodes is currently based on dates, the requested features are based on counts
-  // @see https://gitlab.servus.at/aura/steering/-/issues/97
-
-  /* Fetch more epsisodes for show */
-  function eventShowMore() {
-    let fromDate = radioEpoch;
-    fromDate = formatApiDate(fromDate);
-    let toDate = formatApiDate(new Date());
-    let baseUrl = `${settings.api.url}/${endpointShow}/${tmp_show.id}/${endpointEpisode}`;
-    let episodeUrl = `${baseUrl}?&withNote&start=${fromDate}&end=${toDate}`;
-    fetchApi(episodeUrl, processMoreEpisodes);
-  }
-
-  /* Initialize the component */
-  onMount(() => {
-    labelEpisodes = labelCurrentEpisodes;
-
-    let url = new URL(window.location.href);
-    let urlSlug = url.searchParams.get("slug");
-    if (urlSlug) showSlug = urlSlug;
-    let showUrl = `${settings.api.url}/${endpointShow}/${showSlug}?withHostDetails=true`;
-    console.log("Show API Url:" + showUrl);
-
-    /** No limitation: always list all episodes e.g. for special programme */
-    if (expandAllEpisodes) {
-      defaultPastEpisodes = 999;
-      maxFutureEpisodes = 999;
-      episodeDaysPast = 500;
-      episodeDaysFuture = 500;
-    }
-
-    fetchApi(showUrl, processShowResponse);
-  });
-
-  /* Callback to process the API response */
-  function processShowResponse(data) {
-    tmp_show = data;
-    console.log("Shows API response:", data);
-
-    fetchEpisodes();
-  }
-
-  /** Load the initial Episodes from the API */
-  function fetchEpisodes() {
-    // Fetch some episodes from the past and the future
-    let pastDate = new Date();
-    pastDate.setDate(pastDate.getDate() - episodeDaysPast);
-    let futureDate = new Date();
-    futureDate.setDate(futureDate.getDate() + episodeDaysFuture);
-
-    pastDate = formatApiDate(pastDate);
-    futureDate = formatApiDate(futureDate);
-    let baseUrl = `${settings.api.url}/${endpointShow}/${tmp_show.id}/${endpointEpisode}`;
-    let episodeUrl = `${baseUrl}?&withNote&start=${pastDate}&end=${futureDate}`;
-    fetchApi(episodeUrl, processEpisodesResponse);
-  }
-
-  /** Process the API Episode results **/
-  function processEpisodesResponse(data) {
-    if (data && data.error) {
-      console.log("Error while loading episodes:", data.error);
-      // TODO This is a valid result - The final Aura API schould not return an error,
-      // but 0 records only
-      // @see https://gitlab.servus.at/aura/steering/-/issues/97
-      if (data.error.includes("No timeslots found")) {
-        console.log(
-          "No records for given timeframe, maybe there are past ones"
-        );
-        hasMoreEpisodes = true;
-      } else {
-        hasMoreEpisodes = false;
-      }
-      show = tmp_show;
-      return;
-    }
-
-    // Extract (n) future episodes, collect (m) past and current episodes
-    let past = [];
-    let next = [];
-    let gotCurrent = false;
-    for (let episode of data) {
-      if (new Date(episode.end) > new Date()) {
-        if (!gotCurrent) {
-          // Mark the current, next episode
-          episode["isCurrent"] = true;
-          gotCurrent = true;
-          past.push(episode);
-        } else {
-          next.push(episode);
-        }
-      } else {
-        past.push(episode);
-      }
-    }
-
-    // #TODO The episodes should be provided ordered ascending by the API already (define order upon request)
-    if (past != null && Array.isArray(past)) past = past.reverse();
-    past = past.slice(0, defaultPastEpisodes);
-    episodes = past;
-    console.log("Base episodes of show API response:", data);
-    episodesNext = next.slice(0, maxFutureEpisodes).reverse();
-    console.log("Next (n) episodes of show API response:", data);
-
-    show = tmp_show;
-
-    /** No limitation: always list all episodes e.g. for special programme */
-    if (expandAllEpisodes) {
-      eventShowMore();
-    }
-  }
-
-  /** Process the API Episodes results when "Load More" was initiated */
-  function processMoreEpisodes(data) {
-    if (data && data.error) {
-      // #FIXME API should handle 0 records not as an error / this case should compare for 0 records
-      // @see https://gitlab.servus.at/aura/steering/-/issues/97
-      hasMoreEpisodes = false;
-      data = [];
-    }
-    // #TODO The episodes should be provided ordered ascending by the API already (Ability to sort)
-    // @see https://gitlab.servus.at/aura/steering/-/issues/97
-    if (data != null && Array.isArray(data)) data = data.reverse();
-
-    if (episodes && Array.isArray(episodes)) {
-      if (episodes.length > 0) data.unshift(episodes[0]);
-    }
-    if (episodesNext) episodes = episodesNext.concat(data);
-    else episodes = data;
-    labelEpisodes = labelAllEpisodes;
-    hasMoreEpisodes = false;
-    console.log("More episodes of show API response:", data);
-    show = tmp_show;
-  }
+	import { onMount, setContext } from 'svelte';
+	import Spinner from '../common/Spinner.svelte';
+	import { settings, fetchApi, formatApiDate } from '../common/Common.svelte';
+	import ShowCardBig from '../cards/ShowCardBig.svelte';
+
+	export let showSlug = undefined;
+	export let expandAllEpisodes = false;
+	export let episodeDaysFuture = 360;
+	export let episodeDaysPast = 180;
+	export let maxFutureEpisodes = 8;
+	export let defaultPastEpisodes = 7;
+
+	export let renderHtml = false;
+	export let displayCatTitle = false;
+	export let displayCatIcons = false;
+	export let displayLangIcons = false;
+	export let labelCurrentEpisodes = 'Latest Episodes';
+	export let labelCurrentNone = 'No current episodes';
+	export let labelAllEpisodes = 'All Episodes';
+	export let labelShowMore = undefined;
+	export let labelWebsite = 'Website';
+	export let urlHostDetail = undefined;
+	export let urlEpisodeDetail = undefined;
+	export let urlShowList = undefined;
+	export let radioEpoch = new Date('1998-08-17');
+
+	setContext('show', {
+		renderHtml: renderHtml
+	});
+	setContext('host', {
+		renderHtml: renderHtml
+	});
+	setContext('episode', {
+		renderHtml: renderHtml
+	});
+
+	let endpointShow = settings.api.endpoints.show;
+	let endpointEpisode = settings.api.endpoints.episode;
+	let tmp_show; // FIXME Workaround for current API limitations: It's not possible to fetch everything in one request (see below)
+	let show;
+	let episodes;
+	let episodesNext;
+	let labelEpisodes;
+	let hasMoreEpisodes = true;
+
+	// #TODO AURA API - The API to fetch episodes is currently based on dates, the requested features are based on counts
+	// @see https://gitlab.servus.at/aura/steering/-/issues/97
+
+	/* Fetch more epsisodes for show */
+	function eventShowMore() {
+		let fromDate = radioEpoch;
+		fromDate = formatApiDate(fromDate);
+		let toDate = formatApiDate(new Date());
+		let baseUrl = `${settings.api.url}/${endpointShow}/${tmp_show.id}/${endpointEpisode}`;
+		let episodeUrl = `${baseUrl}?&withNote&start=${fromDate}&end=${toDate}`;
+		fetchApi(episodeUrl, processMoreEpisodes);
+	}
+
+	/* Initialize the component */
+	onMount(() => {
+		labelEpisodes = labelCurrentEpisodes;
+
+		let url = new URL(window.location.href);
+		let urlSlug = url.searchParams.get('slug');
+		if (urlSlug) showSlug = urlSlug;
+		let showUrl = `${settings.api.url}/${endpointShow}/${showSlug}?withHostDetails=true`;
+		console.log('Show API Url:' + showUrl);
+
+		/** No limitation: always list all episodes e.g. for special programme */
+		if (expandAllEpisodes) {
+			defaultPastEpisodes = 999;
+			maxFutureEpisodes = 999;
+			episodeDaysPast = 500;
+			episodeDaysFuture = 500;
+		}
+
+		fetchApi(showUrl, processShowResponse);
+		console.log(`Initialized Programme v${settings.version}`);
+	});
+
+	/* Callback to process the API response */
+	function processShowResponse(data) {
+		tmp_show = data;
+		console.log('Shows API response:', data);
+
+		fetchEpisodes();
+	}
+
+	/** Load the initial Episodes from the API */
+	function fetchEpisodes() {
+		// Fetch some episodes from the past and the future
+		let pastDate = new Date();
+		pastDate.setDate(pastDate.getDate() - episodeDaysPast);
+		let futureDate = new Date();
+		futureDate.setDate(futureDate.getDate() + episodeDaysFuture);
+
+		pastDate = formatApiDate(pastDate);
+		futureDate = formatApiDate(futureDate);
+		let baseUrl = `${settings.api.url}/${endpointShow}/${tmp_show.id}/${endpointEpisode}`;
+		let episodeUrl = `${baseUrl}?&withNote&start=${pastDate}&end=${futureDate}`;
+		fetchApi(episodeUrl, processEpisodesResponse);
+	}
+
+	/** Process the API Episode results **/
+	function processEpisodesResponse(data) {
+		if (data && data.error) {
+			console.log('Error while loading episodes:', data.error);
+			// TODO This is a valid result - The final Aura API schould not return an error,
+			// but 0 records only
+			// @see https://gitlab.servus.at/aura/steering/-/issues/97
+			if (data.error.includes('No timeslots found')) {
+				console.log('No records for given timeframe, maybe there are past ones');
+				hasMoreEpisodes = true;
+			} else {
+				hasMoreEpisodes = false;
+			}
+			show = tmp_show;
+			return;
+		}
+
+		// Extract (n) future episodes, collect (m) past and current episodes
+		let past = [];
+		let next = [];
+		let gotCurrent = false;
+		for (let episode of data) {
+			if (new Date(episode.end) > new Date()) {
+				if (!gotCurrent) {
+					// Mark the current, next episode
+					episode['isCurrent'] = true;
+					gotCurrent = true;
+					past.push(episode);
+				} else {
+					next.push(episode);
+				}
+			} else {
+				past.push(episode);
+			}
+		}
+
+		// #TODO The episodes should be provided ordered ascending by the API already (define order upon request)
+		if (past != null && Array.isArray(past)) past = past.reverse();
+		past = past.slice(0, defaultPastEpisodes);
+		episodes = past;
+		console.log('Base episodes of show API response:', data);
+		episodesNext = next.slice(0, maxFutureEpisodes).reverse();
+		console.log('Next (n) episodes of show API response:', data);
+
+		show = tmp_show;
+
+		/** No limitation: always list all episodes e.g. for special programme */
+		if (expandAllEpisodes) {
+			eventShowMore();
+		}
+	}
+
+	/** Process the API Episodes results when "Load More" was initiated */
+	function processMoreEpisodes(data) {
+		if (data && data.error) {
+			// #FIXME API should handle 0 records not as an error / this case should compare for 0 records
+			// @see https://gitlab.servus.at/aura/steering/-/issues/97
+			hasMoreEpisodes = false;
+			data = [];
+		}
+		// #TODO The episodes should be provided ordered ascending by the API already (Ability to sort)
+		// @see https://gitlab.servus.at/aura/steering/-/issues/97
+		if (data != null && Array.isArray(data)) data = data.reverse();
+
+		if (episodes && Array.isArray(episodes)) {
+			if (episodes.length > 0) data.unshift(episodes[0]);
+		}
+		if (episodesNext) episodes = episodesNext.concat(data);
+		else episodes = data;
+		labelEpisodes = labelAllEpisodes;
+		hasMoreEpisodes = false;
+		console.log('More episodes of show API response:', data);
+		show = tmp_show;
+	}
 </script>
 
 <div class="card-container detail">
-  {#if show}
-    <ShowCardBig
-      {show}
-      {episodes}
-      {urlEpisodeDetail}
-      {urlHostDetail}
-      {urlShowList}
-      {labelEpisodes}
-      {labelCurrentNone}
-      {labelShowMore}
-      {labelWebsite}
-      {hasMoreEpisodes}
-      {displayCatTitle}
-      {displayCatIcons}
-      {displayLangIcons}
-      on:showMore={eventShowMore}
-    />
-  {:else}
-    <Spinner />
-  {/if}
+	{#if show}
+		<ShowCardBig
+			{show}
+			{episodes}
+			{urlEpisodeDetail}
+			{urlHostDetail}
+			{urlShowList}
+			{labelEpisodes}
+			{labelCurrentNone}
+			{labelShowMore}
+			{labelWebsite}
+			{hasMoreEpisodes}
+			{displayCatTitle}
+			{displayCatIcons}
+			{displayLangIcons}
+			on:showMore={eventShowMore}
+		/>
+	{:else}
+		<Spinner />
+	{/if}
 </div>
 
 <style lang="scss">

src/lib/components/TrackService.svelte

@@ -11,7 +11,7 @@
 	/* Initialize the component */
 	onMount(() => {
 		fetchApi(settings.api.url + '/' + settings.api.endpoints.trackservice, processResponse);
-		console.log(`Initialized TrackService v${settings.appVersion}`);
+		console.log(`Initialized TrackService v${settings.version}`);
 	});
 
 	/* Callback to process the API response */

src/routes/+page.svelte

 <script>
+	import { settings } from '$lib/common/Common.svelte';
 	import OnlineStatus from '$lib/components/OnlineStatus.svelte';
 </script>
 
@@ -36,3 +37,12 @@
 <aura-service-worker></aura-service-worker>
 
 <OnlineStatus onlinetext="You are back online." offlinetext="You have no connection." />
+
+<footer>AURA Play v{settings.version}</footer>
+
+<style>
+	footer {
+		font-size: 0.9em;
+		padding: 8px;
+	}
+</style>

static/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
+	"/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",
+	"/",
+	"/?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"
+]

static/service-worker.js

 let OFFLINE_URL = '/offline.html'; // Match your offline page URL
-let PRE_CACHE = 'pre-cache-v15'; // Manually update version or generate one server-site
+let PRE_CACHE = 'pre-cache-v16'; // Manually update version or generate one server-site
 let PRE_CACHE_URL = '/pre-cache.json'; // Match your pre-cache URL
 let RUNTIME_CACHE = 'runtime-cache';
 let EXCLUDE_CACHE = ['/admin/', 'https://securestream.o94.at/live.mp3'];
@@ -65,17 +65,13 @@ self.addEventListener('fetch', (event) => {
 
 	// URLs requested by the user.
 	// Cache Strategy: Network-first, auto-add to runtime cache, fallback to pre-cache, fallback to offline page
-	// Skip HTTP requests and chrome extensions
+	// Skip chrome extensions
 	if (event.request.mode === 'navigate') {
 		event.respondWith(
 			fetch(event.request)
 				.then((response) => {
 					return caches.open(RUNTIME_CACHE).then((cache) => {
-						if (
-							event.request.method == 'GET' &&
-							!event.request.url.startsWith('http') &&
-							!event.request.url.startsWith('chrome-extension')
-						)
+						if (event.request.method == 'GET' && !event.request.url.startsWith('chrome-extension'))
 							cache.put(event.request, response.clone());
 						return response;
 					});
@@ -103,17 +99,13 @@ self.addEventListener('fetch', (event) => {
 
 	// URLs requested by page contents or API requests
 	// Cache Strategy: Network-first, auto-add to runtime cache, fallback to pre-cache
-	// Skip HTTP requests and chrome extensions
+	// Skip chrome extensions
 	else {
 		event.respondWith(
 			fetch(event.request)
 				.then((response) => {
 					return caches.open(RUNTIME_CACHE).then((cache) => {
-						if (
-							event.request.method == 'GET' &&
-							!event.request.url.startsWith('http') &&
-							!event.request.url.startsWith('chrome-extension')
-						)
+						if (event.request.method == 'GET' && !event.request.url.startsWith('chrome-extension'))
 							cache.put(event.request, response.clone());
 						return response;
 					});

vite.config.js

 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vitest/config';
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+
+const file = fileURLToPath(new URL('package.json', import.meta.url));
+const json = readFileSync(file, 'utf8');
+const pkg = JSON.parse(json);
 
 export default defineConfig({
+	define: {
+		__APP_VERSION__: JSON.stringify(pkg.version)
+	},
 	plugins: [
 		sveltekit({})
 

vite.js.config.js

@@ -4,8 +4,17 @@
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { defineConfig } from 'vite';
 import { resolve } from 'path';
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+
+const file = fileURLToPath(new URL('package.json', import.meta.url));
+const json = readFileSync(file, 'utf8');
+const pkg = JSON.parse(json);
 
 export default defineConfig({
+	define: {
+		__APP_VERSION__: JSON.stringify(pkg.version)
+	},
 	build: {
 		lib: {
 			entry: resolve(__dirname, 'dist/index.js'),