HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Merge pull request 'Proper support for image types in notes, opengraph images and videos.' (#9524) from Skystryder/chakey:feature/opengraph into develop

Browse source 
Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9524
This commit is contained in:
Kainoa Kanter 2023-01-30 04:52:01 +00:00
commit d169ea1905
3 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
packages/backend/src/server/web/views/note.pug
View file

@ -5,6 +5,9 @@ block vars
- const title = privateMode ? instanceName : (user.name ? `${user.name} (@${user.username})` : `@${user.username}`); - const title = privateMode ? instanceName : (user.name ? `${user.name} (@${user.username})` : `@${user.username}`);
- const url = `${config.url}/notes/${note.id}`; - const url = `${config.url}/notes/${note.id}`;
- const isRenote = note.renote && note.text == null && note.fileIds.length == 0 && note.poll == null; - const isRenote = note.renote && note.text == null && note.fileIds.length == 0 && note.poll == null;
- const isImage = note.files.length !== 0 && note.files[0].type.startsWith('image');
- const isVideo = note.files.length !== 0 && note.files[0].type.startsWith('video');
- const imageUrl = isImage ? note.files[0].url : isVideo ? note.files[0].thumbnailUrl : avatarUrl;
block title block title
= `${title} | ${instanceName}` = `${title} | ${instanceName}`
@ -19,7 +22,15 @@ block og
meta(property='og:title' content= title) meta(property='og:title' content= title)
meta(property='og:description' content= summary) meta(property='og:description' content= summary)
meta(property='og:url' content= url) meta(property='og:url' content= url)
meta(property='og:image' content= avatarUrl) meta(property='og:image' content= imageUrl)
if isImage
meta(property='og:image:width' content=note.files[0].properties.width)
meta(property='og:image:height' content=note.files[0].properties.height)
meta(property='og:image:type' content=note.files[0].type)
meta(property='twitter:card' content="summary_large_image")
if isVideo
meta(property='og:video:type' content=note.files[0].type)
meta(property='og:video' content=note.files[0].url)
block meta block meta
unless privateMode unless privateMode

4
packages/client/src/components/MkImgWithBlurhash.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="xubzgfgb" :class="{ cover }" :title="title"> <div class="xubzgfgb" :class="{ cover }" :title="title">
<canvas v-if="!loaded" ref="canvas" :width="size" :height="size" :title="title"/> <canvas v-if="!loaded" ref="canvas" :width="size" :height="size" :title="title"/>
<img v-if="src" :src="src" :title="title" :alt="alt" @load="onLoad"/> <img v-if="src" :src="src" :title="title" :type="type" :alt="alt" @load="onLoad"/>
</div> </div>
</template> </template>
@ -13,11 +13,13 @@ const props = withDefaults(defineProps<{
src?: string | null; src?: string | null;
hash?: string; hash?: string;
alt?: string; alt?: string;
type?: string | null;
title?: string | null; title?: string | null;
size?: number; size?: number;
cover?: boolean; cover?: boolean;
}>(), { }>(), {
src: null, src: null,
type: null,
alt: '', alt: '',
title: null, title: null,
size: 64, size: 64,

2
packages/client/src/components/MkMediaImage.vue
View file

@ -13,7 +13,7 @@
:href="image.url" :href="image.url"
:title="image.name" :title="image.name"
> >
<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment" :title="image.comment" :cover="false"/> <ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment" :type="image.type" :title="image.comment" :cover="false"/>
<div v-if="image.type === 'image/gif'" class="gif">GIF</div> <div v-if="image.type === 'image/gif'" class="gif">GIF</div>
</a> </a>
<button v-tooltip="i18n.ts.hide" class="_button hide" @click="hide = true"><i class="ph-eye-slash-bold ph-lg"></i></button> <button v-tooltip="i18n.ts.hide" class="_button hide" @click="hide = true"><i class="ph-eye-slash-bold ph-lg"></i></button>