feat: migrate video shorts to learning resources API

[daniellefrappier18]

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/11036

Description (What does it do?)

This branch migrates Video Shorts from the old v0 API shape to the v1 learning-resources API shape. The modal now uses VideoResource and plays video.streaming_url instead of the old direct MP4 URL.

Known Issue
Video Shorts can look soft when playback first begins in the modal.

Why It’s Happening
The old implementation played a direct MP4. The new implementation plays an HLS streaming_url.

The v1 API provides Video Shorts as HLS streams via .m3u8 streaming_url rather than direct MP4 files. An .m3u8 URL is an HLS playlist, not a single video file, so the browser now performs adaptive streaming selection during playback. In testing, videos start on a low HLS rendition and then become sharper after a short period, which suggests native HLS is choosing a low-quality variant for fast startup and switching up once playback stabilizes. If we want to avoid that behavior entirely, we would need a non-HLS source, such as a direct MP4, instead of the current .m3u8

Because the modal presents the video in a large portrait treatment, the low startup rendition is especially noticeable.

Possible Solutions

1. Accept the brief startup softness if it is product-acceptable.
2. Hide or delay the initial low-quality playback moment with a poster or fade-in treatment.
3. Improve the upstream media delivery, such as better renditions or portrait-specific assets, which is the most durable fix

Long term, the best fix is to improve the video assets delivered by OVS, either by generating better renditions or by providing portrait-oriented versions of these shorts. The frontend is currently displaying the stream it receives, and the remaining softness appears to come from the quality and shape of the delivered HLS media rather than the API integration itself.

Screenshots (if appropriate):

• Desktop screenshots
• Mobile width screenshots

video-shorts.mov

How can this be tested?

Additional Context

[github-actions]

OpenAPI Changes

No changes detected

View full changelog

Unexpected changes? Ensure your branch is up-to-date with main (consider rebasing).

[Copilot]

Pull request overview

Migrates the Home Page “Video Shorts” feature from the legacy v0 VideoShort API shape to the v1 Learning Resources VideoResource shape, including switching playback to video.streaming_url.

Changes:

• Replace v0 useVideoShortsList usage in the Home Page section with a v1 Learning Resources search-based hook.
• Update the Video Shorts modal to consume VideoResource and play video.video.streaming_url with revised portrait sizing.
• Update modal tests to use v1 factories/types and validate streaming_url handling.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
frontends/main/src/app-pages/HomePage/VideoShortsSection.tsx	Swaps data source to v1 VideoResource list and updates thumbnail rendering + keys.
frontends/main/src/app-pages/HomePage/VideoShortsModal.tsx	Switches modal playback to streaming_url and adjusts slide sizing/styling.
frontends/main/src/app-pages/HomePage/VideoShortsModal.test.tsx	Updates tests to v1 VideoResource factories and adjusts assertions for new fields.
frontends/api/src/hooks/videoShorts/index.ts	Adds a new hook that fetches Video Shorts via Learning Resources search and filters to videos.

Comments suppressed due to low confidence (1)

frontends/main/src/app-pages/HomePage/VideoShortsModal.tsx:189

• video.video.streaming_url is documented/produced as an HLS .m3u8 URL (see backend help_text/tests). A plain <video src="...m3u8"> will not play on many browsers (notably Chrome/Firefox) without an HLS-capable player (e.g., video.js/hls.js) or a non-HLS fallback. Consider reusing the existing VideoJsPlayer/VideoResourcePlayer + resolveVideoSources pattern used elsewhere in main so HLS works cross-browser, rather than relying on native <video>.

    <Video
      ref={refCallback}
      onClick={onVideoClick}
      src={src}
      autoPlay
      muted
      playsInline
      webkit-playsinline="true"
      controlsList="nofullscreen"
      disablePictureInPicture

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

frontends/main/src/app-pages/HomePage/VideoShortsModal.tsx:196

• video.video?.streaming_url will often be an HLS .m3u8 (per existing VideoResource playback paths). Rendering it directly in a native <video src=...> will fail to play on browsers without native HLS support (e.g., Chrome/Firefox). Consider reusing the existing VideoJsPlayer/VideoResourcePlayer + resolveVideoSources approach (or an HLS polyfill) so Video Shorts are playable cross-browser.

    <Video
      ref={refCallback}
      onClick={onVideoClick}
      src={src}
      autoPlay
      muted
      playsInline
      webkit-playsinline="true"
      controlsList="nofullscreen"
      disablePictureInPicture
      width={videoWidth}
      height={videoHeight}
      preload="metadata"
      loop
    />