FEATURE: chat integration and usability improvements

Added integration with Discourse Chat to allow creating a link within the options of a chat window

Open plain meeting links in a new browser tab rather than overwriting the current tab

Added settings for the new chat button integration

Separated template from javascript for better maintainability

Added new settings for choose the default options in regards to iframes

.eslintrc.cjs

@@ -1 +1 @@
-module.exports = require("@discourse/lint-configs/eslint");
+module.exports = require("@discourse/lint-configs/eslint");

javascripts/discourse/components/modal/insert-jitsi.hbs

@@ -0,0 +1,58 @@
+<DModal
+  @title={{theme-i18n "modal.title"}}
+  class="insert-jitsi"
+  @closeModal={{@closeModal}}
+>
+  <:body>
+    <div class="insert-jitsi-form">
+      <div class="insert-jitsi-input">
+        <label>
+          {{theme-i18n "room_label"}}
+        </label>
+        <TextField
+          @value={{this.jitsiRoom}}
+          @autofocus="autofocus"
+          @autocomplete="off"
+        />
+        <div class="desc">{{theme-i18n "modal.room_field_description"}}</div>
+      </div>
+
+      {{#unless @model.plainText}}
+
+        <div class="insert-jitsi-input">
+          <label>
+            {{theme-i18n "button_text_label"}}
+          </label>
+          <TextField
+            @value={{this.buttonText}}
+            @placeholderKey={{theme-prefix "launch_jitsi"}}
+          />
+        </div>
+
+        {{#unless (theme-setting "hide_iframe_buttons")}}
+          <div class="insert-jitsi-input">
+            <label class="checkbox-label">
+              <Input @type="checkbox" @checked={{this.mobileIframe}} />
+              {{theme-i18n "modal.mobile_iframe"}}
+            </label>
+          </div>
+
+          <div class="insert-bbb-input">
+            <label class="checkbox-label">
+              <Input @type="checkbox" @checked={{this.desktopIframe}} />
+              {{theme-i18n "modal.desktop_iframe"}}
+            </label>
+          </div>
+        {{/unless}}
+      {{/unless}}
+    </div>
+  </:body>
+  <:footer>
+    <DButton
+      class="btn-primary"
+      @disabled={{this.insertDisabled}}
+      @label={{theme-prefix "modal.insert"}}
+      @action={{this.insert}}
+    />
+  </:footer>
+</DModal>

javascripts/discourse/components/modal/insert-jitsi.js

@@ -0,0 +1,47 @@
+/*eslint no-undef:0 */
+
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+
+export default class InsertJitsiComponent extends Component {
+  @tracked mobileIframe = settings.default_mobile_iframe;
+  @tracked desktopIframe = settings.default_desktop_iframe;
+  @tracked jitsiRoom = "";
+  @tracked buttonText = "";
+
+  keyDown(e) {
+    if (e.keyCode === 13) {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+  }
+
+  randomID() {
+    return Math.random().toString(36).slice(-8);
+  }
+
+  @action
+  insert() {
+    const btnTxt = this.buttonText ? ` label="${this.buttonText}"` : "";
+    const roomID = this.jitsiRoom || this.randomID();
+
+    let text;
+
+    if (this.args.model.plainText) {
+      const domain = settings.meet_jitsi_domain;
+      text = `https://${domain}/${roomID}`;
+    } else {
+      text = `[wrap=discourse-jitsi room="${roomID}"${btnTxt} mobileIframe="${this.mobileIframe}" desktopIframe="${this.desktopIframe}"][/wrap]`;
+    }
+
+    this.args.model.insertMeeting(text);
+    this.args.closeModal();
+  }
+
+  @action
+  cancel() {
+    this.args.closeModal();
+  }
+}

javascripts/discourse/initializers/insert-jitsi.js

@@ -4,7 +4,7 @@ import loadScript from "discourse/lib/load-script";
 import { withPluginApi } from "discourse/lib/plugin-api";
 import { iconHTML } from "discourse-common/lib/icon-library";
 import I18n from "I18n";
-import InsertJitsi from "../components/modal/insert-jitsi";
+import InsertJitsiComponent from "../components/modal/insert-jitsi";
 
 /* eslint-disable */
 // prettier-ignore
@@ -16,7 +16,7 @@ function launchJitsi($elem, user, site) {
     (site.mobileView && data.mobileIframe === false) ||
     (!site.mobileView && data.desktopIframe === false)
   ) {
-    window.location.href = `https://${domain}/${data.room}`;
+    window.open(`https://${domain}/${data.room}`, "_blank");
     return false;
   }
 
@@ -66,6 +66,7 @@ function attachJitsi($elem, helper) {
     });
   }
 }
+
 /* eslint-enable */
 
 export default {
@@ -76,37 +77,72 @@ export default {
       const currentUser = api.getCurrentUser();
       const modal = api.container.lookup("service:modal");
 
+      api.decorateCooked(attachJitsi, { id: "discourse-jitsi" });
+
+      // Ensure the current user has access to the feature
+      if (
+        settings.only_available_to_staff &&
+        currentUser &&
+        !currentUser.staff
+      ) {
+        return;
+      }
+
+      // Chat plugin integration
+      if (settings.chat_button && api.registerChatComposerButton) {
+        const chat = api.container.lookup("service:chat");
+
+        api.registerChatComposerButton({
+          title: themePrefix("composer_title"),
+          id: "insertChatJitsi",
+          group: "insertions",
+          position: settings.chat_button_position,
+          icon: settings.button_icon,
+          label: themePrefix("composer_title"),
+          action: () => {
+            modal.show(InsertJitsiComponent, {
+              model: {
+                insertMeeting: (text) => {
+                  // Get the active channel ensuring one is present
+                  const activeChannel = chat.activeChannel;
+                  if (activeChannel === null) {
+                    return;
+                  }
+
+                  // Append the meeting link to the draft
+                  activeChannel.draft.message += text;
+                },
+                plainText: true,
+              },
+            });
+          },
+        });
+      }
+
       if (settings.show_in_options_dropdown) {
-        if (!settings.only_available_to_staff || currentUser?.staff) {
-          api.addComposerToolbarPopupMenuOption({
-            icon: settings.button_icon,
-            label: themePrefix("composer_title"),
-            action: (toolbarEvent) => {
-              modal.show(InsertJitsi, { model: { toolbarEvent } });
-            },
-          });
-        }
+        api.addComposerToolbarPopupMenuOption({
+          icon: settings.button_icon,
+          label: themePrefix("composer_title"),
+          action: (toolbarEvent) => {
+            modal.show(InsertJitsiComponent, {
+              model: { insertMeeting: toolbarEvent.addText },
+            });
+          },
+        });
       } else {
-        if (
-          settings.only_available_to_staff &&
-          currentUser &&
-          !currentUser.staff
-        ) {
-          return;
-        }
         api.onToolbarCreate((toolbar) => {
           toolbar.addButton({
             title: themePrefix("composer_title"),
             id: "insertJitsi",
             group: "insertions",
             icon: settings.button_icon,
             perform: (toolbarEvent) =>
-              modal.show(InsertJitsi, { model: { toolbarEvent } }),
+              modal.show(InsertJitsiComponent, {
+                model: { insertMeeting: toolbarEvent.addText },
+              }),
           });
         });
       }
-
-      api.decorateCooked(attachJitsi, { id: "discourse-jitsi" });
     });
   },
 };

settings.yml

@@ -12,6 +12,25 @@ jitsi_script_src:
 button_icon:
   default: "video"
   description: "Enter the name of the FontAwesome 5 icon to display in the Jitsi button. "
+chat_button:
+  default: true
+  description: "Integrate with Discourse Chat"
+hide_iframe_buttons:
+  default: false
+  description: "Hide the choice for iframe settings from users, the default settings below will be used"
+default_mobile_iframe:
+  default: true
+  description: "Enable iframe mode by default for mobile"
+default_desktop_iframe:
+  default: true
+  description: "Enable iframe mode by default for desktop"
+chat_button_position:
+  description: "Position of the button within the chat window"
+  default: dropdown
+  type: enum
+  choices:
+    - dropdown
+    - inline
 svg_icons:
   default: "video"
   type: "list"