-
David Trattnig authoredDavid Trattnig authored
AURA Player
AURA Player is a framework agnostic user interface toolbox for integrating the AURA Radio Software Suite into your website and Content Management System.
These JavaScript components are written in Svelte and are reading data from the AURA API. As a result all components are provided in a lightweight package. They are pluggable into any front-end framework or website.
Some of the components are provided as true HTML 5 Web Components, most others are delivered as Svelte Components. The latter provide easier integration and styling options and are therefore preferred for future development.
Component features:
- Cards Design Pattern
- Based on Material Design, more specifically SMUI
- Responsive Design, supporting a wide variety of mobile and desktop devices
- Solid foundation for accessibility requirements
- Themeable and stylable, including dark themes.
- TypeScript support
- SCSS support
Provided components:
- (Auto) Radio Player - A minimalist radio player (Important: Currently only integrated with the o94 legacy player popup)
- Programme Information - A Web Component to render radio programme infos in various forms (Currently only integrated with o94)
- Track Service (WIP: not up-to-date with latest
engine-api) - Service Worker - A HTML 5
service-worker.jsincluding a Web Component to load the Service Worker plus samplepre-cache.jsonandmanifest.jsonfiles - Online Status - A Toast Notification component for online/offline status changes
- Host List Component
- Host Detail Component
- Show List Component
- Show Detail Component
Disclaimer: The components of this repository are Work in Progress and hence not fully featured nor documented in all aspects. Currently some parts are customized for an Radio Orange 94.0 integration. This component will be generalized in the future upon request from third-parties. In addition Radio ORANGE 94.0 developed a Drupal 9 integration based on the AURA Player components. If you are interested using AURA in conjunction with Drupal, get in touch. Also, these components are using a simulated AURA API for now. This API is hosted at https://prog-info.o94.at/
Website Integration
Components
Media Player
Renders the Radio Media Player.
<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>Media Player Button
Display a button to either add a track to playlist (type='add') or add and play (type='play').
This currently only works when the player is part of the page, not when being used in popup mode.
<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>Now Playing Widget
Display a bar with the current show and episode details. When clicking the bar the media player opens in a popup window.
<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>Programme Information
Renders the daily programme info by listing all shows of the selected day.
<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>Track Service
Track Service is a Web Component which displays the track currently played by the radio station. Additionally there's a history of past and future tracks.
Render the component in the desired place of your website like this:
<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>Online Status (Toast Notification)
Displays a toast notification whether the app moved to an online or offline state.
<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>Host
Host List Component
Displays a list of Host Cards, including pagination.
<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>Host Detail Component
Displays a Host Detail Card.
<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>Show
Show List Component
Displays a list of Show Card.
<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>Show Detail Component
Displays a Show Detail Card.
<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>Episode
Episode Detail Component
Displays an Episode Detail Card.