# 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
