diff --git a/src/main.ts b/src/main.ts
index 7927d83..b6e701d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,8 +5,6 @@ import router from "./router";
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
-import VueYouTubeEmbed from 'vue-youtube-embed'
-
export const $ = (window as any).jQuery
-createApp(App).use(router).use(ElementPlus).use(VueYouTubeEmbed).mount('#app')
+createApp(App).use(router).use(ElementPlus).mount('#app')
diff --git a/src/views/Home.vue b/src/views/Home.vue
index b48d5a5..13b2070 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -16,6 +16,10 @@
@@ -28,6 +32,7 @@ import meta from '../meta.json';
import metaYT from '../meta_yt_links.json'
import { marked } from 'marked';
import {$} from '@/main';
+import LiteYouTubeEmbed from 'vue-lite-youtube-embed'
interface APIEntry
{
@@ -42,11 +47,26 @@ function onlyUnique(value, index, self) {
return self.indexOf(value) === index;
}
-@Options({components: {}})
+// Create name to object index for youtube videos
+const ytNameIndex = Object.assign({}, ...metaYT.map((x) => ({[x.name]: x})));
+
+@Options({components: {LiteYouTubeEmbed}})
export default class Home extends Vue
{
options = ['Text']
+ getVideoId(api: string)
+ {
+ // Normalize api names
+ if (!api.startsWith('tf.')) api = 'tf.' + api
+
+ // Search for api name in yt links json using the index
+ let find = ytNameIndex[api]
+
+ // If a matching name is found, then return the ID extracted from the link
+ if (find) return find.link.split('/').pop()
+ }
+
get types(): string[]
{
return meta.map(it => it.type).filter(onlyUnique)
@@ -95,15 +115,22 @@ export default class Home extends Vue
.ui-state-active.header
border-radius: 10px 10px 0 0!important
+ .content
+ background: #f3f3f3
+ padding: 10px
+ border-radius: 0 0 10px 10px