mirror of
https://github.com/turt2live/matrix-dimension.git
synced 2024-08-31 22:22:03 +00:00
Merge remote-tracking branch 'MTRNord/etherpad_widget'
This commit is contained in:
commit
1be87b51b4
7
config/integrations/etherpad_widget.yaml
Normal file
7
config/integrations/etherpad_widget.yaml
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
# All this configuration does is make "Etherpad Widget" available in the UI
|
||||||
|
type: "widget"
|
||||||
|
integrationType: "etherpad"
|
||||||
|
enabled: true
|
||||||
|
name: "Etherpad"
|
||||||
|
about: "Etherpad is a collaborative text editor. With this widget you can embed Etherpad directly in to your Matrix chat rooms so that you can securely collaborate on documents."
|
||||||
|
avatar: "img/avatars/etherpad.png"
|
@ -29,6 +29,7 @@ import { ToggleFullscreenDirective } from "./shared/toggle-fullscreen.directive"
|
|||||||
import { FullscreenButtonComponent } from "./fullscreen-button/fullscreen-button.component";
|
import { FullscreenButtonComponent } from "./fullscreen-button/fullscreen-button.component";
|
||||||
import { YoutubeWidgetConfigComponent } from "./configs/widget/youtube/youtube-config.component";
|
import { YoutubeWidgetConfigComponent } from "./configs/widget/youtube/youtube-config.component";
|
||||||
import { TwitchWidgetConfigComponent } from "./configs/widget/twitch/twitch-config.component";
|
import { TwitchWidgetConfigComponent } from "./configs/widget/twitch/twitch-config.component";
|
||||||
|
import { EtherpadWidgetConfigComponent } from "./configs/widget/etherpad/etherpad-config.component";
|
||||||
import { VideoWidgetWrapperComponent } from "./widget_wrappers/video/video.component";
|
import { VideoWidgetWrapperComponent } from "./widget_wrappers/video/video.component";
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
@ -60,6 +61,7 @@ import { VideoWidgetWrapperComponent } from "./widget_wrappers/video/video.compo
|
|||||||
FullscreenButtonComponent,
|
FullscreenButtonComponent,
|
||||||
YoutubeWidgetConfigComponent,
|
YoutubeWidgetConfigComponent,
|
||||||
TwitchWidgetConfigComponent,
|
TwitchWidgetConfigComponent,
|
||||||
|
EtherpadWidgetConfigComponent,
|
||||||
VideoWidgetWrapperComponent,
|
VideoWidgetWrapperComponent,
|
||||||
|
|
||||||
// Vendor
|
// Vendor
|
||||||
@ -80,7 +82,8 @@ import { VideoWidgetWrapperComponent } from "./widget_wrappers/video/video.compo
|
|||||||
IrcConfigComponent,
|
IrcConfigComponent,
|
||||||
CustomWidgetConfigComponent,
|
CustomWidgetConfigComponent,
|
||||||
YoutubeWidgetConfigComponent,
|
YoutubeWidgetConfigComponent,
|
||||||
TwitchWidgetConfigComponent
|
TwitchWidgetConfigComponent,
|
||||||
|
EtherpadWidgetConfigComponent,
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class AppModule {
|
export class AppModule {
|
||||||
|
118
web/app/configs/widget/etherpad/etherpad-config.component.html
Normal file
118
web/app/configs/widget/etherpad/etherpad-config.component.html
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
<div class="config-wrapper">
|
||||||
|
<img src="/img/close.svg" (click)="dialog.close()" class="close-icon">
|
||||||
|
<div class="config-header">
|
||||||
|
<img src="/img/avatars/etherpad.png">
|
||||||
|
<h4>Configure Etherpad widgets</h4>
|
||||||
|
</div>
|
||||||
|
<div class="config-content" *ngIf="isLoading">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<p><i class="fa fa-circle-notch fa-spin"></i> Loading widgets...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="config-content" *ngIf="!isLoading">
|
||||||
|
<form (submit)="validateAndAddWidget()" novalidate name="addForm">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col" style="margin-bottom: 12px;">
|
||||||
|
<div class="form-group row">
|
||||||
|
<label for="padNameInput" class="col col-form-label">Etherpad Name</label>
|
||||||
|
<div class="col">
|
||||||
|
<input type="text" class="form-control" id="padNameInput"
|
||||||
|
placeholder="Pad Name"
|
||||||
|
[(ngModel)]="newWidgetUrl" name="newWidgetUrl"
|
||||||
|
[disabled]="isUpdating">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<div class="form-check col">
|
||||||
|
<label class="form-check-label">
|
||||||
|
<input type="checkbox" class="form-check-input" [(ngModel)]="useCustomServer" name="useCustomServer">
|
||||||
|
Use Custom Etherpad Server
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row" *ngIf="useCustomServer">
|
||||||
|
<label for="padServerInput" class="col col-form-label">Etherpad Custom Server</label>
|
||||||
|
<div class="col">
|
||||||
|
<input type="text" class="form-control" id="padServerInput"
|
||||||
|
placeholder="https://demo.riot.im/etherpad/p/"
|
||||||
|
[(ngModel)]="newEtherpadServerUrl" name="newEtherpadServerUrl"
|
||||||
|
[disabled]="isUpdating">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label for="padURL" class="col col-form-label">Etherpad URL</label>
|
||||||
|
<div class="col">
|
||||||
|
<input type="text" class="form-control" id="padURL" [value]="getPadURL()" readonly>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-success" [disabled]="isUpdating">
|
||||||
|
<i class="fa fa-plus-circle"></i> Add Widget
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="w-100"></div>
|
||||||
|
<div class="col removable widget-item" *ngFor="let widget of widgets trackById">
|
||||||
|
{{ widget.name || widget.url }} <span class="text-muted" *ngIf="widget.ownerId">(added by {{ widget.ownerId }})</span>
|
||||||
|
<button type="button" class="btn btn-outline-info btn-sm" (click)="editWidget(widget)"
|
||||||
|
style="margin-top: -5px;" [disabled]="isUpdating">
|
||||||
|
<i class="fa fa-pencil"></i> Edit Widget
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-sm btn-outline-danger" (click)="removeWidget(widget)"
|
||||||
|
style="margin-top: -5px;" [disabled]="isUpdating">
|
||||||
|
<i class="fa fa-times"></i> Remove Widget
|
||||||
|
</button>
|
||||||
|
<div class="col" *ngIf="isWidgetToggled(widget)" style="margin-top: 12px;">
|
||||||
|
<div class="form-group row">
|
||||||
|
<div class="form-check col">
|
||||||
|
<label class="form-check-label">
|
||||||
|
<input type="checkbox" class="form-check-input" [(ngModel)]="editUseCustomServer" name="widget-useCustomServer-{{widget.id}}">
|
||||||
|
Use Custom Etherpad Server
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="form-group col">
|
||||||
|
<label for="widget-name-{{widget.id}}">Widget Name</label>
|
||||||
|
<input type="text" class="form-control" id="widget-name-{{widget.id}}"
|
||||||
|
placeholder="Etherpad Widget"
|
||||||
|
[(ngModel)]="widget.newName" name="widget-name-{{widget.id}}"
|
||||||
|
[disabled]="isUpdating">
|
||||||
|
</div>
|
||||||
|
<div class="form-group col">
|
||||||
|
<label for="widget-padName-{{widget.id}}">Etherpad Name</label>
|
||||||
|
<input type="text" class="form-control" id="widget-padName-{{widget.id}}"
|
||||||
|
placeholder="Etherpad Name"
|
||||||
|
[(ngModel)]="widget.data.newPadName" name="widget-padName-{{widget.id}}"
|
||||||
|
[disabled]="isUpdating">
|
||||||
|
</div>
|
||||||
|
<div class="form-group col" *ngIf="editUseCustomServer">
|
||||||
|
<label for="widget-padServer-{{widget.id}}">Etherpad Server URL</label>
|
||||||
|
<input type="text" class="form-control"
|
||||||
|
placeholder="Etherpad Server URL"
|
||||||
|
[(ngModel)]="widget.data.newPadServer" name="widget-padServer-{{widget.id}}"
|
||||||
|
[disabled]="isUpdating">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label for="padURL" class="col col-form-label">Etherpad URL</label>
|
||||||
|
<div class="col">
|
||||||
|
<input type="text" class="form-control" id="padURL" [value]="getPadURL(widget)" readonly>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-primary btn-sm" (click)="validateAndSaveWidget(widget)">
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-outline btn-sm" (click)="toggleWidget(widget)">
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
@ -0,0 +1,4 @@
|
|||||||
|
// component styles are encapsulated and only applied to their components
|
||||||
|
.widget-item {
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
124
web/app/configs/widget/etherpad/etherpad-config.component.ts
Normal file
124
web/app/configs/widget/etherpad/etherpad-config.component.ts
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
import { Component } from "@angular/core";
|
||||||
|
import { ModalComponent, DialogRef } from "ngx-modialog";
|
||||||
|
import { WidgetComponent } from "../widget.component";
|
||||||
|
import { ScalarService } from "../../../shared/scalar.service";
|
||||||
|
import { ConfigModalContext } from "../../../integration/integration.component";
|
||||||
|
import { ToasterService } from "angular2-toaster";
|
||||||
|
import { Widget, WIDGET_DIM_ETHERPAD, WIDGET_SCALAR_ETHERPAD } from "../../../shared/models/widget";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "my-etherpadwidget-config",
|
||||||
|
templateUrl: "etherpad-config.component.html",
|
||||||
|
styleUrls: ["etherpad-config.component.scss", "./../../config.component.scss"],
|
||||||
|
})
|
||||||
|
export class EtherpadWidgetConfigComponent extends WidgetComponent implements ModalComponent<ConfigModalContext> {
|
||||||
|
|
||||||
|
public newEtherpadServerUrl: string = "";
|
||||||
|
public useCustomServer = false;
|
||||||
|
public editUseCustomServer = false;
|
||||||
|
|
||||||
|
constructor(public dialog: DialogRef<ConfigModalContext>,
|
||||||
|
toaster: ToasterService,
|
||||||
|
scalarService: ScalarService,
|
||||||
|
window: Window) {
|
||||||
|
super(
|
||||||
|
toaster,
|
||||||
|
scalarService,
|
||||||
|
dialog.context.roomId,
|
||||||
|
window,
|
||||||
|
WIDGET_DIM_ETHERPAD,
|
||||||
|
WIDGET_SCALAR_ETHERPAD,
|
||||||
|
dialog.context.integrationId,
|
||||||
|
"Etherpad Widget",
|
||||||
|
"generic", // wrapper
|
||||||
|
"etherpad" // scalar wrapper
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
getPadURL(widget?: Widget): string {
|
||||||
|
let url: string;
|
||||||
|
if (widget) {
|
||||||
|
if (this.editUseCustomServer) {
|
||||||
|
url = widget.data.newPadServer + this.roomId + "_" + widget.data.newPadName;
|
||||||
|
} else {
|
||||||
|
url = "https://demo.riot.im/etherpad/p/" + this.roomId + "_" + widget.data.newPadName;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (this.useCustomServer) {
|
||||||
|
url = this.newEtherpadServerUrl + this.roomId + "_" + this.newWidgetUrl;
|
||||||
|
} else {
|
||||||
|
url = "https://demo.riot.im/etherpad/p/" + this.roomId + "_" + this.newWidgetUrl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return url;
|
||||||
|
}
|
||||||
|
|
||||||
|
private checkPadURL(url: string, widget?: Widget): boolean {
|
||||||
|
if (widget) {
|
||||||
|
if (this.editUseCustomServer) {
|
||||||
|
return Boolean(url === widget.data.newPadServer);
|
||||||
|
} else {
|
||||||
|
return Boolean(url === "https://demo.riot.im/etherpad/p/");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (this.useCustomServer) {
|
||||||
|
return Boolean(url === this.newEtherpadServerUrl);
|
||||||
|
} else {
|
||||||
|
return Boolean(url === "https://demo.riot.im/etherpad/p/");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public validateAndAddWidget() {
|
||||||
|
const url = this.getPadURL() + "?userName=$matrix_user_id";
|
||||||
|
|
||||||
|
if (this.checkPadURL(url)) {
|
||||||
|
this.toaster.pop("warning", "Please enter a Pad Name");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const originalUrl = this.roomId + "_" + this.newWidgetUrl;
|
||||||
|
this.newWidgetUrl = url;
|
||||||
|
|
||||||
|
if (this.useCustomServer) {
|
||||||
|
this.addWidget({padName: originalUrl, padSuffix: originalUrl, padServer: this.newEtherpadServerUrl});
|
||||||
|
} else {
|
||||||
|
this.addWidget({padName: originalUrl, padSuffix: originalUrl, padServer: "https://demo.riot.im/etherpad/p/"});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public validateAndSaveWidget(widget: Widget) {
|
||||||
|
const url = this.getPadURL(widget) + "?userName=$matrix_user_id";
|
||||||
|
|
||||||
|
if (this.checkPadURL(url, widget)) {
|
||||||
|
this.toaster.pop("warning", "Please enter a Pad Name");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!widget.data) widget.data = {};
|
||||||
|
|
||||||
|
widget.newUrl = url;
|
||||||
|
widget.data.padName = widget.data.newPadName;
|
||||||
|
widget.data.padSuffix = this.roomId + "_" + widget.data.newPadName;
|
||||||
|
if (this.editUseCustomServer) {
|
||||||
|
widget.data.padServer = widget.data.newPadServer;
|
||||||
|
} else {
|
||||||
|
widget.data.padServer = "https://demo.riot.im/etherpad/p/"
|
||||||
|
}
|
||||||
|
|
||||||
|
delete widget.data.newPadServer;
|
||||||
|
delete widget.data.newPadName;
|
||||||
|
|
||||||
|
this.saveWidget(widget);
|
||||||
|
}
|
||||||
|
|
||||||
|
editWidget(widget: Widget) {
|
||||||
|
widget.data.newPadName = widget.data.padName;
|
||||||
|
widget.data.newPadServer = widget.data.padServer;
|
||||||
|
if (widget.data.newPadServer !== "https://demo.riot.im/etherpad/p/") {
|
||||||
|
this.editUseCustomServer = true
|
||||||
|
}
|
||||||
|
super.editWidget(widget);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -88,7 +88,16 @@ export class WidgetComponent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private wrapUrl(url: string): string {
|
private wrapUrl(url: string): string {
|
||||||
return this.wrapperUrl + encodeURIComponent(url);
|
let encodedURL = this.wrapperUrl + encodeURIComponent(url);
|
||||||
|
|
||||||
|
//don't URL encode $vars of the widget Spec
|
||||||
|
//TODO do the same with vars from the data object
|
||||||
|
encodedURL = encodedURL.replace(encodeURIComponent("$matrix_user_id"), "$matrix_user_id");
|
||||||
|
encodedURL = encodedURL.replace(encodeURIComponent("$matrix_room_id"), "$matrix_room_id");
|
||||||
|
encodedURL = encodedURL.replace(encodeURIComponent("$matrix_display_name"), "$matrix_display_name");
|
||||||
|
encodedURL = encodedURL.replace(encodeURIComponent("$matrix_avatar_url"), "$matrix_avatar_url");
|
||||||
|
|
||||||
|
return encodedURL;
|
||||||
}
|
}
|
||||||
|
|
||||||
private setWidgetUrl(widget: Widget) {
|
private setWidgetUrl(widget: Widget) {
|
||||||
|
@ -6,7 +6,7 @@ import { ToasterService } from "angular2-toaster";
|
|||||||
import { Integration } from "../shared/models/integration";
|
import { Integration } from "../shared/models/integration";
|
||||||
import { IntegrationService } from "../shared/integration.service";
|
import { IntegrationService } from "../shared/integration.service";
|
||||||
import * as _ from "lodash";
|
import * as _ from "lodash";
|
||||||
import { WIDGET_DIM_CUSTOM, WIDGET_DIM_YOUTUBE, WIDGET_DIM_TWITCH } from "../shared/models/widget";
|
import { WIDGET_DIM_CUSTOM, WIDGET_DIM_YOUTUBE, WIDGET_DIM_TWITCH, WIDGET_DIM_ETHERPAD } from "../shared/models/widget";
|
||||||
import { IntegrationComponent } from "../integration/integration.component";
|
import { IntegrationComponent } from "../integration/integration.component";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -79,6 +79,9 @@ export class RiotComponent {
|
|||||||
} else if (this.requestedScreen === "type_" + WIDGET_DIM_TWITCH) {
|
} else if (this.requestedScreen === "type_" + WIDGET_DIM_TWITCH) {
|
||||||
type = "widget";
|
type = "widget";
|
||||||
integrationType = "twitch";
|
integrationType = "twitch";
|
||||||
|
} else if (this.requestedScreen === "type_" + WIDGET_DIM_ETHERPAD) {
|
||||||
|
type = "widget";
|
||||||
|
integrationType = "etherpad";
|
||||||
} else {
|
} else {
|
||||||
console.log("Unknown screen requested: " + this.requestedScreen);
|
console.log("Unknown screen requested: " + this.requestedScreen);
|
||||||
}
|
}
|
||||||
|
@ -7,6 +7,7 @@ import { TravisCiConfigComponent } from "../configs/travisci/travisci-config.com
|
|||||||
import { CustomWidgetConfigComponent } from "../configs/widget/custom_widget/custom_widget-config.component";
|
import { CustomWidgetConfigComponent } from "../configs/widget/custom_widget/custom_widget-config.component";
|
||||||
import { YoutubeWidgetConfigComponent } from "../configs/widget/youtube/youtube-config.component";
|
import { YoutubeWidgetConfigComponent } from "../configs/widget/youtube/youtube-config.component";
|
||||||
import { TwitchWidgetConfigComponent } from "../configs/widget/twitch/twitch-config.component";
|
import { TwitchWidgetConfigComponent } from "../configs/widget/twitch/twitch-config.component";
|
||||||
|
import { EtherpadWidgetConfigComponent } from "../configs/widget/etherpad/etherpad-config.component";
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class IntegrationService {
|
export class IntegrationService {
|
||||||
@ -24,6 +25,7 @@ export class IntegrationService {
|
|||||||
"customwidget": true,
|
"customwidget": true,
|
||||||
"youtube": true,
|
"youtube": true,
|
||||||
"twitch": true,
|
"twitch": true,
|
||||||
|
"etherpad": true,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -39,6 +41,7 @@ export class IntegrationService {
|
|||||||
"customwidget": CustomWidgetConfigComponent,
|
"customwidget": CustomWidgetConfigComponent,
|
||||||
"youtube": YoutubeWidgetConfigComponent,
|
"youtube": YoutubeWidgetConfigComponent,
|
||||||
"twitch": TwitchWidgetConfigComponent,
|
"twitch": TwitchWidgetConfigComponent,
|
||||||
|
"etherpad": EtherpadWidgetConfigComponent,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -14,6 +14,7 @@ export const WIDGET_SCALAR_TWITCH = "";
|
|||||||
export const WIDGET_DIM_CUSTOM = "dimension-customwidget";
|
export const WIDGET_DIM_CUSTOM = "dimension-customwidget";
|
||||||
export const WIDGET_DIM_YOUTUBE = "dimension-youtube";
|
export const WIDGET_DIM_YOUTUBE = "dimension-youtube";
|
||||||
export const WIDGET_DIM_TWITCH = "dimension-twitch";
|
export const WIDGET_DIM_TWITCH = "dimension-twitch";
|
||||||
|
export const WIDGET_DIM_ETHERPAD = "dimension-etherpad";
|
||||||
|
|
||||||
export interface Widget {
|
export interface Widget {
|
||||||
id: string;
|
id: string;
|
||||||
|
BIN
web/public/img/avatars/etherpad.png
Normal file
BIN
web/public/img/avatars/etherpad.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.0 KiB |
Loading…
Reference in New Issue
Block a user