diff options
| author | syuilo <syuilotan@yahoo.co.jp> | 2018-03-19 02:56:35 +0900 |
|---|---|---|
| committer | syuilo <syuilotan@yahoo.co.jp> | 2018-03-19 02:56:35 +0900 |
| commit | e0ce00bacd8b448f826a3ba0880a8b93eb69b127 (patch) | |
| tree | ab7264334563910afc6b7bda2df97e9edb94f799 /src | |
| parent | v4211 (diff) | |
| download | sharkey-e0ce00bacd8b448f826a3ba0880a8b93eb69b127.tar.gz sharkey-e0ce00bacd8b448f826a3ba0880a8b93eb69b127.tar.bz2 sharkey-e0ce00bacd8b448f826a3ba0880a8b93eb69b127.zip | |
Embed YouTube
Diffstat (limited to 'src')
| -rw-r--r-- | src/web/app/common/views/components/url-preview.vue | 63 |
1 files changed, 40 insertions, 23 deletions
diff --git a/src/web/app/common/views/components/url-preview.vue b/src/web/app/common/views/components/url-preview.vue index b846346179..8de7bbfcf6 100644 --- a/src/web/app/common/views/components/url-preview.vue +++ b/src/web/app/common/views/components/url-preview.vue @@ -1,17 +1,22 @@ <template> -<a class="mk-url-preview" :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> +<iframe v-if="youtubeId" type="text/html" height="250" + :src="`http://www.youtube.com/embed/${youtubeId}`" + frameborder="0"/> +<div v-else> + <a class="mk-url-preview" :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"> @@ -26,26 +31,38 @@ export default Vue.extend({ description: null, thumbnail: null, icon: null, - sitename: null + sitename: null, + youtubeId: null }; }, created() { - 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; + const url = new URL(this.url); - 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> <style lang="stylus" scoped> +iframe + width 100% + .mk-url-preview display block font-size 16px |