streamer: integrate, fix, ui change

aircox_streamer/templates/aircox_streamer/scripts/station.liq

@@ -19,7 +19,7 @@ end
 
 {# Transition to live sources #}
 def to_live(stream, live)
-  stream = fade.final(duration=2., type='log', stream)
+  stream = fade.out(duration=2., type='log', stream)
   live = fade.initial(duration=2., type='log', live)
   add(normalize=false, [stream,live])
 end
@@ -31,12 +31,12 @@ def to_stream(live, stream)
 end
 
 {# Skip command #}
-def add_skip_command(s) =
+def add_skip_command(id, s) =
     def skip(_) =
         source.skip(s)
         "Done!"
     end
-    server.register(namespace="#{source.id(s)}",
+    server.register(namespace=id,
         usage="skip",
         description="Skip the current song.",
         "skip",skip)
@@ -58,9 +58,8 @@ def interactive (id, s) =
                     usage="remaining",
                     "remaining", fun (_) ->  begin json.stringify(source.remaining(s)) end)
 
-    add_skip_command(s)
+    add_skip_command(id, s)
 
-    {# metadata: create an interactive variable as "{id}_meta" #}
     s_meta = interactive.string("#{id}_meta", "")
     s = source.on_metadata(s, fun(meta) -> s_meta.set(json.stringify(meta)))
 
@@ -82,10 +81,7 @@ set("server.socket", true)
 set("server.socket.path", "{{ streamer.socket_path }}")
 set("log.file.path", "{{ log_file }}")
 {% endblock %}
-
-{% block config_extras %}
-{% endblock %}
-
+{% block config_extras %}{% endblock %}
 
 {% block sources %}
 {% with source=streamer.dealer %}
@@ -94,7 +90,6 @@ live = audio_to_stereo(interactive('{{ source.id }}',
 ))
 {% endwith %}
 
-
 streams = rotate(id="streams", [
     {% for source in streamer.sources %}
     {% if source != streamer.dealer %}

aircox_streamer/templates/aircox_streamer/source_item.html

@@ -1,8 +1,9 @@
 {% comment %}List item for a source.{% endcomment %}
 {% load i18n %}
 
-<section class="box"><div class="columns is-desktop">
-    <div class="column">
+<section class="box"><div class="flex-row gap-3">
+
+    <div class="flex-grow-1">
         <h5 class='title is-5' :class="{'has-text-danger': source.isPlaying, 'has-text-warning': source.isPaused}">
             <span>
                 <span v-if="source.isPlaying" class="fas fa-play"></span>
@@ -21,28 +22,70 @@
             </a>
         </h5>
 
+        <table class="table bg-transparent">
+            <tbody>
+                <tr><th class="has-text-right ws-nowrap">
+                    {% translate "Status" %}
+                    </th>
+                    <td :class="{'has-text-danger': source.isPlaying, 'has-text-warning': source.isPaused}">
+                        <span v-if="source.isPlaying" class="fas fa-play"></span>
+                        <span v-else-if="source.data.status" class="fas fa-pause"></span>
+                        [[ source.data.status_verbose || "&mdash;" ]]
+                    </td>
+                </tr>
+                <tr v-if="source.data.air_time">
+                    <th class="has-text-right ws-nowrap">
+                        {% translate "Air time" %}
+                    </th><td>
+                        <span class="far fa-clock"></span>
+                        <time :datetime="source.date">
+                        [[ source.data.air_time.toLocaleDateString() ]],
+                        [[ source.data.air_time.toLocaleTimeString() ]]
+                        </time>
+                    </td>
+                <tr v-if="source.remaining">
+                    <th class="has-text-right ws-nowrap">
+                        {% translate "Time left" %}
+                    </th><td>
+                        <span class="far fa-hourglass"></span>
+                        [[ source.remainingString ]]
+                    </td>
+                </tr>
+                <tr v-if="source.data.uri">
+                    <th class="has-text-right ws-nowrap">
+                        {% translate "Data source" %}
+                    </th><td>
+                        <span class="far fa-play-circle"></span>
+                        <template v-if="source.data.uri.length > 64">...</template>[[ (source.data.uri && source.data.uri.slice(-64)) || '&mdash;' ]]
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <div>
         <div>
-            <button class="button" @click="source.sync()"
-                    title="{% translate "Synchronize source with Liquidsoap" %}">
-                <span class="icon is-small">
-                    <span class="fas fa-sync"></span>
-                </span>
-                <span>{% translate "Synchronise" %}</span>
-            </button>
-            <button class="button" @click="source.restart()"
+            <button class="button smaller mr-2 mb-2" @click="source.restart()"
                     title="{% translate "Restart current track" %}">
                 <span class="icon is-small">
                     <span class="fas fa-step-backward"></span>
                 </span>
                 <span>{% translate "Restart" %}</span>
             </button>
-            <button class="button" @click="source.skip()"
+            <button class="button smaller mr-2 mb-2" @click="source.skip()"
                     title="{% translate "Skip current file" %}">
                 <span>{% translate "Skip" %}</span>
                 <span class="icon is-small">
                     <span class="fas fa-step-forward"></span>
                 </span>
             </button>
+            <button class="button smaller mr-2 mb-2" @click="source.sync()"
+                    title="{% translate "Synchronize source with Liquidsoap" %}">
+                <span class="icon is-small">
+                    <span class="fas fa-sync"></span>
+                </span>
+                <span>{% translate "Synchronise" %}</span>
+            </button>
         </div>
 
         <div v-if="source.isQueue">
@@ -89,46 +132,4 @@
         </div>
     </div>
 
-    <div class="column is-two-fifths">
-        <h6 class="subtitle is-6 is-marginless">Metadata</h6>
-        <table class="table bg-transparent">
-            <tbody>
-                <tr><th class="has-text-right ws-nowrap">
-                    {% translate "Status" %}
-                    </th>
-                    <td :class="{'has-text-danger': source.isPlaying, 'has-text-warning': source.isPaused}">
-                        <span v-if="source.isPlaying" class="fas fa-play"></span>
-                        <span v-else-if="source.data.status" class="fas fa-pause"></span>
-                        [[ source.data.status_verbose || "&mdash;" ]]
-                    </td>
-                </tr>
-                <tr v-if="source.data.air_time">
-                    <th class="has-text-right ws-nowrap">
-                        {% translate "Air time" %}
-                    </th><td>
-                        <span class="far fa-clock"></span>
-                        <time :datetime="source.date">
-                        [[ source.data.air_time.toLocaleDateString() ]],
-                        [[ source.data.air_time.toLocaleTimeString() ]]
-                        </time>
-                    </td>
-                <tr v-if="source.remaining">
-                    <th class="has-text-right ws-nowrap">
-                        {% translate "Time left" %}
-                    </th><td>
-                        <span class="far fa-hourglass"></span>
-                        [[ source.remainingString ]]
-                    </td>
-                </tr>
-                <tr v-if="source.data.uri">
-                    <th class="has-text-right ws-nowrap">
-                        {% translate "Data source" %}
-                    </th><td>
-                        <span class="far fa-play-circle"></span>
-                        <template v-if="source.data.uri.length > 64">...</template>[[ (source.data.uri && source.data.uri.slice(-64)) || '&mdash;' ]]
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
 </div></section>