Fix handling of videos inside quill

[Ticket: #623]

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"

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;

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;