-
-
Notifications
You must be signed in to change notification settings - Fork 47
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: 사용자 페이지의 미디어 탭을 그리드 레이아웃으로 설정할 수 있음 (#494)
- Loading branch information
Showing
10 changed files
with
201 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
160 changes: 160 additions & 0 deletions
160
packages/frontend/src/pages/user/index.timeline.files.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,160 @@ | ||
| <!-- | ||
| SPDX-FileCopyrightText: syuilo and misskey-project | ||
| SPDX-License-Identifier: AGPL-3.0-only | ||
| --> | ||
|
|
||
| <template> | ||
| <MkPagination ref="pagingComponent" :pagination="pagination" :disableAutoLoad="disableAutoLoad"> | ||
| <div :class="$style.root"> | ||
| <MkLoading v-if="fetching"/> | ||
| <div v-if="!fetching && files.length > 0" :class="$style.stream"> | ||
| <template v-for="file in files" :key="file.note.id + file.file.id"> | ||
| <div v-if="file.file.isSensitive && !showingFiles.includes(file.file.id)" :class="$style.img" @click="showingFiles.push(file.file.id)"> | ||
| <!-- TODO: 画像以外のファイルに対応 --> | ||
| <ImgWithBlurhash :class="$style.sensitiveImg" :hash="file.file.blurhash" :src="thumbnail(file.file)" :title="file.file.name" :forceBlurhash="true"/> | ||
| <div :class="$style.sensitive"> | ||
| <div> | ||
| <div><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}</div> | ||
| <div>{{ i18n.ts.clickToShow }}</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <MkA v-else :class="$style.img" :to="notePage(file.note)"> | ||
| <!-- TODO: 画像以外のファイルに対応 --> | ||
| <ImgWithBlurhash | ||
| :hash="file.file.blurhash" | ||
| :src="thumbnail(file.file)" | ||
| :title="file.file.name" | ||
| @mouseover="defaultStore.state.showingAnimatedImages === 'interaction' ? playAnimation = true : ''" | ||
| @mouseout="defaultStore.state.showingAnimatedImages === 'interaction' ? playAnimation = false : ''" | ||
| @touchstart="defaultStore.state.showingAnimatedImages === 'interaction' ? playAnimation = true : ''" | ||
| @touchend="defaultStore.state.showingAnimatedImages === 'interaction' ? playAnimation = false : ''" | ||
| /> | ||
| </MkA> | ||
| </template> | ||
| </div> | ||
| <p v-if="!fetching && files.length == 0" :class="$style.empty">{{ i18n.ts.nothing }}</p> | ||
| </div> | ||
| </MkPagination> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { onMounted, onUnmounted, ref } from 'vue'; | ||
| import * as Misskey from 'cherrypick-js'; | ||
| import { getStaticImageUrl } from '@/scripts/media-proxy.js'; | ||
| import { notePage } from '@/filters/note.js'; | ||
| import { misskeyApi } from '@/scripts/misskey-api.js'; | ||
| import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue'; | ||
| import MkA from '@/components/global/MkA.vue'; | ||
| import MkLoading from '@/components/global/MkLoading.vue'; | ||
| import { defaultStore } from '@/store.js'; | ||
| import { i18n } from '@/i18n.js'; | ||
| import MkPagination, { Paging } from '@/components/MkPagination.vue'; | ||
|
|
||
| const props = defineProps<{ | ||
| pagination: Paging; | ||
| user: Misskey.entities.UserDetailed; | ||
| disableAutoLoad?: boolean; | ||
| }>(); | ||
|
|
||
| const fetching = ref(true); | ||
| const files = ref<{ | ||
| note: Misskey.entities.Note; | ||
| file: Misskey.entities.DriveFile; | ||
| }[]>([]); | ||
| const showingFiles = ref<string[]>([]); | ||
|
|
||
| const playAnimation = ref(true); | ||
| if (defaultStore.state.showingAnimatedImages === 'interaction') playAnimation.value = false; | ||
| let playAnimationTimer = setTimeout(() => playAnimation.value = false, 5000); | ||
|
|
||
| function thumbnail(image: Misskey.entities.DriveFile): string | null { | ||
| return (defaultStore.state.disableShowingAnimatedImages || defaultStore.state.dataSaver.media) || (['interaction', 'inactive'].includes(<string>defaultStore.state.showingAnimatedImages) && !playAnimation.value) | ||
| ? getStaticImageUrl(image.url) | ||
| : image.thumbnailUrl; | ||
| } | ||
|
|
||
| function resetTimer() { | ||
| playAnimation.value = true; | ||
| clearTimeout(playAnimationTimer); | ||
| playAnimationTimer = setTimeout(() => playAnimation.value = false, 5000); | ||
| } | ||
|
|
||
| onMounted(() => { | ||
| if (defaultStore.state.showingAnimatedImages === 'inactive') { | ||
| window.addEventListener('mousemove', resetTimer); | ||
| window.addEventListener('touchstart', resetTimer); | ||
| window.addEventListener('touchend', resetTimer); | ||
| } | ||
|
|
||
| misskeyApi('users/notes', { | ||
| userId: props.user.id, | ||
| withFiles: true, | ||
| limit: 30, | ||
| }).then(notes => { | ||
| for (const note of notes) { | ||
| for (const file of note.files) { | ||
| files.value.push({ | ||
| note, | ||
| file, | ||
| }); | ||
| } | ||
| } | ||
| fetching.value = false; | ||
| }); | ||
| }); | ||
|
|
||
| onUnmounted(() => { | ||
| if (defaultStore.state.showingAnimatedImages === 'inactive') { | ||
| window.removeEventListener('mousemove', resetTimer); | ||
| window.removeEventListener('touchstart', resetTimer); | ||
| window.removeEventListener('touchend', resetTimer); | ||
| } | ||
| }); | ||
| </script> | ||
|
|
||
| <style lang="scss" module> | ||
| .root { | ||
| padding: 8px; | ||
| } | ||
|
|
||
| .stream { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fill, minmax(192px, 1fr)); | ||
| grid-gap: 6px; | ||
| } | ||
|
|
||
| .img { | ||
| position: relative; | ||
| height: 256px; | ||
| border-radius: 6px; | ||
| overflow: clip; | ||
| } | ||
|
|
||
| .empty { | ||
| margin: 0; | ||
| padding: 16px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .sensitiveImg { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| filter: brightness(0.7); | ||
| } | ||
| .sensitive { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| display: grid; | ||
| place-items: center; | ||
| font-size: 0.8em; | ||
| color: #fff; | ||
| cursor: pointer; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters