Added support for yt videos within the channel & private conversations

.gitignore

@@ -1,4 +1,4 @@
-generated/
+asm/generated/
 node_modules/
 auth/certs/
 auth/js/auth.js.map

ChangeLog.md

@@ -6,6 +6,7 @@
     - Fixed automatically added new lines for inserted text
     - Improved button icon visibility within the permission editor
     - Fixed missing "private chats" button
+    - Allowing YT videos within the chat and channel descriptions
     
 * **02.02.20**
     - Added a music bot GUI

asm/download_compiled_files.sh

@@ -1,5 +1,7 @@
 #!/usr/bin/env bash
 
+cd $(dirname $0)
+
 if [[ -d generated/ ]]; then
     rm -r generated
     [[ $? -ne 0 ]] && {

shared/css/static/general.scss

@@ -231,4 +231,9 @@ a.rainbow-letter {
 	font-weight: bold;
 	border-bottom: 1px solid #ab4788;
 	line-height: 1em;
+}
+
+iframe {
+	border-radius: .2em;
+	border: none;
 }

shared/js/proto.ts

@@ -291,6 +291,7 @@ interface HighlightJSResult {
 interface DOMPurify {
     sanitize(html: string, config?: {
         ADD_ATTR?: string[]
+        ADD_TAGS?: string[];
     }) : string;
 }
 declare let DOMPurify: DOMPurify;

shared/js/ui/frames/chat.ts

@@ -90,6 +90,7 @@ namespace MessageHelper {
         return result;
     }
 
+    const yt_embed_regex = /\[-- yt: ([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}) --]/;
     export function bbcode_chat(message: string) : JQuery[] {
         const result = xbbcode.parse(message, {
             /* TODO make this configurable and allow IMG */
@@ -116,26 +117,30 @@ namespace MessageHelper {
                 /* "img" */
             ] //[img]https://i.ytimg.com/vi/kgeSTkZssPg/maxresdefault.jpg[/img]
         });
-        /*
-        if(result.error) {
-            log.error(LogCategory.GENERAL, tr("BBCode parse error: %o"), result.errorQueue);
-            return formatElement(message);
-        }
-        */
-
         let html = result.build_html();
-
         if(typeof(window.twemoji) !== "undefined" && settings.static_global(Settings.KEY_CHAT_COLORED_EMOJIES))
             html = twemoji.parse(html);
 
         const container = $.spawn("div");
-        container[0].innerHTML = DOMPurify.sanitize(html, {
+        let sanitized = DOMPurify.sanitize(html, {
             ADD_ATTR: [
                 "x-highlight-type",
                 "x-code-type"
             ]
         });
 
+        sanitized = sanitized.replace(yt_embed_regex, data => {
+            const uid = data.match(yt_embed_regex)[1];
+            const url = yt_url_map[uid];
+            if(!url) return data;
+            delete yt_url_map[uid];
+
+            return "<iframe class=\"xbbcode-tag xbbcode-tag-video\" src=\"" + url + "\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>";
+        });
+
+        container[0].innerHTML = sanitized;
+
+
         container.find("a")
             .attr('target', "_blank")
             .on('contextmenu', event => {
@@ -313,6 +318,7 @@ namespace MessageHelper {
         );
     }
 
+    const yt_url_map: {[key: string]: string} = {};
     loader.register_task(loader.Stage.JAVASCRIPT_INITIALIZING, {
         name: "XBBCode code tag init",
         function: async () => {
@@ -344,6 +350,23 @@ namespace MessageHelper {
                     return html + "</code></pre>";
                 }
             });
+
+            /* override the yt parser */
+            const original_parser = xbbcode.register.find_parser("yt");
+            if(original_parser)
+                xbbcode.register.register_parser({
+                    tag: ["yt", "youtube"],
+                    build_html(layer): string {
+                        const result = original_parser.build_html(layer);
+                        if(!result.startsWith("<iframe")) return result;
+
+                        const url = result.match(/src="(\S+)" /)[1];
+                        const uid = guid();
+
+                        yt_url_map[uid] = url;
+                        return "[-- yt: " + uid + " --]";
+                    }
+                });
         },
         priority: 10
     });

shared/js/ui/modal/ModalNewcomer.ts

@@ -5,7 +5,7 @@
 namespace Modals {
     export function openModalNewcomer() {
         let modal = createModal({
-            header: tr("Select a key"),
+            header: tra("Welcome to the {}", app.is_web() ? "TeaWeb-Client" : "TeaSpeak-Client"),
             body:  () => $("#tmpl_newcomer").renderTag().children(),
             footer: null,
 
@@ -13,7 +13,7 @@ namespace Modals {
             closeable: false
         });
 
-
+        //TODO!
 
         modal.open();
 

shared/js/ui/modal/ModalPlaylistManage.ts

@@ -0,0 +1,21 @@
+/// <reference path="../../ui/elements/modal.ts" />
+/// <reference path="../../ConnectionHandler.ts" />
+/// <reference path="../../proto.ts" />
+
+namespace Modals {
+    export function openPlaylistManage(client: ConnectionHandler, playlist: Playlist) {
+        let modal = createModal({
+            header: tr(tr("Playlist Manage")),
+            body:  () => $("#tmpl_playlist_manage").renderTag().children(),
+            footer: null,
+
+            width: "",
+            closeable: false
+        });
+
+        //TODO!
+
+        modal.open();
+
+    }
+}

shared/js/ui/modal/permission/ModalPermissionEdit.ts

@@ -2,16 +2,6 @@
 /// <reference path="../../../ConnectionHandler.ts" />
 /// <reference path="../../../proto.ts" />
 
-/*
-    TODO: Check needed permissions and may not even try to request, because we dont have the permission. Permissions:
-        b_virtualserver_servergroup_permission_list
-        b_virtualserver_channel_permission_list
-        b_virtualserver_client_permission_list
-        b_virtualserver_channelgroup_permission_list
-        b_virtualserver_channelclient_permission_list
-        b_virtualserver_playlist_permission_list
- */
-
 interface JQuery<TElement = HTMLElement> {
     dropdown: any;
 }