Listen to alarm with volume button

Author: victrme

src/scripts/features/pomodoro.ts

@@ -18,6 +18,7 @@ type PomodoroUpdate = {
 	sound?: boolean
 	volume?: number
 	alarm?: string
+	listen?: true
 	timeFor?: Partial<Record<PomodoroMode, number>>
 	history?: { endedAt: string; duration?: number }
 }
@@ -40,6 +41,7 @@ const focusButton = document.getElementById('pmdr-focus') as HTMLInputElement
 // to communicate with other tabs
 const broadcast = new BroadcastChannel('bonjourr_pomodoro') as BroadcastChannel
 
+let alarmAudio: HTMLAudioElement = new Audio()
 let countdown: number
 let timeModeTimeout: number
 let tabTitleTimeout: number
@@ -467,16 +469,13 @@ export function togglePomodoroFocus(focus: boolean) {
 }
 
 function ringTheAlarm() {
-	const alarmSound = new Audio('src/assets/sounds/clock-alarm-classic.mp3')
-
 	// only triggers on the last active tab
 	const lastTab = localStorage.getItem('lastActiveTab')
 	const willRingAndSave = lastTab === TAB_ID
 
 	if (willRingAndSave) {
 		if (currentPomodoroData.sound) {
-			alarmSound.volume = 0.6
-			alarmSound.play()
+			playSound()
 		}
 
 		// if pomodoro ends, registers new session
@@ -495,6 +494,12 @@ function ringTheAlarm() {
 	}
 }
 
+function playSound() {
+	alarmAudio.src = ('src/assets/sounds/clock-alarm-classic.mp3')
+	alarmAudio.volume = currentPomodoroData.volume ?? .7
+	alarmAudio.play()
+}
+
 function setPomodoroInfo(history: PomodoroHistoryEntry[]) {
 	const now = new Date()
 
@@ -529,6 +534,11 @@ function setPomodoroInfo(history: PomodoroHistoryEntry[]) {
 async function updatePomodoro(update: PomodoroUpdate) {
 	const data = await storage.sync.get(['pomodoro'])
 
+	if (update.listen) {
+		playSound()
+		return
+	}
+
 	if (update.on !== undefined) {
 		data.pomodoro.on = update.on
 	}

src/scripts/settings.ts

@@ -886,6 +886,10 @@ 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 })
 	})
@@ -906,16 +910,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

@@ -1683,13 +1683,47 @@ <h2 id="lbl-quotes" class="trn">Pomodoro timer</h2>
 
 			<div class="wrapper">
 				<label for="i_pmdr_alarms" class="trn">Alarm tune</label>
-				<select id="i_pmdr_alarms">
-					<option value="default" class="trn">Default</option>
-					<option value="marimbas">Marimbas</option>
-					<option value="thunderstorm">Thunderstorm</option>
-					<option value="birds">Birds</option>
-					<option value="clock">Clock</option>
-				</select>
+
+				<div class="split-inputs">
+					<select id="i_pmdr_alarms">
+						<option value="marimbas">Marimbas</option>
+						<option value="thunderstorm">Thunderstorm</option>
+						<option value="birds">Birds</option>
+						<option value="clock">Clock</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 />

src/styles/settings/inputs.css

@@ -70,6 +70,14 @@ aside .input-btn {
 	background-color: var(--color-input);
 }
 
+aside .input-btn:hover {
+	filter: brightness(.9);
+}
+
+aside .input-btn:active {
+	filter: brightness(.8);
+}
+
 aside .input-btn.icon-only span {
 	display: flex;
 	justify-content: center;