WIP

gaseous-server/Classes/Metadata/Games.cs

@@ -30,7 +30,11 @@ namespace gaseous_server.Classes.Metadata
             {
                 Game? RetVal = Metadata.GetMetadata<Game>(SourceType, (long)Id, false);
                 RetVal.MetadataSource = SourceType;
-                RetVal.MetadataMapId = (long)Id;
+                long? metadataMap = MetadataManagement.GetMetadataMapIdFromSourceId(SourceType, (long)Id);
+                if (metadataMap != null)
+                {
+                    RetVal.MetadataMapId = (long)metadataMap;
+                }
                 RetVal = MassageResult(RetVal);
                 return RetVal;
             }

gaseous-server/Classes/MetadataManagement.cs

@@ -200,6 +200,84 @@ namespace gaseous_server.Classes
 			return null;
 		}
 
+		/// <summary>
+		/// Get the MetadataMapItem for the provided metadata source, and source id
+		/// </summary>
+		/// <param name="sourceType">
+		/// The type of the metadata source.
+		/// </param>
+		/// <param name="sourceId">
+		/// The ID of the metadata source.
+		/// </param>
+		/// <returns>
+		/// The MetadataMapItem, or null if it does not exist.
+		/// </returns>
+		/// <remarks>
+		/// This method will return the MetadataMapItem with the given sourceType and sourceId.
+		/// </remarks>
+		public static MetadataMap.MetadataMapItem? GetMetadataMapFromSourceId(HasheousClient.Models.MetadataSources sourceType, long sourceId)
+		{
+			Database db = new Database(Database.databaseType.MySql, Config.DatabaseConfiguration.ConnectionString);
+			string sql = "";
+			Dictionary<string, object> dbDict = new Dictionary<string, object>()
+			{
+				{ "@sourceType", sourceType },
+				{ "@sourceId", sourceId }
+			};
+			DataTable dt = new DataTable();
+
+			sql = "SELECT * FROM MetadataMapBridge WHERE MetadataSourceType = @sourceType AND MetadataSourceId = @sourceId;";
+			dt = db.ExecuteCMD(sql, dbDict);
+
+			if (dt.Rows.Count > 0)
+			{
+				MetadataMap.MetadataMapItem metadataMapItem = new MetadataMap.MetadataMapItem()
+				{
+					SourceType = (HasheousClient.Models.MetadataSources)dt.Rows[0]["MetadataSourceType"],
+					SourceId = (long)dt.Rows[0]["MetadataSourceId"],
+					Preferred = (bool)dt.Rows[0]["Preferred"]
+				};
+
+				return metadataMapItem;
+			}
+
+			return null;
+		}
+
+		/// <summary>
+		/// Get the Id of the MetadataMap for the provided metadata source, and source id
+		/// </summary>
+		/// <param name="sourceType">
+		/// The type of the metadata source.
+		/// </param>
+		/// <param name="sourceId">
+		/// The ID of the metadata source.
+		/// </param>
+		/// <returns>
+		/// The ID of the MetadataMap, or null if it does not exist.
+		/// </returns>
+		public static long? GetMetadataMapIdFromSourceId(HasheousClient.Models.MetadataSources sourceType, long sourceId)
+		{
+			Database db = new Database(Database.databaseType.MySql, Config.DatabaseConfiguration.ConnectionString);
+			string sql = "";
+			Dictionary<string, object> dbDict = new Dictionary<string, object>()
+			{
+				{ "@sourceType", sourceType },
+				{ "@sourceId", sourceId }
+			};
+			DataTable dt = new DataTable();
+
+			sql = "SELECT * FROM MetadataMapBridge WHERE MetadataSourceType = @sourceType AND MetadataSourceId = @sourceId;";
+			dt = db.ExecuteCMD(sql, dbDict);
+
+			if (dt.Rows.Count > 0)
+			{
+				return (long)dt.Rows[0]["ParentMapId"];
+			}
+
+			return null;
+		}
+
 		public void RefreshMetadata(bool forceRefresh = false)
 		{
 			Database db = new Database(Database.databaseType.MySql, Config.DatabaseConfiguration.ConnectionString);

gaseous-server/Classes/UserProfile.cs

@@ -1,5 +1,7 @@
 using System.Data;
 using gaseous_server.Classes.Metadata;
+using gaseous_server.Models;
+using HasheousClient.Models;
 
 namespace gaseous_server.Classes
 {
@@ -61,9 +63,10 @@ namespace gaseous_server.Classes
             {
                 try
                 {
+                    gaseous_server.Models.MetadataMap.MetadataMapItem metadataMap = Classes.MetadataManagement.GetMetadataMap((long)nowPlayingData.Rows[0]["GameId"]).PreferredMetadataMapItem;
                     NowPlaying = new Models.UserProfile.NowPlayingItem
                     {
-                        Game = Games.GetGame(HasheousClient.Models.MetadataSources.IGDB, (long)nowPlayingData.Rows[0]["GameId"]),
+                        Game = Games.GetGame(metadataMap.SourceType, metadataMap.SourceId),
                         Platform = Platforms.GetPlatform((long)nowPlayingData.Rows[0]["PlatformId"]),
                         Duration = Convert.ToInt64(nowPlayingData.Rows[0]["SessionLength"])
                     };

gaseous-server/wwwroot/scripts/account.js

@@ -368,6 +368,8 @@ class ProfileCard {
         this.ProfileBody.classList.add('profile-card-body');
         this.ProfileNowPlaying = document.createElement('div');
         this.ProfileNowPlaying.classList.add('profile-card-now-playing-body');
+        this.ProfileNowPlayingBg = document.createElement('div');
+        this.ProfileNowPlayingBg.classList.add('profile-card-now-playing-body-bg');
         this.ProfileNowPlayingLabel = document.createElement('div');
         this.ProfileNowPlayingLabel.classList.add('profile-card-now-playing-label');
         this.ProfileNowPlayingCover = document.createElement('div');
@@ -388,6 +390,7 @@ class ProfileCard {
         this.ProfileBody.appendChild(this.Quip);
 
         // now playing
+        this.ProfileNowPlayingBg.appendChild(this.ProfileNowPlaying);
         this.ProfileNowPlaying.appendChild(this.ProfileNowPlayingLabel);
         this.ProfileNowPlaying.appendChild(this.ProfileNowPlayingCover);
         this.ProfileNowPlaying.appendChild(this.ProfileNowPlayingTitle);
@@ -397,7 +400,7 @@ class ProfileCard {
         // assemble card
         this.Card.appendChild(this.BackgroundImage);
         this.Card.appendChild(this.ProfileBody);
-        this.Card.appendChild(this.ProfileNowPlaying);
+        this.Card.appendChild(this.ProfileNowPlayingBg);
         this.Card.appendChild(this.Avatar);
 
         this.ProfileData = null;
@@ -453,11 +456,14 @@ class ProfileCard {
 
                     if (profile.nowPlaying) {
                         callingObject.ProfileNowPlayingLabel.innerHTML = "Now Playing";
+                        let cardImage = '';
                         if (profile.nowPlaying.game.cover) {
-                            callingObject.ProfileNowPlayingCover.style = "background-image: url('/api/v1.1/Games/" + profile.nowPlaying.game.id + "/cover/" + profile.nowPlaying.game.cover.id + "/image/cover_big/" + profile.nowPlaying.game.cover.id + ".jpg');";
+                            cardImage = "/api/v1.1/Games/" + profile.nowPlaying.game.metadataMapId + "/cover/" + profile.nowPlaying.game.cover + "/image/cover_big/" + profile.nowPlaying.game.cover + ".jpg";
                         } else {
-                            callingObject.ProfileNowPlayingCover.style = "background-image: url('/images/unknowngame.png');";
+                            cardImage = "/images/unknowngame.png";
                         }
+                        callingObject.ProfileNowPlayingCover.style = "background-image: url(\"" + cardImage + "\");";
+                        callingObject.ProfileNowPlayingBg.style = "background-image: url(\"" + cardImage + "\");";
                         callingObject.ProfileNowPlayingTitle.innerHTML = profile.nowPlaying.game.name;
                         callingObject.ProfileNowPlayingPlatform.innerHTML = profile.nowPlaying.platform.name;
                         if (profile.nowPlaying.duration === 1) {
@@ -465,9 +471,9 @@ class ProfileCard {
                         } else {
                             callingObject.ProfileNowPlayingDuration.innerHTML = profile.nowPlaying.duration + " minutes";
                         }
-                        callingObject.ProfileNowPlaying.style.display = "";
+                        callingObject.ProfileNowPlayingBg.style.display = "";
                     } else {
-                        callingObject.ProfileNowPlaying.style.display = "none";
+                        callingObject.ProfileNowPlayingBg.style.display = "none";
                     }
 
                     callingObject.ProfileData = profile;

gaseous-server/wwwroot/styles/style.css

@@ -2730,14 +2730,24 @@ button:not(.select2-selection__choice__remove):not(.select2-selection__clear):no
     color: var(--profile-card-quip-text-color);
 }
 
+.profile-card-now-playing-body-bg {
+    position: relative;
+    min-height: 70px;
+    background-position: center;
+    background-size: cover;
+}
+
 .profile-card-now-playing-body {
     position: relative;
     min-height: 70px;
-    background-color: var(--profile-card-body-background);
+    /* background-color: var(--profile-card-body-background); */
-    padding-top: 0px;
+    background-color: var(--profile-card-now-playing-background-color);
+    padding-top: 10px;
     padding-left: 10px;
     padding-right: 10px;
     padding-bottom: 10px;
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
 }
 
 .profile-card-now-playing-label {
@@ -2748,7 +2758,7 @@ button:not(.select2-selection__choice__remove):not(.select2-selection__clear):no
 .profile-card-now-playing-cover {
     position: absolute;
     left: 10px;
-    top: 25px;
+    top: 35px;
     width: 40px;
     height: 40px;
     background-position: center center;

gaseous-server/wwwroot/styles/stylevars.css

@@ -124,6 +124,7 @@
     --profile-card-body-background: rgb(133, 156, 163);
     --profile-card-display-name-text-color: rgb(255, 255, 255);
     --profile-card-quip-text-color: var(--profile-card-display-name-text-color);
+    --profile-card-now-playing-background-color: rgba(0, 0, 0, 0.7);
 
     /* login */
     /* ------------------------------------------- */