Normalize ConnectionThresholds field names + remove disableAutoplay (#33)

* Remove disableAutoplay rendering hint

Redundant with deferHeavyComponents — both triggered on identical
conditions (isLowEnd || isSlowConnection || isBatteryConstrained).

* Normalize ConnectionThresholds field names

Rename downlink2gUpperBound/downlink3gUpperBound/downlink4gUpperBound
to lowUpperBound/midUpperBound/highUpperBound, matching the pattern
used by CpuThresholds and MemoryThresholds.

Author: SimplyLiz

CHANGELOG.md

@@ -4,10 +4,12 @@
 
 ### Breaking Changes
 
+- **Normalize `ConnectionThresholds` field names** — Renamed `downlink2gUpperBound` → `lowUpperBound`, `downlink3gUpperBound` → `midUpperBound`, `downlink4gUpperBound` → `highUpperBound` to match the `CpuThresholds`/`MemoryThresholds` naming pattern. Update any custom `connection` threshold objects in your `thresholds` config
 - **Rename `ConnectionTier` value `'fast'` → `'high'`** — Aligns connection tier vocabulary with CPU, memory, and GPU tiers which all use `'low' | 'mid' | 'high'`. Update any code comparing `tiers.connection === 'fast'` to use `'high'` instead
 - **`classify()` and `deriveHints()` now accept `StoredSignals` instead of `RawSignals`** — These functions never used `userAgent` or `viewport` (which are stripped before storage). The narrower type makes the API honest. Existing call sites are unaffected — `RawSignals` is structurally assignable to `StoredSignals`
 - **`profile:store` event now carries `StoredSignals` instead of `RawSignals`** — The event previously emitted the raw probe payload (including `userAgent`/`viewport`), not what was actually stored. The `signals` field now matches the persisted data. `bot:reject` still carries `RawSignals` (it fires before stripping)
 - **Rename default cookie `dr_session` → `device-router-session`** — Self-documenting name before 1.0 locks the cookie in. If you hardcode `cookieName: 'dr_session'` in your options you are unaffected; if you rely on the default, existing sessions will reset once on deploy
+- **Remove `disableAutoplay` rendering hint** — `disableAutoplay` triggered on identical conditions to `deferHeavyComponents` (`isLowEnd || isSlowConnection || isBatteryConstrained`). Use `deferHeavyComponents` instead
 - **middleware-fastify: normalized return shape** — `createDeviceRouter()` now returns raw Fastify hooks instead of a `fastify-plugin` wrapped plugin. Migrate `await app.register(middleware)` → `app.addHook('preHandler', middleware)`. When using `injectProbe: true`, register the injection hook separately: `app.addHook('onSend', injectionMiddleware)`. Removed `fastify-plugin` dependency
 
 ### Features
@@ -60,7 +62,7 @@
 ### Features
 
 - **GPU detection** — Classify GPU tier from WebGL renderer string: software renderers → `low`, RTX/RX 5000+/Apple M-series → `high`, everything else → `mid`
-- **Battery API signal** — Collect battery level and charging status via `navigator.getBattery()` (Chromium-only, silently skipped elsewhere). When unplugged and below 15%, `deferHeavyComponents`, `reduceAnimations`, and `disableAutoplay` are forced on
+- **Battery API signal** — Collect battery level and charging status via `navigator.getBattery()` (Chromium-only, silently skipped elsewhere). When unplugged and below 15%, `deferHeavyComponents` and `reduceAnimations` are forced on
 - **Signal validation** — New `isValidSignals()` type guard for validating incoming probe payloads
 - **Custom GPU thresholds** — `softwarePattern` and `highEndPattern` are configurable via `GpuThresholds`
 

README.md

@@ -18,7 +18,7 @@ A **~1 KB** client probe. One middleware call. Full device awareness on every re
 Responsive design adapts layout. DeviceRouter adapts **what you serve**.
 
 - A budget phone on 2G? Skip the heavy animations, defer non-critical components, prefer server-side rendering.
-- A flagship on fiber? Go all out — autoplay, full interactivity, rich visuals.
+- A flagship on fiber? Go all out — full interactivity, rich visuals.
 
 No user-agent sniffing. No guesswork. Real signals from real devices, classified into actionable tiers and rendering hints your server can act on immediately.
 
@@ -120,7 +120,6 @@ Based on tiers and user preferences, DeviceRouter derives actionable booleans:
 | `serveMinimalCSS`       | Low-end device                                         |
 | `reduceAnimations`      | Low-end device, prefers reduced motion, or low battery |
 | `useImagePlaceholders`  | Slow connection (2G/3G)                                |
-| `disableAutoplay`       | Low-end device, slow connection, or low battery        |
 | `preferServerRendering` | Low-end device                                         |
 | `disable3dEffects`      | No GPU or software renderer                            |
 
@@ -245,8 +244,8 @@ new RedisStorageAdapter(redisClient, { prefix: 'dr:profile:' });
 
 Each framework has an example app that renders a product landing page adapting in real time to device capabilities:
 
-- **Full experience** (high-end device) — animated gradient hero, SVG icons, inline charts, pulsing CTA, hover transitions, autoplay visualizer
-- **Lite experience** (low-end device) — flat solid backgrounds, Unicode icons, placeholder boxes, no animations, autoplay disabled
+- **Full experience** (high-end device) — animated gradient hero, SVG icons, inline charts, pulsing CTA, hover transitions
+- **Lite experience** (low-end device) — flat solid backgrounds, Unicode icons, placeholder boxes, no animations
 
 Run any example to see it in action:
 

docs/api/types.md

@@ -21,7 +21,7 @@ const tiers = classify({
 
 Derives rendering hints from device tiers.
 
-The `battery` signal bypasses tier classification entirely — it's transient state, not a capability. When the device is unplugged and below 15% charge, `deferHeavyComponents`, `reduceAnimations`, and `disableAutoplay` are forced on to conserve power.
+The `battery` signal bypasses tier classification entirely — it's transient state, not a capability. When the device is unplugged and below 15% charge, `deferHeavyComponents` and `reduceAnimations` are forced on to conserve power.
 
 ```typescript
 import { classify, deriveHints } from '@device-router/types';
@@ -54,7 +54,7 @@ Validates custom tier thresholds after merging with defaults. Throws a descripti
 **Validation rules:**
 
 - **CPU/Memory**: `lowUpperBound` must be less than `midUpperBound`
-- **Connection**: `downlink2gUpperBound` < `downlink3gUpperBound` < `downlink4gUpperBound`
+- **Connection**: `lowUpperBound` < `midUpperBound` < `highUpperBound`
 - **GPU**: `softwarePattern` and `highEndPattern` must be `RegExp` instances
 - All numeric values must be positive (> 0)
 
@@ -156,11 +156,11 @@ Custom thresholds for tier classification. All fields are optional — unset fie
 
 ### ConnectionThresholds
 
-| Field                  | Type     | Default | Description                    |
-| ---------------------- | -------- | ------- | ------------------------------ |
-| `downlink2gUpperBound` | `number` | `0.5`   | Mbps at or below → `'2g'` tier |
-| `downlink3gUpperBound` | `number` | `2`     | Mbps at or below → `'3g'` tier |
-| `downlink4gUpperBound` | `number` | `5`     | Mbps at or below → `'4g'` tier |
+| Field            | Type     | Default | Description                    |
+| ---------------- | -------- | ------- | ------------------------------ |
+| `lowUpperBound`  | `number` | `0.5`   | Mbps at or below → `'2g'` tier |
+| `midUpperBound`  | `number` | `2`     | Mbps at or below → `'3g'` tier |
+| `highUpperBound` | `number` | `5`     | Mbps at or below → `'4g'` tier |
 
 ### GpuThresholds
 
@@ -177,7 +177,7 @@ import { classify } from '@device-router/types';
 const tiers = classify(signals, {
   cpu: { lowUpperBound: 4, midUpperBound: 8 },
   memory: { midUpperBound: 8 },
-  connection: { downlink4gUpperBound: 10 },
+  connection: { highUpperBound: 10 },
   gpu: { highEndPattern: /\bRTX\b|\bGTX\b/i },
 });
 ```

docs/getting-started.md

@@ -252,7 +252,7 @@ const { middleware, probeEndpoint } = createDeviceRouter({
   thresholds: {
     cpu: { lowUpperBound: 4, midUpperBound: 8 },
     memory: { midUpperBound: 8 },
-    connection: { downlink4gUpperBound: 10 },
+    connection: { highUpperBound: 10 },
   },
 });
 ```
@@ -367,6 +367,5 @@ Based on device tiers, the middleware provides boolean rendering hints:
 - `serveMinimalCSS` — Send reduced stylesheets
 - `reduceAnimations` — Disable or simplify animations
 - `useImagePlaceholders` — Show placeholders instead of full images
-- `disableAutoplay` — Prevent auto-playing media
 - `preferServerRendering` — Favor SSR over client-side rendering
 - `disable3dEffects` — Disable WebGL/3D content (no GPU or software renderer)

docs/profile-schema.md

@@ -74,6 +74,5 @@ The full classified result attached to requests by the middleware.
 | `serveMinimalCSS`       | `boolean` | Low-end device                                         |
 | `reduceAnimations`      | `boolean` | Low-end device, prefers reduced motion, or low battery |
 | `useImagePlaceholders`  | `boolean` | Slow connection (2g/3g)                                |
-| `disableAutoplay`       | `boolean` | Low-end device, slow connection, or low battery        |
 | `preferServerRendering` | `boolean` | Low-end device                                         |
 | `disable3dEffects`      | `boolean` | No GPU or software renderer                            |

examples/shared/demo-template.ts

@@ -18,7 +18,6 @@ export function renderDemoPage({
           serveMinimalCSS: true,
           reduceAnimations: true,
           useImagePlaceholders: true,
-          disableAutoplay: true,
           preferServerRendering: true,
           disable3dEffects: true,
         }
@@ -28,18 +27,16 @@ export function renderDemoPage({
             serveMinimalCSS: false,
             reduceAnimations: false,
             useImagePlaceholders: false,
-            disableAutoplay: false,
             preferServerRendering: false,
             disable3dEffects: false,
           }
         : profile?.hints;
 
-  // Five booleans derived from hints drive all rendering decisions
+  // Four booleans derived from hints drive all rendering decisions
   const full = !hints?.deferHeavyComponents;
   const animate = !hints?.reduceAnimations;
   const richCSS = !hints?.serveMinimalCSS;
   const showImages = !hints?.useImagePlaceholders;
-  const autoplay = !hints?.disableAutoplay;
 
   const activeMode = forceParam === 'full' ? 'full' : forceParam === 'lite' ? 'lite' : 'auto';
 
@@ -97,10 +94,6 @@ export function renderDemoPage({
     .gallery-tile{background:#fff;border-radius:12px;padding:1.5rem;text-align:center;border:1px solid #e2e8f0}
     .gallery-tile h4{margin-top:0.75rem;font-size:0.8125rem;color:#64748b;font-weight:500}
     .placeholder{background:#e2e8f0;border-radius:8px;height:120px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:0.8rem}
-    .autoplay-section{text-align:center;padding:1.5rem;max-width:960px;margin:0 auto}
-    .autoplay-bars{display:flex;gap:4px;justify-content:center;align-items:flex-end;height:40px;margin-bottom:0.75rem}
-    .autoplay-bars span{display:block;width:6px;background:#4f46e5;border-radius:3px}
-    .autoplay-label{font-size:0.8125rem;color:#64748b}
     .profile-panel{max-width:960px;margin:1.5rem auto;padding:0 1.5rem}
     .profile-panel summary{cursor:pointer;font-weight:600;padding:0.75rem 0;font-size:1rem}
     .profile-panel pre{background:#f1f5f9;padding:1rem;border-radius:8px;overflow-x:auto;font-size:0.8rem;line-height:1.6}
@@ -139,13 +132,6 @@ ${
     .gallery-tile:nth-child(2){animation-delay:0.15s}
     .gallery-tile:nth-child(3){animation-delay:0.3s}
     @keyframes bounce{0%,100%{height:8px}50%{height:100%}}
-    .autoplay-bars.animated span{animation:bounce 0.8s ease-in-out infinite}
-    .autoplay-bars.animated span:nth-child(2){animation-delay:0.1s}
-    .autoplay-bars.animated span:nth-child(3){animation-delay:0.2s}
-    .autoplay-bars.animated span:nth-child(4){animation-delay:0.3s}
-    .autoplay-bars.animated span:nth-child(5){animation-delay:0.4s}
-    .autoplay-bars.animated span:nth-child(6){animation-delay:0.5s}
-    .autoplay-bars.animated span:nth-child(7){animation-delay:0.6s}
   </style>`
     : ''
 }
@@ -223,19 +209,6 @@ ${
 }
   </div>
 
-  <div class="autoplay-section">
-    <div class="autoplay-bars${autoplay ? ' animated' : ''}">
-      <span style="height:12px"></span>
-      <span style="height:28px"></span>
-      <span style="height:20px"></span>
-      <span style="height:36px"></span>
-      <span style="height:16px"></span>
-      <span style="height:32px"></span>
-      <span style="height:24px"></span>
-    </div>
-    <div class="autoplay-label">Autoplay: ${autoplay ? 'On' : 'Disabled'}</div>
-  </div>
-
   <details class="profile-panel">
     <summary>Device Profile</summary>
 ${

packages/types/README.md

@@ -36,7 +36,6 @@ const hints = deriveHints(tiers, signals);
 //   serveMinimalCSS: false,
 //   reduceAnimations: false,
 //   useImagePlaceholders: false,
-//   disableAutoplay: false,
 //   preferServerRendering: false,
 //   disable3dEffects: false,
 // }
@@ -50,7 +49,6 @@ Rendering hints are derived from tiers and transient signals:
 | `serveMinimalCSS`       | Low-end device                                         |
 | `reduceAnimations`      | Low-end device, prefers reduced motion, or low battery |
 | `useImagePlaceholders`  | Slow connection (2G/3G)                                |
-| `disableAutoplay`       | Low-end device, slow connection, or low battery        |
 | `preferServerRendering` | Low-end device                                         |
 | `disable3dEffects`      | No GPU or software renderer                            |
 
@@ -66,7 +64,7 @@ import { classify } from '@device-router/types';
 const tiers = classify(signals, {
   cpu: { lowUpperBound: 4, midUpperBound: 8 },
   memory: { midUpperBound: 8 },
-  connection: { downlink4gUpperBound: 10 },
+  connection: { highUpperBound: 10 },
   gpu: { highEndPattern: /\bRTX\b|\bGTX\b/i },
 });
 ```

packages/types/src/__tests__/classify.test.ts

@@ -93,18 +93,18 @@ describe('classifyConnection', () => {
 
   it('uses custom downlink thresholds', () => {
     // With wider 2g band (up to 1 Mbps)
-    expect(classifyConnection(undefined, 0.8, { downlink2gUpperBound: 1 })).toBe('2g');
+    expect(classifyConnection(undefined, 0.8, { lowUpperBound: 1 })).toBe('2g');
     // Default would classify 0.8 as 3g, custom keeps it as 2g
     expect(classifyConnection(undefined, 0.8)).toBe('3g');
 
     // Custom 4g upper bound
-    expect(classifyConnection(undefined, 8, { downlink4gUpperBound: 10 })).toBe('4g');
+    expect(classifyConnection(undefined, 8, { highUpperBound: 10 })).toBe('4g');
     expect(classifyConnection(undefined, 8)).toBe('high');
   });
 
   it('effectiveType string matches are not affected by thresholds', () => {
-    expect(classifyConnection('2g', undefined, { downlink2gUpperBound: 0.1 })).toBe('2g');
-    expect(classifyConnection('3g', undefined, { downlink3gUpperBound: 0.1 })).toBe('3g');
+    expect(classifyConnection('2g', undefined, { lowUpperBound: 0.1 })).toBe('2g');
+    expect(classifyConnection('3g', undefined, { midUpperBound: 0.1 })).toBe('3g');
   });
 });
 
@@ -204,7 +204,7 @@ describe('classify', () => {
       {
         cpu: { lowUpperBound: 4 },
         memory: { lowUpperBound: 4 },
-        connection: { downlink4gUpperBound: 3 },
+        connection: { highUpperBound: 3 },
       },
     );
     expect(result).toEqual({ cpu: 'low', memory: 'low', connection: 'high', gpu: 'none' });

packages/types/src/__tests__/events.test.ts

@@ -11,7 +11,6 @@ const sampleEvent: DeviceRouterEvent = {
     serveMinimalCSS: false,
     reduceAnimations: false,
     useImagePlaceholders: false,
-    disableAutoplay: false,
     preferServerRendering: false,
     disable3dEffects: false,
   },

packages/types/src/__tests__/hints.test.ts

@@ -9,7 +9,6 @@ describe('deriveHints', () => {
       serveMinimalCSS: true,
       reduceAnimations: true,
       useImagePlaceholders: true,
-      disableAutoplay: true,
       preferServerRendering: true,
       disable3dEffects: true,
     });
@@ -22,7 +21,6 @@ describe('deriveHints', () => {
       serveMinimalCSS: false,
       reduceAnimations: false,
       useImagePlaceholders: false,
-      disableAutoplay: false,
       preferServerRendering: false,
       disable3dEffects: false,
     });
@@ -40,7 +38,6 @@ describe('deriveHints', () => {
     const hints = deriveHints({ cpu: 'high', memory: 'high', connection: '3g', gpu: 'high' });
     expect(hints.deferHeavyComponents).toBe(true);
     expect(hints.useImagePlaceholders).toBe(true);
-    expect(hints.disableAutoplay).toBe(true);
     expect(hints.serveMinimalCSS).toBe(false);
     expect(hints.preferServerRendering).toBe(false);
   });
@@ -78,7 +75,6 @@ describe('deriveHints', () => {
     );
     expect(hints.deferHeavyComponents).toBe(true);
     expect(hints.reduceAnimations).toBe(true);
-    expect(hints.disableAutoplay).toBe(true);
     // Capability-based hints stay permissive
     expect(hints.serveMinimalCSS).toBe(false);
     expect(hints.useImagePlaceholders).toBe(false);
@@ -93,7 +89,6 @@ describe('deriveHints', () => {
     );
     expect(hints.deferHeavyComponents).toBe(false);
     expect(hints.reduceAnimations).toBe(false);
-    expect(hints.disableAutoplay).toBe(false);
   });
 
   it('does not constrain when battery above threshold', () => {
@@ -103,14 +98,12 @@ describe('deriveHints', () => {
     );
     expect(hints.deferHeavyComponents).toBe(false);
     expect(hints.reduceAnimations).toBe(false);
-    expect(hints.disableAutoplay).toBe(false);
   });
 
   it('does not change behavior when battery signal is absent', () => {
     const hints = deriveHints({ cpu: 'high', memory: 'high', connection: 'high', gpu: 'high' }, {});
     expect(hints.deferHeavyComponents).toBe(false);
     expect(hints.reduceAnimations).toBe(false);
-    expect(hints.disableAutoplay).toBe(false);
   });
 
   it('does not constrain at exactly 0.15 (strict less-than)', () => {
@@ -120,6 +113,5 @@ describe('deriveHints', () => {
     );
     expect(hints.deferHeavyComponents).toBe(false);
     expect(hints.reduceAnimations).toBe(false);
-    expect(hints.disableAutoplay).toBe(false);
   });
 });