fix style

packages/app/src/components/Player/MediaPlayer/index.less

@@ -123,6 +123,8 @@ html {
 
         padding: 10px;
 
+        gap: 10px;
+
         border-radius: 8px;
 
         background-color: var(--background-color-accent);
@@ -134,12 +136,24 @@ html {
 
         box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
 
+        .service_indicator {
+            color: var(--text-color);
+
+            background-color: var(--background-color-primary);
+            padding: 7px;
+            border-radius: 8px;
+
+            font-size: 0.8rem;
+        }
+
         .cover {
             position: relative;
 
             z-index: 320;
 
-            width: 100%;
+            margin: auto;
+
+            width: 250px;
             height: 250px;
             min-height: 250px;
 
@@ -166,8 +180,6 @@ html {
             display: flex;
             flex-direction: row;
 
-            margin: 15px 0;
-
             width: 100%;
 
             .info {

packages/app/src/components/Player/SeekBar/index.less

@@ -12,7 +12,7 @@
     width: 90%;
     height: 100%;
 
-    margin: 20px 0 10px 0;
+    margin: 0 0 10px 0;
 
     border-radius: 8px;
 

packages/app/src/cores/player/player.core.js

@@ -3,9 +3,8 @@ import { Observable } from "object-observer"
 import { FastAverageColor } from "fast-average-color"
 import { CapacitorMusicControls } from 'capacitor-music-controls-plugin-v3'
 
-//import { LRUCache } from "lru-cache/dist/mjs/index"
-
 import PlaylistModel from "comty.js/models/playlists"
+import SyncModel from "comty.js/models/sync"
 
 import EmbbededMediaPlayer from "components/Player/MediaPlayer"
 import BackgroundMediaPlayer from "components/Player/BackgroundMediaPlayer"
@@ -16,6 +15,26 @@ import EqProcessorNode from "./processors/eqNode"
 import GainProcessorNode from "./processors/gainNode"
 import CompressorProcessorNode from "./processors/compressorNode"
 
+const servicesToManifestResolver = {
+    "tidal": async (manifest) => {
+        const resolvedManifest = await SyncModel.tidalCore.getTrackManifest(manifest.id)
+
+        console.log(resolvedManifest)
+
+        manifest.source = resolvedManifest.playback.url
+
+        manifest.title = resolvedManifest.metadata.title
+        manifest.artist = resolvedManifest.metadata.artists.map(artist => artist.name).join(", ")
+        manifest.album = resolvedManifest.metadata.album.title
+
+        const coverUID = resolvedManifest.metadata.album.cover.replace(/-/g, "/")
+
+        manifest.cover = `https://resources.tidal.com/images/${coverUID}/1280x1280.jpg`
+
+        return manifest
+    }
+}
+
 function useMusicSync(event, data) {
     const currentRoomData = app.cores.sync.music.currentRoomData()
 
@@ -419,7 +438,10 @@ export default class Player extends Core {
 
                             if (this.state.syncMode) {
                                 useMusicSync("music:player:start", {
-                                    manifest: change.object.currentAudioManifest,
+                                    manifest: {
+                                        ...change.object.currentAudioManifest,
+                                        service: "inherit",
+                                    },
                                     state: this.currentState()
                                 })
                             }
@@ -692,6 +714,20 @@ export default class Player extends Core {
             }
         }
 
+        // check if manifest has `manifest` property
+        if (manifest.service) {
+            if (manifest.service !== "inherit") {
+                const resolver = servicesToManifestResolver[manifest.service]
+
+                if (!resolver) {
+                    console.error(`Service ${manifest.service} is not supported`)
+                    return false
+                }
+    
+                manifest = await resolver(manifest)
+            }
+        }
+
         if (!manifest.src && !manifest.source) {
             console.error("Manifest source is required")
             return false