russell@unturf.com
bc4858c58a
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.
37 lines
1.9 KiB
Markdown
37 lines
1.9 KiB
Markdown
# 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
|