Fix seeking; add infocard.

frontend/vue/components/Public/WebDJ/PlaylistPanel.vue

@@ -67,12 +67,14 @@
                     </div>
                     <div class="flex-fill">
                         <input
+                            v-model="seekingPosition"
                             type="range"
                             min="0"
                             max="100"
                             step="0.1"
                             class="custom-range slider"
-                            :value="position"
+                            @mousedown="isSeeking = true"
+                            @mouseup="isSeeking = false"
                         >
                     </div>
                     <div class="flex-shrink-0 pt-1 pl-2">
@@ -210,6 +212,21 @@ const duration = ref(0.0);
 const loop = ref(false);
 const playThrough = ref(false);
 
+const isSeeking = ref(false);
+
+const seekingPosition = computed({
+    get: () => {
+        return (100.0 * position.value / parseFloat(duration.value));
+    },
+    set: (val) => {
+        if (!isSeeking.value || !source.value) {
+            return;
+        }
+
+        source.value.seek(val / 100);
+    }
+});
+
 // Factor in mixer and local gain to calculate total gain.
 const localGain = ref(55);
 const mixer = useInjectMixer();
@@ -284,6 +301,7 @@ const selectFile = (options = {}) => {
 
 const play = (options = {}) => {
     let file = selectFile(options);
+
     if (!file) {
         return;
     }

frontend/vue/components/Public/WebDJ/SettingsPanel.vue

@@ -7,8 +7,8 @@
                 <small>{{ stationName }}</small>
             </h5>
         </div>
-        <div class="card-body">
-            <template v-if="isConnected">
+        <template v-if="isConnected">
+            <div class="card-body">
                 <div class="form-group">
                     <label
                         for="metadata_title"
@@ -49,14 +49,27 @@
                         {{ $gettext('Update Metadata') }}
                     </button>
                 </div>
-            </template>
-            <template v-else>
+            </div>
+        </template>
+        <template v-else>
+            <div class="card-body alert-info">
+                <p class="card-text">
+                    {{ $gettext('The WebDJ lets you broadcast live to your station using just your web browser.') }}
+                </p>
+                <p class="card-text">
+                    {{
+                        $gettext('To use this feature, a secure (HTTPS) connection is required. Firefox is recommended to avoid static when broadcasting.')
+                    }}
+                </p>
+            </div>
+
+            <div class="card-body">
                 <div class="form-group">
                     <label
                         for="dj_username"
                         class="mb-2"
                     >
-                        {{ $gettext('Username') }}
+                        {{ $gettext('Streamer/DJ Username') }}
                     </label>
                     <div class="controls">
                         <input
@@ -72,7 +85,7 @@
                         for="dj_password"
                         class="mb-2"
                     >
-                        {{ $gettext('Password') }}
+                        {{ $gettext('Streamer/DJ Password') }}
                     </label>
                     <div class="controls">
                         <input
@@ -83,8 +96,8 @@
                         >
                     </div>
                 </div>
-            </template>
-        </div>
+            </div>
+        </template>
 
         <div class="card-actions">
             <button

frontend/vue/components/Public/WebDJ/useWebDjTrack.js

@@ -1,4 +1,4 @@
-import {computed, ref, shallowRef, watch} from "vue";
+import {computed, ref, watch} from "vue";
 import {useInjectWebDjNode} from "~/components/Public/WebDJ/useWebDjNode";
 
 export function useWebDjTrack() {
@@ -15,7 +15,7 @@ export function useWebDjTrack() {
     const position = ref(null);
     const volume = ref(0);
 
-    let source = shallowRef(null);
+    let source = ref(null);
 
     const createControlsNode = () => {
         const bufferSize = 4096;
@@ -25,7 +25,9 @@ export function useWebDjTrack() {
         let newSource = context.createScriptProcessor(bufferSize, 2, 2);
 
         newSource.onaudioprocess = (buf) => {
-            position.value = source.value?.position();
+            if (typeof (source.value?.position) === "function") {
+                position.value = source.value.position();
+            }
 
             for (let channel = 0; channel < buf.inputBuffer.numberOfChannels; channel++) {
                 let channelData = buf.inputBuffer.getChannelData(channel);
@@ -80,6 +82,7 @@ export function useWebDjTrack() {
         controlsNode.connect(sink);
 
         trackGainNode = context.createGain();
+        trackGainNode.gain.value = parseFloat(trackGain.value) / 100.0;
         trackGainNode.connect(controlsNode);
 
         passThroughNode = createPassThrough();
@@ -97,7 +100,7 @@ export function useWebDjTrack() {
 
     const isPaused = computed(() => {
         return (source.value !== null)
-            ? source.value.paused
+            ? source.value.paused()
             : false;
     });
 
@@ -106,7 +109,7 @@ export function useWebDjTrack() {
             return;
         }
 
-        if (source.value.paused) {
+        if (source.value.paused()) {
             source.value.play();
         } else {
             source.value.pause();