blob: c2dc07b41126782c8b2a8e3078497a823a5dd1e5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
<template>
<iframe v-if="youtubeId" type="text/html" height="250"
:src="`https://www.youtube.com/embed/${youtubeId}?origin=${misskeyUrl}`"
frameborder="0"/>
<div v-else class="mk-url-preview">
<a :href="url" target="_blank" :title="url" v-if="!fetching">
<div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div>
<article>
<header>
<h1>{{ title }}</h1>
</header>
<p>{{ description }}</p>
<footer>
<img class="icon" v-if="icon" :src="icon"/>
<p>{{ sitename }}</p>
</footer>
</article>
</a>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { url as misskeyUrl } from '../../../config';
export default Vue.extend({
props: ['url'],
data() {
return {
fetching: true,
title: null,
description: null,
thumbnail: null,
icon: null,
sitename: null,
youtubeId: null,
misskeyUrl
};
},
created() {
const url = new URL(this.url);
if (url.hostname == 'www.youtube.com') {
this.youtubeId = url.searchParams.get('v');
} else if (url.hostname == 'youtu.be') {
this.youtubeId = url.pathname;
} else {
fetch('/url?url=' + this.url).then(res => {
res.json().then(info => {
this.title = info.title;
this.description = info.description;
this.thumbnail = info.thumbnail;
this.icon = info.icon;
this.sitename = info.sitename;
this.fetching = false;
});
});
}
}
});
</script>
<style lang="stylus" scoped>
iframe
width 100%
root(isDark)
> a
display block
font-size 16px
border solid 1px isDark ? #191b1f : #eee
border-radius 4px
overflow hidden
&:hover
text-decoration none
border-color isDark ? #4f5561 : #ddd
> article > header > h1
text-decoration underline
> .thumbnail
position absolute
width 100px
height 100%
background-position center
background-size cover
& + article
left 100px
width calc(100% - 100px)
> article
padding 16px
> header
margin-bottom 8px
> h1
margin 0
font-size 1em
color isDark ? #d6dae0 : #555
> p
margin 0
color isDark ? #a4aab3 : #777
font-size 0.8em
> footer
margin-top 8px
height 16px
> img
display inline-block
width 16px
height 16px
margin-right 4px
vertical-align top
> p
display inline-block
margin 0
color isDark ? #b0b4bf : #666
font-size 0.8em
line-height 16px
vertical-align top
@media (max-width 500px)
font-size 8px
border none
> .thumbnail
width 70px
& + article
left 70px
width calc(100% - 70px)
> article
padding 8px
.mk-url-preview[data-darkmode]
root(true)
.mk-url-preview:not([data-darkmode])
root(false)
</style>
|
