rc/aircox
13
1
Fork 1
Code Issues 15 Pull Requests Projects Releases Wiki Activity

work on hot reload; fix bugs in player

Browse Source
This commit is contained in:
bkfox
2020-11-08 14:10:03 +01:00
parent 5fd72c33cc
commit 239580c04a
11 changed files with 162 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
assets/public/app.js
View File

@ -4,27 +4,16 @@ export const defaultConfig = {
el: '#app',
delimiters: ['[[', ']]'],
data() {
return {
page: null,
}
},
computed: {
player() { return window.aircox.player; },
},
}
export default function App(config, sync=false) {
return (new AppConfig(config)).load(sync)
}
/**
* Application config for an application instance
*/
export class AppConfig {
constructor(config) {
export default class AppBuilder {
constructor(config={}) {
this._config = config;
this.app = null;
}
get config() {
@ -42,22 +31,50 @@ export class AppConfig {
this._config = value;
}
load(sync=false) {
destroy() {
self.app && self.app.$destroy();
self.app = null;
}
fetch(url, options) {
return fetch(url, options).then(response => response.text())
.then(content => {
let doc = new DOMParser().parseFromString(content, 'text/html');
let app = doc.getElementById('app');
content = app ? app.innerHTML : content;
return this.load({sync: true, content, title: doc.title, url })
})
}
load({async=false,content=null, title=null, url=null}={}) {
var self = this;
return new Promise(function(resolve, reject) {
let func = () => { try { resolve(self.build()) } catch(error) { reject(error) }};
sync ? func() : window.addEventListener('load', func);
return new Promise((resolve, reject) => {
let func = () => {
try {
let config = self.config;
const el = document.querySelector(config.el);
if(!el)
return reject(`Error: can't get element ${config.el}`)
if(content)
el.innerHTML = content
if(title)
document.title = title;
if(url && content)
history.pushState({ content: content, title: title }, '', url)
this.app = new Vue(config);
resolve(self.app)
} catch(error) {
self.destroy();
reject(error)
}};
async ? window.addEventListener('load', func) : func();
});
}
build() {
let config = this.config;
const el = document.querySelector(config.el)
if(!el) {
reject(`Error: missing element ${config.el}`);
return;
}
return new Vue(config);
loadFromState(state) {
return this.load({ content: state.content, title: state.title });
}
}

75
assets/public/index.js
View File

@ -10,7 +10,7 @@ import '@fortawesome/fontawesome-free/css/fontawesome.min.css';
//-- aircox
import App from './app';
import AppBuilder from './app';
import Sound from './sound';
import {Set} from './model';
@ -31,31 +31,40 @@ Vue.component('a-sound-item', SoundItem)
window.aircox = {
// main application
app: null,
// main application config
appBuilder: null,
appConfig: {},
get app() { return this.appBuilder.app },
// player application
playerApp: null,
playerBuilder: null,
get playerApp() { return this.playerBuilder && this.playerBuilder.app },
get player() { return this.playerApp && this.playerApp.$refs.player },
// player component
get player() {
return this.playerApp && this.playerApp.$refs.player
},
onPageFetch(event) {
let submit = event.type == 'submit';
let target = submit || event.target.tagName == 'A'
? event.target : event.target.closest('a');
if(!target || target.hasAttribute('target'))
return;
loadPage(url) {
fetch(url).then(response => response.text())
.then(response => {
let doc = new DOMParser().parseFromString(response, 'text/html');
let url = submit ? target.getAttribute('action') || ''
: target.getAttribute('href');
if(url===null || !(url === '' || url.startsWith('/') || url.startsWith('?')))
return;
aircox.app && aircox.app.$destroy();
document.getElementById('app').innerHTML = doc.getElementById('app').innerHTML;
App(() => window.aircox.appConfig, true).then(app => {
aircox.app = app;
document.title = doc.title;
})
});
let options = {};
if(submit) {
let formData = new FormData(event.target);
if(target.method == 'get')
url += '?' + (new URLSearchParams(formData)).toString();
else {
options['method'] = target.method;
options['body'] = formData;
}
}
this.appBuilder.fetch(url, options);
event.preventDefault();
event.stopPropagation();
},
Set: Set, Sound: Sound,
@ -63,21 +72,17 @@ window.aircox = {
window.Vue = Vue;
App({el: '#player'}).then(app => window.aircox.playerApp = app);
App(() => window.aircox.appConfig).then(app => {
window.aircox.app = app;
window.addEventListener('click', event => {
let target = event.target.tagName == 'A' ? event.target : event.target.closest('a');
if(!target || !target.hasAttribute('href'))
return;
let href = target.getAttribute('href');
if(href && href !='#') {
window.aircox.loadPage(href);
event.preventDefault();
event.stopPropagation();
}
}, true);
aircox.playerBuilder = new AppBuilder({el: '#player'});
aircox.playerBuilder.load({async:true});
aircox.appBuilder = new AppBuilder(x => window.aircox.appConfig);
aircox.appBuilder.load({async:true}).then(app => {
//-- load page hooks
window.addEventListener('click', event => aircox.onPageFetch(event), true);
window.addEventListener('submit', event => aircox.onPageFetch(event), true);
window.addEventListener('popstate', event => {
if(event.state && event.state.content)
aircox.appBuilder.loadFromState(event.state);
});
})

83
assets/public/player.vue
View File

@ -4,7 +4,7 @@
<Playlist ref="pin" class="player-panel menu" v-show="panel == 'pin'"
name="Pinned"
:actions="['page']"
:editable="true" :player="self" :set="sets.pin" @select="play('pin', $event.index)"
:editable="true" :player="self" :set="sets.pin" @select="togglePlay('pin', $event.index)"
listClass="menu-list" itemClass="menu-item">
<template v-slot:header="">
<p class="menu-label">
@ -15,7 +15,7 @@
</Playlist>
<Playlist ref="queue" class="player-panel menu" v-show="panel == 'queue'"
:actions="['page']"
:editable="true" :player="self" :set="sets.queue" @select="play('queue', $event.index)"
:editable="true" :player="self" :set="sets.queue" @select="togglePlay('queue', $event.index)"
listClass="menu-list" itemClass="menu-item">
<template v-slot:header="">
<p class="menu-label">
@ -44,7 +44,7 @@
@select="audio.currentTime = $event"></Progress>
</div>
<div class="media-right">
<button class="button has-text-weight-bold" v-if="loaded" @click="playLive()">
<button class="button has-text-weight-bold" v-if="loaded" @click="play()">
<span class="icon is-size-6 has-text-danger">
<span class="fa fa-circle"></span>
</span>
@ -105,8 +105,8 @@ export default {
loaded: null,
//! Active panel name
panel: null,
//! current playing playlist component
playlist: null,
//! current playing playlist name
playlistName: null,
//! players' playlists' sets
sets: {
queue: Set.storeLoad(Sound, "playlist.queue", { max: 30, unique: true }),
@ -126,6 +126,10 @@ export default {
playing() { return this.state == State.playing; },
loading() { return this.state == State.loading; },
playlist() {
return this.playlistName ? this.$refs[this.playlistName] : null;
},
current() {
return this.loaded || this.live && this.live.current;
},
@ -155,7 +159,7 @@ export default {
let set = this.sets[name];
return (set ? (set.length ? "" : "has-text-grey-light ")
+ (this.panel == name ? "is-info "
: this.playlist && this.playlist == this.$refs[name] ? 'is-primary '
: this.playlistName == name ? 'is-primary '
: '') : '')
+ "button has-text-weight-bold";
},
@ -168,17 +172,33 @@ export default {
isPlaying(item) { return this.isLoaded(item) && !this.paused },
_setPlaylist(playlist) {
this.playlist = playlist ? this.$refs[playlist] : null;
this.playlistName = playlist;
for(var p in this.sets)
if(p != playlist)
this.$refs[p].unselect();
},
load(playlist, {src=null, item=null}={}) {
src = src || item.src;
this.loaded = item;
/// Play a playlist's sound (by playlist name, and sound index)
play(playlist=null, index=0) {
let src = null;
// from playlist
if(playlist !== null) {
let item = this.$refs[playlist].get(index);
if(!item)
throw `No sound at index ${index} for playlist ${playlist}`;
this.loaded = item;
src = item.src;
}
// from live
else {
this.loaded = null;
src = this.live.src;
}
this._setPlaylist(playlist);
// load sources
const audio = this.audio;
if(src instanceof Array) {
audio.innerHTML = '';
@ -192,29 +212,13 @@ export default {
audio.src = src;
}
audio.load();
},
/// Play a playlist's sound (by playlist name, and sound index)
play(playlist=null, index=0) {
if(index < 0)
return;
if(!playlist)
playlist = 'queue';
console.log('play', playlist, index, this.audio);
let item = this.$refs[playlist].get(index);
if(item) {
this.load(playlist, {item});
this.audio.play().catch(e => console.error(e))
}
else
throw `No sound at index ${index} for playlist ${playlist}`;
audio.play();
audio.play().catch(e => console.error(e))
},
/// Push items to playlist (by name)
push(playlist, ...items) {
this.$refs[playlist].push(...items);
return this.$refs[playlist].push(...items);
},
/// Push and play items
@ -224,29 +228,30 @@ export default {
this.play(playlist, index);
},
/// Handle click event that plays multiple items (from `data-sounds` attribute)
playButtonClick(event) {
var items = JSON.parse(event.currentTarget.dataset.sounds);
this.playItems('queue', ...items);
},
/// Play live stream
playLive() {
this.load(null, {src: this.live.src});
this.audio.play().catch(e => console.error(e))
this.panel = '';
},
/// Pause
pause() {
this.audio.pause()
},
//! Play/pause
togglePlay() {
togglePlay(playlist=null, index=0) {
if(playlist !== null) {
let item = this.sets[playlist].get(index);
if(!this.playlist || this.playlistName !== playlist || this.loaded != item) {
this.play(playlist, index);
return;
}
}
if(this.paused)
this.audio.play().catch(e => console.error(e))
else
this.pause()
this.audio.pause();
},
//! Pin/Unpin an item
@ -266,7 +271,7 @@ export default {
this.state = audio.paused ? State.paused : State.playing;
if(event.type == 'ended' && (!this.playlist || this.playlist.selectNext() == -1))
this.playLive();
this.play();
},
},

5
assets/public/soundItem.vue
View File

@ -14,11 +14,8 @@
<div class="media-content">
<slot name="content" :player="player" :item="item" :loaded="loaded">
<h4 class="title is-4">{{ name || item.name }}</h4>
<a class="subtitle is-6" v-if="hasAction('page') && item.data.page_url"
<a class="subtitle is-6 is-inline-block" v-if="hasAction('page') && item.data.page_url"
:href="item.data.page_url">
<i class="icon">
<i class="fas fa-link"></i>
</i>
{{ item.data.page_title }}
</a>
</slot>

10
assets/public/styles.scss
View File

@ -221,10 +221,6 @@ a.navbar-item.is-active {
transition: background-color 1s;
}
.button:focus {
background-color: $info;
}
.title {
margin: 0em;
}
@ -260,7 +256,6 @@ main {
.cover.is-tiny { height: 2em; }
}
.sound-item .cover { height: 5em; }
aside {
& > section {
@ -280,6 +275,11 @@ aside {
}
.sound-item {
.cover { height: 5em; }
.media-content a { padding: 0em; }
}
.is-round, .sound-item .button {
border: 1px $grey solid;
border-radius: 1em;