commit: 4185452b52b39fdfe13d2e11ea1cc9b92dc626d5
parent: de91998317e072cb06de0153311723fb8531f035
Author: lambda <pleromagit@rogerbraun.net>
Date: Tue, 29 Jan 2019 14:12:18 +0000
Merge branch 'feature/link-preview' into 'develop'
link previews
See merge request pleroma/pleroma-fe!481
Diffstat:
5 files changed, 117 insertions(+), 6 deletions(-)
diff --git a/src/components/link-preview/link-preview.js b/src/components/link-preview/link-preview.js
@@ -0,0 +1,21 @@
+const LinkPreview = {
+ name: 'LinkPreview',
+ props: [
+ 'card',
+ 'size',
+ 'nsfw'
+ ],
+ computed: {
+ useImage () {
+ // Currently BE shoudn't give cards if tagged NSFW, this is a bit paranoid
+ // as it makes sure to hide the image if somehow NSFW tagged preview can
+ // exist.
+ return this.card.image && !this.nsfw && this.size !== 'hide'
+ },
+ useDescription () {
+ return this.card.description && /\S/.test(this.card.description)
+ }
+ }
+}
+
+export default LinkPreview
diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
@@ -0,0 +1,79 @@
+<template>
+ <div>
+ <a class="link-preview-card" :href="card.url" target="_blank" rel="noopener">
+ <div class="card-image" :class="{ 'small-image': size === 'small' }" v-if="useImage">
+ <img :src="card.image"></img>
+ </div>
+ <div class="card-content">
+ <span class="card-host faint">{{ card.provider_name }}</span>
+ <h4 class="card-title">{{ card.title }}</h4>
+ <p class="card-description" v-if="useDescription">{{ card.description }}</p>
+ </div>
+ </a>
+ </div>
+</template>
+
+<script src="./link-preview.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.link-preview-card {
+ display: flex;
+ flex-direction: row;
+ cursor: pointer;
+ overflow: hidden;
+
+ // TODO: clean up the random margins in attachments, this makes preview line
+ // up with attachments...
+ margin-right: 0.7em;
+
+ .card-image {
+ flex-shrink: 0;
+ width: 120px;
+ max-width: 25%;
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: $fallback--attachmentRadius;
+ border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+ }
+ }
+
+ .small-image {
+ width: 80px;
+ }
+
+ .card-content {
+ max-height: 100%;
+ margin: 0.5em;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .card-host {
+ font-size: 12px;
+ }
+
+ .card-description {
+ margin: 0.5em 0 0 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ word-break: break-word;
+ line-height: 1.2em;
+ // cap description at 3 lines, the 1px is to clean up some stray pixels
+ // TODO: fancier fade-out at the bottom to show off that it's too long?
+ max-height: calc(1.2em * 3 - 1px);
+ }
+
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
+ border-style: solid;
+ border-width: 1px;
+ border-radius: $fallback--attachmentRadius;
+ border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+ border-color: $fallback--border;
+ border-color: var(--border, $fallback--border);
+}
+</style>
diff --git a/src/components/status/status.js b/src/components/status/status.js
@@ -5,6 +5,7 @@ import DeleteButton from '../delete_button/delete_button.vue'
import PostStatusForm from '../post_status_form/post_status_form.vue'
import UserCardContent from '../user_card_content/user_card_content.vue'
import StillImage from '../still-image/still-image.vue'
+import LinkPreview from '../link-preview/link-preview.vue'
import { filter, find } from 'lodash'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -220,7 +221,8 @@ const Status = {
DeleteButton,
PostStatusForm,
UserCardContent,
- StillImage
+ StillImage,
+ LinkPreview
},
methods: {
visibilityIcon (visibility) {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
@@ -98,6 +98,10 @@
</attachment>
</div>
+ <div v-if="status.card && !hideSubjectStatus && !noHeading" class="link-preview media-body">
+ <link-preview :card="status.card" :size="attachmentSize" :nsfw="nsfwClickthrough" />
+ </div>
+
<div v-if="!noHeading && !noReplyLinks" class='status-actions media-body'>
<div v-if="loggedIn">
<a href="#" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')">
@@ -221,6 +225,11 @@
vertical-align: bottom;
flex-basis: 100%;
+ a {
+ display: inline-block;
+ word-break: break-all;
+ }
+
small {
font-weight: lighter;
}
@@ -296,11 +305,6 @@
}
}
- a {
- display: inline-block;
- word-break: break-all;
- }
-
.tall-status {
position: relative;
height: 220px;
@@ -309,6 +313,8 @@
}
.tall-status-hider {
+ display: inline-block;
+ word-break: break-all;
position: absolute;
height: 70px;
margin-top: 150px;
@@ -326,6 +332,8 @@
.status-unhider, .cw-status-hider {
width: 100%;
text-align: center;
+ display: inline-block;
+ word-break: break-all;
}
.status-content {
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -215,6 +215,7 @@ export const parseStatus = (data) => {
output.id = String(data.id)
output.visibility = data.visibility
+ output.card = data.card
output.created_at = new Date(data.created_at)
// Converting to string, the right way.
