SWREI/switched
0
0
Fork 0
Code

fix: 外部メディアプロキシ使用時にアバタークロップができない問題を修正 (#10142)

Browse Source 
* wip

* fix

* Update packages/frontend/src/scripts/media-proxy.ts

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
tamaina 2023-02-28 17:14:23 +09:00 committed by GitHub
parent 1ba848e5f5
commit 12932d2831
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/backend/src/server/FileServerService.ts
View File

@ -226,7 +226,10 @@ export class FileServerService {
return;
}
if (this.config.externalMediaProxyEnabled) {
// アバタークロップなど、どうしてもオリジンである必要がある場合
const mustOrigin = 'origin' in request.query;
if (this.config.externalMediaProxyEnabled && !mustOrigin) {
// 外部のメディアプロキシが有効なら、そちらにリダイレクト
reply.header('Cache-Control', 'public, max-age=259200'); // 3 days

4
packages/frontend/src/components/MkCropperDialog.vue
View File

@ -18,7 +18,7 @@
</div>
</Transition>
<div class="container">
<img ref="imgEl" :src="imgUrl" style="display: none;" crossorigin="anonymous" @load="onImageLoad">
<img ref="imgEl" :src="imgUrl" style="display: none;" @load="onImageLoad">
</div>
</div>
</template>
@ -49,7 +49,7 @@ const props = defineProps<{
aspectRatio: number;
}>();
const imgUrl = getProxiedImageUrl(props.file.url);
const imgUrl = getProxiedImageUrl(props.file.url, undefined, true);
let dialogEl = $shallowRef<InstanceType<typeof MkModalWindow>>();
let imgEl = $shallowRef<HTMLImageElement>();
let cropper: Cropper | null = null;

18
packages/frontend/src/scripts/media-proxy.ts
View File

@ -1,20 +1,20 @@
import { query, appendQuery } from '@/scripts/url';
import { query } from '@/scripts/url';
import { url } from '@/config';
import { instance } from '@/instance';
export function getProxiedImageUrl(imageUrl: string, type?: 'preview'): string {
if (imageUrl.startsWith(instance.mediaProxy + '/') || imageUrl.startsWith('/proxy/')) {
// もう既にproxyっぽそうだったらsearchParams付けるだけ
return appendQuery(imageUrl, query({
fallback: '1',
...(type ? { [type]: '1' } : {}),
}));
export function getProxiedImageUrl(imageUrl: string, type?: 'preview', mustOrigin: boolean = false): string {
const localProxy = `${url}/proxy`;
if (imageUrl.startsWith(instance.mediaProxy + '/') || imageUrl.startsWith('/proxy/') || imageUrl.startsWith(localProxy + '/')) {
// もう既にproxyっぽそうだったらurlを取り出す
imageUrl = (new URL(imageUrl)).searchParams.get('url') ?? imageUrl;
}
return `${instance.mediaProxy}/image.webp?${query({
return `${mustOrigin ? localProxy : instance.mediaProxy}/image.webp?${query({
url: imageUrl,
fallback: '1',
...(type ? { [type]: '1' } : {}),
...(mustOrigin ? { origin: '1' } : {}),
})}`;
}