Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit ca4cb3c

Browse files
cwilvxcwilvx
committedJun 18, 2024
show buffered audio on progress bar
+ add icons to avatar dropdown + add option to trigger scan on that dropdown + fix: adding folder to new folder not populating playlist name + add prettier config
1 parent e7850c3 commit ca4cb3c

File tree

14 files changed

+278
-298
lines changed

14 files changed

+278
-298
lines changed
 

‎.prettierrc

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"arrowParens": "avoid",
3+
"bracketSpacing": true,
4+
"semi": false,
5+
"singleQuote": true,
6+
"tabWidth": 4,
7+
"trailingComma": "es5",
8+
"printWidth": 120
9+
}

‎public/icons/settings.svg

Lines changed: 1 addition & 1 deletion
Loading

‎src/assets/icons/logout.svg

Lines changed: 4 additions & 0 deletions
Loading

‎src/assets/icons/settings.svg

Lines changed: 1 addition & 1 deletion
Loading

‎src/assets/scss/ProgressBar.scss

Lines changed: 57 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,78 @@
1-
input[type="range"] {
2-
-webkit-appearance: none;
3-
appearance: none;
4-
margin-right: 15px;
5-
width: calc(100% - 2px);
6-
height: 0.3rem;
7-
border-radius: 5px;
8-
background: $gray4 linear-gradient(37deg, white, white) no-repeat;
9-
background-size: 100% 100%;
10-
cursor: pointer;
11-
12-
&::-webkit-slider-thumb {
1+
input[type='range'] {
132
-webkit-appearance: none;
3+
appearance: none;
4+
margin-right: 15px;
5+
width: calc(100% - 2px);
6+
height: 0.3rem;
7+
border-radius: 5px;
8+
background: $gray4;
9+
background-size: 100% 100%;
10+
cursor: pointer;
1411

15-
height: 0;
16-
width: 0.8rem;
17-
border-radius: 50%;
18-
background: white;
19-
}
12+
&::-webkit-slider-thumb {
13+
-webkit-appearance: none;
2014

21-
&::-moz-range-thumb {
22-
-webkit-appearance: none;
23-
appearance: none;
15+
height: 0;
16+
width: 0.8rem;
17+
border-radius: 50%;
18+
background: white;
19+
}
2420

25-
height: 0;
26-
border-radius: 50%;
27-
background: white;
28-
border: none;
29-
}
21+
&::-moz-range-thumb {
22+
-webkit-appearance: none;
23+
appearance: none;
3024

31-
&::-ms-thumb {
32-
-webkit-appearance: none;
33-
appearance: none;
25+
height: 0;
26+
border-radius: 50%;
27+
background: white;
28+
border: none;
29+
}
3430

35-
height: 0;
36-
width: 0.8rem;
37-
border-radius: 50%;
38-
background: white;
39-
border: none;
40-
}
31+
&::-ms-thumb {
32+
-webkit-appearance: none;
33+
appearance: none;
34+
35+
height: 0;
36+
width: 0.8rem;
37+
border-radius: 50%;
38+
background: white;
39+
border: none;
40+
}
4141
}
4242

4343
/* Input Thumb */
44-
input[type="range"]::-webkit-slider-thumb:hover {
45-
background: $accent;
44+
input[type='range']::-webkit-slider-thumb:hover {
45+
background: $accent;
4646
}
4747

48-
input[type="range"]::-moz-range-thumb:hover {
49-
background: $accent;
48+
input[type='range']::-moz-range-thumb:hover {
49+
background: $accent;
5050
}
5151

52-
input[type="range"]::-ms-thumb:hover {
53-
background: $accent;
52+
input[type='range']::-ms-thumb:hover {
53+
background: $accent;
5454
}
5555

5656
/* Input Track */
57-
input[type="range"]::-webkit-slider-runnable-track {
58-
-webkit-appearance: none;
59-
box-shadow: none;
60-
border: none;
61-
background: transparent;
57+
input[type='range']::-webkit-slider-runnable-track {
58+
-webkit-appearance: none;
59+
box-shadow: none;
60+
border: none;
61+
background: transparent;
6262
}
6363

64-
input[type="range"]::-moz-range-track {
65-
appearance: none;
66-
-webkit-appearance: none;
67-
box-shadow: none;
68-
border: none;
69-
background: transparent;
64+
input[type='range']::-moz-range-track {
65+
appearance: none;
66+
-webkit-appearance: none;
67+
box-shadow: none;
68+
border: none;
69+
background: transparent;
7070
}
7171

72-
input[type="range"]::-ms-track {
73-
appearance: none;
74-
-webkit-appearance: none;
75-
box-shadow: none;
76-
border: none;
77-
background: transparent;
72+
input[type='range']::-ms-track {
73+
appearance: none;
74+
-webkit-appearance: none;
75+
box-shadow: none;
76+
border: none;
77+
background: transparent;
7878
}

‎src/assets/scss/_variables.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,14 @@ $black: #181a1c;
2222
$white: #ffffffde;
2323

2424
$gray: #1c1c1e;
25-
$gray1: rgb(142, 142, 147);
26-
$gray2: rgb(99, 99, 102);
27-
$gray3: rgb(72, 72, 74);
28-
$gray4: rgb(58, 58, 60);
25+
$gray1: #8e8e93;
26+
$gray2: #636366;
27+
$gray3: #48484a;
28+
$gray4: #3a3a3c;
2929
$gray5: rgb(44, 44, 46);
3030
$body: #111111;
3131

32-
$red: #ff453a;
32+
$red: #f7635c;
3333
$blue: #0a84ff;
3434
$darkblue: #055ee2;
3535
$green: rgb(94, 247, 132);

‎src/components/LeftSidebar/NP/HotKeys.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
</template>
1616

1717
<script setup lang="ts">
18-
import { usePlayer } from "@/stores/player";
18+
import { buffering } from "@/stores/player";
1919
import useQStore from "@/stores/queue";
2020
2121
import { default as NextSvg, default as PrevSvg } from "@/assets/icons/next.svg";
@@ -24,7 +24,6 @@ import PlaySvg from "@/assets/icons/play.svg";
2424
import Spinner from "@/components/shared/Spinner.vue";
2525
2626
const queue = useQStore();
27-
const { buffering } = usePlayer();
2827
</script>
2928

3029
<style lang="scss">

‎src/components/LeftSidebar/NP/Progress.vue

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,41 @@
11
<template>
2-
<input
3-
id="progress"
4-
type="range"
5-
:value="time.current"
6-
min="0"
7-
:max="time.full"
8-
step="0.1"
9-
:style="{ backgroundSize: `${(time.current / (time.full || 1)) * 100}% 100%` }"
10-
@change="seek"
11-
/>
2+
<input
3+
id="progress"
4+
type="range"
5+
:value="time.current"
6+
min="0"
7+
:max="time.full"
8+
step="0.1"
9+
:style="{
10+
background: `#3a3a3c linear-gradient(90deg, white ${currentPercent}%, #48484a ${currentPercent}%, #48484a ${maxSeekPercent}%, #3a3a3c ${maxSeekPercent}%)`,
11+
}"
12+
@change="seek"
13+
/>
1214
</template>
1315

1416
<script setup lang="ts">
15-
import useQStore from "@/stores/queue";
17+
import { maxSeekPercent } from '@/stores/player'
18+
import useQStore from '@/stores/queue'
19+
import { computed } from 'vue'
1620
17-
const q = useQStore();
21+
const q = useQStore()
1822
19-
const { duration: time } = q;
23+
const { duration: time } = q
2024
21-
let prevHash = "";
25+
let prevHash = ''
2226
2327
const seek = (e: Event) => {
24-
if (prevHash && prevHash !== q.currenttrackhash) {
25-
prevHash = "";
26-
return;
27-
}
28+
if (prevHash && prevHash !== q.currenttrackhash) {
29+
prevHash = ''
30+
return
31+
}
2832
29-
const elem = e.target as HTMLInputElement;
30-
const value = elem.value;
33+
const elem = e.target as HTMLInputElement
34+
const value = elem.value
3135
32-
prevHash = q.currenttrackhash;
33-
q.seek(value as unknown as number);
34-
};
36+
prevHash = q.currenttrackhash
37+
q.seek(value as unknown as number)
38+
}
39+
40+
const currentPercent = computed(() => (time.current / (time.full || 1)) * 100)
3541
</script>

‎src/components/modals/NewPlaylist.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ const props = defineProps<{
4242
const store = usePlaylistStore();
4343
4444
onMounted(() => {
45-
console.log(props.albumhash)
4645
const input_elem = document.getElementById("modal-playlist-name-input") as HTMLInputElement;
4746
input_elem.focus();
4847
input_elem.value = props.playlist_name || "";

‎src/components/nav/NavBar.vue

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -35,32 +35,32 @@
3535
</template>
3636

3737
<script setup lang="ts">
38-
import { Routes } from "@/router";
39-
import { computed, ref } from "vue";
40-
41-
import useAuth from "@/stores/auth";
42-
import { content_width } from "@/stores/content-width";
43-
import useSettings from "@/stores/settings";
44-
import { xl } from "./../../composables/useBreakpoints";
45-
46-
import LogoSvg from "@/assets/icons/logos/logo-fill.light.svg";
47-
import SearchInput from "../RightSideBar/SearchInput.vue";
48-
import Avatar from "../shared/Avatar.vue";
49-
import NavButtons from "./NavButtons.vue";
50-
import NavLinks from "./NavLinks.vue";
51-
import NavSidenav from "./NavSidenav.vue";
52-
import NavTitles from "./NavTitles.vue";
53-
import ProfileDropdown from "./ProfileDropdown.vue";
54-
import Folder from "./Titles/Folder.vue";
55-
56-
const auth = useAuth();
57-
const settings = useSettings();
58-
const isSmall = computed(() => content_width.value < 800);
59-
60-
const sidenavActive = ref(false);
38+
import { Routes } from '@/router'
39+
import { computed, ref } from 'vue'
40+
41+
import useAuth from '@/stores/auth'
42+
import { content_width } from '@/stores/content-width'
43+
import useSettings from '@/stores/settings'
44+
import { xl } from './../../composables/useBreakpoints'
45+
46+
import LogoSvg from '@/assets/icons/logos/logo-fill.light.svg'
47+
import SearchInput from '../RightSideBar/SearchInput.vue'
48+
import Avatar from '../shared/Avatar.vue'
49+
import NavButtons from './NavButtons.vue'
50+
import NavLinks from './NavLinks.vue'
51+
import NavSidenav from './NavSidenav.vue'
52+
import NavTitles from './NavTitles.vue'
53+
import ProfileDropdown from './ProfileDropdown.vue'
54+
import Folder from './Titles/Folder.vue'
55+
56+
const auth = useAuth()
57+
const settings = useSettings()
58+
const isSmall = computed(() => content_width.value < 800)
59+
60+
const sidenavActive = ref(false)
6161
6262
function toggleSidenav() {
63-
sidenavActive.value = !sidenavActive.value;
63+
sidenavActive.value = !sidenavActive.value
6464
}
6565
</script>
6666

@@ -133,7 +133,7 @@ function toggleSidenav() {
133133
height: 36px;
134134
135135
&::after {
136-
content: "";
136+
content: '';
137137
height: 100%;
138138
width: 100%;
139139
position: absolute;

‎src/components/nav/ProfileDropdown.vue

Lines changed: 91 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,116 @@
11
<template>
2-
<div class="profiledrop rounded-sm pad-sm shadow-lg">
3-
<div class="info item">
4-
<div class="username">Hi {{ auth.user.firstname || auth.user.username }}</div>
5-
<div class="description">Some status here?</div>
6-
</div>
7-
<div class="separator"></div>
8-
<div class="item">
9-
<div class="icon"></div>
10-
<div class="label">Profile</div>
11-
</div>
12-
<div class="item" @click="modal.showSettingsModal">
13-
<div class="icon"></div>
14-
<div class="label">Settings</div>
15-
</div>
16-
<div class="separator"></div>
17-
<div class="item critical" @click="auth.logout">
18-
<div class="icon"></div>
19-
<div class="label">Logout</div>
20-
</div>
2+
<div class="profiledrop rounded-sm pad-sm shadow-lg">
3+
<div class="info item">
4+
<div class="username ellip2">
5+
Hi {{ auth.user.firstname || auth.user.username }}
6+
</div>
217
</div>
8+
<div class="separator"></div>
9+
<div class="item scan" @click="triggerScan">
10+
<div class="label">Quick scan</div>
11+
<ReloadSvg />
12+
</div>
13+
<div class="item" @click="modal.showSettingsModal">
14+
<div class="label">Settings</div>
15+
<SettingsSvg />
16+
</div>
17+
<div class="separator"></div>
18+
<div class="item critical logout" @click="auth.logout">
19+
<div class="label">Log out</div>
20+
<LogoutSvg />
21+
</div>
22+
</div>
2223
</template>
2324

2425
<script setup lang="ts">
2526
import useAuth from "@/stores/auth";
2627
import useModal from "@/stores/modal";
2728
29+
import SettingsSvg from "@/assets/icons/settings.svg";
30+
import LogoutSvg from "@/assets/icons/logout.svg";
31+
import ReloadSvg from "@/assets/icons/reload.svg";
32+
import { triggerScan } from "@/requests/settings/rootdirs";
33+
2834
const auth = useAuth();
2935
const modal = useModal();
3036
</script>
3137

3238
<style lang="scss">
3339
.profiledrop {
34-
position: absolute;
35-
z-index: 10;
36-
top: 2.25rem;
37-
right: 0;
38-
width: 10rem;
39-
font-size: 0.95rem;
40-
font-weight: 400;
40+
position: absolute;
41+
z-index: 10;
42+
top: 2.25rem;
43+
right: 0;
44+
width: 10rem;
45+
font-size: 0.95rem;
46+
font-weight: 400;
47+
display: flex;
48+
flex-direction: column;
49+
border: solid 1px $gray5;
50+
background-color: $gray;
51+
52+
.separator {
53+
height: 1px;
54+
background-color: $gray3;
55+
padding: 0;
56+
}
57+
58+
.item {
4159
display: flex;
42-
flex-direction: column;
43-
border: solid 1px $gray5;
44-
background-color: $gray;
60+
align-items: center;
61+
justify-content: space-between;
62+
gap: $smaller;
63+
padding: $small $medium;
64+
border-radius: 6px;
65+
cursor: pointer;
66+
transition: background-color 0.2s ease-out;
4567
46-
.separator {
47-
height: 1px;
48-
background-color: $gray3;
49-
padding: 0;
68+
&:hover {
69+
background-color: $gray4;
5070
}
5171
52-
.item {
53-
display: flex;
54-
align-items: center;
55-
gap: 12px;
56-
padding: $small $medium;
57-
border-radius: 6px;
58-
cursor: pointer;
59-
transition: background-color 0.2s ease-out;
60-
61-
&:nth-child(3) {
62-
margin-bottom: $smaller;
63-
}
64-
65-
&:hover {
66-
background-color: $gray4;
67-
68-
.icon {
69-
background-color: $white;
70-
}
71-
}
72-
73-
.icon {
74-
padding: 8px;
75-
border-radius: 4px;
76-
background-color: rgb(156, 156, 156);
77-
transition: background-color 0.2s ease-out;
78-
}
79-
80-
.label {
81-
}
72+
svg {
73+
height: 1.5rem;
8274
}
75+
}
8376
84-
.info {
85-
flex-direction: column;
86-
align-items: baseline;
87-
gap: $smallest;
88-
cursor: auto;
89-
padding: 0.25rem 0.75rem;
90-
91-
&:hover {
92-
background-color: transparent;
93-
}
94-
95-
.username {
96-
font-weight: 500;
97-
}
98-
99-
.description {
100-
font-size: 12px;
101-
color: rgb(156, 156, 156);
102-
}
77+
.item.logout svg, .scan svg {
78+
// INFO: Though the icons are 1.5rem, it looks larger than the rest
79+
// So, we reduce the size a bit.
80+
height: 1.25rem;
81+
}
82+
83+
.logout svg {
84+
margin-right: 1px;
85+
}
86+
87+
.scan svg {
88+
margin-right: 3px;
89+
}
90+
91+
.info {
92+
flex-direction: column;
93+
align-items: baseline;
94+
gap: $smallest;
95+
cursor: auto;
96+
padding: 0.25rem 0.75rem;
97+
98+
&:hover {
99+
background-color: transparent;
103100
}
104101
105-
.critical:hover {
106-
background-color: $red;
102+
.username {
103+
font-weight: 500;
107104
}
105+
}
106+
107+
.critical {
108+
color: $red;
109+
}
110+
111+
.critical:hover {
112+
background-color:transparent;
113+
outline: solid 1px;
114+
}
108115
}
109116
</style>

‎src/context_menus/folder.ts

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,17 @@ export default async (path: string) => {
4141

4242
const add_to_playlist = <Option>{
4343
label: "Add to Playlist",
44-
children: () => getAddToPlaylistOptions(AddToPlaylistAction, {
45-
path,
46-
playlist_name: path.split("/").pop(),
47-
}),
44+
children: () =>
45+
getAddToPlaylistOptions(AddToPlaylistAction, {
46+
path,
47+
playlist_name: (() => {
48+
if (path.endsWith("/")) {
49+
path = path.slice(0, -1);
50+
}
51+
52+
return path.split("/").pop();
53+
})(),
54+
}),
4855
icon: icons.PlusIcon,
4956
};
5057

‎src/stores/player.ts

Lines changed: 42 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,14 @@ import useTracker from './tracker'
1313
import { paths } from '@/config'
1414
import updateMediaNotif from '@/helpers/mediaNotification'
1515
import { crossFade } from '@/utils/audio/crossFade'
16-
import settings from './settings'
1716

1817
export function getUrl(filepath: string, trackhash: string) {
19-
return `${paths.api.files}/${trackhash}?filepath=${encodeURIComponent(
20-
filepath
21-
)}`
18+
return `${paths.api.files}/${trackhash}?filepath=${encodeURIComponent(filepath)}`
2219
}
2320

2421
let audio = new Audio()
22+
const buffering = ref(true)
23+
const maxSeekPercent = ref(0)
2524

2625
export const usePlayer = defineStore('player', () => {
2726
const queue = useQueue()
@@ -76,8 +75,6 @@ export const usePlayer = defineStore('player', () => {
7675
let sourceTime = 0
7776
let lastTime = 0
7877

79-
const buffering = ref(false)
80-
8178
function setVolume(new_value: number) {
8279
audio.volume = new_value
8380
}
@@ -96,59 +93,46 @@ export const usePlayer = defineStore('player', () => {
9693
if (err instanceof DOMException) {
9794
queue.playPause()
9895

99-
return toast.showNotification(
100-
'Tap anywhere in the page and try again (autoplay blocked))',
101-
NotifType.Error
102-
)
96+
return toast.showNotification('Tap anywhere in the page and try again (autoplay blocked))', NotifType.Error)
10397
}
10498

105-
showNotification(
106-
"Can't play: " + queue.currenttrack.title,
107-
NotifType.Error
108-
)
99+
showNotification("Can't load: " + queue.currenttrack.title, NotifType.Error)
109100

110-
if (queue.currentindex !== tracklist.tracklist.length - 1) {
111-
if (!queue.playing) return
101+
// if (queue.currentindex !== tracklist.tracklist.length - 1) {
102+
// if (!queue.playing) return
112103

113-
let onErrorPrevTrackHash: string = queue.currenttrackhash
104+
// let onErrorPrevTrackHash: string = queue.currenttrackhash
114105

115-
setTimeout(() => {
116-
// if another track has been played, don't play next track
117-
if (queue.currenttrackhash !== onErrorPrevTrackHash) {
118-
return
119-
}
106+
// setTimeout(() => {
107+
// // if another track has been played, don't play next track
108+
// if (queue.currenttrackhash !== onErrorPrevTrackHash) {
109+
// return
110+
// }
120111

121-
queue.playNext()
122-
}, 3000)
123-
return
124-
}
112+
// queue.playNext()
113+
// }, 3000)
114+
// return
115+
// }
125116

126117
// TODO: move this to a queue action
127-
queue.setPlaying(false)
118+
// queue.setPlaying(false)
128119
}
129120

130121
const handlePlayErrors = (e: Event) => {
131122
if (e instanceof DOMException) {
132123
queue.playPause()
133124

134-
return toast.showNotification(
135-
'Tap anywhere in the page and try again (autoplay blocked))',
136-
NotifType.Error
137-
)
125+
return toast.showNotification('Tap anywhere in the page and try again (autoplay blocked))', NotifType.Error)
138126
}
139127

140-
toast.showNotification(
141-
"Can't play: " + queue.currenttrack.title,
142-
NotifType.Error
143-
)
128+
toast.showNotification("Can't load: " + queue.currenttrack.title, NotifType.Error)
144129
}
145130

146131
const runActionsOnPlay = () => {
147132
if (
148133
!queue.manual &&
149134
!audio.src.includes('sm.radio.jingles') &&
150-
audio.currentTime - currentAudioData.silence.starting_file / 1000 <=
151-
4
135+
audio.currentTime - currentAudioData.silence.starting_file / 1000 <= 4
152136
) {
153137
crossFade({
154138
audio,
@@ -158,19 +142,14 @@ export const usePlayer = defineStore('player', () => {
158142
}
159143

160144
updateMediaNotif()
161-
colors.setTheme1Color(
162-
paths.images.thumb.small + queue.currenttrack.image
163-
)
145+
colors.setTheme1Color(paths.images.thumb.small + queue.currenttrack.image)
164146

165147
if (router.currentRoute.value.name == Routes.Lyrics) {
166148
return lyrics.getLyrics()
167149
}
168150

169151
if (!settings.use_lyrics_plugin) {
170-
lyrics.checkExists(
171-
queue.currenttrack.filepath,
172-
queue.currenttrack.trackhash
173-
)
152+
lyrics.checkExists(queue.currenttrack.filepath, queue.currenttrack.trackhash)
174153
}
175154
}
176155

@@ -187,7 +166,7 @@ export const usePlayer = defineStore('player', () => {
187166
const onAudioEnded = () => {
188167
const { submitData } = tracker
189168
submitData()
190-
queue.autoPlayNext()
169+
// queue.autoPlayNext()
191170
}
192171

193172
const onAudioPlay = () => {
@@ -199,8 +178,7 @@ export const usePlayer = defineStore('player', () => {
199178
}
200179

201180
const updateLyricsPosition = () => {
202-
if (!lyrics.exists || router.currentRoute.value.name !== Routes.Lyrics)
203-
return
181+
if (!lyrics.exists || router.currentRoute.value.name !== Routes.Lyrics) return
204182

205183
const millis = Math.round(audio.currentTime * 1000)
206184
const diff = lyrics.nextLineTime - millis
@@ -213,11 +191,7 @@ export const usePlayer = defineStore('player', () => {
213191

214192
if (diff < 1200) {
215193
// set timer to next line
216-
if (
217-
lyrics.lyrics &&
218-
!(lyrics.lyrics.length <= lyrics.currentLine + 1) &&
219-
!lyrics.ticking
220-
) {
194+
if (lyrics.lyrics && !(lyrics.lyrics.length <= lyrics.currentLine + 1) && !lyrics.ticking) {
221195
lyrics.setNextLineTimer(diff)
222196
}
223197
}
@@ -226,9 +200,7 @@ export const usePlayer = defineStore('player', () => {
226200
const handleNextAudioCanPlay = async () => {
227201
if (!settings.use_silence_skip) {
228202
nextAudioData.silence.starting_file = 0
229-
currentAudioData.silence.ending_file = Math.floor(
230-
audio.duration * 1000
231-
)
203+
currentAudioData.silence.ending_file = Math.floor(audio.duration * 1000)
232204
nextAudioData.loaded = true
233205
return
234206
}
@@ -240,7 +212,7 @@ export const usePlayer = defineStore('player', () => {
240212
starting_file: queue.next.filepath,
241213
})
242214

243-
worker.onmessage = (e) => {
215+
worker.onmessage = e => {
244216
const silence = e.data
245217
nextAudioData.silence.starting_file = silence.starting_file
246218
currentAudioData.silence.ending_file = silence.ending_file
@@ -303,32 +275,18 @@ export const usePlayer = defineStore('player', () => {
303275
loadNextTrack()
304276
}
305277

306-
if (
307-
nextAudioData.loaded &&
308-
!nextAudioData.ticking &&
309-
currentAudioData.silence.ending_file
310-
) {
278+
if (nextAudioData.loaded && !nextAudioData.ticking && currentAudioData.silence.ending_file) {
311279
const { crossfade_duration, use_crossfade } = settings
312-
const diff =
313-
currentAudioData.silence.ending_file -
314-
Math.floor(audio.currentTime * 1000)
280+
const diff = currentAudioData.silence.ending_file - Math.floor(audio.currentTime * 1000)
315281

316-
const is_jingle =
317-
queue.currenttrack.filepath.includes('sm.radio.jingles')
318-
const newdiff =
319-
crossfade_duration > diff || is_jingle || !use_crossfade
320-
? diff
321-
: diff - crossfade_duration
282+
const is_jingle = queue.currenttrack.filepath.includes('sm.radio.jingles')
283+
const newdiff = crossfade_duration > diff || is_jingle || !use_crossfade ? diff : diff - crossfade_duration
322284

323285
if (diff > 0) {
324286
nextAudioData.ticking = true
325287
movingNextTimer = setTimeout(() => {
326288
nextAudioData.ticking = false
327-
if (
328-
!queue.playing &&
329-
nextAudioData.filepath == queue.next.filepath
330-
)
331-
return
289+
if (!queue.playing && nextAudioData.filepath == queue.next.filepath) return
332290
moveLoadedForward()
333291
}, newdiff)
334292
}
@@ -345,20 +303,17 @@ export const usePlayer = defineStore('player', () => {
345303
}
346304

347305
const handleBufferingStatus = () => {
348-
const difference = Math.abs(sourceTime - lastTime)
349-
350-
if (difference > 600 && queue.playing) {
306+
try {
307+
const buffer = audio.seekable.end(0) - audio.currentTime
308+
buffering.value = buffer < 1
309+
maxSeekPercent.value = Math.max(maxSeekPercent.value, (audio.buffered.end(0) / audio.duration) * 100)
310+
} catch (error) {
351311
buffering.value = true
352-
return
353312
}
354-
355-
buffering.value = false
356313
}
357314

358315
const updateBufferWatcherTime = () => {
359316
if (!queue.playing) return
360-
const date = new Date()
361-
lastTime = date.getTime()
362317
handleBufferingStatus()
363318
}
364319

@@ -370,18 +325,13 @@ export const usePlayer = defineStore('player', () => {
370325
}
371326

372327
updateBufferWatcherTime()
373-
}, 100)
328+
}, 1000)
374329

375330
function playCurrentTrack() {
376331
tracker.changeKey()
377332
clearEventHandlers(audio)
378333

379-
if (
380-
!queue.manual &&
381-
queue.playing &&
382-
audio.src !== '' &&
383-
!audio.src.includes('sm.radio.jingles')
384-
) {
334+
if (!queue.manual && queue.playing && audio.src !== '' && !audio.src.includes('sm.radio.jingles')) {
385335
const oldAudio = audio
386336
crossFade({
387337
audio: oldAudio,
@@ -394,9 +344,7 @@ export const usePlayer = defineStore('player', () => {
394344
}
395345

396346
const { currenttrack: track } = queue
397-
const uri = `${paths.api.files}/${
398-
track.trackhash
399-
}?filepath=${encodeURIComponent(track.filepath as string)}`
347+
const uri = `${paths.api.files}/${track.trackhash}?filepath=${encodeURIComponent(track.filepath as string)}`
400348

401349
audio.src = uri
402350

@@ -428,7 +376,6 @@ export const usePlayer = defineStore('player', () => {
428376

429377
return {
430378
audio,
431-
buffering,
432379
setMute,
433380
setVolume,
434381
playCurrent: playCurrentTrack,
@@ -437,4 +384,4 @@ export const usePlayer = defineStore('player', () => {
437384
}
438385
})
439386

440-
export { audio }
387+
export { audio, buffering, maxSeekPercent }

‎src/stores/search.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,8 @@ export default defineStore("search", () => {
157157
watch(
158158
() => debouncedQuery.value,
159159
(newQuery) => {
160+
if (newQuery.trim() == "") return;
161+
160162
if (!settings.use_sidebar && route.value.name !== Routes.search) {
161163
router.push({
162164
name: Routes.search,

0 commit comments

Comments
 (0)
Please sign in to comment.