bruno
97e5de74f5
CI / build-and-test (push) Successful in 13m34s
- Strategy Pattern front: ChannelProviderInterface + 6 providers (yt/dm/tw/pt/od/ru) + factory (ids longs/courts) - ChannelContentService: cache par onglet/tri/recherche (TTL 5min), pagination nextPage - ChannelPage: header (banniere/avatar/subs/description ...plus), tabs dynamiques par capabilities, grilles videos/shorts 9:16/playlists/live, recherche debounced, tri recent/populaire, infinite scroll IntersectionObserver, skeletons/empty/error - Backend: GET /api/channels/:provider/:id/content (videos/shorts/playlists/live) natif par provider
47 lines
3.5 KiB
Markdown
47 lines
3.5 KiB
Markdown
# Search UX — Steps status
|
|
|
|
**All 14 steps: DONE (100%)** ✅
|
|
|
|
## Done
|
|
- [x] Step 1: Audit current codebase for existing search and provider logic on frontend and server
|
|
- [x] Step 2: Design and scaffold Provider Registry on frontend and server
|
|
- [x] Step 3: Implement SearchService with multi-provider params and HTTP request
|
|
- [x] Step 4: Build SearchBoxComponent with chips, @autocomplete, and keyboard shortcuts
|
|
- [x] Step 5: Build ProviderPickerComponent (Ctrl/⌘+K modal) with filtering, History column and apply
|
|
- [x] Step 6: Build SearchSuggestionsComponent with grouped sections, per-provider unsupported rows and deep-links
|
|
- [x] Step 7: Add router query-param sync and default provider preference loading (Search page fallback to user preference)
|
|
- [x] Step 8: Implement backend /api/search with providers param and fan-out to server/providers handlers
|
|
- [x] Step 9: Persist default providers preference in user profile (client + server endpoints wired, tested)
|
|
- [x] Step 10: Add keyboard accessibility and a11y behaviors (Tab/Shift+Tab focus trap, Esc, aria, focus restore)
|
|
- [x] Step 11: Write unit tests (SearchService, ProviderPicker toggle, @ parsing)
|
|
- [x] Step 12: Write basic e2e scenarios for providers filtering and deep-link
|
|
- [x] Step 13: Add minimal telemetry hooks and events
|
|
- [x] Step 14: Update README with search UX section, keyboard shortcuts and usage notes
|
|
|
|
## Test commands
|
|
```bash
|
|
npm run test:search # Step 11 — unit tests: SearchService + @ parsing + ProviderPicker
|
|
npm run test:search-e2e # Step 12 — e2e scenarios against a real isolated server
|
|
npm run test:preferences # Step 9 — defaultProviders persistence
|
|
npm run test:telemetry # Step 13 — telemetry events (insert/list/count)
|
|
```
|
|
|
|
## Implementation notes
|
|
- **Step 11** (`src/app/search/search.service.spec.ts`, `search-components.spec.ts`): ts-node runs with isolated
|
|
transpilation (no decorator output => no ɵfac), so TestBed cannot instantiate Angular classes. Instead the specs
|
|
import `@angular/compiler`, then build components inside `Injector.create(...)` + `runInInjectionContext(...)` with
|
|
fakes for SearchService/UserService/HistoryService/TelemetryService and mock internal schedulers
|
|
(ɵChangeDetectionScheduler, ɵEffectScheduler with immediate-run effects).
|
|
- **Step 12** (`server/tests/search.e2e.test.mjs`): spawns a real server (temp SQLite DB via NEWTUBE_DB_FILE,
|
|
ephemeral port, test JWT secret) and asserts: providers filter targets exactly the requested ids; deep-link
|
|
single-provider; invalid providers fall back to the full registry; defaultProviders preference persists; SPA
|
|
/search route serves the shell. Assertions are on fan-out shape, not on external provider content.
|
|
- **Step 13**: `telemetry_events` table (db/migrations/20250924_add_telemetry_events.sql), server helpers
|
|
(insertTelemetryEvent/listTelemetryEvents/countTelemetryEvents) + routes `POST /telemetry/events` (whitelisted
|
|
event names, rate-limited), `GET /telemetry/events|/summary` (own-events only). Front: `TelemetryService`
|
|
(fire-and-forget, dedup 500ms window, payload sanitization) wired into SearchBox hooks: search_submit,
|
|
provider_picker_open, provider_apply, at_autocomplete_use, quick_menu_open.
|
|
- **Step 14**: README gained a "Recherche unifiée" section (chips, @autocomplete, Ctrl/⌘+K picker, deep-links,
|
|
preference fallback, a11y), API endpoints, test commands and roadmap updates. GIF placeholder TODO added.
|
|
- CI (`.github/workflows/ci.yml`) now runs preferences, telemetry, search unit and e2e tests.
|