Compare commits

...

2 Commits

Author SHA1 Message Date
13a624b5cf
nix ci
All checks were successful
nix-build-publish / check (push) Successful in 7m15s
2024-10-01 23:34:59 +05:00
34295e697f
add station animation, fix song info update 2024-10-01 23:30:47 +05:00
4 changed files with 48 additions and 3 deletions

14
.gitea/workflows/nix.yml Normal file
View File

@ -0,0 +1,14 @@
name: nix-build-publish
on:
push:
branches:
- master
jobs:
check:
runs-on: nix-runner
steps:
- uses: actions/checkout@v4
- run: |
nix flake check --keep-going

View File

@ -40,7 +40,8 @@ onMounted(() => {
<div class="flex rounded-xl m-2 bg-ctp-base">
<div class="flex items-center justify-center">
<div class="h-20 sm:h-36 flex rounded-l-xl aspect-square items-center justify-center bg-ctp-peach/50">
<VinylIcon class="p-1" />
<VinylIcon class="p-1"
:class="{ 'animate-spin-slow': player.station?.id === stationInfo.id && player.playing }" />
</div>
</div>
<div class="w-full flex flex-col justify-center px-4 space-y-2">

View File

@ -6,6 +6,12 @@ import { api } from "@";
type TimerId = number;
const setAsyncTimeout = (ms: number) => {
return new Promise((resolve) => {
setTimeout(resolve, ms * 1000);
});
};
export const usePlayer = defineStore("player", () => {
const stations: Ref<api.StationInfo[]> = ref(null);
const station: Ref<api.StationInfo> = ref(null);
@ -33,9 +39,24 @@ export const usePlayer = defineStore("player", () => {
};
const update = async () => {
if (station.value.status !== api.StationStatus.Receive) {
songInfo.value = null;
return;
}
await refreshSongInfo();
clearTimeout(updateTimer.value);
updateTimer.value = setTimeout(update, (songInfo.value.duration - songInfo.value.elapsed) * 1000);
if (songInfo.value.duration) {
updateTimer.value = await setAsyncTimeout(songInfo.value.duration - songInfo.value.elapsed);
} else {
updateTimer.value = await setAsyncTimeout(5);
}
if (playing.value) {
await update();
}
};
const play = (_station: api.StationInfo | null = null) => {

View File

@ -13,11 +13,20 @@ export default {
"100%": {
"background-position": "200% 0",
}
},
"spin": {
"from": {
"transform": "rotate(0deg)",
},
"to": {
"transform": "rotate(360deg)",
}
}
},
animation: {
"border-spin": "border-spin 7s linear infinite",
"border-roll": "border-roll 5s linear infinite"
"border-roll": "border-roll 5s linear infinite",
"spin-slow": "spin 2s linear infinite",
}
},
},