Service Order: thumbnails, auto video times, and row-based drag & drop

[mbyrdLCS]

Improvements to the Serving → Plans → Service Order screen, focused on Dropbox-based lessons (works for any provider).

What changed

Thumbnails on every row
Provider media links are fetched fresh on each page load (Dropbox links expire in ~4h, so nothing is stored) and matched to rows by providerContentPath, falling back to label. Images render directly; videos paint a first frame via <video preload="metadata">.

Durations

• Videos still at 0:00 automatically get their real measured length saved on page load (only fills blanks — never overwrites a manually set time).
• Images intentionally stay at 0 stored seconds (FreePlay keeps the volunteer in control) but display an italic ~5:00 planning estimate; the time rail and class total include estimates so leaders can gauge class length.

Drag & drop rework

• Drag by the handle only — rows stay clickable for previews.
• Every row is a drop target: blue insertion line shows above/below based on cursor position. No more dashed drop boxes appearing mid-drag and shifting the layout.
• Drop an item onto a section header to add it into that section (works for empty sections).
• Window-edge auto-scroll replaces the floating scroll-up/scroll-down bars.

Fixes

• .mp4 previews now use the video player: ActionDialog trusts the file-name extension since provider download links carry no extension (URL sniffing defaulted them to <img>).
• Added @stripe/stripe-js + @stripe/react-stripe-js devDependencies — optional peer deps of apphelper that Vite 8 fails hard on, which broke fresh installs (gray screen).

Related

• Companion provider fix: Dropbox: return video durations and image thumbnails Packages#11. Once that ships, newly imported Dropbox items carry mediaType/seconds/thumbnail natively and the client-side fallbacks here simply stop being exercised.

Testing

• tsc --noEmit clean, eslint clean on touched files
• Exercised manually against production APIs with a Dropbox-linked plan (images + mp4s): thumbnails, auto times, estimates, reordering within/between sections, preview playback

🤖 Generated with Claude Code