0
0
switched/src/client/app/common/views/components/url-preview.vue

155 lines
2.8 KiB
Vue
Raw Normal View History

2018-02-05 14:25:19 +09:00
<template>
2018-03-19 02:56:35 +09:00
<iframe v-if="youtubeId" type="text/html" height="250"
2018-03-19 03:46:13 +09:00
:src="`https://www.youtube.com/embed/${youtubeId}?origin=${misskeyUrl}`"
2018-03-19 02:56:35 +09:00
frameborder="0"/>
2018-04-22 19:33:06 +09:00
<div v-else class="mk-url-preview">
<a :href="url" target="_blank" :title="url" v-if="!fetching">
2018-03-19 02:56:35 +09:00
<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>
2018-02-05 14:25:19 +09:00
</template>
2018-02-11 23:35:32 +09:00
<script lang="ts">
import Vue from 'vue';
2018-03-19 03:20:10 +09:00
import { url as misskeyUrl } from '../../../config';
2018-02-11 23:35:32 +09:00
export default Vue.extend({
props: ['url'],
data() {
return {
fetching: true,
title: null,
description: null,
thumbnail: null,
icon: null,
2018-03-19 02:56:35 +09:00
sitename: null,
2018-03-19 03:20:10 +09:00
youtubeId: null,
misskeyUrl
2018-02-11 23:35:32 +09:00
};
},
created() {
2018-03-19 02:56:35 +09:00
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 {
2018-05-09 20:14:34 +09:00
fetch('/url?url=' + encodeURIComponent(this.url)).then(res => {
2018-03-19 02:56:35 +09:00
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;
});
2018-02-05 14:25:19 +09:00
});
2018-03-19 02:56:35 +09:00
}
2018-02-11 23:35:32 +09:00
}
});
2018-02-05 14:25:19 +09:00
</script>
<style lang="stylus" scoped>
2018-03-19 02:56:35 +09:00
iframe
width 100%
2018-04-21 19:05:55 +09:00
root(isDark)
2018-04-22 19:33:06 +09:00
> a
display block
font-size 16px
border solid 1px isDark ? #191b1f : #eee
border-radius 4px
overflow hidden
2018-02-11 23:35:32 +09:00
2018-04-22 19:33:06 +09:00
&:hover
text-decoration none
border-color isDark ? #4f5561 : #ddd
2018-02-11 23:35:32 +09:00
2018-04-22 19:33:06 +09:00
> article > header > h1
text-decoration underline
2018-02-11 23:35:32 +09:00
2018-04-22 19:33:06 +09:00
> .thumbnail
position absolute
width 100px
height 100%
background-position center
background-size cover
2018-02-11 23:35:32 +09:00
2018-04-22 19:33:06 +09:00
& + article
left 100px
width calc(100% - 100px)
2018-02-11 23:35:32 +09:00
2018-04-22 19:33:06 +09:00
> article
padding 16px
2018-02-11 23:35:32 +09:00
2018-04-22 19:33:06 +09:00
> header
margin-bottom 8px
2018-02-11 23:35:32 +09:00
2018-04-22 19:33:06 +09:00
> h1
margin 0
font-size 1em
color isDark ? #d6dae0 : #555
2018-02-11 23:35:32 +09:00
> p
margin 0
2018-04-22 19:33:06 +09:00
color isDark ? #a4aab3 : #777
2018-02-11 23:35:32 +09:00
font-size 0.8em
2018-04-22 19:33:06 +09:00
> footer
margin-top 8px
height 16px
2018-02-11 23:35:32 +09:00
2018-04-22 19:33:06 +09:00
> 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
2018-05-17 23:18:24 +09:00
@media (max-width 700px)
> .thumbnail
position relative
width 100%
height 100px
& + article
left 0
width 100%
2018-04-22 19:33:06 +09:00
@media (max-width 500px)
font-size 8px
> .thumbnail
2018-05-17 23:18:24 +09:00
height 70px
2018-04-22 19:33:06 +09:00
> article
padding 8px
2018-02-05 14:25:19 +09:00
2018-04-21 19:05:55 +09:00
.mk-url-preview[data-darkmode]
root(true)
.mk-url-preview:not([data-darkmode])
root(false)
2018-02-05 14:25:19 +09:00
</style>