Skip to content

Commit 1d8349c

Browse files
StigmatozStigmatoz
committed
Save pomodoro sounds
1 parent bd681a3 commit 1d8349c

File tree

4 files changed

+158
-0
lines changed

4 files changed

+158
-0
lines changed

‎src/components/Pomodoro.vue‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,35 @@
2020
<p class="title">{{ t('pomodoroWork.message') }}</p>
2121
<VueDatePicker v-model="workTime" time-picker class="date-picker" />
2222
</div>
23+
<div class="pomodoro-block">
24+
<PomodoroSoundsSelector
25+
v-if="audioAfterWork"
26+
:option="StorageParams.POMODORO_AUDIO_AFTER_WORK"
27+
:value="audioAfterWork"
28+
/>
29+
</div>
2330
<div class="pomodoro-block">
2431
<p class="title">{{ t('pomodoroRest.message') }}</p>
2532
<VueDatePicker v-model="restTime" time-picker class="date-picker" />
2633
</div>
34+
<div class="pomodoro-block">
35+
<PomodoroSoundsSelector
36+
v-if="audioAfterRest"
37+
:option="StorageParams.POMODORO_AUDIO_AFTER_REST"
38+
:value="audioAfterRest"
39+
/>
40+
</div>
2741
<div class="pomodoro-block">
2842
<p class="title">{{ t('pomodoroFrequency.message') }}</p>
2943
<input type="number" class="frequency" v-model="frequency" />
3044
</div>
45+
<div class="pomodoro-block">
46+
<PomodoroSoundsSelector
47+
v-if="audioAfterFinished"
48+
:option="StorageParams.POMODORO_AUDIO_AFTER_FINISHED"
49+
:value="audioAfterFinished"
50+
/>
51+
</div>
3152
</div>
3253
<button
3354
class="d-inline-block mt-15"
@@ -53,6 +74,9 @@ import { useI18n } from 'vue-i18n';
5374
import { injecStorage } from '../storage/inject-storage';
5475
import {
5576
IS_POMODORO_ENABLED_DEFAULT,
77+
POMODORO_AUDIO_AFTER_FINISHED_DEFAULT,
78+
POMODORO_AUDIO_AFTER_REST_DEFAULT,
79+
POMODORO_AUDIO_AFTER_WORK_DEFAULT,
5680
POMODORO_FREQUENCY_DEFAULT,
5781
POMODORO_INTERVAL_REST_DEFAULT,
5882
POMODORO_INTERVAL_WORK_DEFAULT,
@@ -61,6 +85,9 @@ import {
6185
import { Time } from '../utils/time';
6286
import { logger } from '../utils/logger';
6387
import { useBadge, BadgeColor, BadgeIcon } from '../functions/useBadge';
88+
import { PomodoroSounds } from '../utils/pomodoro';
89+
import PomodoroSoundsSelector from '../components/PomodoroSoundsSelector.vue';
90+
import Browser from 'webextension-polyfill';
6491
6592
const { t } = useI18n();
6693
const settingsStorage = injecStorage();
@@ -75,6 +102,9 @@ const restTime = ref<Time>({
75102
});
76103
const frequency = ref<number>(3);
77104
const isEnabled = ref<boolean>();
105+
const audioAfterWork = ref<PomodoroSounds>();
106+
const audioAfterRest = ref<PomodoroSounds>();
107+
const audioAfterFinished = ref<PomodoroSounds>();
78108
79109
onMounted(async () => {
80110
isEnabled.value = await settingsStorage.getValue(
@@ -97,6 +127,21 @@ onMounted(async () => {
97127
StorageParams.POMODORO_FREQUENCY,
98128
POMODORO_FREQUENCY_DEFAULT,
99129
);
130+
131+
audioAfterWork.value = await settingsStorage.getValue(
132+
StorageParams.POMODORO_AUDIO_AFTER_WORK,
133+
POMODORO_AUDIO_AFTER_WORK_DEFAULT,
134+
);
135+
136+
audioAfterRest.value = await settingsStorage.getValue(
137+
StorageParams.POMODORO_AUDIO_AFTER_REST,
138+
POMODORO_AUDIO_AFTER_REST_DEFAULT,
139+
);
140+
141+
audioAfterFinished.value = await settingsStorage.getValue(
142+
StorageParams.POMODORO_AUDIO_AFTER_FINISHED,
143+
POMODORO_AUDIO_AFTER_FINISHED_DEFAULT,
144+
);
100145
});
101146
102147
async function changeStatus() {
@@ -131,12 +176,18 @@ async function changeStatus() {
131176
132177
logger.log(`Change pomodoro status to ${String(isEnabled.value).toUpperCase()}`);
133178
}
179+
180+
function playAudio(sound: PomodoroSounds) {
181+
const myAudio = new Audio(Browser.runtime.getURL(`assets/pomodoro-sounds/${sound}`));
182+
myAudio.play();
183+
}
134184
</script>
135185

136186
<style scoped>
137187
.pomodoro-block {
138188
display: flex;
139189
justify-content: start;
190+
align-items: center;
140191
}
141192
.date-picker {
142193
width: 120px;

‎src/components/PomodoroSoundsSelector.vue‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<template>
2+
<p class="title-audio d-inline-block">Sound after complete period</p>
3+
<select class="option" v-model="audioAfterPeriod" @change="onAudioChange($event.target)">
4+
<option :value="PomodoroSounds['Sound 1']">Sound 1</option>
5+
<option :value="PomodoroSounds['Sound 2']">Sound 2</option>
6+
<option :value="PomodoroSounds['Sound 3']">Sound 3</option>
7+
<option :value="PomodoroSounds['Sound 4']">Sound 4</option>
8+
<option :value="PomodoroSounds['Sound 5']">Sound 5</option>
9+
<option :value="PomodoroSounds['Sound 6']">Sound 6</option>
10+
<option :value="PomodoroSounds['Sound 7']">Sound 7</option>
11+
<option :value="PomodoroSounds['Sound 8']">Sound 8</option>
12+
<option :value="PomodoroSounds['Sound 9']">Sound 9</option>
13+
<option :value="PomodoroSounds['Sound 10']">Sound 10</option>
14+
<option :value="PomodoroSounds['Sound 11']">Sound 11</option>
15+
<option :value="PomodoroSounds['Sound 12']">Sound 12</option>
16+
<option :value="PomodoroSounds['Sound 13']">Sound 13</option>
17+
</select>
18+
<img src="../assets/icons/start.svg" height="22" @click="playAudio" class="play" />
19+
<span class="preview">Click to preview</span>
20+
</template>
21+
22+
<script lang="ts">
23+
export default {
24+
name: 'PomodoroSoundsSelector',
25+
};
26+
</script>
27+
28+
<script lang="ts" setup>
29+
import { ref } from 'vue';
30+
import { useI18n } from 'vue-i18n';
31+
import { PomodoroAudioParams, PomodoroSounds } from '../utils/pomodoro';
32+
import Browser from 'webextension-polyfill';
33+
import { injecStorage } from '../storage/inject-storage';
34+
35+
const props = defineProps<{
36+
option: PomodoroAudioParams;
37+
value: PomodoroSounds;
38+
}>();
39+
40+
const { t } = useI18n();
41+
const settingsStorage = injecStorage();
42+
const audioAfterPeriod = ref<PomodoroSounds>(props.value);
43+
44+
function playAudio() {
45+
const myAudio = new Audio(
46+
Browser.runtime.getURL(`assets/pomodoro-sounds/${audioAfterPeriod.value}`),
47+
);
48+
myAudio.play();
49+
}
50+
51+
async function onAudioChange(target: any) {
52+
await settingsStorage.saveValue(props.option, target.value);
53+
}
54+
</script>
55+
56+
<style scoped>
57+
.play {
58+
display: inline-block;
59+
cursor: pointer;
60+
margin-left: 10px;
61+
}
62+
.title-audio {
63+
font-size: 15px;
64+
}
65+
.preview {
66+
color: grey;
67+
}
68+
.option {
69+
height: 38px;
70+
margin-left: 15px;
71+
}
72+
</style>

‎src/storage/storage-params.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Tab } from '../entity/tab';
22
import { TimeInterval } from '../entity/time-interval';
3+
import { PomodoroSounds } from '../utils/pomodoro';
34
import { HOUR, MINUTE_IN_SECONDS } from '../utils/time';
45

56
export enum StorageParams {
@@ -23,6 +24,9 @@ export enum StorageParams {
2324
IS_POMODORO_ENABLED = 'is-pomodoro-enabled',
2425
POMODORO_START_TIME = 'pomodoro-start-time',
2526
POMODORO_INTERVAL_WORK = 'pomodoro-interval-work',
27+
POMODORO_AUDIO_AFTER_WORK = 'pomodoro-audio-after-work',
28+
POMODORO_AUDIO_AFTER_REST = 'pomodoro-audio-after-rest',
29+
POMODORO_AUDIO_AFTER_FINISHED = 'pomodoro-audio-after-finished',
2630
POMODORO_INTERVAL_REST = 'pomodoro-interval-rest',
2731
POMODORO_FREQUENCY = 'pomodoro-frequency',
2832
}
@@ -72,6 +76,9 @@ export const IS_POMODORO_ENABLED_DEFAULT = false;
7276
export const POMODORO_INTERVAL_WORK_DEFAULT = 25 * MINUTE_IN_SECONDS;
7377
export const POMODORO_INTERVAL_REST_DEFAULT = 5 * MINUTE_IN_SECONDS;
7478
export const POMODORO_FREQUENCY_DEFAULT = 3;
79+
export const POMODORO_AUDIO_AFTER_WORK_DEFAULT = PomodoroSounds['Sound 3'];
80+
export const POMODORO_AUDIO_AFTER_REST_DEFAULT = PomodoroSounds['Sound 8'];
81+
export const POMODORO_AUDIO_AFTER_FINISHED_DEFAULT = PomodoroSounds['Sound 10'];
7582

7683
export function getDefaultValue(param: StorageParams) {
7784
switch (param) {
@@ -110,5 +117,11 @@ export function getDefaultValue(param: StorageParams) {
110117
return POMODORO_INTERVAL_REST_DEFAULT;
111118
case StorageParams.POMODORO_FREQUENCY:
112119
return POMODORO_FREQUENCY_DEFAULT;
120+
case StorageParams.POMODORO_AUDIO_AFTER_WORK:
121+
return POMODORO_AUDIO_AFTER_WORK_DEFAULT;
122+
case StorageParams.POMODORO_AUDIO_AFTER_REST:
123+
return POMODORO_AUDIO_AFTER_REST_DEFAULT;
124+
case StorageParams.POMODORO_AUDIO_AFTER_FINISHED:
125+
return POMODORO_AUDIO_AFTER_FINISHED_DEFAULT;
113126
}
114127
}

‎src/utils/pomodoro.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { StorageParams } from '../storage/storage-params';
2+
3+
export type PomodoroAudioParams =
4+
| StorageParams.POMODORO_AUDIO_AFTER_WORK
5+
| StorageParams.POMODORO_AUDIO_AFTER_REST
6+
| StorageParams.POMODORO_AUDIO_AFTER_FINISHED;
7+
8+
export enum PomodoroSounds {
9+
'Sound 1' = '1.mp3',
10+
'Sound 2' = '2.mp3',
11+
'Sound 3' = '3.mp3',
12+
'Sound 4' = '4.mp3',
13+
'Sound 5' = '5.mp3',
14+
'Sound 6' = '6.mp3',
15+
'Sound 7' = '7.mp3',
16+
'Sound 8' = '8.mp3',
17+
'Sound 9' = '9.mp3',
18+
'Sound 10' = '10.mp3',
19+
'Sound 11' = '11.mp3',
20+
'Sound 12' = '12.mp3',
21+
'Sound 13' = '13.mp3',
22+
}

0 commit comments

Comments
 (0)