feat: now-playing widget

src/cards/NowPlayingCard.svelte

+<script lang="ts">
+  import Card, { Content } from '@smui/card'
+  import Button, { Icon, Label } from '@smui/button'
+  import { hasEpisodeTitle } from '../common/Common.svelte'
+  import Display from '../common/Display.svelte'
+  import DateTime from '../common/DateTime.svelte'
+
+  export let episode: { [id: string]: string } = {}
+  export let prefixOnAir: string
+  export let renderhtml: boolean // Attention: to avoid XSS attack vectors use with trusted API sources only
+  export let callbackButton: Function
+</script>
+
+<style lang="scss">
+  /* SMUI components need to be selected via global namespace */
+  :global(.aura-card.media-player-widget .button-play) {
+    width: 100%;
+  }
+  :global(.aura-card.media-player-widget
+      .play-icon-delim
+      .aura-icon-small.icon-play) {
+    background-color: var(--mdc-theme-primary);
+    margin-left: 8px;
+  }
+  :global(.aura-card.media-player-widget .widget-content) {
+    padding: 0;
+  }
+</style>
+
+<template>
+  <Card class="aura-card media-player-widget">
+    <Content class="widget-content">
+      <div id="player-description" class="sr-only">
+        Click the button to open the media player in a popup window.
+      </div>
+      <Button
+        on:click={() => callbackButton()}
+        class="button-play"
+        target="_blank"
+        tabindex={0}
+        aria-label="Play: {episode.note_title}"
+        aria-describedby="player-description">
+        <Label>
+
+          <span class="lead-on-air">
+            {prefixOnAir}
+            <DateTime
+              start={episode.start}
+              end={episode.end}
+              displayTimeOnly={true}
+              displayEnd={true} />
+            <span class="play-icon-delim">
+              <Icon class="aura-icon-small icon-play" />
+            </span>
+          </span>
+
+          <!-- #FIXME show name should be something like "show_name" or "episode.show.name" in API -->
+          {#if episode.name}
+            <span class="episode-show-name">
+              <Display value={episode.name} {renderhtml} />
+            </span>
+            {#if hasEpisodeTitle(episode)}&nbsp;-&nbsp;{/if}
+          {/if}
+          {#if hasEpisodeTitle(episode)}
+            <span class="episode-title">
+              <Display value={episode.note_title} {renderhtml} />
+            </span>
+          {/if}
+
+        </Label>
+      </Button>
+    </Content>
+  </Card>
+</template>

src/components/NowPlayingWidget.svelte

+<script context="module" lang="ts">
+  // declare var auraOpenMediaPlayer: Function
+  declare global {
+    interface Window {
+      auraOpenMediaPlayer?: Function
+    }
+  }
+
+  /* Open the media player popup window */
+  window.auraOpenMediaPlayer = (popupUrl: string, popupSettings: string) => {
+    let player = window.open(popupUrl, 'aura_media_player_popup', popupSettings)
+    console.log('Created player popup', player)
+    if (player) player.focus()
+    else console.log('Error while creating player popup')
+  }
+</script>
+
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import Spinner from '../common/Spinner.svelte'
+  import NowPlayingCard from '../cards/NowPlayingCard.svelte'
+  import { continuousFetch } from '../common/Common.svelte'
+
+  export let api: string = 'https://prog-info.o94.at/api.php'
+  export let endpoint: string = 'current'
+  export let popupUrl: string = '/player_popup.html'
+  export let popupSettings: string =
+    'location=no,height=660,width=344,scrollbars=no,status=no'
+  export let refreshtime: number = 60
+  export let prefixOnAir: string = 'LIVE'
+  export let renderhtml = false // Attention: to avoid XSS attack vectors use with trusted API sources only
+
+  let episode: { [id: string]: string } = {}
+
+  /* Initialize the component */
+  onMount(() => {
+    let url = `${api}/${endpoint}`
+    continuousFetch(url, refreshtime, processResponse)
+  })
+
+  /* Callback to process the API response */
+  function processResponse(data: { [id: string]: string }) {
+    console.log('CurrentShow API Response: ', data)
+    /** #FIXME o94 Specific Workaround **/
+    if (data.name == 'o94 musik') {
+      data.name = 'o94 Musik'
+      // data.note_title = "Random Order";
+    }
+    episode = data
+  }
+
+  /* Call the window function to open media player popup */
+  function popup() {
+    if (window.auraOpenMediaPlayer)
+      window.auraOpenMediaPlayer(popupUrl, popupSettings)
+    else console.log("Error: window has no function 'auraOpenMediaPlayer'")
+  }
+</script>
+
+<style lang="scss">
+
+</style>
+
+<template>
+  {#if episode}
+    <NowPlayingCard
+      {episode}
+      {prefixOnAir}
+      {renderhtml}
+      callbackButton={() => popup()} />
+  {:else}
+    <Spinner />
+  {/if}
+</template>

src/main.ts

@@ -13,6 +13,7 @@ import HostDetail from './components/HostDetail.svelte';
 import HostList from './components/HostList.svelte';
 import MediaPlayer from './components/MediaPlayer.svelte';
 import MediaPlayerButton from './components/MediaPlayerButton.svelte';
+import NowPlayingWidget from './components/NowPlayingWidget.svelte';
 import OnlineStatus from './components/OnlineStatus.svelte';
 import Player from './components/Player.svelte';
 import Programme from './components/Programme.svelte';
@@ -23,9 +24,13 @@ import TrackService from './components/TrackService.svelte';
 /** Inject non web-components into HTML **/
 declare const window: any;
 
+
 window.OnlineStatus = function (options : any) {
     return new OnlineStatus(options);
 };
+window.AuraNowPlayingWidget = function (options : any) {
+    return new NowPlayingWidget(options);
+};
 window.AuraPlayer = function (options : any) {
     return new Player(options);
 };