Added mute function to card AfterRender (#386)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
FritzAndFriends · Feb 27, 2024 · 0918161 · 0918161
1 parent 01218e4
commit 0918161
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/src/TagzApp.Blazor.Client/Components/ModerationMessage.razor b/src/TagzApp.Blazor.Client/Components/ModerationMessage.razor
@@ -64,7 +64,7 @@
 		if (Content.Content.PreviewCard.ImageUri.ToString().EndsWith(".mp4"))
 		{
 			<div class="contentcard">
-				<video muted="muted" controls="controls" autoplay src="@Content.Content.PreviewCard.ImageUri" class="card-img-top" alt="@Content.Content.PreviewCard.AltText"></video>
+				<video id="video_@Content.ProviderId" muted controls="controls" autoplay src="@Content.Content.PreviewCard.ImageUri" class="card-img-top" alt="@Content.Content.PreviewCard.AltText"></video>
 			</div>
 		}
 		else
@@ -116,9 +116,15 @@
 
 	private bool ShowModerationActions = false;
 
-	protected override Task OnAfterRenderAsync(bool firstRender)
+	protected override async Task OnAfterRenderAsync(bool firstRender)
 	{
 
+
+		if (Content.Content.HasVideoPreview)
+		{
+			await JSRuntime.InvokeVoidAsync("window.WaterfallUi.MuteVideo", $"video_{Content.ProviderId}");
+		}
+
 		if (firstRender)
 		{
 			JSRuntime.InvokeVoidAsync("window.Masonry.resizeGridItem", thisArticle);
@@ -129,7 +135,7 @@
 
 		}
 
-		return base.OnAfterRenderAsync(firstRender);
+		await base.OnAfterRenderAsync(firstRender);
 	}
 
 	private const string CSS_APPROVED = "status-approved";

diff --git a/src/TagzApp.Blazor.Client/Components/WaterfallMessage.razor b/src/TagzApp.Blazor.Client/Components/WaterfallMessage.razor
@@ -33,7 +33,7 @@
 		if (Content.PreviewCard.ImageUri.ToString().EndsWith(".mp4"))
 		{
 			<div class="contentcard">
-				<video muted="muted" controls="controls" autoplay src="@Content.PreviewCard.ImageUri" class="card-img-top" alt="@Content.PreviewCard.AltText"></video>
+				<video id="video_@Content.ProviderId" controls="controls" autoplay src="@Content.PreviewCard.ImageUri" class="card-img-top" alt="@Content.PreviewCard.AltText"></video>
 			</div>
 		}
 		else
@@ -61,12 +61,15 @@
 	private List<string> _CssClasses = new();
 	private string CssClass => string.Join(" ", _CssClasses);
 
-	protected override Task OnAfterRenderAsync(bool firstRender)
+	protected override async Task OnAfterRenderAsync(bool firstRender)
 	{
 
+		if (Content.HasVideoPreview) {
+			await JSRuntime.InvokeVoidAsync("window.WaterfallUi.MuteVideo", $"video_{Content.ProviderId}");
+		}
 		JSRuntime.InvokeVoidAsync("window.Masonry.resizeGridItem", thisArticle);
 
-		return base.OnAfterRenderAsync(firstRender);
+		await base.OnAfterRenderAsync(firstRender);
 	}
 
 }
diff --git a/src/TagzApp.Blazor/wwwroot/js/waterfall.js b/src/TagzApp.Blazor/wwwroot/js/waterfall.js
@@ -378,6 +378,11 @@
 		},
 
 		Messages: messages,
+
+		MuteVideo: function (video) {
+			var video = document.getElementById(video);
+			video.muted = true;
+		},
 	};
 
 	window.WaterfallUi = waterfallUi;

diff --git a/src/TagzApp.ViewModels/Data/ContentModel.cs b/src/TagzApp.ViewModels/Data/ContentModel.cs
@@ -29,6 +29,8 @@ Emote[] Emotes
 )
 {
 
+	public bool HasVideoPreview => PreviewCard?.ImageUri.ToString().EndsWith(".mp4") ?? false;
+
 	// TODO: Refactor to not take a dependency on the Common library
 	public static explicit operator ContentModel(Content content)
 	{