From e0ce00bacd8b448f826a3ba0880a8b93eb69b127 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 19 Mar 2018 02:56:35 +0900
Subject: [PATCH] Embed YouTube

---
 .../common/views/components/url-preview.vue   | 63 ++++++++++++-------
 1 file 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 b84634617..8de7bbfcf 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