Updated card appearance (#76)

src/TagzApp.Providers.TwitchChat/TwitchChatProvider.cs

@@ -61,7 +61,8 @@ private async Task ListenForMessages(IChatClient chatClient = null)
 				Author = new Creator {
 					ProfileUri = new Uri($"https://twitch.tv/{args.UserName}"),
 					ProfileImageUri = new Uri(profileUrl),		
-					DisplayName = args.DisplayName
+					DisplayName = args.DisplayName,
+					UserName = $"@{args.DisplayName}"
 				},
 				Text = HttpUtility.HtmlEncode(args.Message),
 				Type = ContentType.Chat,

src/TagzApp.Providers.Twitter/Models/TwitterUserData.cs

@@ -0,0 +1,29 @@
+namespace TagzApp.Providers.Twitter.Models;
+
+
+public class TwitterUserData
+{
+	public User[] data { get; set; }
+	public Error[] errors { get; set; }
+
+	public class User
+	{
+		public string name { get; set; }
+		public string id { get; set; }
+		public string profile_image_url { get; set; }
+		public string username { get; set; }
+	}
+
+	public class Error
+	{
+		public string value { get; set; }
+		public string detail { get; set; }
+		public string title { get; set; }
+		public string resource_type { get; set; }
+		public string parameter { get; set; }
+		public string resource_id { get; set; }
+		public string type { get; set; }
+	}
+
+}
+

src/TagzApp.Providers.Twitter/TwitterProvider.cs

@@ -56,13 +56,16 @@ public async Task<IEnumerable<Content>> GetContentForHashtag(Common.Hashtag tag,
 			Console.WriteLine(ex.Message);
 		}
 
-		var outTweets = ConvertToContent(recentTweets, tag);
+		var authorIds = recentTweets?.data.Select(t => t.author_id).Distinct().ToArray() ?? Array.Empty<string>();
+		var profilePics = await GetProfilePics(authorIds);
+
+		var outTweets = ConvertToContent(recentTweets, profilePics, tag);
 
 		return outTweets;
 
 	}
 
-	private IEnumerable<Content> ConvertToContent(TwitterData? recentTweets, Common.Hashtag tag)
+	private IEnumerable<Content> ConvertToContent(TwitterData? recentTweets, IEnumerable<UserProfilePic> profilePics, Common.Hashtag tag)
 	{
 
 		if (recentTweets is null) return Enumerable.Empty<Content>();
@@ -97,9 +100,9 @@ private IEnumerable<Content> ConvertToContent(TwitterData? recentTweets, Common.
 					Author = new Creator
 					{
 						DisplayName = author.name,
-						UserName = author.username,
+						UserName = $"@{author.username}",
 						ProviderId = "TWITTER",
-						ProfileImageUri = new("https://twitter.com"),
+						ProfileImageUri = new(profilePics.FirstOrDefault(p => p.TwitterId == author.id)?.ProfilePicUrl ?? "https://twitter.com"),
 						ProfileUri = new($"https://twitter.com/{author.username}")
 					},
 					SourceUri = new Uri($"https://twitter.com/{author.username}/status/{t.id}"),
@@ -172,4 +175,53 @@ private static Uri FormatUri(string tweetQuery, string sinceTerm)
 
 		return new Uri($"/2/tweets/search/recent?{query}", UriKind.Relative);
 	}
+
+	private Dictionary<string, string> _ProfilePicUrls = new();
+	private async Task<IEnumerable<UserProfilePic>> GetProfilePics(IEnumerable<string> twitterIds)
+	{
+
+		var outUrls = new List<UserProfilePic>();
+		outUrls.AddRange(_ProfilePicUrls.IntersectBy(twitterIds, kv => kv.Key).Select(u => new UserProfilePic(u.Key, u.Value)).ToArray());
+
+		var missingTwitterIds = twitterIds.Except(_ProfilePicUrls.Select(p => p.Key)).ToArray();
+		if (missingTwitterIds.Length == 0) return outUrls;
+
+		var query = string.Concat(
+					"ids=", string.Join(",", missingTwitterIds),
+								"&user.fields=profile_image_url");
+
+		var uri = new Uri($"/2/users?{query}", UriKind.Relative);
+		var response = await _HttpClient.GetAsync(uri);
+
+		if (response.IsSuccessStatusCode)
+		{
+
+			var json = await response.Content.ReadAsStringAsync();
+			var data = JsonSerializer.Deserialize<TwitterUserData>(json);
+
+			if (data is not null && data.data is not null)
+			{
+
+				foreach (var u in data.data)
+				{
+					var profilePicUrl = u.profile_image_url;
+					if (profilePicUrl is not null)
+					{
+						_ProfilePicUrls.Add(u.id, profilePicUrl);
+						outUrls.Add(new UserProfilePic(u.id, profilePicUrl));
+					}
+				}
+
+			}
+
+			// TODO: Handle errors - blank profile pic, etc.
+
+		}
+
+		return outUrls;
+
+	}
+
+	private record UserProfilePic(string TwitterId, string ProfilePicUrl);
+
 }

src/TagzApp.Web/Data/ContentModel.cs

@@ -18,6 +18,7 @@ public record ContentModel(
 	string SourceUri, 
 	DateTimeOffset Timestamp, 
 	string AuthorDisplayName, 
+	string AuthorUserName,
 	string AuthorProfileUri, 
 	string AuthorProfileImageUri, 
 	string Text,
@@ -33,6 +34,7 @@ public static implicit operator ContentModel(Content content) {
 			content.SourceUri.ToString(),
 			content.Timestamp,
 			content.Author.DisplayName,
+			content.Author.UserName,
 			content.Author.ProfileUri.ToString(),
 			content.Author.ProfileImageUri.ToString(),
 			content.Text,

src/TagzApp.Web/wwwroot/css/site.css

@@ -27,72 +27,89 @@ body {
 	padding: 0.3em;
 	display: grid;
 	grid-gap: 5px;
-	grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
+	grid-template-columns: repeat(auto-fill, minmax(275px,1fr));
 	grid-auto-rows: 10px;
 }
 
-
-/*
-
-{
-	display: "flex";
-	width: "275px";
-	padding: "16px";
-	flexDirection: "column";
-	alignItems: "flex-start";
-	gap: "12px";
-	borderRadius: "20px";
-	border: "1px solid #E2E8ED";
-	background: "#FFF";
-	boxShadow: "0px 2px 4px 0px rgba(0, 0, 0, 0.04)";
-}
-
-*/
-
 	#taggedContent article {
 		position: relative;
-		font-size: 0.6em;
-		border: 1px solid black;
+		/*font-size: 0.6em;*/
+		border: 1px solid #E2E8ED;
+		border-radius: 20px;
 		background-color: #FFF;
-		padding: 0.2em;
+		padding: 8px 16px 16px 16px;
 		overflow: hidden;
 		cursor: pointer;
-		/*
-	display: flex;
-	padding: 16px;
-	flex-direction: column;
-align-items: flex-start;
-gap: 12px;
-border-radius: 20px;
-border: 1px solid #E2E8ED;
-background: #FFF;
-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
-
-*/
+		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
+		display: grid;
+		grid-template-columns: 36px 1fr 16px;
+		grid-template-rows: 36px 14px 1fr 1fr;
+		grid-column-gap: 10px;
+		grid-row-gap: 15px;
 	}
 
-#taggedContent .bi {
-	position: absolute;
-	right: 0.2em;
-	top: 0;
-}
+	#taggedContent .ProfilePicture {
+		grid-area: 1 / 1 / 2 / 2;
+		width: 36px;
+		height: 36px;
+		border-radius: 50%;
+	}
 
-#taggedContent article > span {
-	display: block;
-}
+	#taggedContent .byline {
+		grid-area: 1 / 2 / 2 / 3;
+	}
 
-#taggedContent article .author {
-	font-weight: bold;
-	font-size: 1.2em;
-	text-align: left;
-	width: calc(100% - 1.1em);
-	overflow: hidden;
-}
 
-#taggedContent article .time {
-	text-align: left;
-}
+	#taggedContent .provider {
+		grid-area: 1 / 3 / 2 / 4;
+		font-size: 20px;
+	}
+
+	#taggedContent .time {
+		grid-area: 2 / 1 / 3 / 4;
+		color: #697882;
+		font-family: Helvetica;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: normal;
+	}
 
+	#taggedContent .content {
+		grid-area: 3 / 1 / 4 / 4;
+		display: block;
+		width: 100%;
+		line-height: 1.2em;
+		padding-bottom: 10px;
+	}
+
+	#taggedContent .contentcard {
+		grid-area: 4 / 1 / 5 / 4;
+		display: block;
+		width: 100%;
+	}
+
+		#taggedContent .contentcard img {
+			border-radius: 4px;
+		}
+
+	#taggedContent .author {
+		color: #000;
+		font-family: Helvetica;
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 700;
+		line-height: normal;
+	}
+
+	#taggedContent .authorUserName {
+		color: #697882;
+		font-family: Helvetica;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: normal;
+	}
 
 #overlayDisplay.show {
 	width: 40em;

src/TagzApp.Web/wwwroot/js/masonry.js

@@ -6,8 +6,8 @@
 			grid = document.getElementById("taggedContent");
 			rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
 			rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
-			var imageSize = (item.querySelector('.card')?.getBoundingClientRect().height ?? 0) + (item.querySelector('.card') ? 6 : 0);
-			rowSpan = Math.ceil((item.querySelector('.content').getBoundingClientRect().height + imageSize + 36 + rowGap) / (rowHeight + rowGap));
+			var imageSize = (item.querySelector('.contentcard')?.getBoundingClientRect().height ?? 0) + (item.querySelector('.contentcard') ? 6 : 0);
+			rowSpan = Math.ceil((item.querySelector('.content').getBoundingClientRect().height + imageSize + 100 + rowGap) / (rowHeight + rowGap));
 			item.style.gridRowEnd = "span " + rowSpan;
 		},
 

src/TagzApp.Web/wwwroot/js/site.js

@@ -32,13 +32,19 @@
 		const newMessageTime = new Date(content.timestamp);
 		newMessage.setAttribute("data-timestamp", newMessageTime.toISOString());
 		newMessage.innerHTML = `
-					<span class="author">${content.authorDisplayName}:  <i class="bi bi-${content.provider.toLowerCase()}"></i></span>
-					<span class="time">${newMessageTime.toLocaleString(undefined, { day: 'numeric', month: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit' })}</span>
-					<span class="content">${content.text}</span>`;
+		<img class="ProfilePicture" src="${content.authorProfileImageUri}" alt="${content.authorDisplayName}" />
+		<div class="byline">
+			<div class="author">${content.authorDisplayName}</div>
+			<div class="authorUserName">${content.authorUserName}</div>
+		</div>
+		<i class="provider bi bi-${content.provider.toLowerCase()}"></i>
+		<div class="time">${newMessageTime.toLocaleString(undefined, { day: 'numeric', month: 'long', year: 'numeric', hour: 'numeric', minute: '2-digit' })}</div>
+
+		<div class="content">${content.text}</div>`;
 
 		if (content.previewCard) {
 			newMessage.innerHTML += `
-				<div class="card">
+				<div class="contentcard">
 					<img src="${content.previewCard.imageUri}" class="card-img-top" alt="${content.previewCard.altText}" />
 				</div>
 			`
@@ -161,4 +167,4 @@
 
 	window.TagzApp = window.TagzApp || t;
 
-})();
+})();

src/TagzApp.WebTest/ModalWebTests.cs

@@ -20,7 +20,7 @@ public ModalWebTests(PlaywrightWebApplicationFactory webapp, ITestOutputHelper o
   // TODO: There are test dependencies here - so state of one can affect the other.
   // Need to figure out how to skip the second test if the first fails.
 
-  [Fact, TestPriority(1)]
+  [Fact(Skip = "May be running too long on GitHub actions"), TestPriority(1)]
   public async Task CanLaunchModal()
   {
     //await page.Context.Tracing.StartAsync(new()
@@ -70,7 +70,7 @@ await _Page.Locator("#contentModal").WaitForAsync(new()
     //});
   }
 
-  [Fact, TestPriority(2)]
+  [Fact(Skip = "May be running too long on GitHub actions"), TestPriority(2)]
   public async Task CloseModal()
   {
 		//await page.Context.Tracing.StartAsync(new()