Play a sound when marking a task as done

nginx.conf

@@ -34,7 +34,7 @@ http {
     gzip_buffers 16 8k;
     gzip_http_version 1.1;
     gzip_min_length 256;
-    gzip_types text/plain text/css application/json application/x-javascript application/javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml font/woff2 image/x-icon;
+    gzip_types text/plain text/css application/json application/x-javascript application/javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml font/woff2 image/x-icon audio/wav;
 
     # Expires map
     map $sent_http_content_type $expires {
@@ -49,6 +49,7 @@ http {
         font/woff2                    max;
         image/svg+xml                 max;
         image/x-icon                  max;
+        audio/wav                     max;
         ~image/                       max;
         ~font/                        max;
     }

src/ServiceWorker/sw.js

@@ -4,7 +4,7 @@
 // Cache assets
 workbox.routing.registerRoute(
 	// This regexp matches all files in precache-manifest
-	new RegExp('.+\\.(css|json|js|svg|woff2|png|html|txt)$'),
+	new RegExp('.+\\.(css|json|js|svg|woff2|png|html|txt|wav)$'),
 	new workbox.strategies.StaleWhileRevalidate(),
 )
 

src/components/tasks/partials/singleTaskInList.vue

@@ -92,6 +92,7 @@ import User from '../../misc/user'
 import Fancycheckbox from '../../input/fancycheckbox'
 import DeferTask from './defer-task'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
+import {playPop} from '@/helpers/playPop'
 
 export default {
 	name: 'singleTaskInList',
@@ -164,6 +165,9 @@ export default {
 			const updateFunc = () => {
 				this.taskService.update(this.task)
 					.then(t => {
+						if(this.task.done) {
+							playPop()
+						}
 						this.task = t
 						this.$emit('task-updated', t)
 						this.success(

src/helpers/playPop.js

@@ -0,0 +1,11 @@
+export const playSoundWhenDoneKey = 'playSoundWhenTaskDone'
+
+export const playPop = () => {
+	const enabled = localStorage.getItem(playSoundWhenDoneKey) === 'true' || localStorage.getItem(playSoundWhenDoneKey) === null
+	if(!enabled) {
+		return
+	}
+
+	const popSound = new Audio('/audio/pop.wav')
+	popSound.play()
+}

src/views/list/views/Kanban.vue

@@ -265,6 +265,7 @@ import Rights from '../../../models/rights.json'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 import FilterPopup from '@/components/list/partials/filter-popup'
 import Dropdown from '@/components/misc/dropdown'
+import {playPop} from '@/helpers/playPop'
 
 export default {
 	name: 'Kanban',
@@ -421,6 +422,11 @@ export default {
 			this.$set(this.taskUpdating, task.id, true)
 			task.done = !task.done
 			this.$store.dispatch('tasks/update', task)
+				.then(() => {
+					if(task.done) {
+						playPop()
+					}
+				})
 				.catch(e => {
 					this.error(e, this)
 				})

src/views/tasks/TaskDetailView.vue

@@ -421,6 +421,7 @@ import ColorPicker from '../../components/input/colorPicker'
 import attachmentUpload from '../../components/tasks/mixins/attachmentUpload'
 import heading from '@/components/tasks/partials/heading'
 import Datepicker from '@/components/input/datepicker'
+import {playPop} from '@/helpers/playPop'
 
 export default {
 	name: 'TaskDetailView',
@@ -644,6 +645,11 @@ export default {
 		},
 		toggleTaskDone() {
 			this.task.done = !this.task.done
+
+			if(this.task.done) {
+				playPop()
+			}
+
 			this.saveTask(true, () => this.toggleTaskDone())
 		},
 		setDescriptionChanged(e) {

src/views/user/Settings.vue

@@ -108,6 +108,12 @@
 					Send me Reminders for tasks via Email
 				</label>
 			</div>
+			<div class="field">
+				<label class="checkbox">
+					<input type="checkbox" v-model="playSoundWhenDone"/>
+					Play a sound when marking tasks as done
+				</label>
+			</div>
 
 			<x-button
 				:loading="userSettingsService.loading"
@@ -225,6 +231,7 @@ import TotpModel from '../../models/totp'
 import TotpService from '../../services/totp'
 import UserSettingsService from '../../services/userSettings'
 import UserSettingsModel from '../../models/userSettings'
+import {playSoundWhenDoneKey} from '@/helpers/playPop'
 
 import {mapState} from 'vuex'
 
@@ -249,6 +256,7 @@ export default {
 			totpConfirmPasscode: '',
 			totpDisableForm: false,
 			totpDisablePassword: '',
+			playSoundWhenDone: false,
 
 			settings: UserSettingsModel,
 			userSettingsService: UserSettingsService,
@@ -273,6 +281,8 @@ export default {
 			emailRemindersEnabled: this.$store.state.auth.info.emailRemindersEnabled ?? false,
 		})
 
+		this.playSoundWhenDone = localStorage.getItem(playSoundWhenDoneKey) === 'true' || localStorage.getItem(playSoundWhenDoneKey) === null
+
 		this.totpStatus()
 	},
 	mounted() {
@@ -370,6 +380,8 @@ export default {
 				.catch(e => this.error(e, this))
 		},
 		updateSettings() {
+			localStorage.setItem(playSoundWhenDoneKey, this.playSoundWhenDone)
+
 			this.userSettingsService.update(this.settings)
 				.then(() => {
 					this.$store.commit('auth/setUserSettings', this.settings)