Add pomodoro alarm choices and volume slider

src/scripts/compatibility/filters.ts

@@ -50,6 +50,17 @@ export function newLinkIcons(data: Import): Import {
 	return data
 }
 
+export function addAlarmsToPomodoro(data: Import): Import {
+	if (!data.pomodoro) {
+		data.pomodoro = SYNC_DEFAULT.pomodoro
+	}
+
+	data.pomodoro.alarm = data.pomodoro.alarm ?? SYNC_DEFAULT.pomodoro.alarm
+	data.pomodoro.volume = data.pomodoro.volume ?? SYNC_DEFAULT.pomodoro.alarm
+
+	return data
+}
+
 export function fixNullBrightness(data: Import): Import {
 	if (data.backgrounds?.bright === null) {
 		data.backgrounds.bright = SYNC_DEFAULT.backgrounds.bright

src/scripts/compatibility/versions.ts

@@ -7,6 +7,10 @@ export function filterByVersion(data: Partial<Sync>, version: SemVer): Partial<S
 
 	if (major < 22) {
 		data = filter.newLinkIcons(data)
+
+		if (minor < 1) {
+			data = filter.addAlarmsToPomodoro(data)
+		}
 	}
 
 	if (major <= 21) {

src/scripts/defaults.ts

@@ -203,6 +203,8 @@ export const SYNC_DEFAULT: Sync = {
 		},
 		focus: false,
 		sound: true,
+		volume: 0.7,
+		alarm: 'marimba',
 		history: [],
 	},
 	font: {

src/scripts/features/fonts.ts

@@ -246,9 +246,6 @@ function displayFont({ family, size, weight, system }: Font) {
 
 function setFontSize(size: string) {
 	document.documentElement.style.setProperty('--font-size', `${Number.parseInt(size) / 16}em`)
-
-	// Pomodoro container's font needs to be in pixels for focus animation to work properly
-	document.documentElement.style.setProperty('--pomodoro-font-size', `${Number.parseInt(size)}px`)
 }
 
 //

src/scripts/features/pomodoro.ts

@@ -15,8 +15,11 @@ type PomodoroUpdate = {
 	mode?: PomodoroMode
 	pause?: number
 	focus?: boolean
-	timeFor?: Partial<Record<PomodoroMode, number>>
 	sound?: boolean
+	volume?: number
+	alarm?: string
+	listen?: true
+	timeFor?: Partial<Record<PomodoroMode, number>>
 	history?: { endedAt: string; duration?: number }
 }
 
@@ -27,8 +30,6 @@ type PomodoroHistoryEntry = {
 
 let currentPomodoroData: Pomodoro
 
-const alarmSound = new Audio('src/assets/sounds/clock-alarm-classic.mp3')
-
 const pomodoroContainer = document.getElementById('pomodoro_container') as HTMLDivElement
 const pomodoroStart = document.getElementById('pmdr_start') as HTMLButtonElement
 const pomodoroPause = document.getElementById('pmdr_pause') as HTMLButtonElement
@@ -44,6 +45,7 @@ let countdown: number
 let timeModeTimeout: number
 let tabTitleTimeout: number
 const timeBeforeReset = 10000 // time before the timer resets after the end
+const alarmAudio: HTMLAudioElement = new Audio()
 
 const setModeButton = (value = '') => {
 	return (document.getElementById(`pmdr-${value}`) as HTMLInputElement).checked = true
@@ -422,6 +424,7 @@ export function togglePomodoroFocus(focus: boolean) {
 		clone.style.position = 'absolute'
 		clone.style.top = originalRect.top + 'px'
 		clone.style.left = originalRect.left + 'px'
+		clone.style.fontSize = document.documentElement.style.getPropertyValue('--font-size')
 		clone.style.fontFamily = document.documentElement.style.getPropertyValue('--font-family')
 		clone.classList.add('clone')
 
@@ -472,7 +475,7 @@ function ringTheAlarm() {
 
 	if (willRingAndSave) {
 		if (currentPomodoroData.sound) {
-			alarmSound.play()
+			playSound()
 		}
 
 		// if pomodoro ends, registers new session
@@ -491,6 +494,15 @@ function ringTheAlarm() {
 	}
 }
 
+function playSound() {
+	const filename = currentPomodoroData.alarm || 'marimba'
+	const volume = currentPomodoroData.volume ?? .7
+
+	alarmAudio.src = `src/assets/sounds/${filename}.mp3`
+	alarmAudio.volume = volume
+	alarmAudio.play()
+}
+
 function setPomodoroInfo(history: PomodoroHistoryEntry[]) {
 	const now = new Date()
 
@@ -522,42 +534,57 @@ function setPomodoroInfo(history: PomodoroHistoryEntry[]) {
 	;(document.getElementById('poms-month') as HTMLSpanElement).textContent = pomsMonth.toString()
 }
 
-async function updatePomodoro({ on, sound, end, mode, pause, focus, timeFor, history }: PomodoroUpdate) {
+async function updatePomodoro(update: PomodoroUpdate) {
 	const data = await storage.sync.get(['pomodoro'])
 
-	if (on !== undefined) {
-		data.pomodoro.on = on
+	if (update.listen) {
+		playSound()
+		return
+	}
+
+	if (update.on !== undefined) {
+		data.pomodoro.on = update.on
+	}
+
+	if (update.sound !== undefined) {
+		data.pomodoro.sound = update.sound
 	}
 
-	if (sound !== undefined) {
-		data.pomodoro.sound = sound
+	if (update.alarm) {
+		data.pomodoro.alarm = update.alarm
 	}
 
-	if (end !== undefined) {
-		data.pomodoro.end = end
+	if (update.volume) {
+		data.pomodoro.volume = update.volume
 	}
 
-	if (mode) {
-		data.pomodoro.mode = mode
+	if (update.end !== undefined) {
+		data.pomodoro.end = update.end
 	}
 
-	if (pause !== undefined) {
-		data.pomodoro.pause = pause
+	if (update.mode) {
+		data.pomodoro.mode = update.mode
 	}
 
-	if (focus !== undefined) {
-		data.pomodoro.focus = focus
+	if (update.pause !== undefined) {
+		data.pomodoro.pause = update.pause
 	}
 
-	if (history !== undefined) {
+	if (update.focus !== undefined) {
+		data.pomodoro.focus = update.focus
+	}
+
+	if (update.history !== undefined) {
 		data.pomodoro.history.push({
-			endedAt: history.endedAt,
+			endedAt: update.history.endedAt,
 			duration: data.pomodoro.timeFor['pomodoro'],
 		})
 	}
 
 	// the time defined by the user for each mode (pomodoro, break...)
-	if (timeFor) {
+	if (update.timeFor) {
+		const { timeFor } = update
+
 		for (const mode of Object.keys(timeFor) as PomodoroMode[]) {
 			const value = timeFor[mode]
 
@@ -574,7 +601,7 @@ async function updatePomodoro({ on, sound, end, mode, pause, focus, timeFor, his
 	// known flaw: sessions are only up to date on the ringing tab
 	setPomodoroInfo(data.pomodoro.history)
 
-	if (timeFor) {
+	if (update.timeFor) {
 		resetTimer()
 	}
 }

src/scripts/settings.ts

@@ -228,9 +228,12 @@ function initOptionsValues(data: Sync, local: Local) {
 	setInput('i_size', data.font?.size || (IS_MOBILE ? '11' : '14'))
 	setInput('i_announce', data.announcements ?? 'major')
 	setInput('i_synctype', local.syncType ?? (PLATFORM === 'online' ? 'off' : 'browser'))
-	setInput('i_pmdr_break', data.pomodoro.timeFor.break / 60)
-	setInput('i_pmdr_pomodoro', data.pomodoro.timeFor.pomodoro / 60)
-	setInput('i_pmdr_longbreak', data.pomodoro.timeFor.longbreak / 60)
+	setInput('i_pmdr_volume', data.pomodoro?.volume ?? 0.7)
+	setInput('i_pmdr_alarms', data.pomodoro?.alarm ?? 'marimba')
+	setInput('i_pmdr_break', data.pomodoro?.timeFor.break / 60)
+	setInput('i_pmdr_break', data.pomodoro?.timeFor.break / 60)
+	setInput('i_pmdr_pomodoro', data.pomodoro?.timeFor.pomodoro / 60)
+	setInput('i_pmdr_longbreak', data.pomodoro?.timeFor.longbreak / 60)
 
 	setFormInput('i_city', local.lastWeather?.approximation?.city ?? 'Paris', data.weather.city)
 	setFormInput('i_customfont', systemfont.placeholder, data.font?.family)
@@ -886,6 +889,18 @@ function initOptionsEvents() {
 		pomodoro(undefined, { sound: target.checked })
 	})
 
+	onclickdown(paramId('i_pmdr_listen'), () => {
+		pomodoro(undefined, { listen: true })
+	})
+
+	paramId('i_pmdr_alarms').addEventListener('change', function () {
+		pomodoro(undefined, { alarm: this.value })
+	})
+
+	paramId('i_pmdr_volume').addEventListener('input', function () {
+		pomodoro(undefined, { volume: Number(this.value) })
+	})
+
 	paramId('i_pmdr_pomodoro').addEventListener('input', function () {
 		pomodoro(undefined, { timeFor: { pomodoro: Number(this.value) } })
 	})
@@ -898,16 +913,6 @@ function initOptionsEvents() {
 		pomodoro(undefined, { timeFor: { longbreak: Number(this.value) } })
 	})
 
-	// paramId('i_pmdr_pomodoro').addEventListener('change', () => {
-	// 	paramId('i_pmdr_pomodoro').blur()
-	// })
-	// paramId('i_pmdr_break').addEventListener('change', () => {
-	// 	paramId('i_pmdr_break').blur()
-	// })
-	// paramId('i_pmdr_longbreak').addEventListener('change', () => {
-	// 	paramId('i_pmdr_longbreak').blur()
-	// })
-
 	// Custom fonts
 
 	paramId('i_customfont').addEventListener('pointerenter', () => {

src/settings.html

@@ -1681,6 +1681,67 @@ <h2 id="lbl-quotes" class="trn">Pomodoro timer</h2>
 		<div class="as as_pomodoro dropdown">
 			<hr />
 
+			<div class="wrapper">
+				<label for="i_pmdr_alarms" class="trn">Alarm tune</label>
+
+				<div class="split-inputs">
+					<select id="i_pmdr_alarms">
+						<option value="marimba">Marimba</option>
+						<option value="clock-alarm">Clock Alarm</option>
+					</select>
+
+					<button
+						id="i_pmdr_listen"
+						class="input-btn icon-only"
+						aria-label="Listen to pomodoro alarm"
+						title="Listen to pomodoro alarm"
+					>
+						<span>
+							<svg
+							  width="24"
+							  height="24"
+							  viewBox="0 0 24 24"
+							  fill="none"
+							  xmlns="http://www.w3.org/2000/svg"
+							>
+							  <path
+							    d="M24 12C24 16.4183 20.4183 20 16 20V18C19.3137 18 22 15.3137 22 12C22 8.68629 19.3137 6 16 6V4C20.4183 4 24 7.58172 24 12Z"
+							    fill="currentColor"
+							  />
+							  <path
+							    d="M20 12C20 14.2091 18.2091 16 16 16V14C17.1046 14 18 13.1046 18 12C18 10.8954 17.1046 10 16 10V8C18.2091 8 20 9.79086 20 12Z"
+							    fill="currentColor"
+							  />
+							  <path
+							    fill-rule="evenodd"
+							    clip-rule="evenodd"
+							    d="M9 16L15 20V4L9 8H5C2.79086 8 1 9.79086 1 12C1 14.2091 2.79086 16 5 16H9ZM5 10H9L13 7.5V16.5L9 14H5C3.89543 14 3 13.1046 3 12C3 10.8954 3.89543 10 5 10Z"
+							    fill="currentColor"
+							  />
+							</svg>
+						</span>
+					</button>
+				</div>
+			</div>
+
+			<hr />
+
+			<div class="wrapper">
+				<label for="i_pmdr_volume" class="trn">Alarm volume</label>
+				<input
+					id="i_pmdr_volume"
+					name="i_pmdr_volume"
+					type="range"
+					class="range"
+					min=".1"
+					max="1"
+					step="0.1"
+					value=".6"
+				/>
+			</div>
+
+			<hr />
+
 			<div class="wrapper">
 				<label for="i_pmdr_pomodoro_time" class="trn">Default time</label>
 				<div class="inputWithSuffix">