work on logs, timetable, stats

2019-09-08 01:39:40 +02:00
parent 2d21ab2434
commit c68e21ee57
71 changed files with 19683 additions and 710 deletions
--- a/assets/public/player.vue
+++ b/assets/public/player.vue
@ -0,0 +1,111 @@
+<template>
+    <div class="media">
+        <div class="media-left">
+            <div class="button" @click="toggle()"
+                    :title="buttonTitle" :aria-label="buttonTitle">
+                <span class="fas fa-pause" v-if="playing"></span>
+                <span class="fas fa-play" v-else></span>
+            </div>
+            <audio ref="audio" @playing="onChange" @ended="onChange" @pause="onChange">
+                <slot name="sources"></slot>
+            </audio>
+        </div>
+        <div class="media-left media-cover" v-if="onAir && onAir.cover">
+            <img :src="onAir.cover" class="cover" />
+        </div>
+        <div class="media-content" v-if="onAir && onAir.type == 'track'">
+            <slot name="track" :onAir="onAir" :liveInfo="liveInfo"></slot>
+        </div>
+        <div class="media-content" v-else-if="onAir && onAir.type == 'diffusion'">
+            <slot name="diffusion" :onAir="onAir" :liveInfo="liveInfo"></slot>
+        </div>
+        <div class="media-content" v-else><slot name="empty"></slot></div>
+        </div>
+    </div>
+</template>
+
+
+<script>
+import LiveInfo from './liveInfo';
+
+export const State = {
+    paused: 0,
+    playing: 1,
+    loading: 2,
+}
+
+export default {
+    data() {
+        return {
+            state: State.paused,
+            liveInfo: new LiveInfo(this.liveInfoUrl, this.liveInfoTimeout),
+        }
+    },
+
+    props: {
+        buttonTitle: String,
+        liveInfoUrl: String,
+        liveInfoTimeout: { type: Number, default: 5},
+        src: String,
+    },
+
+    computed: {
+        paused() { return this.state == State.paused; },
+        playing() { return this.state == State.playing; },
+        loading() { return this.state == State.loading; },
+
+        onAir() {
+            return this.liveInfo.items && this.liveInfo.items[0];
+        },
+
+        buttonStyle() {
+            if(!this.onAir)
+                return;
+            return { backgroundImage: `url(${this.onAir.cover})` }
+        }
+    },
+
+    methods: {
+        load(src) {
+            const audio = this.$refs.audio;
+            audio.src = src;
+            audio.load()
+        },
+
+        play(src) {
+            if(src)
+                this.load(src);
+            this.$refs.audio.play().catch(e => console.error(e))
+        },
+
+        pause() {
+            this.$refs.audio.pause()
+        },
+
+        toggle() {
+            if(this.paused)
+                this.play()
+            else
+                this.pause()
+        },
+
+        onChange(event) {
+            const audio = this.$refs.audio;
+            this.state = audio.paused ? State.paused : State.playing;
+        },
+    },
+
+    mounted() {
+        this.liveInfo.refresh()
+    },
+
+    destroyed() {
+        this.liveInfo.drop()
+    },
+}
+
+</script>
+
+
+
+