natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Embed YouTube

This commit is contained in:
syuilo 2018-03-19 02:56:35 +09:00
parent 8164dd0c2b
commit e0ce00bacd
1 changed files with 40 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/web/app/common/views/components/url-preview.vue
View File

@ -1,17 +1,22 @@
<template> <template>
<a class="mk-url-preview" :href="url" target="_blank" :title="url" v-if="!fetching"> <iframe v-if="youtubeId" type="text/html" height="250"
<div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div> :src="`http://www.youtube.com/embed/${youtubeId}`"
<article> frameborder="0"/>
<header> <div v-else>
<h1>{{ title }}</h1> <a class="mk-url-preview" :href="url" target="_blank" :title="url" v-if="!fetching">
</header> <div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div>
<p>{{ description }}</p> <article>
<footer> <header>
<img class="icon" v-if="icon" :src="icon"/> <h1>{{ title }}</h1>
<p>{{ sitename }}</p> </header>
</footer> <p>{{ description }}</p>
</article> <footer>
</a> <img class="icon" v-if="icon" :src="icon"/>
<p>{{ sitename }}</p>
</footer>
</article>
</a>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -26,26 +31,38 @@ export default Vue.extend({
description: null, description: null,
thumbnail: null, thumbnail: null,
icon: null, icon: null,
sitename: null sitename: null,
youtubeId: null
}; };
}, },
created() { created() {
fetch('/api:url?url=' + this.url).then(res => { const url = new URL(this.url);
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; if (url.hostname == 'www.youtube.com') {
this.youtubeId = url.searchParams.get('v');
} else if (url.hostname == 'youtu.be') {
this.youtubeId = url.pathname;
} else {
fetch('/api: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> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
iframe
width 100%
.mk-url-preview .mk-url-preview
display block display block
font-size 16px font-size 16px