DatseMultimediaSites
/
Sharkey
mirror of https://activitypub.software/TransFem-org/Sharkey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

merge: Collapse user activity, files, and listenbrainz on mobile (resolves #747) (!718) 

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/718

Closes #747

Approved-by: Marie <github@yuugi.dev>
Approved-by: dakkar <dakkar@thenautilus.net>
This commit is contained in:
dakkar 2024-10-27 12:12:30 +00:00
parent 473f100b67 a541eaba5e
commit 276b30bdc0
7 changed files with 82 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/backend/src/core/WebhookTestService.ts
View File

@ -254,7 +254,7 @@ function toPackedUserDetailedNotMe(user: MiUser, override?: Packed<'UserDetailed
isRenoteMuted: false,
notify: 'none',
withReplies: true,
ListenBrainz: null,
listenbrainz: null,
...override,
};
}

2
packages/backend/src/models/json-schema/user.ts
View File

@ -300,7 +300,7 @@ export const packedUserDetailedNotMeOnlySchema = {
nullable: true, optional: false,
example: '2018-03-12',
},
ListenBrainz: {
listenbrainz: {
type: 'string',
nullable: true,
optional: false,

22
packages/frontend/src/pages/user/home.vue
View File

@ -136,13 +136,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkInfo v-if="user.pinnedNotes.length === 0 && $i?.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
<template v-if="narrow">
<MkLazy>
<XFiles :key="user.id" :user="user"/>
<XFiles :key="user.id" :user="user" :collapsed="true"/>
</MkLazy>
<MkLazy>
<XActivity :key="user.id" :user="user"/>
<XActivity :key="user.id" :user="user" :collapsed="true"/>
</MkLazy>
<MkLazy>
<XListenBrainz v-if="user.listenbrainz && listenbrainzdata" :key="user.id" :user="user"/>
<XListenBrainz v-if="user.listenbrainz && listenbrainzdata" :key="user.id" :user="user" :collapsed="true"/>
</MkLazy>
</template>
<!-- <div v-if="!disableNotes">
@ -215,9 +215,9 @@ import { getStaticImageUrl } from '@/scripts/media-proxy.js';
import { infoImageUrl } from '@/instance.js';
const MkNote = defineAsyncComponent(() =>
(defaultStore.state.noteDesign === 'misskey') ? import('@/components/MkNote.vue') :
(defaultStore.state.noteDesign === 'sharkey') ? import('@/components/SkNote.vue') :
null
defaultStore.state.noteDesign === 'sharkey'
? import('@/components/SkNote.vue')
: import('@/components/MkNote.vue'),
);
function calcAge(birthdate: string): number {
@ -237,7 +237,7 @@ function calcAge(birthdate: string): number {
const XFiles = defineAsyncComponent(() => import('./index.files.vue'));
const XActivity = defineAsyncComponent(() => import('./index.activity.vue'));
const XListenBrainz = defineAsyncComponent(() => import("./index.listenbrainz.vue"));
const XListenBrainz = defineAsyncComponent(() => import('./index.listenbrainz.vue'));
//const XTimeline = defineAsyncComponent(() => import('./index.timeline.vue'));
const props = withDefaults(defineProps<{
@ -269,7 +269,7 @@ if (props.user.listenbrainz) {
const response = await fetch(`https://api.listenbrainz.org/1/user/${props.user.listenbrainz}/playing-now`, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
},
});
const data = await response.json();
@ -286,11 +286,11 @@ const background = computed(() => {
if (props.user.backgroundUrl == null) return {};
if (defaultStore.state.disableShowingAnimatedImages) {
return {
'--backgroundImageStatic': `url('${getStaticImageUrl(props.user.backgroundUrl)}')`
'--backgroundImageStatic': `url('${getStaticImageUrl(props.user.backgroundUrl)}')`,
};
} else {
return {
'--backgroundImageStatic': `url('${props.user.backgroundUrl}')`
'--backgroundImageStatic': `url('${props.user.backgroundUrl}')`,
};
}
});
@ -303,7 +303,7 @@ const pagination = {
endpoint: 'users/featured-notes' as const,
limit: 10,
params: computed(() => ({
userId: props.user.id
userId: props.user.id,
})),
};

4
packages/frontend/src/pages/user/index.activity.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkContainer>
<MkContainer :foldable="true" :expanded="!collapsed">
<template #icon><i class="ti ti-chart-line"></i></template>
<template #header>{{ i18n.ts.activity }}</template>
<template #func="{ buttonStyleClass }">
@ -30,8 +30,10 @@ import { i18n } from '@/i18n.js';
const props = withDefaults(defineProps<{
user: Misskey.entities.User;
limit?: number;
collapsed?: boolean;
}>(), {
limit: 50,
collapsed: false,
});
const chartSrc = ref('per-user-notes');

9
packages/frontend/src/pages/user/index.files.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkContainer :max-height="300" :foldable="true">
<MkContainer :max-height="300" :foldable="true" :expanded="!collapsed">
<template #icon><i class="ti ti-photo"></i></template>
<template #header>{{ i18n.ts.files }}</template>
<div :class="$style.root">
@ -43,9 +43,12 @@ import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
import { defaultStore } from '@/store.js';
import { i18n } from '@/i18n.js';
const props = defineProps<{
const props = withDefaults(defineProps<{
user: Misskey.entities.UserDetailed;
}>();
collapsed?: boolean;
}>(), {
collapsed: false,
});
const fetching = ref(true);
const files = ref<{

122
packages/frontend/src/pages/user/index.listenbrainz.vue
View File

@ -4,44 +4,43 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkContainer :foldable="true">
<template #header
><i
class="ph-headphones ph-bold ph-lg"
style="margin-right: 0.5em"
></i
>Music</template
>
<MkContainer :foldable="true" :expanded="!collapsed">
<template #header>
<i
class="ph-headphones ph-bold ph-lg"
style="margin-right: 0.5em"
></i>Music
</template>
<div style="padding: 8px">
<div class="flex">
<a :href="listenbrainz.musicbrainzurl">
<img class="image" :src="listenbrainz.img" :alt="listenbrainz.title" />
<div class="flex flex-col items-start">
<p class="text-sm font-bold">Now Playing: {{ listenbrainz.title }}</p>
<p class="text-xs font-medium">{{ listenbrainz.artist }}</p>
</div>
</a>
<a :href="listenbrainz.listenbrainzurl">
<div class="playicon">
<i class="ph-play ph-bold ph-lg"></i>
</div>
</a>
</div>
<div style="padding: 8px">
<div class="flex">
<a :href="listenbrainz.musicbrainzurl">
<img class="image" :src="listenbrainz.img" :alt="listenbrainz.title"/>
<div class="flex flex-col items-start">
<p class="text-sm font-bold">Now Playing: {{ listenbrainz.title }}</p>
<p class="text-xs font-medium">{{ listenbrainz.artist }}</p>
</div>
</a>
<a :href="listenbrainz.listenbrainzurl">
<div class="playicon">
<i class="ph-play ph-bold ph-lg"></i>
</div>
</a>
</div>
</MkContainer>
</div>
</MkContainer>
</template>
<script lang="ts" setup>
/* eslint-disable no-mixed-spaces-and-tabs */
import {} from "vue";
import * as misskey from "misskey-js";
import MkContainer from "@/components/MkContainer.vue";
import * as misskey from 'misskey-js';
import MkContainer from '@/components/MkContainer.vue';
const props = withDefaults(
defineProps<{
user: misskey.entities.User;
}>(),
{},
user: misskey.entities.UserDetailed;
collapsed?: boolean;
}>(), {
collapsed: false,
},
);
const listenbrainz = { title: '', artist: '', lastlisten: '', img: '', musicbrainzurl: '', listenbrainzurl: '' };
if (props.user.listenbrainz) {
@ -49,12 +48,12 @@ if (props.user.listenbrainz) {
const response = await fetch(`https://api.listenbrainz.org/1/metadata/lookup/?artist_name=${artist}&recording_name=${title}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
},
});
const data = await response.json();
if (!data.recording_name) {
return null;
return null;
}
const titler: string = data.recording_name;
const artistr: string = data.artist_credit_name;
@ -64,35 +63,33 @@ if (props.user.listenbrainz) {
return [titler, artistr, img, musicbrainzurl, listenbrainzurl];
};
const response = await fetch(`https://api.listenbrainz.org/1/user/${props.user.listenbrainz}/playing-now`, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
});
const data = await response.json();
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
const data = await response.json();
if (data.payload.listens && data.payload.listens.length !== 0) {
const title: string = data.payload.listens[0].track_metadata.track_name;
const artist: string = data.payload.listens[0].track_metadata.artist_name;
const lastlisten: string = data.payload.listens[0].playing_now;
const img: string = 'https://coverartarchive.org/img/big_logo.svg';
await getLMData(title, artist).then((data) => {
if (!data) {
listenbrainz.title = title;
listenbrainz.img = img;
listenbrainz.artist = artist;
listenbrainz.lastlisten = lastlisten;
return;
} else {
listenbrainz.title = data[0];
listenbrainz.img = data[2];
listenbrainz.artist = data[1];
listenbrainz.lastlisten = lastlisten;
listenbrainz.musicbrainzurl = data[3];
listenbrainz.listenbrainzurl = data[4];
return;
}
});
}
const title: string = data.payload.listens[0].track_metadata.track_name;
const artist: string = data.payload.listens[0].track_metadata.artist_name;
const lastlisten: string = data.payload.listens[0].playing_now;
const img = 'https://coverartarchive.org/img/big_logo.svg';
await getLMData(title, artist).then((lmData) => {
if (!lmData) {
listenbrainz.title = title;
listenbrainz.img = img;
listenbrainz.artist = artist;
listenbrainz.lastlisten = lastlisten;
} else {
listenbrainz.title = lmData[0];
listenbrainz.img = lmData[2];
listenbrainz.artist = lmData[1];
listenbrainz.lastlisten = lastlisten;
listenbrainz.musicbrainzurl = lmData[3];
listenbrainz.listenbrainzurl = lmData[4];
}
});
}
}
</script>
@ -119,8 +116,7 @@ if (props.user.listenbrainz) {
}
.text-sm {
font-size: 0.875rem;
margin: 0;
margin-bottom: 0.3rem;
margin: 0 0 0.3rem;
}
.font-bold {
font-weight: 700;

2
packages/misskey-js/src/autogen/types.ts
View File

@ -3939,7 +3939,7 @@ export type components = {
/** @example 2018-03-12 */
birthday: string | null;
/** @example Steve */
ListenBrainz: string | null;
listenbrainz: string | null;
/** @example ja-JP */
lang: string | null;
fields: {