mirror of
https://github.com/turt2live/matrix-dimension.git
synced 2024-10-01 05:05:53 +00:00
Add BigBlueButton widget to integration manager
This adds the widget and the configuration for it to the integration manager, so that the user can add a BBB widget. The code that will actually run inside of the widget is not yet here. A few CSS things are updated as well to make them more generic, as we reused a few things that were previously jitsi only.
This commit is contained in:
parent
db2298172f
commit
401812931a
23
src/db/migrations/20200630165247-AddBigBlueButtonWidget.ts
Normal file
23
src/db/migrations/20200630165247-AddBigBlueButtonWidget.ts
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { QueryInterface } from "sequelize";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
up: (queryInterface: QueryInterface) => {
|
||||||
|
return Promise.resolve()
|
||||||
|
.then(() => queryInterface.bulkInsert("dimension_widgets", [
|
||||||
|
{
|
||||||
|
type: "bigbluebutton",
|
||||||
|
name: "BigBlueButton",
|
||||||
|
avatarUrl: "/img/avatars/bigbluebutton.png",
|
||||||
|
isEnabled: true,
|
||||||
|
isPublic: true,
|
||||||
|
description: "Embed a BigBlueButton conference",
|
||||||
|
}
|
||||||
|
]));
|
||||||
|
},
|
||||||
|
down: (queryInterface: QueryInterface) => {
|
||||||
|
return Promise.resolve()
|
||||||
|
.then(() => queryInterface.bulkDelete("dimension_widgets", {
|
||||||
|
type: "bigbluebutton",
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
@ -118,6 +118,7 @@ import { CKEditorModule } from "@ckeditor/ckeditor5-angular";
|
|||||||
import { AdminNewEditTermsComponent } from "./admin/terms/new-edit/new-edit.component";
|
import { AdminNewEditTermsComponent } from "./admin/terms/new-edit/new-edit.component";
|
||||||
import { AdminTermsNewEditPublishDialogComponent } from "./admin/terms/new-edit/publish/publish.component";
|
import { AdminTermsNewEditPublishDialogComponent } from "./admin/terms/new-edit/publish/publish.component";
|
||||||
import { TermsWidgetWrapperComponent } from "./widget-wrappers/terms/terms.component";
|
import { TermsWidgetWrapperComponent } from "./widget-wrappers/terms/terms.component";
|
||||||
|
import { BigBlueButtonConfigComponent } from "./configs/widget/bigbluebutton/bigbluebutton.widget.component";
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
@ -148,6 +149,7 @@ import { TermsWidgetWrapperComponent } from "./widget-wrappers/terms/terms.compo
|
|||||||
VideoWidgetWrapperComponent,
|
VideoWidgetWrapperComponent,
|
||||||
JitsiWidgetWrapperComponent,
|
JitsiWidgetWrapperComponent,
|
||||||
GCalWidgetWrapperComponent,
|
GCalWidgetWrapperComponent,
|
||||||
|
BigBlueButtonConfigComponent,
|
||||||
RiotHomeComponent,
|
RiotHomeComponent,
|
||||||
IboxComponent,
|
IboxComponent,
|
||||||
ConfigScreenWidgetComponent,
|
ConfigScreenWidgetComponent,
|
||||||
|
@ -2,6 +2,7 @@ import { RouterModule, Routes } from "@angular/router";
|
|||||||
import { HomeComponent } from "./home/home.component";
|
import { HomeComponent } from "./home/home.component";
|
||||||
import { RiotComponent } from "./riot/riot.component";
|
import { RiotComponent } from "./riot/riot.component";
|
||||||
import { GenericWidgetWrapperComponent } from "./widget-wrappers/generic/generic.component";
|
import { GenericWidgetWrapperComponent } from "./widget-wrappers/generic/generic.component";
|
||||||
|
import { BigBlueButtonConfigComponent } from "./configs/widget/bigbluebutton/bigbluebutton.widget.component";
|
||||||
import { VideoWidgetWrapperComponent } from "./widget-wrappers/video/video.component";
|
import { VideoWidgetWrapperComponent } from "./widget-wrappers/video/video.component";
|
||||||
import { JitsiWidgetWrapperComponent } from "./widget-wrappers/jitsi/jitsi.component";
|
import { JitsiWidgetWrapperComponent } from "./widget-wrappers/jitsi/jitsi.component";
|
||||||
import { GCalWidgetWrapperComponent } from "./widget-wrappers/gcal/gcal.component";
|
import { GCalWidgetWrapperComponent } from "./widget-wrappers/gcal/gcal.component";
|
||||||
@ -180,6 +181,11 @@ const routes: Routes = [
|
|||||||
component: CustomWidgetConfigComponent,
|
component: CustomWidgetConfigComponent,
|
||||||
data: {breadcrumb: "Custom Widgets", name: "Custom Widgets"},
|
data: {breadcrumb: "Custom Widgets", name: "Custom Widgets"},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "bigbluebutton",
|
||||||
|
component: BigBlueButtonConfigComponent,
|
||||||
|
data: {breadcrumb: "BigBlueButton Widgets", name: "BigBlueButton Widgets"},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "etherpad",
|
path: "etherpad",
|
||||||
component: EtherpadWidgetConfigComponent,
|
component: EtherpadWidgetConfigComponent,
|
||||||
|
@ -0,0 +1,11 @@
|
|||||||
|
<my-widget-config [widgetComponent]="this">
|
||||||
|
<ng-template #widgetParamsTemplate let-widget="widget">
|
||||||
|
<label class="label-block">
|
||||||
|
BigBlueButton Meeting URL
|
||||||
|
<input type="text" class="form-control"
|
||||||
|
placeholder="https://bbb.example.com/abc-def-ghi"
|
||||||
|
[(ngModel)]="widget.dimension.newData.conferenceUrl" name="widget-url-{{widget.id}}"
|
||||||
|
[disabled]="isUpdating"/>
|
||||||
|
</label>
|
||||||
|
</ng-template>
|
||||||
|
</my-widget-config>
|
@ -0,0 +1,53 @@
|
|||||||
|
import { WidgetComponent, DISABLE_AUTOMATIC_WRAPPING } from "../widget.component";
|
||||||
|
import { WIDGET_BIGBLUEBUTTON, EditableWidget } from "../../../shared/models/widget";
|
||||||
|
import { Component } from "@angular/core";
|
||||||
|
import { FE_BigBlueButtonWidget } from "../../../shared/models/integration";
|
||||||
|
import { SessionStorage } from "../../../shared/SessionStorage";
|
||||||
|
import * as url from "url";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
templateUrl: "bigbluebutton.widget.component.html",
|
||||||
|
styleUrls: ["bigbluebutton.widget.component.scss"],
|
||||||
|
})
|
||||||
|
|
||||||
|
// Configuration of BigBlueButton widgets
|
||||||
|
export class BigBlueButtonConfigComponent extends WidgetComponent {
|
||||||
|
private bigBlueButtonWidget: FE_BigBlueButtonWidget = <FE_BigBlueButtonWidget>SessionStorage.editIntegration;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super(WIDGET_BIGBLUEBUTTON, "BigBlueButton Conference", DISABLE_AUTOMATIC_WRAPPING);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected OnWidgetsDiscovered(widgets: EditableWidget[]) {
|
||||||
|
for (const widget of widgets) {
|
||||||
|
widget.data.conferenceUrl = this.templateUrl(widget.url, widget.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
protected OnNewWidgetPrepared(widget: EditableWidget): void {
|
||||||
|
widget.dimension.newData["conferenceUrl"] = this.bigBlueButtonWidget.options.conferenceUrl;
|
||||||
|
}
|
||||||
|
|
||||||
|
protected OnWidgetBeforeAdd(widget: EditableWidget) {
|
||||||
|
this.setWidgetOptions(widget);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected OnWidgetBeforeEdit(widget: EditableWidget) {
|
||||||
|
this.setWidgetOptions(widget);
|
||||||
|
}
|
||||||
|
|
||||||
|
private setWidgetOptions(widget: EditableWidget) {
|
||||||
|
widget.dimension.newData.url = widget.dimension.newData.conferenceUrl;
|
||||||
|
|
||||||
|
let widgetQueryString = url.format({
|
||||||
|
query: {
|
||||||
|
"conferenceUrl": "$conferenceUrl",
|
||||||
|
"displayName": "$matrix_display_name",
|
||||||
|
"avatarUrl": "$matrix_avatar_url",
|
||||||
|
"userId": "$matrix_user_id",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
widgetQueryString = this.decodeParams(widgetQueryString, Object.keys(widget.dimension.newData).map(k => "$" + k));
|
||||||
|
widget.dimension.newUrl = window.location.origin + "/widgets/bigbluebutton" + widgetQueryString;
|
||||||
|
}
|
||||||
|
}
|
@ -69,6 +69,10 @@
|
|||||||
<img src="/img/avatars/googlecalendar.png">
|
<img src="/img/avatars/googlecalendar.png">
|
||||||
<span>Google Calendar</span>
|
<span>Google Calendar</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="integration">
|
||||||
|
<img src="/img/avatars/bigbluebutton.png">
|
||||||
|
<span>BigBlueButton</span>
|
||||||
|
</div>
|
||||||
<div class="integration">
|
<div class="integration">
|
||||||
<img src="/img/avatars/customwidget.png">
|
<img src="/img/avatars/customwidget.png">
|
||||||
<span>Custom Widget</span>
|
<span>Custom Widget</span>
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import { WidgetsResponse } from "./server-client-responses";
|
import { WidgetsResponse } from "./server-client-responses";
|
||||||
|
|
||||||
export const WIDGET_CUSTOM = ["m.custom", "customwidget", "dimension-customwidget"];
|
export const WIDGET_CUSTOM = ["m.custom", "customwidget", "dimension-customwidget"];
|
||||||
|
export const WIDGET_BIGBLUEBUTTON = ["m.bigbluebutton", "bigbluebutton", "dimension-bigbluebutton"];
|
||||||
export const WIDGET_ETHERPAD = ["m.etherpad", "etherpad", "dimension-etherpad"];
|
export const WIDGET_ETHERPAD = ["m.etherpad", "etherpad", "dimension-etherpad"];
|
||||||
export const WIDGET_GOOGLE_DOCS = ["m.googledoc", "googledocs", "dimension-googledocs"];
|
export const WIDGET_GOOGLE_DOCS = ["m.googledoc", "googledocs", "dimension-googledocs"];
|
||||||
export const WIDGET_GOOGLE_CALENDAR = ["m.googlecalendar", "googlecalendar", "dimension-googlecalendar"];
|
export const WIDGET_GOOGLE_CALENDAR = ["m.googlecalendar", "googlecalendar", "dimension-googlecalendar"];
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import { Injectable } from "@angular/core";
|
import { Injectable } from "@angular/core";
|
||||||
import {
|
import {
|
||||||
WIDGET_CUSTOM,
|
WIDGET_CUSTOM,
|
||||||
|
WIDGET_BIGBLUEBUTTON,
|
||||||
WIDGET_ETHERPAD,
|
WIDGET_ETHERPAD,
|
||||||
WIDGET_GOOGLE_CALENDAR,
|
WIDGET_GOOGLE_CALENDAR,
|
||||||
WIDGET_GOOGLE_DOCS,
|
WIDGET_GOOGLE_DOCS,
|
||||||
@ -35,6 +36,9 @@ export class IntegrationsRegistry {
|
|||||||
"custom": {
|
"custom": {
|
||||||
types: WIDGET_CUSTOM,
|
types: WIDGET_CUSTOM,
|
||||||
},
|
},
|
||||||
|
"bigbluebutton": {
|
||||||
|
types: WIDGET_BIGBLUEBUTTON,
|
||||||
|
},
|
||||||
"youtube": {
|
"youtube": {
|
||||||
types: WIDGET_YOUTUBE
|
types: WIDGET_YOUTUBE
|
||||||
},
|
},
|
||||||
|
@ -16,7 +16,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: themed(jitsiWelcomeBgColor);
|
background-color: themed(widgetWelcomeBgColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
.join-conference-boat {
|
.join-conference-boat {
|
||||||
@ -30,4 +30,4 @@
|
|||||||
width: 90%;
|
width: 90%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
BIN
web/public/img/avatars/bigbluebutton.png
Normal file
BIN
web/public/img/avatars/bigbluebutton.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 13 KiB |
@ -48,7 +48,7 @@ $theme_dark: (
|
|||||||
stickerPickerStickerBgColor: #fff,
|
stickerPickerStickerBgColor: #fff,
|
||||||
stickerPickerShadowColor: hsla(0, 0%, 0%, 0.2),
|
stickerPickerShadowColor: hsla(0, 0%, 0%, 0.2),
|
||||||
|
|
||||||
jitsiWelcomeBgColor: #fff,
|
widgetWelcomeBgColor: #fff,
|
||||||
|
|
||||||
troubleshooterBgColor: #2d2d2d,
|
troubleshooterBgColor: #2d2d2d,
|
||||||
troubleshooterNeutralColor: rgb(205, 215, 222),
|
troubleshooterNeutralColor: rgb(205, 215, 222),
|
||||||
|
@ -48,7 +48,7 @@ $theme_light: (
|
|||||||
stickerPickerStickerBgColor: #fff,
|
stickerPickerStickerBgColor: #fff,
|
||||||
stickerPickerShadowColor: hsla(0, 0%, 0%, 0.2),
|
stickerPickerShadowColor: hsla(0, 0%, 0%, 0.2),
|
||||||
|
|
||||||
jitsiWelcomeBgColor: #fff,
|
widgetWelcomeBgColor: #fff,
|
||||||
|
|
||||||
troubleshooterBgColor: #fff,
|
troubleshooterBgColor: #fff,
|
||||||
troubleshooterNeutralColor: rgb(205, 215, 222),
|
troubleshooterNeutralColor: rgb(205, 215, 222),
|
||||||
@ -86,4 +86,4 @@ $theme_light: (
|
|||||||
appserviceConfigPreFgColor: rgb(41, 43, 44),
|
appserviceConfigPreFgColor: rgb(41, 43, 44),
|
||||||
appserviceConfigPreBorderColor: #ccc,
|
appserviceConfigPreBorderColor: #ccc,
|
||||||
appserviceConfigPreBgColor: #eee,
|
appserviceConfigPreBgColor: #eee,
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user