russell@unturf.com bc4858c58a Add YouTube-style watch mode with sticky video, autoplay, and related content

Shop owners can enable watch mode in settings to get: direct video autoplay
with muted fallback, sticky video player while scrolling, and a stemming-powered
"Up Next" related content sidebar. Degrades gracefully per capability.

2026-02-07 14:57:37 -05:00

1.9 KiB

Raw Blame History

MPS-1: YouTube-Style Watch Experience

Summary

Add a YouTube-like watch experience to product/content pages: sticky video player, autoplay with sound, stemming-powered "Up Next" related content sidebar, and a shop settings toggle to opt in.

Features

Sticky Video: position: sticky; top: 0 on .product-images keeps video visible while scrolling
Autoplay: Direct <video autoplay controls> render (no thumbnail gate) with play() promise fallback to muted + unmute overlay
Related Content: Custom suffix-stripping stemmer scores title+description overlap to find related shop content (max 8 items)
Shop Setting: Radio button toggle in shop settings, off by default

Degradation

Capability	Experience
Full JS + autoplay	Video autoplays with sound, sticky, AJAX comments, related sidebar
JS + autoplay blocked	Muted autoplay + unmute button
No JS	`<noscript>` link, form POST comments, server-rendered sidebar
No CSS sticky	Video scrolls normally
Watch mode off	Existing click-to-play thumbnail behavior

Files Changed

models/shop.py - watch_mode_enabled column
models/product.py - stem_word(), tokenize_and_stem(), get_related_products()
views/product.py, views/content.py - pass related_products to template
views/shop.py - handle watch_mode setting
templates/shop_settings.j2 - watch mode radio button
templates/product.j2, templates/content.j2 - sticky container, direct video render
templates/snippets/related_content.j2 - "Up Next" sidebar snippet
static/js/watch.js - autoplay promise handler
static/css/common.css - sticky video, unmute overlay, related content styles
scripts/alembic/versions/ - migration for watch_mode_enabled
tests/test_models.py - stemmer + related products tests
tests/test_functional.py - watch mode settings tests

1.9 KiB Raw Blame History