feat(clock): add auto unit detection and country-based measurement units (#681)

Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: nicomiguelino

edge-apps/clock/screenly.yml

@@ -58,13 +58,16 @@ settings:
       Select the visual theme for the app ('light' or 'dark').
   unit:
     type: string
-    default_value: metric
+    default_value: auto
     title: Measurement Unit
     optional: true
     help_text:
       properties:
+        advanced: true
         help_text: Select the measurement unit for temperature display.
         options:
+        - label: Auto (based on location)
+          value: auto
         - label: Metric (°C)
           value: metric
         - label: Imperial (°F)

edge-apps/clock/screenly_qc.yml

@@ -58,13 +58,16 @@ settings:
       Select the visual theme for the app ('light' or 'dark').
   unit:
     type: string
-    default_value: metric
+    default_value: auto
     title: Measurement Unit
     optional: true
     help_text:
       properties:
+        advanced: true
         help_text: Select the measurement unit for temperature display.
         options:
+        - label: Auto (based on location)
+          value: auto
         - label: Metric (°C)
           value: metric
         - label: Imperial (°F)

edge-apps/clock/src/main.ts

@@ -5,7 +5,7 @@ import {
   getTimeZone,
   getLocale,
   signalReady,
-  getCityName,
+  getCityInfo,
 } from '@screenly/edge-apps'
 // Import components to register them as custom elements
 // This registers <brand-logo>, <app-header>, <auto-scaler>, and <edge-app-devtools>
@@ -49,8 +49,9 @@ async function updateWeatherDisplay(
   latitude: number,
   longitude: number,
   tz: string,
+  countryCode: string,
 ) {
-  const weatherData = await getWeatherData(latitude, longitude, tz)
+  const weatherData = await getWeatherData(latitude, longitude, tz, countryCode)
 
   if (!weatherData) {
     hideTemperatureSection()
@@ -109,14 +110,15 @@ document.addEventListener('DOMContentLoaded', async () => {
     timezone = await getTimeZone()
     locale = await getLocale()
 
-    // Get location name
-    locationName = await getCityName(latitude, longitude)
+    // Get location info (includes city name and country code)
+    const { cityName, countryCode } = await getCityInfo(latitude, longitude)
+    locationName = cityName
     if (locationEl) {
       locationEl.textContent = locationName
     }
 
     // Get weather data (optional)
-    await updateWeatherDisplay(latitude, longitude, timezone)
+    await updateWeatherDisplay(latitude, longitude, timezone, countryCode)
 
     // Update time immediately
     updateTime()
@@ -127,7 +129,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     // Refresh weather every 15 minutes
     setInterval(
       () => {
-        updateWeatherDisplay(latitude, longitude, timezone)
+        updateWeatherDisplay(latitude, longitude, timezone, countryCode)
       },
       15 * 60 * 1000,
     )

edge-apps/clock/src/weather.test.ts

@@ -22,6 +22,10 @@ let mockGetSettingWithDefault: <T>(key: string, defaultValue: T) => T
 
 const { mock } = await import('bun:test')
 
+// Import the real implementation to delegate to it in the mock
+const { getMeasurementUnitByCountry: realGetMeasurementUnitByCountry } =
+  await import('@screenly/edge-apps')
+
 mock.module('@screenly/edge-apps', () => ({
   fetchCurrentWeatherData: (
     lat: number,
@@ -31,8 +35,44 @@ mock.module('@screenly/edge-apps', () => ({
   ) => mockFetchCurrentWeatherData(lat, lng, tz, unit),
   getSettingWithDefault: <T>(key: string, defaultValue: T) =>
     mockGetSettingWithDefault(key, defaultValue),
+  getMeasurementUnitByCountry: (countryCode: string) =>
+    realGetMeasurementUnitByCountry(countryCode),
 }))
 
+// Mock weather data objects
+const metricWeatherData = {
+  temperature: 19,
+  tempHigh: 22,
+  tempLow: 15,
+  weatherId: 800,
+  description: 'clear sky',
+  iconSrc: '/static/images/icons/clear.svg',
+  iconAlt: 'clear sky',
+  unit: 'metric' as const,
+}
+
+const imperialWeatherData = {
+  temperature: 66,
+  tempHigh: 70,
+  tempLow: 60,
+  weatherId: 800,
+  description: 'clear sky',
+  iconSrc: '/static/images/icons/clear.svg',
+  iconAlt: 'clear sky',
+  unit: 'imperial' as const,
+}
+
+const zeroTempWeatherData = {
+  temperature: 0,
+  tempHigh: 3,
+  tempLow: -2,
+  weatherId: 800,
+  description: 'clear sky',
+  iconSrc: '/static/images/icons/clear.svg',
+  iconAlt: 'clear sky',
+  unit: 'metric' as const,
+}
+
 describe('getWeatherData', () => {
   test('should return null when fetchCurrentWeatherData returns null', async () => {
     mockGetSettingWithDefault = (key, defaultValue) => defaultValue
@@ -42,28 +82,21 @@ describe('getWeatherData', () => {
       37.3861,
       -122.0839,
       'America/Los_Angeles',
+      'GB',
     )
 
     expect(result).toBeNull()
   })
 
   test('should return weather data with metric units', async () => {
     mockGetSettingWithDefault = (key, defaultValue) => defaultValue
-    mockFetchCurrentWeatherData = async () => ({
-      temperature: 19,
-      tempHigh: 22,
-      tempLow: 15,
-      weatherId: 800,
-      description: 'clear sky',
-      iconSrc: '/static/images/icons/clear.svg',
-      iconAlt: 'clear sky',
-      unit: 'metric',
-    })
+    mockFetchCurrentWeatherData = async () => metricWeatherData
 
     const result = await getWeatherData(
       37.3861,
       -122.0839,
       'America/Los_Angeles',
+      'GB',
     )
 
     expect(result?.temperature).toBe(19)
@@ -73,21 +106,13 @@ describe('getWeatherData', () => {
   test('should return weather data with imperial units', async () => {
     mockGetSettingWithDefault = <T>(_key: string, _defaultValue: T): T =>
       'imperial' as T
-    mockFetchCurrentWeatherData = async () => ({
-      temperature: 66,
-      tempHigh: 70,
-      tempLow: 60,
-      weatherId: 800,
-      description: 'clear sky',
-      iconSrc: '/static/images/icons/clear.svg',
-      iconAlt: 'clear sky',
-      unit: 'imperial',
-    })
+    mockFetchCurrentWeatherData = async () => imperialWeatherData
 
     const result = await getWeatherData(
       37.3861,
       -122.0839,
       'America/Los_Angeles',
+      'US',
     )
 
     expect(result?.temperature).toBe(66)
@@ -96,18 +121,14 @@ describe('getWeatherData', () => {
 
   test('should handle temperature of 0 correctly', async () => {
     mockGetSettingWithDefault = (key, defaultValue) => defaultValue
-    mockFetchCurrentWeatherData = async () => ({
-      temperature: 0,
-      tempHigh: 3,
-      tempLow: -2,
-      weatherId: 800,
-      description: 'clear sky',
-      iconSrc: '/static/images/icons/clear.svg',
-      iconAlt: 'clear sky',
-      unit: 'metric',
-    })
-
-    const result = await getWeatherData(59.3293, 18.0686, 'Europe/Stockholm')
+    mockFetchCurrentWeatherData = async () => zeroTempWeatherData
+
+    const result = await getWeatherData(
+      59.3293,
+      18.0686,
+      'Europe/Stockholm',
+      'SE',
+    )
 
     expect(result).not.toBeNull()
     expect(result?.temperature).toBe(0)

edge-apps/clock/src/weather.ts

@@ -1,7 +1,6 @@
 import {
   fetchCurrentWeatherData,
-  getSettingWithDefault,
-  type MeasurementUnit,
+  resolveMeasurementUnit,
 } from '@screenly/edge-apps'
 
 export interface WeatherData {
@@ -17,8 +16,11 @@ export async function getWeatherData(
   lat: number,
   lng: number,
   tz: string,
+  countryCode: string,
 ): Promise<WeatherData | null> {
-  const unit = getSettingWithDefault<MeasurementUnit>('unit', 'metric')
+  // Get measurement unit from settings, or auto-detect based on location
+  const unit = resolveMeasurementUnit(countryCode)
+
   const raw = await fetchCurrentWeatherData(lat, lng, tz, unit)
   if (!raw) return null
 

edge-apps/edge-apps-library/src/utils/settings.ts

@@ -1,4 +1,5 @@
 import type { ScreenlySettings } from '../types/index.js'
+import { getMeasurementUnitByCountry } from './locale.js'
 
 /**
  * Get all Screenly settings
@@ -76,3 +77,23 @@ export function signalReady(): void {
 
 // Types
 export type MeasurementUnit = 'metric' | 'imperial'
+
+/**
+ * Resolve measurement unit from settings with auto-detection fallback
+ * @param countryCode - Two-character ISO country code for auto-detection
+ * @returns Resolved measurement unit ('metric' or 'imperial')
+ */
+export function resolveMeasurementUnit(countryCode: string): MeasurementUnit {
+  const unitSetting = getSettingWithDefault<string>('unit', 'auto')
+
+  if (unitSetting === 'auto') {
+    // Auto-detect based on country when setting is explicitly 'auto'
+    return getMeasurementUnitByCountry(countryCode)
+  } else if (unitSetting === 'metric' || unitSetting === 'imperial') {
+    // Only accept known valid units
+    return unitSetting
+  } else {
+    // Fallback for invalid/corrupted settings: auto-detect based on country
+    return getMeasurementUnitByCountry(countryCode)
+  }
+}

edge-apps/weather/src/main.ts

@@ -6,9 +6,8 @@ import {
   getLocale,
   signalReady,
   getSetting,
-  getSettingWithDefault,
   getCityInfo,
-  getMeasurementUnitByCountry,
+  resolveMeasurementUnit,
   type MeasurementUnit,
 } from '@screenly/edge-apps'
 import '@screenly/edge-apps/components'
@@ -173,18 +172,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     }
 
     // Get measurement unit from settings, or auto-detect based on location
-    const unitSetting = getSettingWithDefault<string>('unit', 'auto')
-
-    if (unitSetting === 'auto') {
-      // Auto-detect based on country when setting is explicitly 'auto'
-      measurementUnit = getMeasurementUnitByCountry(countryCode)
-    } else if (unitSetting === 'metric' || unitSetting === 'imperial') {
-      // Only accept known valid units; this narrows the generic string safely
-      measurementUnit = unitSetting
-    } else {
-      // Fallback for invalid/corrupted settings: auto-detect based on country
-      measurementUnit = getMeasurementUnitByCountry(countryCode)
-    }
+    measurementUnit = resolveMeasurementUnit(countryCode)
 
     await updateWeatherDisplay(latitude, longitude, timezone, measurementUnit)