fix style glitch

aircox/static/aircox/admin.css

@@ -7410,6 +7410,7 @@ a.navbar-item.is-active {
     background: linear-gradient(transparent 1em, whitesmoke); }
 
 .player {
+  z-index: 10000;
   box-shadow: 0em 1.5em 2.5em rgba(0, 0, 0, 0.6); }
   .player .player-panels {
     height: 0%;

aircox/static/aircox/main.css

@@ -7389,6 +7389,7 @@ a.navbar-item.is-active {
     background: linear-gradient(transparent 1em, whitesmoke); }
 
 .player {
+  z-index: 10000;
   box-shadow: 0em 1.5em 2.5em rgba(0, 0, 0, 0.6); }
   .player .player-panels {
     height: 0%;

aircox/templates/aircox/widgets/player.html

@@ -20,8 +20,11 @@ The audio player
     <a-player ref="player"
             :live-args="{url: '{% url "api:live" %}', timeout:10, src: {{ audio_streams|json }} || []}"
             button-title="{% trans "Play or pause audio" %}">
-        <template v-slot:content="{ current }">
-            <h4 v-if="current && current.type == 'track'"
+        <template v-slot:content="{ loaded, live }">
+            <h4 v-if="loaded" class="title is-4">
+                [[ loaded.name ]]
+            </h4>
+            <h4 v-else-if="live && live.current && live.current.type == 'track'"
                 class="title is-4" aria-description="{% trans "Track currently on air" %}">
                 <span class="has-text-info is-size-3">&#9836;</span>
                 <span>[[ current.title ]]</span>
@@ -30,15 +33,12 @@ The audio player
                 <i v-if="current.info">([[ current.info ]])</i>
                 </span>
             </h4>
-            <div v-else-if="current && current.type == 'diffusion'">
+            <div v-else-if="live && live.current && live.current.type == 'diffusion'">
                 <h4 class="title is-4" aria-description="{% trans "Diffusion currently on air" %}">
                     <a :href="current.url">[[ current.title ]]</a>
                 </h4>
                 <div class="">[[ current.info ]]</div>
             </div>
-            <h4 v-else-if="current" class="title is-4">
-                [[ current.name ]]
-            </h4>
             <h4 v-else class="title is-4" aria-description="{% trans "Currently playing" %}">
                 {{ station.name }}
             </h4>

assets/public/player.vue

@@ -38,7 +38,7 @@
                 <img :src="current.cover" class="cover" />
             </div>
             <div class="media-content">
-                <slot name="content" :current="current"></slot>
+                <slot name="content" :loaded='loaded' :live='live'></slot>
                 <Progress v-if="loaded && duration" :value="currentTime" :max="this.duration"
                     :format="displayTime"
                     @select="audio.currentTime = $event"></Progress>
@@ -133,12 +133,6 @@ export default {
         current() {
             return this.loaded || this.live && this.live.current;
         },
-
-        buttonStyle() {
-            if(!this.current)
-                return;
-            return { backgroundImage: `url(${this.current.cover})` }
-        },
     },
 
     methods: {

assets/public/styles.scss

@@ -169,6 +169,7 @@ a.navbar-item.is-active {
 
 //-- player
 .player {
+    z-index: 10000;
     box-shadow: 0em 1.5em 2.5em rgba(0, 0, 0, 0.6);
 
     .player-panels {