From cc439bb6b94649d9b4231751f4c8d2aff9b57235 Mon Sep 17 00:00:00 2001 From: WolverinDEV Date: Sun, 16 Feb 2020 20:31:30 +0100 Subject: [PATCH] Added support for yt videos within the channel & private conversations --- .gitignore | 2 +- ChangeLog.md | 1 + asm/download_compiled_files.sh | 2 + shared/css/static/general.scss | 5 +++ shared/js/proto.ts | 1 + shared/js/ui/frames/chat.ts | 41 +++++++++++++++---- shared/js/ui/modal/ModalNewcomer.ts | 4 +- shared/js/ui/modal/ModalPlaylistManage.ts | 21 ++++++++++ .../modal/permission/ModalPermissionEdit.ts | 10 ----- 9 files changed, 65 insertions(+), 22 deletions(-) diff --git a/.gitignore b/.gitignore index e2c687f8..53e3ec2a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ -generated/ +asm/generated/ node_modules/ auth/certs/ auth/js/auth.js.map diff --git a/ChangeLog.md b/ChangeLog.md index 204ec6f4..6bda5906 100644 --- a/ChangeLog.md +++ b/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 diff --git a/asm/download_compiled_files.sh b/asm/download_compiled_files.sh index 381217b4..75fa65b3 100755 --- a/asm/download_compiled_files.sh +++ b/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 ]] && { diff --git a/shared/css/static/general.scss b/shared/css/static/general.scss index feae51d2..9cc8ef13 100644 --- a/shared/css/static/general.scss +++ b/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; } \ No newline at end of file diff --git a/shared/js/proto.ts b/shared/js/proto.ts index 2e50dbf1..18a162a7 100644 --- a/shared/js/proto.ts +++ b/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; diff --git a/shared/js/ui/frames/chat.ts b/shared/js/ui/frames/chat.ts index 3429b815..74e9f203 100644 --- a/shared/js/ui/frames/chat.ts +++ b/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 ""; + }); + + 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 + ""; } }); + + /* 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(" $("#tmpl_newcomer").renderTag().children(), footer: null, @@ -13,7 +13,7 @@ namespace Modals { closeable: false }); - + //TODO! modal.open(); diff --git a/shared/js/ui/modal/ModalPlaylistManage.ts b/shared/js/ui/modal/ModalPlaylistManage.ts index e69de29b..f83649a5 100644 --- a/shared/js/ui/modal/ModalPlaylistManage.ts +++ b/shared/js/ui/modal/ModalPlaylistManage.ts @@ -0,0 +1,21 @@ +/// +/// +/// + +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(); + + } +} \ No newline at end of file diff --git a/shared/js/ui/modal/permission/ModalPermissionEdit.ts b/shared/js/ui/modal/permission/ModalPermissionEdit.ts index 71b85b1e..f405dd9c 100644 --- a/shared/js/ui/modal/permission/ModalPermissionEdit.ts +++ b/shared/js/ui/modal/permission/ModalPermissionEdit.ts @@ -2,16 +2,6 @@ /// /// -/* - 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 { dropdown: any; }