Add option to set mobile/desktop iframes per BBB event

app/controllers/bbb_client_controller.rb

@@ -29,7 +29,7 @@ module BigBlue
         meetingID: meeting_id,
         attendeePW: attendee_pw,
         moderatorPW: moderator_pw,
-        logoutURL: SiteSetting.bbb_full_window ? Discourse.base_url : "default"
+        logoutURL: Discourse.base_url
       }.to_query
 
       create_url = build_url("create", query)

assets/javascripts/discourse-bbb/controllers/insert-bbb.js.es6

@@ -15,7 +15,9 @@ export default Controller.extend(ModalFunctionality, {
       meetingID: "",
       attendeePW: "",
       moderatorPW: "",
-      buttonText: ""
+      buttonText: "",
+      mobileIframe: false,
+      desktopIframe: true,
     });
   },
 
@@ -23,12 +25,12 @@ export default Controller.extend(ModalFunctionality, {
     insert() {
       const btnTxt = this.buttonText ? ` label="${this.buttonText}"` : "";
       this.toolbarEvent.addText(
-        `[wrap=discourse-bbb meetingID="${this.meetingID}"${btnTxt} attendeePW="${this.attendeePW}" moderatorPW="${this.moderatorPW}"][/wrap]`
+        `[wrap=discourse-bbb meetingID="${this.meetingID}"${btnTxt} attendeePW="${this.attendeePW}" moderatorPW="${this.moderatorPW}" mobileIframe="${this.mobileIframe}" desktopIframe="${this.desktopIframe}"][/wrap]`
       );
       this.send("closeModal");
     },
     cancel() {
       this.send("closeModal");
-    }
-  }
+    },
+  },
 });

assets/javascripts/discourse/initializers/bbb.js.es6

@@ -5,7 +5,7 @@ import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { isAppWebview } from "discourse/lib/utilities";
 
-function launchBBB($elem, fullWindow) {
+function launchBBB($elem) {
   const data = $elem.data(),
     site = Discourse.__container__.lookup("site:main");
 
@@ -15,12 +15,16 @@ function launchBBB($elem, fullWindow) {
   })
     .then((res) => {
       if (res.url) {
-        if (fullWindow || site.mobileView || isAppWebview()) {
+        if (
+          isAppWebview() ||
+          (site.mobileView && !data.mobileIframe) ||
+          (!site.mobileView && !data.desktopIframe)
+        ) {
           window.location.href = res.url;
         } else {
           $elem.children().hide();
           $elem.append(
-            `<iframe src="${res.url}" allowfullscreen="true" allow="camera; microphone; fullscreen; speaker" width="690" height="500" style="border:none"></iframe>`
+            `<iframe src="${res.url}" allowfullscreen="true" allow="camera; microphone; fullscreen; speaker" width="100%" height="500" style="border:none"></iframe>`
           );
         }
       }
@@ -30,7 +34,7 @@ function launchBBB($elem, fullWindow) {
     });
 }
 
-function attachButton($elem, fullWindow) {
+function attachButton($elem) {
   const buttonLabel = $elem.data("label") || I18n.t("bbb.launch");
 
   $elem.html(
@@ -38,7 +42,7 @@ function attachButton($elem, fullWindow) {
       "video"
     )} ${buttonLabel}</button>`
   );
-  $elem.find("button").on("click", () => launchBBB($elem, fullWindow));
+  $elem.find("button").on("click", () => launchBBB($elem));
 }
 
 function attachStatus($elem, helper) {
@@ -59,11 +63,8 @@ function attachStatus($elem, helper) {
 
 function attachBBB($elem, helper) {
   if (helper) {
-    const siteSettings = Discourse.__container__.lookup("site-settings:main");
-    const fullWindow = siteSettings.bbb_full_window;
-
     $elem.find("[data-wrap=discourse-bbb]").each((idx, val) => {
-      attachButton($(val), fullWindow);
+      attachButton($(val));
       $(val).append("<span class='bbb-status'></span>");
       attachStatus($(val), helper);
     });

assets/javascripts/discourse/templates/modal/insert-bbb.hbs

@@ -19,6 +19,21 @@
     <label>{{i18n "bbb.moderatorPW"}}</label>
     {{text-field value=moderatorPW}}
   </div>
+
+  <div class="insert-bbb-input">
+    <label class='checkbox-label'>
+      {{input type="checkbox" checked=mobileIframe}}
+      {{i18n "bbb.modal.mobile_iframe"}}
+    </label>
+  </div>
+
+  <div class="insert-bbb-input">
+    <label class='checkbox-label'>
+      {{input type="checkbox" checked=desktopIframe}}
+      {{i18n "bbb.modal.desktop_iframe"}}
+    </label>
+  </div>
+
 </div>
 {{/d-modal-body}}
 

config/locales/client.en.yml

@@ -11,3 +11,5 @@ en:
         insert: Insert
         cancel: Cancel
         title: Add BBB Integration
+        mobile_iframe: Show in an iframe on mobile devices
+        desktop_iframe: Show in an iframe on desktop devices

config/locales/server.en.yml

@@ -3,6 +3,5 @@ en:
     bbb_enabled: "Enable BigBlueButton integration"
     bbb_endpoint: "BigBlueButton Server URL (must include `api/`, as in: mysite.com/bigbluebutton/api/)."
     bbb_secret: "BigBlueButton Shared Secret"
-    bbb_full_window: "If unchecked, video conference will load in an iframe on desktop clients."
     bbb_staff_only: "Only show toolbar button to staff members."
     bbb_moderator_group_name: "Add the name of a group whose members should log in as moderators in video conferences."

config/settings.yml

@@ -9,9 +9,6 @@ plugins:
     default: ""
     client: false
     secret: true
-  bbb_full_window:
-    default: true
-    client: true
   bbb_staff_only:
     default: true
     client: true