juli0n21/pwa-player
1
0
Fork 0
mirror of https://github.com/JuLi0n21/pwa-player.git synced 2026-04-20 07:50:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

minor improvements

Browse Source
This commit is contained in:
Julian Schlüter
2026-03-12 19:20:46 +01:00
parent 7c61a3ca57
commit 8a2ec44a32
34 changed files with 787 additions and 785 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/components/ActiveSearchList.vue
View File

@@ -1,10 +1,10 @@
<script setup lang="ts">
import type { Song, CollectionPreview } from '../script/types'
import { useAudio } from '@/composables/useAudio';
import { ref } from 'vue';
import { RouterLink } from 'vue-router';
import type { Song, CollectionPreview } from "../script/types";
import { useAudio } from "@/composables/useAudio";
import { ref } from "vue";
import { RouterLink } from "vue-router";
const audioStore = useAudio()
const audioStore = useAudio();
const props = defineProps<{
songs: Song[];
@@ -13,20 +13,18 @@ const props = defineProps<{
}>();
function update(hash: string) {
audioStore.setSong(props.songs.at(props.songs.findIndex(s => s.hash == hash)))
audioStore.setSong(props.songs[props.songs.findIndex((s) => s.hash == hash)]);
}
function highlightText(text: string, searchterm: string) {
if (!searchterm) return text;
const regex = new RegExp(`(${searchterm})`, 'gi');
const regex = new RegExp(`(${searchterm})`, "gi");
return text.replace(regex, '<span style="color: yellow;">$1</span>');
}
</script>
<template>
<div class="h-full w-full overflow-scroll overflow-x-hidden border bordercolor rounded-lg text-xs bg">
<div class="border rounded-lg w-full h-full overflow-scroll overflow-x-hidden text-xs bordercolor bg">
<div v-if="props.artist && props.artist.length > 0" class="border bordercolor">
<h2 class="text-2xl action">Artists</h2>
<ul>
@@ -41,15 +39,14 @@ function highlightText(text: string, searchterm: string) {
<ul>
<li v-for="(song, index) in props.songs" :key="index" class="rounded-lg">
<button @click="update(song.hash)" class="flex">
<img :src="encodeURI(song.previewimage + '?h=120&w=120')" class="h-12 w-12"></img>
<p class="text-nowrap text-ellipsis overflow-hidden ml-2">
<span v-html="highlightText(song.name, search)"></span> - <span
v-html="highlightText(song.artist, props.search)"></span>
<img :src="encodeURI(song.previewimage + '?h=120&w=120')" class="w-12 h-12" />
<p class="ml-2 overflow-hidden text-ellipsis text-nowrap">
<span v-html="highlightText(song.name, search)"></span> -
<span v-html="highlightText(song.artist, props.search)"></span>
</p>
</button>
</li>
</ul>
</div>
</div>
</template>