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 764ce81979ad332822b77d93a8efa8d46c187385..3d35a3c43dd4d42937e54d170ea75270d26a3e8b 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 a667f841e767403a0ef2706b9ec756474a0afdde..03950c427ec31025a400cc22a1e28a337d4e7b65 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 88bae55aa247270b488c93ce1dfa2c87e8db1eb0..c3b2018cc0574f85079ec6b9ada47f47fe1c79f0 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;