Skip to content

Commit 959c84b

Browse files
committed
Update canShowRichMedia and shouldAvoidRichMedia
There was a dead zone whereby both of the above could resolve to `false` if `delievryMode` was ‘cautious’. This change means that they can never resolve to the same boolean. We only trigger when `deliveryMode` is ‘lite’.
1 parent 04ddf46 commit 959c84b

File tree

2 files changed

+7
-5
lines changed

2 files changed

+7
-5
lines changed

README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -118,8 +118,8 @@ Copy/paste the following as close to the top of your `<head>` as possible:
118118

119119
```html
120120
<script>
121-
/*! Obs.js 0.2.0 | (c) Harry Roberts, csswizardry.com | MIT */
122-
;(()=>{const e=document.currentScript;if((!e||e.src||e.type&&"module"===e.type.toLowerCase())&&!1===/^(localhost|127\.0\.0\.1|::1)$/.test(location.hostname))return void console.warn("[Obs.js] Skipping: must be an inline, classic <script> in <head>.",e?e.src?"src="+e.src:"type="+e.type:"type=module");const i=document.documentElement,{connection:t}=navigator;window.obs=window.obs||{};const a=!0===(window.obs&&window.obs.config||{}).observeChanges,o=()=>{const e=window.obs||{},t="number"==typeof e.downlinkBucket?e.downlinkBucket:null;e.connectionCapability="low"===e.rttCategory&&null!=t&&t>=8?"strong":"high"===e.rttCategory||null!=t&&t<=5?"weak":"moderate";const a=!0===e.dataSaver||!0===e.batteryLow||!0===e.batteryCritical;e.conservationPreference=a?"conserve":"neutral";const o="weak"===e.connectionCapability||!0===e.dataSaver||!0===e.batteryCritical;e.deliveryMode="strong"!==e.connectionCapability||o||a?o?"lite":"cautious":"rich",e.canShowRichMedia="rich"===e.deliveryMode,e.shouldAvoidRichMedia="lite"===e.deliveryMode,["strong","moderate","weak"].forEach(e=>{i.classList.remove(`has-connection-capability-${e}`)}),i.classList.add(`has-connection-capability-${e.connectionCapability}`),["conserve","neutral"].forEach(e=>{i.classList.remove(`has-conservation-preference-${e}`)}),i.classList.add(`has-conservation-preference-${e.conservationPreference}`),["rich","cautious","lite"].forEach(e=>{i.classList.remove(`has-delivery-mode-${e}`)}),i.classList.add(`has-delivery-mode-${e.deliveryMode}`)},n=()=>{if(!t)return;const{saveData:e,rtt:a,downlink:n}=t;window.obs.dataSaver=!!e,i.classList.toggle("has-data-saver",!!e);const s=(e=>Number.isFinite(e)?25*Math.ceil(e/25):null)(a);null!=s&&(window.obs.rttBucket=s);const r=(e=>Number.isFinite(e)?e<75?"low":e<=275?"medium":"high":null)(a);r&&(window.obs.rttCategory=r,["low","medium","high"].forEach(e=>i.classList.remove(`has-latency-${e}`)),i.classList.add(`has-latency-${r}`));const c=(l=n,Number.isFinite(l)?Math.ceil(l):null);var l;if(null!=c){window.obs.downlinkBucket=c;const e=c<=5?"low":c>=8?"high":"medium";window.obs.downlinkCategory=e,["low","medium","high"].forEach(e=>i.classList.remove(`has-bandwidth-${e}`)),i.classList.add(`has-bandwidth-${e}`)}"downlinkMax"in t&&(window.obs.downlinkMax=t.downlinkMax),o()};n(),a&&t&&"function"==typeof t.addEventListener&&t.addEventListener("change",n);const s=e=>{if(!e)return;const{level:t,charging:a}=e,n=Number.isFinite(t)?t<=.05:null;window.obs.batteryCritical=n;const s=Number.isFinite(t)?t<=.2:null;window.obs.batteryLow=s,["critical","low"].forEach(e=>i.classList.remove(`has-battery-${e}`)),s&&i.classList.add("has-battery-low"),n&&i.classList.add("has-battery-critical");const r=!!a;window.obs.batteryCharging=r,i.classList.toggle("has-battery-charging",r),o()};if("getBattery"in navigator&&navigator.getBattery().then(e=>{s(e),a&&"function"==typeof e.addEventListener&&(e.addEventListener("levelchange",()=>s(e)),e.addEventListener("chargingchange",()=>s(e)))}).catch(()=>{}),"deviceMemory"in navigator){const e=Number(navigator.deviceMemory),t=Number.isFinite(e)?e:null;window.obs.ramBucket=t;const a=(r=t,Number.isFinite(r)?r<=1?"very-low":r<=2?"low":r<=4?"medium":"high":null);a&&(window.obs.ramCategory=a,["very-low","low","medium","high"].forEach(e=>i.classList.remove(`has-ram-${e}`)),i.classList.add(`has-ram-${a}`))}var r;if("hardwareConcurrency"in navigator){const e=Number(navigator.hardwareConcurrency),t=Number.isFinite(e)?e:null;window.obs.cpuBucket=t;const a=(e=>Number.isFinite(e)?e<=2?"low":e<=5?"medium":"high":null)(t);a&&(window.obs.cpuCategory=a,["low","medium","high"].forEach(e=>i.classList.remove(`has-cpu-${e}`)),i.classList.add(`has-cpu-${a}`))}(()=>{const e=window.obs||{},t=e.ramCategory,a=e.cpuCategory;let o="moderate";"high"!==t&&"medium"!==t||"high"!==a?("very-low"===t||"low"===t||"low"===a)&&(o="weak"):o="strong",e.deviceCapability=o,["strong","moderate","weak"].forEach(e=>{i.classList.remove(`has-device-capability-${e}`)}),i.classList.add(`has-device-capability-${o}`)})()})();
121+
/*! Obs.js 0.2.1 | (c) Harry Roberts, csswizardry.com | MIT */
122+
;(()=>{const e=document.currentScript;if((!e||e.src||e.type&&"module"===e.type.toLowerCase())&&!1===/^(localhost|127\.0\.0\.1|::1)$/.test(location.hostname))return void console.warn("[Obs.js] Skipping: must be an inline, classic <script> in <head>.",e?e.src?"src="+e.src:"type="+e.type:"type=module");const t=document.documentElement,{connection:i}=navigator;window.obs=window.obs||{};const a=!0===(window.obs&&window.obs.config||{}).observeChanges,o=()=>{const e=window.obs||{},i="number"==typeof e.downlinkBucket?e.downlinkBucket:null;e.connectionCapability="low"===e.rttCategory&&null!=i&&i>=8?"strong":"high"===e.rttCategory||null!=i&&i<=5?"weak":"moderate";const a=!0===e.dataSaver||!0===e.batteryLow||!0===e.batteryCritical;e.conservationPreference=a?"conserve":"neutral";const o="weak"===e.connectionCapability||!0===e.dataSaver||!0===e.batteryCritical;e.deliveryMode="strong"!==e.connectionCapability||o||a?o?"lite":"cautious":"rich",e.canShowRichMedia="lite"!==e.deliveryMode,e.shouldAvoidRichMedia="lite"===e.deliveryMode,["strong","moderate","weak"].forEach(e=>{t.classList.remove(`has-connection-capability-${e}`)}),t.classList.add(`has-connection-capability-${e.connectionCapability}`),["conserve","neutral"].forEach(e=>{t.classList.remove(`has-conservation-preference-${e}`)}),t.classList.add(`has-conservation-preference-${e.conservationPreference}`),["rich","cautious","lite"].forEach(e=>{t.classList.remove(`has-delivery-mode-${e}`)}),t.classList.add(`has-delivery-mode-${e.deliveryMode}`)},n=()=>{if(!i)return;const{saveData:e,rtt:a,downlink:n}=i;window.obs.dataSaver=!!e,t.classList.toggle("has-data-saver",!!e);const s=(e=>Number.isFinite(e)?25*Math.ceil(e/25):null)(a);null!=s&&(window.obs.rttBucket=s);const r=(e=>Number.isFinite(e)?e<75?"low":e<=275?"medium":"high":null)(a);r&&(window.obs.rttCategory=r,["low","medium","high"].forEach(e=>t.classList.remove(`has-latency-${e}`)),t.classList.add(`has-latency-${r}`));const c=(l=n,Number.isFinite(l)?Math.ceil(l):null);var l;if(null!=c){window.obs.downlinkBucket=c;const e=c<=5?"low":c>=8?"high":"medium";window.obs.downlinkCategory=e,["low","medium","high"].forEach(e=>t.classList.remove(`has-bandwidth-${e}`)),t.classList.add(`has-bandwidth-${e}`)}"downlinkMax"in i&&(window.obs.downlinkMax=i.downlinkMax),o()};n(),a&&i&&"function"==typeof i.addEventListener&&i.addEventListener("change",n);const s=e=>{if(!e)return;const{level:i,charging:a}=e,n=Number.isFinite(i)?i<=.05:null;window.obs.batteryCritical=n;const s=Number.isFinite(i)?i<=.2:null;window.obs.batteryLow=s,["critical","low"].forEach(e=>t.classList.remove(`has-battery-${e}`)),s&&t.classList.add("has-battery-low"),n&&t.classList.add("has-battery-critical");const r=!!a;window.obs.batteryCharging=r,t.classList.toggle("has-battery-charging",r),o()};if("getBattery"in navigator&&navigator.getBattery().then(e=>{s(e),a&&"function"==typeof e.addEventListener&&(e.addEventListener("levelchange",()=>s(e)),e.addEventListener("chargingchange",()=>s(e)))}).catch(()=>{}),"deviceMemory"in navigator){const e=Number(navigator.deviceMemory),i=Number.isFinite(e)?e:null;window.obs.ramBucket=i;const a=(r=i,Number.isFinite(r)?r<=1?"very-low":r<=2?"low":r<=4?"medium":"high":null);a&&(window.obs.ramCategory=a,["very-low","low","medium","high"].forEach(e=>t.classList.remove(`has-ram-${e}`)),t.classList.add(`has-ram-${a}`))}var r;if("hardwareConcurrency"in navigator){const e=Number(navigator.hardwareConcurrency),i=Number.isFinite(e)?e:null;window.obs.cpuBucket=i;const a=(e=>Number.isFinite(e)?e<=2?"low":e<=5?"medium":"high":null)(i);a&&(window.obs.cpuCategory=a,["low","medium","high"].forEach(e=>t.classList.remove(`has-cpu-${e}`)),t.classList.add(`has-cpu-${a}`))}(()=>{const e=window.obs||{},i=e.ramCategory,a=e.cpuCategory;let o="moderate";"high"!==i&&"medium"!==i||"high"!==a?("very-low"===i||"low"===i||"low"===a)&&(o="weak"):o="strong",e.deviceCapability=o,["strong","moderate","weak"].forEach(e=>{t.classList.remove(`has-device-capability-${e}`)}),t.classList.add(`has-device-capability-${o}`)})()})();
123123
//# sourceURL=obs.inline.js
124124
</script>
125125
```
@@ -209,7 +209,7 @@ Obs.js also stores the following properties on the `window.obs` object:
209209
| `connectionCapability` | `'strong'` \| `'moderate'` \| `'weak'` | Transport assessment | From `rttCategory` + `downlinkCategory` (low/high signals) | Strong = low RTT **and** high BW; Weak = high RTT **or** low BW |
210210
| `conservationPreference` | `'conserve'` \| `'neutral'` | Frugality signal | `dataSaver === true` **or** `batteryLow === true` ||
211211
| `deliveryMode` | `'rich'` \| `'cautious'` \| `'lite'` | How ‘heavy’ you should go | From `connectionCapability`, `dataSaver`, `batteryLow`, `batteryCritical` | **rich** if strong and not (`dataSaver` or `batteryCritical`); **lite** if weak **or** `dataSaver` **or** `batteryCritical`; else **cautious** (e.g. `batteryLow`/`moderate`) |
212-
| `canShowRichMedia` | boolean | Convenience: `deliveryMode === 'rich'` | Derived from `deliveryMode` | Shorthand for ‘go big’ |
212+
| `canShowRichMedia` | boolean | Convenience: `deliveryMode !== 'lite'` | Derived from `deliveryMode` | Shorthand for ‘go big’ |
213213
| `shouldAvoidRichMedia` | boolean | Convenience: `deliveryMode === 'lite'` | Derived from `deliveryMode` | Shorthand for ‘be frugal’ |
214214
| `batteryCritical` | boolean \| null | Battery ≤ 5% | Battery API | `true` when battery level is ≤ 5%; **also** `batteryLow === true` |
215215
| `batteryLow` | boolean \| null | Battery ≤ 20% | Battery API | `true` when battery level is ≤ 20%; `null` if unknown |

obs.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -168,8 +168,10 @@
168168
: 'cautious';
169169

170170
// Assign delivery Stances into convenient booleans,
171-
// E.g.: `if(canShowRichMedia) { … }`
172-
o.canShowRichMedia = (o.deliveryMode === 'rich');
171+
// e.g.: `if(canShowRichMedia) { … }`
172+
// We only trigger this for ‘lite’ and ‘rich’ scenarios: we don’t currently
173+
// do anything for ‘cautious.
174+
o.canShowRichMedia = (o.deliveryMode !== 'lite');
173175
o.shouldAvoidRichMedia = (o.deliveryMode === 'lite');
174176

175177
// Add classes to the `<html>` element for each of our connection-capability

0 commit comments

Comments
 (0)