Skip to content

Commit 193f32c

Browse files
marcelveldtmarcelveldt
committed
Fix provider mapping info details
1 parent eee089b commit 193f32c

File tree

9 files changed

+526
-433
lines changed

9 files changed

+526
-433
lines changed

‎src/components/ItemsListing.vue‎

Lines changed: 188 additions & 187 deletions
Large diffs are not rendered by default.

‎src/plugins/api/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -367,7 +367,7 @@ export class MusicAssistantApi {
367367
force_refresh?: boolean,
368368
lazy?: boolean,
369369
): Promise<Radio> {
370-
return this.getData('music/radios/get_radio', {
370+
return this.getData('music/radio/get_radio', {
371371
item_id,
372372
provider_instance_id_or_domain,
373373
force_refresh,

‎src/translations/en.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,5 +201,7 @@
201201
"favorites_remove": "Remove from favorites",
202202
"confirm_library_remove": "Are you sure you want to delete this item from the library ? Any items depending on this item will also recursively be removed. Note that this will only remove this item from the library. If this is a music file on disk, it may return in the next sync.",
203203
"check_item_on_provider": "Check {0} on {1}",
204-
"check_item_in_library": "Check {0} in the library"
204+
"check_item_in_library": "Check {0} in the library",
205+
"media_details": "Media details",
206+
"mapped_providers": "Mapped providers"
205207
}

‎src/views/AlbumDetails.vue‎

Lines changed: 97 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,86 @@
11
<template>
22
<section>
33
<InfoHeader :item="itemDetails" :active-provider="provider" />
4-
<ItemsListing
5-
itemtype="albumtracks"
6-
:parent-item="itemDetails"
7-
:show-provider="false"
8-
:show-favorites-only-filter="false"
9-
:load-data="loadAlbumTracks"
10-
:sort-keys="['track_number', 'sort_name', 'duration']"
11-
:update-available="updateAvailable"
12-
@refresh-clicked="
13-
loadItemDetails();
14-
updateAvailable = false;
15-
"
16-
:title="$t('tracks')"
17-
:checksum="provider+itemId"
18-
/>
19-
<ItemsListing
20-
itemtype="albumversions"
21-
:parent-item="itemDetails"
22-
:show-provider="true"
23-
:show-favorites-only-filter="false"
24-
:load-data="loadAlbumVersions"
25-
:sort-keys="['provider', 'sort_name', 'year']"
26-
:update-available="updateAvailable"
27-
@refresh-clicked="
28-
loadItemDetails();
29-
updateAvailable = false;
30-
"
31-
:title="$t('other_versions')"
32-
:hide-on-empty="true"
33-
:checksum="provider+itemId"
34-
/>
35-
<!-- buttons to show more items on streaming providers-->
36-
<v-card v-if="itemDetails && itemDetails.provider == 'library'" style="margin-left: 20px; margin-right: 20px">
37-
<div v-for="providerMapping in getStreamingProviderMappings(itemDetails)" :key="providerMapping.provider_instance">
38-
<ListItem
39-
v-if="![providerMapping.provider_domain, providerMapping.provider_instance].includes(provider)"
40-
@click="
41-
$router.replace({
42-
name: 'album',
43-
params: {
44-
itemId: providerMapping.item_id,
45-
provider: providerMapping.provider_instance,
46-
},
47-
})
48-
"
49-
:subtitle="
50-
$t('check_item_on_provider', [
51-
itemDetails.name,
52-
api.providerManifests[providerMapping.provider_domain].name,
53-
])
54-
"
55-
>
56-
<template #prepend>
57-
<div>
58-
<ProviderIcon :domain="providerMapping.provider_domain" :size="30" />
59-
</div>
60-
</template>
61-
</ListItem>
62-
<ListItem
63-
v-if="provider != 'library' && itemDetails.provider == 'library'"
64-
@click="
65-
$router.replace({
66-
name: 'album',
67-
params: {
68-
itemId: itemDetails.item_id,
69-
provider: itemDetails.provider,
70-
},
71-
})
72-
"
73-
:subtitle="$t('check_item_in_library', [itemDetails.name])"
74-
>
75-
<template #prepend>
76-
<div>
77-
<ProviderIcon domain="library" :size="30" />
78-
</div>
79-
</template>
80-
</ListItem>
81-
</div>
82-
</v-card>
4+
<Container>
5+
<ItemsListing
6+
itemtype="albumtracks"
7+
:parent-item="itemDetails"
8+
:show-provider="false"
9+
:show-favorites-only-filter="false"
10+
:load-data="loadAlbumTracks"
11+
:sort-keys="['track_number', 'sort_name', 'duration']"
12+
:update-available="updateAvailable"
13+
@refresh-clicked="
14+
loadItemDetails();
15+
updateAvailable = false;
16+
"
17+
:title="$t('tracks')"
18+
:checksum="provider + itemId"
19+
/>
20+
<br />
21+
<ItemsListing
22+
itemtype="albumversions"
23+
:parent-item="itemDetails"
24+
:show-provider="true"
25+
:show-favorites-only-filter="false"
26+
:load-data="loadAlbumVersions"
27+
:sort-keys="['provider', 'sort_name', 'year']"
28+
:update-available="updateAvailable"
29+
@refresh-clicked="
30+
loadItemDetails();
31+
updateAvailable = false;
32+
"
33+
:title="$t('other_versions')"
34+
:hide-on-empty="true"
35+
:checksum="provider + itemId"
36+
/>
37+
38+
<br />
39+
40+
<!-- provider mapping details -->
41+
<v-card style="margin-bottom: 10px" v-if="provider == 'library'">
42+
<v-toolbar color="transparent" :title="$t('mapped_providers')" style="height: 55px"> </v-toolbar>
43+
<v-divider />
44+
<Container>
45+
<v-list>
46+
<ListItem
47+
v-for="providerMapping in itemDetails?.provider_mappings"
48+
@click="
49+
$router.push({
50+
name: 'album',
51+
params: {
52+
itemId: providerMapping.item_id,
53+
provider: providerMapping.provider_instance,
54+
},
55+
})
56+
"
57+
>
58+
<template #prepend>
59+
<ProviderIcon :domain="providerMapping.provider_domain" :size="30" />
60+
</template>
61+
<template #title>
62+
{{ api.providerManifests[providerMapping.provider_domain].name }}
63+
</template>
64+
<template #subtitle>
65+
{{ providerMapping.item_id }} |
66+
{{ providerMapping.audio_format.content_type }} |
67+
{{ providerMapping.audio_format.sample_rate / 1000 }}kHz/{{ providerMapping.audio_format.bit_depth }}
68+
bits
69+
</template>
70+
<template #append>
71+
<v-btn
72+
variant="plain"
73+
icon="mdi-open-in-new"
74+
v-if="providerMapping.url"
75+
@click.prevent="
76+
openLinkInNewTab(providerMapping.url)"
77+
></v-btn>
78+
</template>
79+
</ListItem>
80+
</v-list>
81+
</Container>
82+
</v-card>
83+
</Container>
8384
</section>
8485
</template>
8586

@@ -91,8 +92,9 @@ import { EventType, type Album, type EventMessage, type MediaItemType } from '..
9192
import { api } from '../plugins/api';
9293
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
9394
import ListItem from '../components/mods/ListItem.vue';
95+
import Container from '../components/mods/Container.vue';
9496
import ProviderIcon from '@/components/ProviderIcon.vue';
95-
import {getStreamingProviderMappings} from '../utils'
97+
import { getStreamingProviderMappings } from '../utils';
9698
9799
export interface Props {
98100
itemId: string;
@@ -145,8 +147,21 @@ const loadAlbumVersions = async function (
145147
search?: string,
146148
favoritesOnly = true,
147149
) {
148-
const albumVersions = await api.getAlbumVersions(props.itemId, props.provider);
149-
return filteredItems(albumVersions, offset, limit, sort, search, favoritesOnly);
150+
const allVersions: Album[] = [];
151+
152+
if (props.provider == 'library') {
153+
const albumVersions = await api.getAlbumVersions(props.itemId, props.provider);
154+
allVersions.push(...albumVersions);
155+
}
156+
for (const providerMapping of getStreamingProviderMappings(itemDetails.value!)) {
157+
const albumVersions = await api.getAlbumVersions(providerMapping.item_id, providerMapping.provider_instance);
158+
allVersions.push(...albumVersions);
159+
}
160+
return filteredItems(allVersions, offset, limit, sort, search, favoritesOnly);
161+
};
162+
163+
const openLinkInNewTab = function (url: string) {
164+
window.open(url, '_blank');
150165
};
151166
</script>
152167

‎src/views/ArtistDetails.vue‎

Lines changed: 47 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<section>
33
<InfoHeader :item="itemDetails" :active-provider="provider" />
4-
4+
<Container>
55
<ItemsListing
66
itemtype="artisttracks"
77
:parent-item="itemDetails"
@@ -18,7 +18,7 @@
1818
:title="$t('tracks')"
1919
:checksum="provider+itemId"
2020
/>
21-
21+
<br/>
2222
<ItemsListing
2323
itemtype="artistalbums"
2424
:parent-item="itemDetails"
@@ -35,58 +35,49 @@
3535
:checksum="provider+itemId"
3636
/>
3737

38-
<!-- buttons to show more items on streaming providers-->
39-
<v-card v-if="itemDetails && itemDetails.provider == 'library'" style="margin-left: 20px; margin-right: 20px">
40-
<div
41-
v-for="providerMapping in getStreamingProviderMappings(itemDetails)"
42-
:key="providerMapping.provider_instance"
43-
>
44-
<ListItem
45-
v-if="![providerMapping.provider_domain, providerMapping.provider_instance].includes(provider)"
46-
@click="
47-
$router.push({
48-
name: 'artist',
49-
params: {
50-
itemId: providerMapping.item_id,
51-
provider: providerMapping.provider_instance,
52-
},
53-
})
54-
"
55-
:subtitle="
56-
$t('check_item_on_provider', [
57-
itemDetails.name,
58-
api.providerManifests[providerMapping.provider_domain].name,
59-
])
60-
"
61-
>
62-
<template #prepend>
63-
<div>
38+
<br />
39+
40+
<!-- provider mapping details -->
41+
<v-card style="margin-bottom: 10px" v-if="provider == 'library'">
42+
<v-toolbar color="transparent" :title="$t('mapped_providers')" style="height: 55px"> </v-toolbar>
43+
<v-divider />
44+
<Container>
45+
<v-list>
46+
<ListItem
47+
v-for="providerMapping in itemDetails?.provider_mappings"
48+
@click="
49+
$router.push({
50+
name: 'album',
51+
params: {
52+
itemId: providerMapping.item_id,
53+
provider: providerMapping.provider_instance,
54+
},
55+
})
56+
"
57+
>
58+
<template #prepend>
6459
<ProviderIcon :domain="providerMapping.provider_domain" :size="30" />
65-
</div>
66-
</template>
67-
</ListItem>
68-
<ListItem
69-
v-if="provider != 'library' && itemDetails.provider == 'library'"
70-
@click="
71-
$router.push({
72-
name: 'artist',
73-
params: {
74-
itemId: itemDetails.item_id,
75-
provider: itemDetails.provider,
76-
},
77-
})
78-
"
79-
:subtitle="$t('check_item_in_library', [itemDetails.name])"
80-
>
81-
<template #prepend>
82-
<div>
83-
<ProviderIcon domain="library" :size="30" />
84-
</div>
85-
</template>
86-
</ListItem>
87-
</div>
60+
</template>
61+
<template #title>
62+
{{ api.providerManifests[providerMapping.provider_domain].name }}
63+
</template>
64+
<template #subtitle>
65+
{{ providerMapping.item_id }}
66+
</template>
67+
<template #append>
68+
<v-btn
69+
variant="plain"
70+
icon="mdi-open-in-new"
71+
v-if="providerMapping.url"
72+
@click.prevent="
73+
openLinkInNewTab(providerMapping.url)"
74+
></v-btn>
75+
</template>
76+
</ListItem>
77+
</v-list>
78+
</Container>
8879
</v-card>
89-
80+
</Container>
9081
</section>
9182
</template>
9283

@@ -98,6 +89,7 @@ import { EventType, type Artist, type EventMessage, type MediaItemType } from '.
9889
import ProviderIcon from '@/components/ProviderIcon.vue';
9990
import { api } from '../plugins/api';
10091
import ListItem from '../components/mods/ListItem.vue';
92+
import Container from '../components/mods/Container.vue';
10193
import { getStreamingProviderMappings } from '../utils';
10294
10395
export interface Props {
@@ -157,4 +149,7 @@ const loadArtistTracks = async function (
157149
const artistTopTracks = await api.getArtistTracks(props.itemId, props.provider);
158150
return filteredItems(artistTopTracks, offset, limit, sort, search, favoritesOnly);
159151
};
152+
const openLinkInNewTab = function (url: string) {
153+
window.open(url, '_blank');
154+
};
160155
</script>

0 commit comments

Comments
 (0)