Exchange56.YouTube.Common 1.0.4

Exchange56.YouTube

A Blazor component library for browsing and curating YouTube playlist recommendations, with personal metadata (rating, notes, topics, watched state, featured/sort order) backed by Cosmos DB.

The library ships with both Server-Side Blazor and Blazor WebAssembly + API demos so you can pick the hosting model that fits your app.

Requirements

• .NET 10 SDK
• A Cosmos DB account (or the local Cosmos DB Emulator)
• A YouTube Data API v3 key (required to import playlists from YouTube)

Get an API key from the Google Cloud Console: create a project, enable YouTube Data API v3, and create an API key in Credentials.

Packages

Demos

The repo contains three runnable sample projects. They are the canonical reference for configuration and wiring — read them and copy what you need.

Configuration lives in each demo's appsettings.json / appsettings.Development.json. You'll need a Cosmos DB connection string and (for imports) a YouTube API key — everything else has sensible defaults.

Quick start

Server-Side Blazor

dotnet run --project DemoBlazor/DemoBlazor.csproj

Then browse to /video-recommendations.

Blazor WebAssembly + API

In two terminals:

dotnet run --project DemoApi/DemoApi.csproj
dotnet run --project DemoBlazorWasm/DemoBlazorWasm.csproj

The WASM client is configured (in DemoBlazorWasm/Program.cs) to point at the API.

Using the library in your own app

Server-side: register the services

From DemoBlazor/Program.cs:

using Exchange56.YouTube.Core;
using Radzen;

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

builder.Services.AddRadzenComponents();

builder.Services.AddYouTubeServices(builder.Configuration);
builder.Services.AddYouTubePartitionKeyResolver();

var app = builder.Build();

// Optional: seed the curated demo playlist (idempotent)
await app.Services.SeedYouTubeDataAsync();

Server-side: drop in the viewer

From DemoBlazor/Components/Pages/PlaylistDetails.razor:

@page "/playlist/{PlaylistId}"
@using Exchange56.YouTube.RadzenComponents

<YouTubeRecommendationViewer @key="PlaylistId" PlaylistId="@PlaylistId" />

@code {
    [Parameter] public string? PlaylistId { get; set; }
}

PlaylistSelector (used by VideoRecommendations.razor) gives you a full picker + viewer experience in one component.

WebAssembly: read-only client

From DemoBlazorWasm/Program.cs:

using Exchange56.YouTube.RadzenComponents;

var apiBaseUrl = "https://localhost:7163";
builder.Services.AddRadzenYouTubeServices(apiBaseUrl);
builder.Services.AddRadzenComponents();

The AddRadzenYouTubeServices() extension (from Exchange56.YouTube.RadzenComponents) handles HttpClient setup and registers IVideoServiceReadOnly / IPlaylistServiceReadOnly implementations for WASM.

WASM consumers use the read-only component variants — for example, from DemoBlazorWasm/Pages/PlaylistDetails.razor:

@page "/playlist/{PlaylistId}"

<YouTubeRecommendationViewerReadOnly PlaylistId="@PlaylistId" />

@code {
    [Parameter] public string PlaylistId { get; set; } = string.Empty;
}

A numbered playlist list (e.g. for a Top 10) — from DemoBlazorWasm/Pages/PlaylistViewer.razor:

<VideoPlaylistListComponent PlaylistId="@PlaylistId"
                            ShowFilters="false"
                            NumberingMode="Descending"
                            OnVideoSelected="@HandleVideoSelection" />

Components

Data model

RecommendedVideo (see Exchange56.YouTube.Common/Models) carries the standard YouTube fields plus your personal metadata:

public class RecommendedVideo
{
    public string Id { get; set; }            // Cosmos document id
    public string VideoId { get; set; }       // YouTube video id
    public string Title { get; set; }
    public string MyNotes { get; set; }
    public string Difficulty { get; set; }    // Beginner | Intermediate | Advanced
    public string[] Topics { get; set; }
    public int DurationMinutes { get; set; }
    public DateTime DateAdded { get; set; }
    public int MyRating { get; set; }         // 0–5
    public string[] KeyLearnings { get; set; }
    public bool IsWatched { get; set; }
    public DateTime? WatchedAt { get; set; }
    public string PlaylistId { get; set; }    // Cosmos partition key
    public int? SortOrder { get; set; }       // null = not curated
    public bool Featured { get; set; }
}

Videos are partitioned by PlaylistId. Use SortOrder (1, 2, 3, …) together with Featured to drive curated lists; videos with SortOrder == null are simply excluded from the curated ordering.

License

MIT License with an AI Training Restriction — see LICENSE.

The code is licensed for human use. It may not be used to train or fine-tune machine learning models or LLMs without prior written permission. Standard developer use, including AI-assisted coding tools, is permitted.