{{ getArtistsString(curQueueItem.media_item.artists) }} •
{{ curQueueItem.media_item.album.name }}
-
+
{{ curQueueItem.media_item.artist.name }}
@@ -92,7 +116,9 @@
: getContentTypeIcon(streamDetails.content_type)
"
height="25"
- :style="$vuetify.theme.current.dark ? '' : 'filter: invert(100%)'"
+ :style="
+ $vuetify.theme.current.dark ? '' : 'filter: invert(100%)'
+ "
class="v-list-item-subtitle mediadetails-streamdetails"
v-bind="props"
/>
@@ -103,7 +129,9 @@
$t("stream_details")
}}
-
+
@@ -313,12 +345,16 @@
-
+
@@ -326,7 +362,9 @@
- {{ store.selectedPlayer?.group_name.substring(0, 25) }}
+ {{
+ store.selectedPlayer?.group_name.substring(0, 25)
+ }}
@@ -392,13 +430,23 @@ import type {
Radio,
Player,
} from "../plugins/api";
-import { api, PlayerState, ContentType, MediaType, ImageType } from "../plugins/api";
+import {
+ api,
+ PlayerState,
+ ContentType,
+ MediaType,
+ ImageType,
+} from "../plugins/api";
import { store } from "../plugins/store";
import VolumeControl from "./VolumeControl.vue";
import MediaItemThumb, { getImageThumbForItem } from "./MediaItemThumb.vue";
import { formatDuration, truncateString, getArtistsString } from "../utils";
import { useRouter } from "vue-router";
-import { getContentTypeIcon, iconHiRes, getProviderIcon } from "./ProviderIcons.vue";
+import {
+ getContentTypeIcon,
+ iconHiRes,
+ getProviderIcon,
+} from "./ProviderIcons.vue";
const iconCrossfade = new URL("../assets/crossfade.png", import.meta.url).href;
const iconLevel = new URL("../assets/level.png", import.meta.url).href;
@@ -451,20 +499,22 @@ const itemClick = function (item: MediaItemType) {
// watchers
watch(
- () => curQueueItem.value,
+ () => curQueueItem.value?.item_id,
async (newVal) => {
- if (newVal == undefined) {
+ if (curQueueItem.value == undefined) {
curMediaItem.value = undefined;
- } else if (newVal.media_item) {
- curMediaItem.value = newVal.media_item;
+ } else if (curQueueItem.value.media_item) {
+ curMediaItem.value = curQueueItem.value.media_item;
// request full track info
- curMediaItem.value = await api?.getItem(newVal.media_item.uri);
+ curMediaItem.value = await api?.getItem(
+ curQueueItem.value.media_item.uri
+ );
}
if (curMediaItem.value) {
fanartImage.value =
- (await getImageThumbForItem(newVal, ImageType.FANART)) ||
- (await getImageThumbForItem(newVal, ImageType.THUMB));
+ (await getImageThumbForItem(curMediaItem.value, ImageType.FANART)) ||
+ (await getImageThumbForItem(curMediaItem.value, ImageType.THUMB));
}
}
);
diff --git a/custom_components/mass/frontend/src/views/PlayerQueue.vue b/custom_components/mass/frontend/src/views/PlayerQueue.vue
index 614ea7fa..98e8b2e7 100644
--- a/custom_components/mass/frontend/src/views/PlayerQueue.vue
+++ b/custom_components/mass/frontend/src/views/PlayerQueue.vue
@@ -24,7 +24,7 @@
theme="dark"
:icon="mdiRadioTower"
prominent
- style="margin-right:10px;"
+ style="margin-right: 10px"
>
{{ $t("queue_radio_enabled") }}
@@ -195,14 +195,7 @@
-
+
@@ -211,14 +204,7 @@
-
+
@@ -227,14 +213,7 @@
-
+
@@ -243,14 +222,7 @@
-
+
@@ -259,14 +231,7 @@
-
+
@@ -727,6 +692,22 @@ const gotoItem = function (item: MediaItemType) {
});
};
+const queueCommand = function (item: QueueItem | undefined, command: string) {
+ closeContextMenu();
+ if (!item || !activePlayerQueue.value) return;
+ if (command == "play_now") {
+ api.queueCommandPlayIndex(activePlayerQueue?.value.queue_id, item.item_id);
+ } else if (command == "move_next") {
+ api.queueCommandMoveNext(activePlayerQueue?.value.queue_id, item.item_id);
+ } else if (command == "up") {
+ api.queueCommandMoveUp(activePlayerQueue?.value.queue_id, item.item_id);
+ } else if (command == "down") {
+ api.queueCommandMoveDown(activePlayerQueue?.value.queue_id, item.item_id);
+ } else if (command == "delete") {
+ api.queueCommandDelete(activePlayerQueue?.value.queue_id, item.item_id);
+ }
+};
+
const closeContextMenu = function () {
selectedItem.value = undefined;
showContextMenu.value = false;