modify queue page to use the correct track component

This commit is contained in:
geoffrey45 2022-08-31 12:20:35 +03:00
parent 8eb9f22bf0
commit 6454f38cc3
4 changed files with 35 additions and 28 deletions

View File

@ -122,11 +122,11 @@ function updateQueue(track: Track) {
);
switch (routename) {
case "FolderView":
case Routes.folder:
queue.playFromFolder(props.path || "", props.tracks);
queue.play(index);
break;
case "AlbumView":
case Routes.album:
const tindex = album.tracks.findIndex((t) => t.trackid === track.trackid);
queue.playFromAlbum(
@ -137,7 +137,7 @@ function updateQueue(track: Track) {
);
queue.play(tindex);
break;
case "PlaylistView":
case Routes.playlist:
queue.playFromPlaylist(
props.pname || "",
props.playlistid || "",

View File

@ -3,20 +3,15 @@
<div class="r-grid">
<div class="scrollable-r rounded">
<QueueActions />
<div
class="inner"
@mouseenter="setMouseOver(true)"
@mouseleave="setMouseOver(false)"
>
<TrackItem
<div class="inner">
<TrackComponent
v-for="(t, index) in queue.tracklist"
:key="index"
:track="t"
@playThis="queue.play(index)"
:isCurrent="index === queue.currentindex"
:index="index + 1"
:isPlaying="queue.playing"
:isQueueTrack="true"
:index="index"
:isHighlighted="false"
:isCurrent="index === queue.currentindex"
/>
</div>
</div>
@ -25,14 +20,27 @@
</template>
<script setup lang="ts">
import { onUpdated, ref } from "vue";
import { computed, onUpdated, ref } from "vue";
import useQStore from "@/stores/queue";
import { focusElem } from "@/utils";
import TrackItem from "../shared/TrackItem.vue";
import SongItem from "../shared/SongItem.vue";
import QueueActions from "./Queue/QueueActions.vue";
const props = defineProps<{
isOnQueuePage?: boolean;
}>();
const TrackComponent = computed(() => {
if (props.isOnQueuePage) {
return SongItem;
}
return TrackItem;
});
const queue = useQStore();
const mouseover = ref(false);

View File

@ -1,24 +1,14 @@
<template>
<div id="tracks-results">
<div v-if="search.tracks.value.length">
<div v-if="use_song_item">
<SongItem
v-for="track in search.tracks.value"
<div>
<TrackComponent
v-for="(track, index) in search.tracks.value"
:key="track.trackid"
:isCurrent="queue.currentid == track.trackid"
:isHighlighted="false"
:isPlaying="queue.playing"
:track="track"
/>
</div>
<div v-else>
<TrackItem
v-for="(track, index) in search.tracks.value"
:key="track.trackid"
:track="track"
:isPlaying="queue.playing"
:isCurrent="queue.currentid == track.trackid"
:isSearchTrack="true"
@PlayThis="updateQueue(index)"
/>
</div>
@ -34,6 +24,7 @@ import TrackItem from "@/components/shared/TrackItem.vue";
import SongItem from "@/components/shared/SongItem.vue";
import useQStore from "../../../stores/queue";
import useSearchStore from "../../../stores/search";
import { computed } from "vue";
const queue = useQStore();
const search = useSearchStore();
@ -47,6 +38,14 @@ const props = defineProps<{
isOnSearchPage?: boolean;
}>();
const TrackComponent = computed(() => {
if (props.isOnSearchPage) {
return SongItem;
}
return TrackItem;
});
let use_song_item: boolean = false;
if (props.isOnSearchPage) {

View File

@ -1,6 +1,6 @@
<template>
<div class="queue-view">
<Queue />
<Queue :isOnQueuePage="true" />
</div>
</template>