From c7538c4ce2a76dcdc039c59d9e3a6389c0b922df Mon Sep 17 00:00:00 2001
From: Ruben Bimberg <ruben.bimberg@mni.thm.de>
Date: Mon, 6 Sep 2021 13:29:18 +0200
Subject: [PATCH] Fix handling of videos inside quill
[Ticket: #623]
---
.../deep-ldialog/deep-ldialog.component.html | 2 +
.../deep-ldialog/deep-ldialog.component.scss | 2 +-
.../view-comment-data.component.ts | 40 ++++++++++++++++++-
3 files changed, 42 insertions(+), 2 deletions(-)
diff --git a/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.html b/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.html
index 764ce8197..3d35a3c43 100644
--- a/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.html
+++ b/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.html
@@ -9,6 +9,7 @@
<strong>{{'deepl.option-normal' | translate}}</strong>
</mat-radio-button>
<app-view-comment-data #normal
+ class="deepl-view-comment"
[maxTextCharacters]="data.maxTextCharacters"
[maxDataCharacters]="data.maxDataCharacters"
[isModerator]="data.isModerator"
@@ -19,6 +20,7 @@
<strong>{{'deepl.option-improved' | translate}}</strong>
</mat-radio-button>
<app-view-comment-data #improved
+ class="deepl-view-comment"
[maxTextCharacters]="data.maxTextCharacters"
[maxDataCharacters]="data.maxDataCharacters"
[isModerator]="data.isModerator"
diff --git a/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.scss b/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.scss
index a667f841e..03950c427 100644
--- a/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.scss
+++ b/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.scss
@@ -12,7 +12,7 @@
width: 100%;
}
- app-view-comment-data > div {
+ app-view-comment-data.deepl-view-comment > div {
background: var(--surface);
border-radius: 10px;
padding: 7px;
diff --git a/src/app/components/shared/view-comment-data/view-comment-data.component.ts b/src/app/components/shared/view-comment-data/view-comment-data.component.ts
index 88bae55aa..c3b2018cc 100644
--- a/src/app/components/shared/view-comment-data/view-comment-data.component.ts
+++ b/src/app/components/shared/view-comment-data/view-comment-data.component.ts
@@ -60,7 +60,7 @@ export class ViewCommentDataComponent implements OnInit, AfterViewInit {
container: participantToolbar,
handlers: {
image: () => this.handle('image'),
- video: () => this.handle('video'),
+ video: () => this.handleVideo(),
link: () => this.handleLink(),
formula: () => this.handle('formula')
}
@@ -268,6 +268,44 @@ export class ViewCommentDataComponent implements OnInit, AfterViewInit {
.subscribe(translation => tooltip.textbox.placeholder = translation);
}
+ private handleVideo(): void {
+ const quill = this.editor.quillEditor;
+ const tooltip = quill.theme.tooltip;
+ const originalSave = tooltip.save;
+ const originalHide = tooltip.hide;
+ tooltip.save = () => {
+ const range = quill.getSelection(true);
+ const value = this.getVideoUrl(tooltip.textbox.value);
+ if (value) {
+ quill.insertEmbed(range.index, 'video', value, 'user');
+ }
+ };
+ // Called on hide and save.
+ tooltip.hide = () => {
+ tooltip.save = originalSave;
+ tooltip.hide = originalHide;
+ tooltip.hide();
+ };
+ tooltip.edit('video');
+ this.translateService.get('quill.tooltip-placeholder-video')
+ .subscribe(translation => tooltip.textbox.placeholder = translation);
+ }
+
+ private getVideoUrl(url) {
+ let match = url.match(/^(?:(https?):\/\/)?(?:(?:www|m)\.)?youtube\.com\/watch.*v=([a-zA-Z0-9_-]+)/) ||
+ url.match(/^(?:(https?):\/\/)?(?:(?:www|m)\.)?youtu\.be\/([a-zA-Z0-9_-]+)/) ||
+ url.match(/^.*(youtu.be\/|v\/|e\/|u\/\w+\/|embed\/|v=)([^#&?]*).*/);
+ if (match && match[2].length === 11) {
+ return 'https://www.youtube-nocookie.com/embed/' + match[2] + '?showinfo=0';
+ }
+ match = url.match(/^(?:(https?):\/\/)?(?:www\.)?vimeo\.com\/(\d+)/);
+ if (match) {
+ return (match[1] || 'https') + '://player.vimeo.com/video/' + match[2] + '/';
+ }
+ return null;
+ }
+
+
private handle(type: string): void {
const quill = this.editor.quillEditor;
const tooltip = quill.theme.tooltip;
--
GitLab