AURA
play

Repository

<div id="media-player"></div>
<script>
  /** Inject component into HTML **/
  document.addEventListener('DOMContentLoaded', function (event) {
    new AuraMediaPlayer({
      target: document.getElementById('media-player'),
      props: {
        renderHtml: true,
        stream: 'https://securestream.o94.at/live.mp3',
      },
    })
  })
</script>
<div class="demo-album component-container">
  <div class="album-art lorn"></div>
  <div
    id="media-player-button-play"
    class="media-player-button component-container"
  ></div>
</div>
<script>
  /** Inject component into HTML **/
  document.addEventListener('DOMContentLoaded', function (event) {
    new AuraMediaPlayerButton({
      target: document.getElementById('media-player-button-play'),
      props: {
        type: 'play',
        label: 'Play',
        track: {
          name: 'Anvil',
          artist: 'Lorn',
          album: 'Anvil',
          url: '/path/to/audio.mp3',
          cover: '/path/to/audio-cover.png',
        },
      },
    })
  })
</script>
<div id="media-player-widget" class=""></div>
<script>
  /** Inject component into HTML **/
  document.addEventListener('DOMContentLoaded', function (event) {
    new AuraNowPlayingWidget({
      target: document.getElementById('media-player-widget'),
      props: { popupUrl: '/player_popup.html' },
    })
  })
</script>
<div id="aura-programme"></div>
<script>
  /** Inject component into HTML **/
  document.addEventListener('DOMContentLoaded', function (event) {
    new AuraProgramme({
      target: document.getElementById('aura-programme'),
      props: {
        date: 'today',
        limitCount: 0,
        urlEpisodeDetail: '/episode-detail.html?id=',
        renderHtml: true,
      },
    })
  })
</script>
<div id="aura-trackservice"></div>
<script>
  /** Inject component into HTML **/
  document.addEventListener('DOMContentLoaded', function (event) {
    new AuraTrackService({
      target: document.getElementById('aura-trackservice'),
      props: {
        labelTitle: 'Which track is playing right now?',
      },
    })
  })
</script>
<div id="online-status-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>
<div id="host-list"></div>
<script>
  /** Inject component into HTML **/
  document.addEventListener('DOMContentLoaded', function (event) {
    new AuraHostList({
      target: document.getElementById('host-list'),
      props: {
        renderHtml: true,
        urlHostDetail: '/host-detail.html?id=',
        activeonly: true,
        page: 0,
        limit: 600,
      },
    })
  })
</script>
<div id="host-detail"></div>
<script>
  /** Inject component into HTML **/
  document.addEventListener('DOMContentLoaded', function (event) {
    new AuraHostDetail({
      target: document.getElementById('host-detail'),
      props: {
        renderHtml: true,
        hostid: 707050,
        urlShowDetail: '/show-detail?slug=',
      },
    })
  })
</script>
<div id="show-list"></div>
<script>
  /** Inject component into HTML **/
  document.addEventListener('DOMContentLoaded', function (event) {
    new AuraShowList({
      target: document.getElementById('show-list'),
      props: {
        renderHtml: true,
        urlShowDetail: '/show-detail.html?slug=',
        activeonly: true,
        limit: 600,
      },
    })
  })
</script>
<div id="show-detail"></div>
<script>
  /** Inject component into HTML **/
  document.addEventListener('DOMContentLoaded', function (event) {
    new AuraShowDetail({
      target: document.getElementById('show-detail'),
      props: {
        renderHtml: true,
        showSlug: 'female-pressure',
        urlEpisodeDetail: '/episode-detail.html?id=',
        urlHostDetail: '/host-detail.html?id=',
      },
    })
  })
</script>
<div id="episode-detail"></div>
<script>
  /** Inject component into HTML **/
  document.addEventListener('DOMContentLoaded', function (event) {
    new AuraEpisodeDetail({
      target: document.getElementById('episode-detail'),
      props: {
        renderHtml: true,
        episodeId: randomId,
        labelPlay: '▶ Play',
        labelLinkArchive: 'Open in archive',
        urlShowDetail: '/show-detail.html?slug=',
        playerDomId: 'aura-player',
      },
    })
  })
</script>
<div id="category-list"></div>
<script>
  /** Inject component into HTML **/
  document.addEventListener('DOMContentLoaded', function (event) {
    new AuraCategoryList({
      target: document.getElementById('category-list'),
      props: {
        renderHtml: true,
        urlShowList: '/show-list.html',
        categoriesToDisplay: [
          '1385089' /* Unter vielen */,
          '1385076' /* Im Unterschied */,
          '2060582' /* Auf Entdeckung */,
          '1385111' /* Spielarten */,
          '1385106' /* Der gute Ton */,
          '1385094' /* Im Interesse */,
          '1385100' /* Durchs Dickicht */,
        ],
      },
    })
  })
</script>
./run.sh
let OFFLINE_URL = '/offline.html' // Match your offline page URL
let PRE_CACHE = 'pre-cache-v1' // Manually update version or generate one server-site
let PRE_CACHE_URL = '/pre-cache.json' // Match your pre-cache URL
<aura-service-worker></aura-service-worker>
<aura-service-worker url="/custom/path/service-worker.js"></aura-service-worker>
make init.dev
make run
make init.app
make dist