Skip to content

Commit

Permalink
Fix OSD constantly refreshing media details
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcelveldt
marcelveldt committed Jul 31, 2022
1 parent 0114462 commit 5e5dd1a
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 64 deletions.
96 changes: 73 additions & 23 deletions custom_components/mass/frontend/src/components/PlayerOSD.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,12 @@
? 'to bottom, rgba(0,0,0,.80), rgba(0,0,0,.75)'
: 'to bottom, rgba(255,255,255,.85), rgba(255,255,255,.65)'
"
style="position: absolute; background-size: 100%; padding: 0; margin-top: -10px"
style="
position: absolute;
background-size: 100%;
padding: 0;
margin-top: -10px;
"
/>
<!-- now playing media -->
<v-list-item
Expand All @@ -33,7 +38,9 @@
:size="50"
width="50px"
height="50px"
@click="curQueueItem?.media_item ? itemClick(curQueueItem.media_item) : ''"
@click="
curQueueItem?.media_item ? itemClick(curQueueItem.media_item) : ''
"
style="cursor: pointer"
/></div
></template>
Expand All @@ -42,11 +49,17 @@
<template v-slot:title>
<span
v-if="curQueueItem.media_item"
@click="curQueueItem?.media_item ? itemClick(curQueueItem.media_item) : ''"
@click="
curQueueItem?.media_item ? itemClick(curQueueItem.media_item) : ''
"
style="cursor: pointer"
>
{{ curQueueItem.media_item.name }}
<span v-if="'version' in curQueueItem.media_item && curQueueItem.media_item.version"
<span
v-if="
'version' in curQueueItem.media_item &&
curQueueItem.media_item.version
"
>({{ curQueueItem.media_item.version }})</span
>
</span>
Expand All @@ -59,15 +72,26 @@
<template v-slot:subtitle>
<!-- track: artists(s) + album -->
<div
v-if="curQueueItem.media_item?.media_type == MediaType.TRACK && curQueueItem.media_item.album"
@click="curQueueItem?.media_item ? itemClick(curQueueItem.media_item) : ''"
v-if="
curQueueItem.media_item?.media_type == MediaType.TRACK &&
curQueueItem.media_item.album
"
@click="
curQueueItem?.media_item ? itemClick(curQueueItem.media_item) : ''
"
style="cursor: pointer"
>
{{ getArtistsString(curQueueItem.media_item.artists) }} •
{{ curQueueItem.media_item.album.name }}
</div>
<!-- track/album falback: artist present -->
<div v-else-if="curQueueItem.media_item && 'artist' in curQueueItem.media_item && curQueueItem.media_item.artist">
<div
v-else-if="
curQueueItem.media_item &&
'artist' in curQueueItem.media_item &&
curQueueItem.media_item.artist
"
>
{{ curQueueItem.media_item.artist.name }}
</div>
<!-- radio live metadata -->
Expand All @@ -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"
/>
Expand All @@ -103,7 +129,9 @@
$t("stream_details")
}}</span>
<v-divider></v-divider>
<v-list-item style="height: 50px; display: flex; align-items: center">
<v-list-item
style="height: 50px; display: flex; align-items: center"
>
<img
height="30"
width="50"
Expand Down Expand Up @@ -132,7 +160,8 @@
<div
style="height: 50px; display: flex; align-items: center"
v-if="
activePlayerQueue && activePlayerQueue.settings.crossfade_duration > 0
activePlayerQueue &&
activePlayerQueue.settings.crossfade_duration > 0
"
>
<img
Expand Down Expand Up @@ -202,7 +231,10 @@
:max="curQueueItem.duration"
:thumb-size="10"
@update:model-value="
api.queueCommandSeek(activePlayerQueue?.queue_id || '', Math.round($event))
api.queueCommandSeek(
activePlayerQueue?.queue_id || '',
Math.round($event)
)
"
style="margin-left: 0; margin-right: 0"
/>
Expand Down Expand Up @@ -313,20 +345,26 @@

<v-card min-width="300">
<v-list style="overflow: hidden" lines="two">
<v-list-item style="padding: 0; margin-left: 9px; margin-bottom: 9px">
<v-list-item
style="padding: 0; margin-left: 9px; margin-bottom: 9px"
>
<template v-slot:prepend>
<v-icon
size="45"
:icon="
store.selectedPlayer?.is_group ? mdiSpeakerMultiple : mdiSpeaker
store.selectedPlayer?.is_group
? mdiSpeakerMultiple
: mdiSpeaker
"
color="accent"
/>
</template>

<template v-slot:title>
<div class="text-subtitle-1" style="margin-left: 10px">
<b>{{ store.selectedPlayer?.group_name.substring(0, 25) }}</b>
<b>{{
store.selectedPlayer?.group_name.substring(0, 25)
}}</b>
</div>
</template>

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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));
}
}
);
Expand Down
63 changes: 22 additions & 41 deletions custom_components/mass/frontend/src/views/PlayerQueue.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
theme="dark"
:icon="mdiRadioTower"
prominent
style="margin-right:10px;"
style="margin-right: 10px"
>
<b>{{ $t("queue_radio_enabled") }}</b>
<br />
Expand Down Expand Up @@ -195,14 +195,7 @@
<v-card-text v-if="selectedItem">
<v-list>
<!-- play now -->
<v-list-item
@click="
api.queueCommandPlayIndex(
activePlayerQueue?.queue_id,
(selectedItem as QueueItem).item_id
)
"
>
<v-list-item @click="queueCommand(selectedItem, 'play_now')">
<v-list-item-avatar style="padding-right: 10px">
<v-icon :icon="mdiPlayCircleOutline"></v-icon>
</v-list-item-avatar>
Expand All @@ -211,14 +204,7 @@
<v-divider></v-divider>

<!-- play next (move to next in line) -->
<v-list-item
@click="
api.queueCommandMoveNext(
activePlayerQueue?.queue_id,
(selectedItem as QueueItem).item_id
)
"
>
<v-list-item @click="queueCommand(selectedItem, 'move_next')">
<v-list-item-avatar style="padding-right: 10px">
<v-icon :icon="mdiSkipNextCircleOutline"></v-icon>
</v-list-item-avatar>
Expand All @@ -227,14 +213,7 @@
<v-divider></v-divider>

<!-- move up -->
<v-list-item
@click="
api.queueCommandMoveUp(
activePlayerQueue?.queue_id,
(selectedItem as QueueItem).item_id
)
"
>
<v-list-item @click="queueCommand(selectedItem, 'up')">
<v-list-item-avatar style="padding-right: 10px">
<v-icon :icon="mdiArrowUp"></v-icon>
</v-list-item-avatar>
Expand All @@ -243,14 +222,7 @@
<v-divider></v-divider>

<!-- move down -->
<v-list-item
@click="
api.queueCommandMoveDown(
activePlayerQueue?.queue_id,
(selectedItem as QueueItem).item_id
)
"
>
<v-list-item @click="queueCommand(selectedItem, 'down')">
<v-list-item-avatar style="padding-right: 10px">
<v-icon :icon="mdiArrowDown"></v-icon>
</v-list-item-avatar>
Expand All @@ -259,14 +231,7 @@
<v-divider></v-divider>

<!-- delete -->
<v-list-item
@click="
api.queueCommandDelete(
activePlayerQueue?.queue_id,
(selectedItem as QueueItem).item_id
)
"
>
<v-list-item @click="queueCommand(selectedItem, 'delete')">
<v-list-item-avatar style="padding-right: 10px">
<v-icon :icon="mdiDelete"></v-icon>
</v-list-item-avatar>
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 5e5dd1a

Please sign in to comment.