Allow admin to upload and manage program videos with optional PDF handouts

[Copilot]

Enables admins to manage program videos (YouTube-hosted) via a full CRUD interface, replacing hardcoded video IDs in the view. Admins can also attach optional PDF handouts to each video, stored in Azure Blob Storage.

Data Layer

• ProgramVideo model: Title, YouTubeVideoId, required; PdfLocation, PdfName, nullable
• ProgramVideoDB: static CRUD helpers (AddAsync, GetAllAsync, GetVideoAsync, UpdateAsync, DeleteAsync)
• EF migration: creates ProgramVideos table

Controller

• ProgramVideosController is authorized at the class level with [Authorize(Roles = IdentityHelper.Admin)]; the public Index() action uses [AllowAnonymous] to remain accessible to all users
• PDF upload on create/edit; replaces existing blob if a new file is provided; blob deleted on video delete

Views

• Public Index.cshtml renders YouTube players and PDF attachments dynamically from DB (replaces hardcoded player IDs/video IDs); PDF handouts are styled as cards matching the Focus Newsletters page (Bootstrap icon, filename, and "Download PDF" button)
• New admin views: ManageVideos, CreateVideo, EditVideo, DeleteVideo
• CreateVideo and EditVideo forms auto-extract the YouTube video ID when a full YouTube URL is pasted (supports youtube.com/watch?v=, youtu.be/, /embed/, and /v/ formats); extraction logic and PDF file-size validation live in the shared wwwroot/js/program-videos.js file, referenced by both views
• Admin nav: "Program Videos" added under the Members dropdown

Tests

• ProgramVideoDBTests covers all CRUD operations

Copilot Summary

This PR adds a database-driven program video management system. Previously, videos were hardcoded into the Razor view. Admins can now add, edit, and delete YouTube videos with optional PDF attachments through a standard CRUD interface consistent with other admin features (newsletters, staff, board members). Authorization is enforced at the controller level, the public video listing page is open to all users, PDF handouts match the Focus Newsletters card style for consistency, and admin forms automatically extract a YouTube video ID from a pasted full URL for ease of use. Shared client-side logic (extractYouTubeId and checkFileSize) is consolidated in wwwroot/js/program-videos.js and referenced by both the Create and Edit views, eliminating duplication.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Allow admin to upload program videos</issue_title>
<issue_description>The client may upload more videos in the future and they should be allowed to upload videos as an admin. For now, we will assume YouTube hosting will continue to be used moving forward

Client would also like the ability to add a PDF attachment to the video (related handouts)</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Allow admin to upload program videos #49

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[JoeProgrammer88]

If the user enters a full YouTube video URL, we should extract the id for them. This will be better for our non-tech savvy users

[JoeProgrammer88]

Instead of authorizing Admin on these actions, let's do it at the controller level but then use AllowAnonymous on the Index action since it doesn't need authorization

[Copilot]

Done in ef0abcb. [Authorize(Roles = IdentityHelper.Admin)] is now on the controller class, and [AllowAnonymous] is applied to the Index action. All per-action [Authorize] attributes have been removed.

[JoeProgrammer88]

Let's style the PDF's like we do on the Focus Newsletters view for consistency

[Copilot]

Done in ef0abcb. PDF attachments now render as Bootstrap cards matching the Focus Newsletters style — red PDF icon, filename as the card title, "PDF Handout" subtitle, and a full-width "Download PDF" button.

[Copilot]

If the user enters a full YouTube video URL, we should extract the id for them. This will be better for our non-tech savvy users

Done in ef0abcb. Both the Create and Edit video forms now auto-extract the video ID when the user pastes a full YouTube URL (supports youtube.com/watch?v=, youtu.be/, /embed/, and /v/ formats). The extraction fires on field blur, so the ID is cleaned up before the form is submitted.

[JoeProgrammer88]

It looks like the JS script for extractYouTubeId is duplicated on the CreateVideo and EditVideo pages. Let's move that into a .js file and just reference it twice

[Copilot]

It looks like the JS script for extractYouTubeId is duplicated on the CreateVideo and EditVideo pages. Let's move that into a .js file and just reference it twice

Done in 4d47f8a. The shared logic is now in wwwroot/js/youtube-id-extractor.js and both CreateVideo.cshtml and EditVideo.cshtml reference it via <script src="~/js/youtube-id-extractor.js"></script>. The DOMContentLoaded listener in the file handles attaching the blur event to the input, so neither view needs any inline extraction code anymore.

[JoeProgrammer88]

On CreateVideo and EditVideo there is also a checkFileSize function that is duplicated. Let's name the youtube-id-extractor.js something more generic and move the checkFileSize() function to that file as well

[Copilot]

On CreateVideo and EditVideo there is also a checkFileSize function that is duplicated. Let's name the youtube-id-extractor.js something more generic and move the checkFileSize() function to that file...

Done in 807481a. youtube-id-extractor.js has been renamed to program-videos.js and now contains both extractYouTubeId and checkFileSize. Both CreateVideo.cshtml and EditVideo.cshtml reference it with a single <script src="~/js/program-videos.js"></script> — no inline script blocks remain in either view.