fix/make-inline-video-playing-instance-configurable-default-true
commit
c7cffbb6c7
@ -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
|
@ -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>
|
@ -0,0 +1,9 @@
|
||||
|
||||
export const mentionMatchesUrl = (attention, url) => {
|
||||
if (url === attention.statusnet_profile_url) {
|
||||
return true
|
||||
}
|
||||
const [namepart, instancepart] = attention.screen_name.split('@')
|
||||
const matchstring = new RegExp('://' + instancepart + '/.*' + namepart + '$', 'g')
|
||||
return !!url.match(matchstring)
|
||||
}
|
@ -0,0 +1,63 @@
|
||||
import * as MentionMatcher from 'src/services/mention_matcher/mention_matcher.js'
|
||||
|
||||
const localAttn = () => ({
|
||||
id: 123,
|
||||
is_local: true,
|
||||
name: 'Guy',
|
||||
screen_name: 'person',
|
||||
statusnet_profile_url: 'https://instance.com/users/person'
|
||||
})
|
||||
|
||||
const externalAttn = () => ({
|
||||
id: 123,
|
||||
is_local: false,
|
||||
name: 'Guy',
|
||||
screen_name: 'person@instance.com',
|
||||
statusnet_profile_url: 'https://instance.com/users/person'
|
||||
})
|
||||
|
||||
describe('MentionMatcher', () => {
|
||||
describe.only('mentionMatchesUrl', () => {
|
||||
it('should match local mention', () => {
|
||||
const attention = localAttn()
|
||||
const url = 'https://instance.com/users/person'
|
||||
|
||||
expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(true)
|
||||
})
|
||||
|
||||
it('should not match a local mention with same name but different instance', () => {
|
||||
const attention = localAttn()
|
||||
const url = 'https://website.com/users/person'
|
||||
|
||||
expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(false)
|
||||
})
|
||||
|
||||
it('should match external pleroma mention', () => {
|
||||
const attention = externalAttn()
|
||||
const url = 'https://instance.com/users/person'
|
||||
|
||||
expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(true)
|
||||
})
|
||||
|
||||
it('should not match external pleroma mention with same name but different instance', () => {
|
||||
const attention = externalAttn()
|
||||
const url = 'https://website.com/users/person'
|
||||
|
||||
expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(false)
|
||||
})
|
||||
|
||||
it('should match external mastodon mention', () => {
|
||||
const attention = externalAttn()
|
||||
const url = 'https://instance.com/@person'
|
||||
|
||||
expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(true)
|
||||
})
|
||||
|
||||
it('should not match external mastodon mention with same name but different instance', () => {
|
||||
const attention = externalAttn()
|
||||
const url = 'https://website.com/@person'
|
||||
|
||||
expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(false)
|
||||
})
|
||||
})
|
||||
})
|
Loading…
Reference in new issue