Плеер

PlaylistShared.Pwa/wwwroot/css/app.css

@@ -108,3 +108,18 @@ code {
 .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
     text-align: start;
 }
+
+.track-cover-container {
+    border-radius: 4px;
+    overflow: hidden;
+    transition: transform 0.2s ease;
+}
+
+    .track-cover-container:hover {
+        transform: scale(1.05);
+    }
+
+.play-overlay {
+    transition: opacity 0.2s ease;
+    cursor: pointer;
+}

PlaylistShared.Pwa/wwwroot/js/AudioPlayer.js

@@ -0,0 +1,54 @@
+export function init(audioId, dotNetHelper) {
+    const audio = document.getElementById(audioId);
+    if (!audio) throw new Error(`Audio element with id ${audioId} not found`);
+
+    let durationReady = false;
+    let durationValue = 0;
+
+    const toNumber = (val) => {
+        const num = Number(val);
+        return isNaN(num) ? 0 : num;
+    };
+
+    const loadAndPlay = (src, token) => {
+        const url = new URL(src, window.location.href);
+        if (token) url.searchParams.set('access_token', token);
+        audio.src = url.toString();
+        audio.load();
+        durationReady = false;
+        durationValue = 0;
+        audio.play().catch(e => console.error('Play failed:', e));
+    };
+
+    const play = () => audio.play();
+    const pause = () => audio.pause();
+    const stop = () => { audio.pause(); audio.currentTime = 0; };
+    const setVolume = (volume) => { audio.volume = toNumber(volume); };
+    const setCurrentTime = (time) => { audio.currentTime = toNumber(time); };
+    const getDuration = () => durationReady ? durationValue : 0;
+    const getCurrentTime = () => toNumber(audio.currentTime);
+
+    audio.addEventListener('loadedmetadata', () => {
+        durationValue = toNumber(audio.duration);
+        durationReady = durationValue > 0;
+        if (dotNetHelper && durationReady) {
+            dotNetHelper.invokeMethodAsync('OnDurationReady', durationValue);
+        }
+    });
+
+    audio.addEventListener('timeupdate', () => {
+        if (dotNetHelper && durationReady) {
+            const current = toNumber(audio.currentTime);
+            dotNetHelper.invokeMethodAsync('OnTimeUpdate', current, durationValue);
+        }
+    });
+
+    audio.addEventListener('ended', () => {
+        if (dotNetHelper) {
+            dotNetHelper.invokeMethodAsync('OnAudioEnded');
+        }
+    });
+
+    // Возвращаем все методы, которые будут вызываться из C#
+    return { loadAndPlay, play, pause, stop, setVolume, setCurrentTime, getDuration, getCurrentTime };
+}