monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

Merge branch 'develop' into pag-back

Browse source
This commit is contained in:
tamaina 2023-07-25 10:48:01 +00:00
commit 51cf5c57f0
7 changed files with 58 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/backend/src/server/web/views/gallery-post.pug
View file

@ -16,8 +16,12 @@ block og
meta(property='og:title' content= title)
meta(property='og:description' content= post.description)
meta(property='og:url' content= url)
meta(property='og:image' content= post.files[0].thumbnailUrl)
meta(property='twitter:card' content='summary_large_image')
if post.isSensitive
meta(property='og:image' content= avatarUrl)
meta(property='twitter:card' content='summary')
else
meta(property='og:image' content= post.files[0].thumbnailUrl)
meta(property='twitter:card' content='summary_large_image')
block meta
if user.host || profile.noCrawle

63
packages/frontend/src/components/MkMediaList.vue
View file

@ -1,5 +1,5 @@
<template>
<div>
<div ref="root">
<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
<div v-if="mediaList.filter(media => previewable(media)).length > 0" :class="$style.container">
<div
@ -23,7 +23,7 @@
</template>
<script lang="ts" setup>
import { onMounted, watch, shallowRef } from 'vue';
import { onMounted, shallowRef } from 'vue';
import * as misskey from 'misskey-js';
import PhotoSwipeLightbox from 'photoswipe/lightbox';
import PhotoSwipe from 'photoswipe';
@ -34,19 +34,26 @@ import XVideo from '@/components/MkMediaVideo.vue';
import * as os from '@/os';
import { FILE_TYPE_BROWSERSAFE } from '@/const';
import { defaultStore } from '@/store';
import { getScrollContainer, getBodyScrollHeight } from '@/scripts/scroll';
const props = defineProps<{
mediaList: misskey.entities.DriveFile[];
raw?: boolean;
}>();
const root = shallowRef<HTMLDivElement>();
const container = shallowRef<HTMLElement | null | undefined>(undefined);
const gallery = shallowRef<HTMLDivElement>();
const pswpZIndex = os.claimZIndex('middle');
document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString());
const count = $computed(() => props.mediaList.filter(media => previewable(media)).length);
/**
* アスペクト比をmediaListWithOneImageAppearanceに基づいていい感じに調整する
* aspect-ratioではなくheightを使う
*/
function calcAspectRatio() {
if (!gallery.value) return;
if (!gallery.value || !root.value) return;
let img = props.mediaList[0];
@ -55,28 +62,46 @@ function calcAspectRatio() {
return;
}
// アスペクト比上限設定では、横長の場合は高さを縮小させる
const ratioMax = (ratio: number) => `${Math.max(ratio, img.properties.width / img.properties.height).toString()} / 1`;
const width = gallery.value.clientWidth;
const heightMin = (ratio: number) => {
const imgResizeRatio = width / img.properties.width;
const imgDrawHeight = img.properties.height * imgResizeRatio;
const maxHeight = width * ratio;
const height = Math.min(imgDrawHeight, maxHeight);
if (_DEV_) console.log('Image height calculated:', { width, properties: img.properties, imgResizeRatio, imgDrawHeight, maxHeight, height });
return `${height}px`;
};
switch (defaultStore.state.mediaListWithOneImageAppearance) {
case '16_9':
gallery.value.style.aspectRatio = ratioMax(16 / 9);
gallery.value.style.height = heightMin(9 / 16);
break;
case '1_1':
gallery.value.style.aspectRatio = ratioMax(1);
gallery.value.style.height = heightMin(1);
break;
case '2_3':
gallery.value.style.aspectRatio = ratioMax(2 / 3);
gallery.value.style.height = heightMin(3 / 2);
break;
default:
gallery.value.style.aspectRatio = '';
default: {
if (!container.value) container.value = getScrollContainer(root.value);
const maxHeight = Math.max(64, (container.value ? container.value.clientHeight : getBodyScrollHeight()) * 0.5 || 360);
if (width === 0 || !maxHeight) return;
const imgResizeRatio = width / img.properties.width;
const imgDrawHeight = img.properties.height * imgResizeRatio;
gallery.value.style.height = `${Math.max(64, Math.min(imgDrawHeight, maxHeight))}px`;
gallery.value.style.minHeight = 'initial';
gallery.value.style.maxHeight = 'initial';
break;
}
}
gallery.value.style.aspectRatio = 'initial';
}
watch([defaultStore.reactiveState.mediaListWithOneImageAppearance, gallery], () => calcAspectRatio());
onMounted(() => {
calcAspectRatio();
const lightbox = new PhotoSwipeLightbox({
dataSource: props.mediaList
.filter(media => {
@ -203,7 +228,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
&.n1 {
grid-template-rows: 1fr;
// default (expand)
// default but fallback (expand)
min-height: 64px;
max-height: clamp(
64px,
@ -212,20 +237,20 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
);
&.n116_9 {
min-height: none;
max-height: none;
min-height: initial;
max-height: initial;
aspect-ratio: 16 / 9; // fallback
}
&.n11_1{
min-height: none;
max-height: none;
min-height: initial;
max-height: initial;
aspect-ratio: 1 / 1; // fallback
}
&.n12_3 {
min-height: none;
max-height: none;
min-height: initial;
max-height: initial;
aspect-ratio: 2 / 3; // fallback
}
}

2
packages/frontend/src/components/MkPostForm.vue
View file

@ -540,7 +540,7 @@ function onCompositionEnd(ev: CompositionEvent) {
}
async function onPaste(ev: ClipboardEvent) {
for (const { item, i } of Array.from(ev.clipboardData.items).map((item, i) => ({ item, i }))) {
for (const { item, i } of Array.from(ev.clipboardData.items, (item, i) => ({ item, i }))) {
if (item.kind === 'file') {
const file = item.getAsFile();
const lio = file.name.lastIndexOf('.');

4
packages/frontend/src/components/MkTagCloud.vue
View file

@ -16,8 +16,8 @@ import tinycolor from 'tinycolor2';
const loaded = !!window.TagCanvas;
const SAFE_FOR_HTML_ID = 'abcdefghijklmnopqrstuvwxyz';
const computedStyle = getComputedStyle(document.documentElement);
const idForCanvas = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
const idForTags = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
const idForCanvas = Array.from({ length: 16 }, () => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
const idForTags = Array.from({ length: 16 }, () => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
let available = $ref(false);
let rootEl = $shallowRef<HTMLElement | null>(null);
let canvasEl = $shallowRef<HTMLCanvasElement | null>(null);

1
packages/frontend/src/pages/settings/general.vue
View file

@ -258,6 +258,7 @@ watch([
showGapBetweenNotesInTimeline,
instanceTicker,
overridedDeviceKind,
mediaListWithOneImageAppearance,
], async () => {
await reloadAsk();
});

4
packages/frontend/src/scripts/emoji-base.ts
View file

@ -2,7 +2,7 @@ const twemojiSvgBase = '/twemoji';
const fluentEmojiPngBase = '/fluent-emoji';
export function char2twemojiFilePath(char: string): string {
let codes = Array.from(char).map(x => x.codePointAt(0)?.toString(16));
let codes = Array.from(char, x => x.codePointAt(0)?.toString(16));
if (!codes.includes('200d')) codes = codes.filter(x => x !== 'fe0f');
codes = codes.filter(x => x && x.length);
const fileName = codes.join('-');
@ -10,7 +10,7 @@ export function char2twemojiFilePath(char: string): string {
}
export function char2fluentEmojiFilePath(char: string): string {
let codes = Array.from(char).map(x => x.codePointAt(0)?.toString(16));
let codes = Array.from(char, x => x.codePointAt(0)?.toString(16));
// Fluent Emojiは国旗非対応 https://github.com/microsoft/fluentui-emoji/issues/25
if (codes[0]?.startsWith('1f1')) return char2twemojiFilePath(char);
if (!codes.includes('200d')) codes = codes.filter(x => x !== 'fe0f');

3
packages/frontend/src/scripts/select-file.ts
View file

@ -12,7 +12,8 @@ export function chooseFileFromPc(multiple: boolean, keepOriginal = false): Promi
input.type = 'file';
input.multiple = multiple;
input.onchange = () => {
const promises = Array.from(input.files).map(file => uploadFile(file, defaultStore.state.uploadFolder, undefined, keepOriginal));
if (!input.files) return res([]);
const promises = Array.from(input.files, file => uploadFile(file, defaultStore.state.uploadFolder, undefined, keepOriginal));
Promise.all(promises).then(driveFiles => {
res(driveFiles);