[+] Youtube embed

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')

src/views/Home.vue

@@ -16,6 +16,10 @@
                 </div>
                 <div class="content">
                     <div class="md-docstring" v-html="encodeHtml(api.docs)"></div>
+
+                    <div class="yt-embed clickable" v-if="options.includes('Video') && getVideoId(api.name)">
+                        <LiteYouTubeEmbed title="" :id="getVideoId(api.name)"/>
+                    </div>
                 </div>
             </div>
         </div>
@@ -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
 </style>
 
 <style lang="sass">
 .md-docstring
     text-align: left
-    background: #f3f3f3
-    padding: 10px
-    border-radius: 0 0 10px 10px
 
     h1, h2
         font-size: 1em !important
+
+.yt-lite
+    height: 320px
+    background-repeat: no-repeat
+    background-size: contain
+    background-position: center
 </style>