add progress bar

aircox/static/aircox/admin.css

@@ -7417,14 +7417,14 @@ a.navbar-item.is-active {
     overflow-y: auto; }
   .player .player-bar {
     border-top: 1px #b5b5b5 solid; }
-    .player .player-bar .media-left:not(:last-child) {
+    .player .player-bar > .media-left:not(:last-child) {
       margin-right: 0em; }
-    .player .player-bar .media-cover {
+    .player .player-bar > .media-cover {
       border-left: 1px black solid; }
     .player .player-bar .cover {
       font-size: 1.5rem !important;
       height: 2.5em !important; }
-    .player .player-bar .media-content {
+    .player .player-bar > .media-content {
       padding-top: 0.4em;
       padding-left: 0.4em; }
     .player .player-bar .button {

aircox/static/aircox/main.css

@@ -7396,14 +7396,14 @@ a.navbar-item.is-active {
     overflow-y: auto; }
   .player .player-bar {
     border-top: 1px #b5b5b5 solid; }
-    .player .player-bar .media-left:not(:last-child) {
+    .player .player-bar > .media-left:not(:last-child) {
       margin-right: 0em; }
-    .player .player-bar .media-cover {
+    .player .player-bar > .media-cover {
       border-left: 1px black solid; }
     .player .player-bar .cover {
       font-size: 1.5rem !important;
       height: 2.5em !important; }
-    .player .player-bar .media-content {
+    .player .player-bar > .media-content {
       padding-top: 0.4em;
       padding-left: 0.4em; }
     .player .player-bar .button {

assets/public/list.vue

@@ -58,7 +58,7 @@ export default {
 
         select(index) {
             this.selectedIndex = index > -1  && this.items.length ? index % this.items.length : -1;
-            this.$emit('select', { target: this, item: this.selected, index: this.selectedIndex });
+            this.$emit('select', { item: this.selected, index: this.selectedIndex });
             return this.selectedIndex;
         },
 

assets/public/player.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="player">
-        <Playlist ref="history" class="panel-menu menu" v-show="panel == 'history'"
+        <Playlist ref="history" class="player-panel menu" v-show="panel == 'history'"
             name="History"
             :editable="true" :player="self" :set="sets.history" @select="play('pin', $event.index)"
             listClass="menu-list" itemClass="menu-item">
@@ -40,9 +40,6 @@
                     <span class="fas fa-pause" v-if="playing"></span>
                     <span class="fas fa-play" v-else></span>
                 </div>
-                <audio ref="audio" preload="metadata"
-                    @playing="onState" @ended="onState" @pause="onState">
-                </audio>
                 <slot name="sources"></slot>
             </div>
             <div class="media-left media-cover" v-if="current && current.cover">
@@ -50,6 +47,9 @@
             </div>
             <div class="media-content">
                 <slot name="content" :current="current"></slot>
+                <Progress v-if="this.duration" :value="this.currentTime" :max="this.duration"
+                    :format="displayTime"
+                    @select="audio.currentTime = $event"></Progress>
             </div>
             <div class="media-right">
                 <button class="button has-text-weight-bold" v-if="loaded" @click="playLive()">
@@ -79,9 +79,6 @@
 
             </div>
         </div>
-        <div v-if="progress">
-            <span :style="{ width: progress }"></span>
-        </div>
     </div>
 </template>
 
@@ -89,6 +86,7 @@
 import Vue, { ref } from 'vue';
 import Live from './live';
 import Playlist from './playlist';
+import Progress from './playerProgress';
 import Sound from './sound';
 import {Set} from './model';
 
@@ -101,12 +99,24 @@ export const State = {
 
 export default {
     data() {
+        let audio = new Audio();
+        audio.addEventListener('ended', e => this.onState(e));
+        audio.addEventListener('pause', e => this.onState(e));
+        audio.addEventListener('playing', e => this.onState(e));
+        audio.addEventListener('timeupdate', e => {
+            this.currentTime = this.audio.currentTime;
+        });
+        audio.addEventListener('durationchange', e => {
+            this.duration = Number.isFinite(this.audio.duration) ? this.audio.duration : null;
+        });
+
         return {
-            state: State.paused,
+            audio, duration: 0, currentTime: 0,
-            /// Loaded item
+
-            loaded: null,
             /// Live instance
             live: this.liveArgs ? new Live(this.liveArgs) : null,
+            /// Loaded item
+            loaded: null,
             //! Active panel name
             panel: null,
             //! current playing playlist component
@@ -126,21 +136,15 @@ export default {
     },
 
     computed: {
+        self() { return this; },
         paused() { return this.state == State.paused; },
         playing() { return this.state == State.playing; },
         loading() { return this.state == State.loading; },
-        self() { return this; },
 
         current() {
             return this.loaded || this.live && this.live.current;
         },
 
-        progress() {
-            let audio = this.$refs.audio;
-            return audio && Number.isFinite(audio.duration) && audio.duration ?
-                audio.pos / audio.duration * 100 : null;
-        },
-
         buttonStyle() {
             if(!this.current)
                 return;
@@ -149,6 +153,15 @@ export default {
     },
 
     methods: {
+        displayTime(seconds) {
+            seconds = parseInt(seconds);
+            let s = seconds % 60;
+            seconds = (seconds - s) / 60;
+            let m = seconds % 60;
+            let h = (seconds - m) / 60;
+            return h ? `${h}:${m}:${s}` : `${m}:${s}`;
+        },
+
         playlistButtonClass(name) {
             let set = this.sets[name];
             return (set ? (set.length ? "" : "has-text-grey-light ")
@@ -178,7 +191,7 @@ export default {
             this.loaded = item;
             this.playlist = playlist ? this.$refs[playlist] : null;
 
-            const audio = this.$refs.audio;
+            const audio = this.audio;
             if(src instanceof Array) {
                 audio.innerHTML = '';
                 for(var s of src) {
@@ -195,14 +208,18 @@ export default {
 
         /// 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: item});
                 this.sets.history.push(item);
-                this.$refs.audio.play().catch(e => console.error(e))
+                this.audio.play().catch(e => console.error(e))
             }
             else
                 throw `No sound at index ${index} for playlist ${playlist}`;
@@ -225,19 +242,19 @@ export default {
         /// Play live stream
         playLive() {
             this.load(null, {src: this.live.src});
-            this.$refs.audio.play().catch(e => console.error(e))
+            this.audio.play().catch(e => console.error(e))
             this.panel = '';
         },
 
         /// Pause
         pause() {
-            this.$refs.audio.pause()
+            this.audio.pause()
         },
 
         //! Play/pause
         togglePlay() {
             if(this.paused)
-                this.$refs.audio.play().catch(e => console.error(e))
+                this.audio.play().catch(e => console.error(e))
             else
                 this.pause()
         },
@@ -256,7 +273,7 @@ export default {
 
         /// Audio player state change event
         onState(event) {
-            const audio = this.$refs.audio;
+            const audio = this.audio;
             this.state = audio.paused ? State.paused : State.playing;
 
             if(event.type == 'ended' && (!this.playlist || this.playlist.selectNext() == -1))
@@ -268,7 +285,7 @@ export default {
         this.sources = this.$slots.sources;
     },
 
-    components: { Playlist },
+    components: { Playlist, Progress },
 }
 </script>
 

assets/public/playerProgress.vue

@@ -0,0 +1,46 @@
+<template>
+    <div class="media">
+        <div class="media-left">
+            <slot name="value" :value="value" :max="max">{{ format(value) }}</slot>
+        </div>
+        <div ref="bar" class="media-content" @click.stop="onClick">
+            <div :class="progressClass" :style="progressStyle">&nbsp;</div>
+        </div>
+        <div class="media-right">
+            <slot name="value" :value="value" :max="max">{{ format(max) }}</slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: Number,
+        max: Number,
+        format: { type: Function, default: x => x },
+        progressClass: { default: 'has-background-primary' },
+        vertical: { type: Boolean, default: false },
+    },
+
+    computed: {
+        progressStyle() {
+            if(!this.max)
+                return null;
+            return this.vertical ? { height: (this.max ? this.value * 100 / this.max : 0) + '%' }
+                                 : { width: (this.max ? this.value * 100 / this.max : 0) + '%' };
+        },
+    },
+
+    methods: {
+        xToValue(x) { return x * this.max / this.$refs.bar.getBoundingClientRect().width },
+        yToValue(y) { return y * this.max / this.$refs.bar.getBoundingClientRect().height },
+
+        onClick(event) {
+            let rect = event.currentTarget.getBoundingClientRect()
+            this.$emit('select', this.vertical ? this.yToValue(event.clientY - rect.y)
+                                               : this.xToValue(event.clientX - rect.x));
+        },
+    },
+}
+</script>
+

assets/public/styles.scss

@@ -181,11 +181,11 @@ a.navbar-item.is-active {
     .player-bar {
         border-top: 1px $grey-light solid;
 
-        .media-left:not(:last-child) {
+        > .media-left:not(:last-child) {
             margin-right: 0em;
         }
 
-        .media-cover {
+        > .media-cover {
             border-left: 1px black solid;
         }
 
@@ -194,7 +194,7 @@ a.navbar-item.is-active {
             height: 2.5em !important;
         }
 
-        .media-content {
+        > .media-content {
             padding-top: 0.4em;
             padding-left: 0.4em;
         }