Sharkey/packages/frontend/src/pages/user/index.photos.vue

101 lines
2.2 KiB
Vue
Raw Normal View History

2018-02-15 10:33:34 +01:00
<template>
2021-04-16 05:17:22 +02:00
<MkContainer :max-height="300" :foldable="true">
2023-01-15 00:30:29 +01:00
<template #icon><i class="ti ti-photo"></i></template>
2023-04-01 07:01:57 +02:00
<template #header>{{ i18n.ts.images }}</template>
2023-01-15 00:30:29 +01:00
<div :class="$style.root">
<MkLoading v-if="fetching"/>
2023-01-15 00:30:29 +01:00
<div v-if="!fetching && images.length > 0" :class="$style.stream">
2022-09-05 11:51:23 +02:00
<MkA
v-for="image in images"
:key="image.note.id + image.file.id"
2023-01-15 00:30:29 +01:00
:class="$style.img"
:to="notePage(image.note)"
2021-04-16 05:06:54 +02:00
>
2022-09-05 11:51:23 +02:00
<ImgWithBlurhash :hash="image.file.blurhash" :src="thumbnail(image.file)" :title="image.file.name"/>
2021-04-16 05:06:54 +02:00
</MkA>
</div>
2023-04-01 07:01:57 +02:00
<p v-if="!fetching && images.length == 0" :class="$style.empty">{{ i18n.ts.nothing }}</p>
2018-02-15 10:33:34 +01:00
</div>
</MkContainer>
2018-02-15 10:33:34 +01:00
</template>
2022-09-05 11:51:23 +02:00
<script lang="ts" setup>
import { onMounted } from 'vue';
import * as misskey from 'misskey-js';
import { getStaticImageUrl } from '@/scripts/media-proxy';
import { notePage } from '@/filters/note';
2021-11-11 18:02:25 +01:00
import * as os from '@/os';
import MkContainer from '@/components/MkContainer.vue';
import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
2022-09-05 11:51:23 +02:00
import { defaultStore } from '@/store';
2023-04-05 07:29:18 +02:00
import { i18n } from '@/i18n';
2018-03-27 09:51:12 +02:00
2022-09-05 11:51:23 +02:00
const props = defineProps<{
user: misskey.entities.UserDetailed;
}>();
let fetching = $ref(true);
let images = $ref<{
note: misskey.entities.Note;
file: misskey.entities.DriveFile;
}[]>([]);
function thumbnail(image: misskey.entities.DriveFile): string {
return defaultStore.state.disableShowingAnimatedImages
? getStaticImageUrl(image.url)
2022-09-05 11:51:23 +02:00
: image.thumbnailUrl;
}
onMounted(() => {
const image = [
'image/jpeg',
'image/webp',
'image/avif',
2022-09-05 11:51:23 +02:00
'image/png',
'image/gif',
'image/apng',
'image/vnd.mozilla.apng',
];
os.api('users/notes', {
userId: props.user.id,
fileType: image,
excludeNsfw: defaultStore.state.nsfw !== 'ignore',
limit: 10,
}).then(notes => {
for (const note of notes) {
for (const file of note.files) {
images.push({
note,
file,
});
}
2022-09-05 11:51:23 +02:00
}
fetching = false;
});
2018-02-15 10:33:34 +01:00
});
</script>
2023-01-15 00:30:29 +01:00
<style lang="scss" module>
.root {
padding: 8px;
2023-01-15 00:30:29 +01:00
}
2023-01-15 00:30:29 +01:00
.stream {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
grid-gap: 6px;
}
2018-02-15 10:33:34 +01:00
2023-01-15 00:30:29 +01:00
.img {
height: 128px;
border-radius: 6px;
overflow: clip;
}
2018-02-15 10:33:34 +01:00
2023-01-15 00:30:29 +01:00
.empty {
margin: 0;
padding: 16px;
text-align: center;
}
2018-02-15 10:33:34 +01:00
</style>