search tags

loading placeholder items

AobaClient/assets/style/main.scss

@@ -102,6 +102,9 @@ $mediaItemSize: 300px;
 				transform: translateY(0%);
 			}
 		}
+
+		&.placeholder {
+		}
 	}
 }
 

AobaClient/src/components/media_grid.rs

@@ -52,7 +52,7 @@ pub fn MediaGrid(props: MediaGridProps) -> Element {
 				div {
 					class: "mediaGrid",
 					{result.items.iter().map(|itm| rsx!{
-						MediaItem { item: itm.clone() }
+						MediaItem { item: Some(itm.clone()) }
 					})},
 				}
 			},
@@ -68,9 +68,9 @@ pub fn MediaGrid(props: MediaGridProps) -> Element {
 		None => rsx! {
 			div{
 				class: "mediaGrid",
-				div {
+				{(0..50).map(|_| rsx!{
-					"Loading..."
+					MediaItem {}
-				}
+				})}
 			}
 		},
 	}

AobaClient/src/components/media_item.rs

@@ -4,26 +4,41 @@ use crate::{HOST, rpc::aoba::MediaModel};
 
 #[derive(PartialEq, Clone, Props)]
 pub struct MediaItemProps {
-	pub item: MediaModel,
+	pub item: Option<MediaModel>,
 }
 
 #[component]
 pub fn MediaItem(props: MediaItemProps) -> Element {
-	let mtype = props.item.media_type().as_str_name();
+	if let Some(item) = props.item {
-	let filename = props.item.file_name;
+		let mtype = item.media_type().as_str_name();
-	let id = props.item.media_id.unwrap().value;
+		let filename = item.file_name;
+		let id = item.media_id.unwrap().value;
 
-	let src = format!("{HOST}/m/thumb/{id}");
+		let src = format!("{HOST}/m/thumb/{id}");
-	rsx! {
+		return rsx! {
-		a { class: "mediaItem", href: "{HOST}/m/{id}", target: "_blank",
+			a { class: "mediaItem", href: "{HOST}/m/{id}", target: "_blank",
-			img { src }
+				img { src }
-			span { class: "info",
+				span { class: "info",
-				span { class: "name", "{filename}" }
+					span { class: "name", "{filename}" }
-				span { class: "details",
+					span { class: "details",
-					span { "{mtype}" }
+						span { "{mtype}" }
-					span { "{props.item.view_count}" }
+						span { "{item.view_count}" }
+					}
 				}
 			}
-		}
+		};
+	} else {
+		return rsx! {
+			div { class: "mediaItem placeholder",
+				img { },
+				span { class: "info",
+					span { class: "name" }
+					span { class: "details",
+						span { }
+						span { }
+					}
+				}
+			}
+		};
 	}
 }

AobaCore/AobaCore.csproj

@@ -9,13 +9,14 @@
 	<ItemGroup>
 		<PackageReference Include="FFMpegCore" Version="5.2.0" />
 		<PackageReference Include="Isopoh.Cryptography.Argon2" Version="2.0.0" />
-		<PackageReference Include="Microsoft.Extensions.DependencyInjection.Abstractions" Version="9.0.5" />
+		<PackageReference Include="Microsoft.Extensions.DependencyInjection.Abstractions" Version="9.0.6" />
 		<PackageReference Include="MaybeError" Version="1.1.0" />
-		<PackageReference Include="Microsoft.Extensions.Hosting.Abstractions" Version="9.0.5" />
+		<PackageReference Include="Microsoft.Extensions.Hosting.Abstractions" Version="9.0.6" />
 		<PackageReference Include="MongoDB.Driver" Version="3.4.0" />
 		<PackageReference Include="MongoDB.Driver.Core.Extensions.DiagnosticSources" Version="2.1.0" />
 		<PackageReference Include="SixLabors.ImageSharp.Drawing" Version="2.1.6" />
-		<PackageReference Include="System.IdentityModel.Tokens.Jwt" Version="8.11.0" />
+		<PackageReference Include="System.IdentityModel.Tokens.Jwt" Version="8.12.1" />
+		<PackageReference Include="ZLinq" Version="1.4.12" />
 	</ItemGroup>
 
 </Project>

AobaCore/Models/Media.cs

@@ -15,6 +15,7 @@ public class Media
 	public int ViewCount { get; set; }
 	public ObjectId Owner { get; set; }
 	public DateTime UploadDate { get; set; }
+	public string[] Tags { get; set; } = [];
 
 
 	public static readonly Dictionary<string, MediaType> KnownTypes = new()
@@ -66,6 +67,7 @@ public class Media
 		Owner = owner;
 		Id = ObjectId.GenerateNewId();
 		UploadDate = DateTime.UtcNow;
+		Tags = DeriveTags(filename);
 	}
 
 	public string GetMediaUrl()
@@ -85,6 +87,14 @@ public class Media
 		else
 			return MediaType.Raw;
 	}
+
+	public static string[] DeriveTags(string filename)
+	{
+		return filename.Split('_')
+			.SelectMany(v => v.Split('-'))
+			.SelectMany(v => v.Split(' '))
+			.ToArray();
+	}
 }
 
 public enum MediaType

AobaCore/Services/AobaIndexCreationService.cs

@@ -17,7 +17,9 @@ public class AobaIndexCreationService(IMongoDatabase db): BackgroundService
 	{
 		BsonSerializer.RegisterSerializer(new EnumSerializer<ThumbnailSize>(BsonType.String));
 		var textKeys = Builders<Media>.IndexKeys
-			.Text(m => m.Filename);
+			.Text(m => m.Filename)
+			.Text(m => m.Ext)
+			.Text(m => m.Tags);
 
 		var textModel = new CreateIndexModel<Media>(textKeys, new CreateIndexOptions
 		{

AobaCore/Services/AobaService.cs

@@ -95,4 +95,17 @@ public class AobaService(IMongoDatabase db)
 			//ignore if file was not found
 		}
 	}
+
+	public async Task DeriveTagsAsync(CancellationToken cancellationToken = default)
+	{
+		var mediaItems = await _media.Find(Builders<Media>.Filter.Exists(m => m.Tags, false))
+			.ToListAsync(cancellationToken);
+		Console.WriteLine($"Derving Tag for {mediaItems.Count} items");
+		foreach (var mediaItem in mediaItems)
+		{
+			mediaItem.Tags = Media.DeriveTags(mediaItem.Filename);
+			await _media.UpdateOneAsync(m => m.Id == mediaItem.Id, Builders<Media>.Update.Set(m => m.Tags, mediaItem.Tags), null, cancellationToken);
+		}
+		Console.WriteLine("All Tags Derived");
+	}
 }

AobaServer/AobaServer.csproj

@@ -18,7 +18,7 @@
     <PackageReference Include="Isopoh.Cryptography.Argon2" Version="2.0.0" />
     <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="9.0.6" />
     <PackageReference Include="Microsoft.IdentityModel.JsonWebTokens" Version="8.12.1" />
-    <PackageReference Include="Microsoft.VisualStudio.Azure.Containers.Tools.Targets" Version="1.21.2" />
+    <PackageReference Include="Microsoft.VisualStudio.Azure.Containers.Tools.Targets" Version="1.22.1" />
     <PackageReference Include="MimeTypesMap" Version="1.0.9" />
 	<PackageReference Include="OpenTelemetry.Exporter.OpenTelemetryProtocol" Version="1.12.0" />
 	<PackageReference Include="OpenTelemetry.Exporter.Prometheus.AspNetCore" Version="1.9.0-beta.2" />