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

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9524

packages/backend/src/server/web/views/note.pug

@@ -5,6 +5,9 @@ block vars
 	- const title = privateMode ? instanceName : (user.name ? `${user.name} (@${user.username})` : `@${user.username}`);
 	- const url = `${config.url}/notes/${note.id}`;
 	- 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
 	= `${title} | ${instanceName}`
@@ -19,7 +22,15 @@ block og
 		meta(property='og:title'       content= title)
 		meta(property='og:description' content= summary)
 		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
 	unless privateMode

packages/client/src/components/MkImgWithBlurhash.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="xubzgfgb" :class="{ cover }" :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>
 </template>
 
@@ -13,11 +13,13 @@ const props = withDefaults(defineProps<{
 	src?: string | null;
 	hash?: string;
 	alt?: string;
+	type?: string | null;
 	title?: string | null;
 	size?: number;
 	cover?: boolean;
 }>(), {
 	src: null,
+	type: null,
 	alt: '',
 	title: null,
 	size: 64,

packages/client/src/components/MkMediaImage.vue

@@ -13,7 +13,7 @@
 		:href="image.url"
 		: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>
 	</a>
 	<button v-tooltip="i18n.ts.hide" class="_button hide" @click="hide = true"><i class="ph-eye-slash-bold ph-lg"></i></button>