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
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

View File

@ -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

View File

@ -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,

View File

@ -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>