Refactoring

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

@@ -28,69 +28,8 @@
 import Vue from 'vue';
 import { url as misskeyUrl } from '../../../config';
 
-export default Vue.extend({
+// THIS IS THE WHITELIST FOR THE EMBED PLAYER
-	props: {
+const whiteList = [
-		url: {
-			type: String,
-			require: true
-		},
-		detail: {
-			type: Boolean,
-			required: false,
-			default: false
-		}
-	},
-	data() {
-		return {
-			fetching: true,
-			title: null,
-			description: null,
-			thumbnail: null,
-			icon: null,
-			sitename: null,
-			player: {
-				url: null,
-				width: null,
-				height: null
-			},
-			tweetUrl: null,
-			misskeyUrl
-		};
-	},
-	created() {
-		const url = new URL(this.url);
-
-		if (this.detail && url.hostname == 'twitter.com' && /^\/.+\/status(es)?\/\d+/.test(url.pathname)) {
-			this.tweetUrl = url;
-			const twttr = (window as any).twttr || {};
-			const loadTweet = () => twttr.widgets.load(this.$refs.tweet);
-
-			if (twttr.widgets) {
-				Vue.nextTick(loadTweet);
-			} else {
-				const wjsId = 'twitter-wjs';
-				if (!document.getElementById(wjsId)) {
-					const head = document.getElementsByTagName('head')[0];
-					const script = document.createElement('script');
-					script.setAttribute('id', wjsId);
-					script.setAttribute('src', 'https://platform.twitter.com/widgets.js');
-					head.appendChild(script);
-				}
-				twttr.ready = loadTweet;
-				(window as any).twttr = twttr;
-			}
-			return;
-		}
-		fetch('/url?url=' + encodeURIComponent(this.url)).then(res => {
-			res.json().then(info => {
-				if (info.url != null) {
-					this.title = info.title;
-					this.description = info.description;
-					this.thumbnail = info.thumbnail;
-					this.icon = info.icon;
-					this.sitename = info.sitename;
-					this.fetching = false;
-					if ([ // THIS IS THE WHITELIST FOR THE EMBED PLAYER
 	'afreecatv.com',
 	'aparat.com',
 	'applemusic.com',
@@ -166,12 +105,80 @@ export default Vue.extend({
 	'web.tv',
 	'youtube.com',
 	'youtu.be'
-					].some(x => x == url.hostname || url.hostname.endsWith(`.${x}`)))
+];
+
+export default Vue.extend({
+	props: {
+		url: {
+			type: String,
+			require: true
+		},
+
+		detail: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+
+	data() {
+		return {
+			fetching: true,
+			title: null,
+			description: null,
+			thumbnail: null,
+			icon: null,
+			sitename: null,
+			player: {
+				url: null,
+				width: null,
+				height: null
+			},
+			tweetUrl: null,
+			misskeyUrl
+		};
+	},
+
+	created() {
+		const url = new URL(this.url);
+
+		if (this.detail && url.hostname == 'twitter.com' && /^\/.+\/status(es)?\/\d+/.test(url.pathname)) {
+			this.tweetUrl = url;
+			const twttr = (window as any).twttr || {};
+			const loadTweet = () => twttr.widgets.load(this.$refs.tweet);
+
+			if (twttr.widgets) {
+				Vue.nextTick(loadTweet);
+			} else {
+				const wjsId = 'twitter-wjs';
+				if (!document.getElementById(wjsId)) {
+					const head = document.getElementsByTagName('head')[0];
+					const script = document.createElement('script');
+					script.setAttribute('id', wjsId);
+					script.setAttribute('src', 'https://platform.twitter.com/widgets.js');
+					head.appendChild(script);
+				}
+				twttr.ready = loadTweet;
+				(window as any).twttr = twttr;
+			}
+			return;
+		}
+
+		fetch('/url?url=' + encodeURIComponent(this.url)).then(res => {
+			res.json().then(info => {
+				if (info.url == null) return;
+				this.title = info.title;
+				this.description = info.description;
+				this.thumbnail = info.thumbnail;
+				this.icon = info.icon;
+				this.sitename = info.sitename;
+				this.fetching = false;
+				if (whiteList.some(x => x == url.hostname || url.hostname.endsWith(`.${x}`))) {
 					this.player = info.player;
-				}	// info.url
+				}
-			})	// json
+			})
-		});	// fetch
+		});
-	}	// created
+	}
 });
 </script>