diff options
Diffstat (limited to 'app/assets/javascripts/static_site_editor/rich_content_editor/modals/insert_video_modal.vue')
-rw-r--r-- | app/assets/javascripts/static_site_editor/rich_content_editor/modals/insert_video_modal.vue | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/modals/insert_video_modal.vue b/app/assets/javascripts/static_site_editor/rich_content_editor/modals/insert_video_modal.vue new file mode 100644 index 00000000000..99bb2080610 --- /dev/null +++ b/app/assets/javascripts/static_site_editor/rich_content_editor/modals/insert_video_modal.vue @@ -0,0 +1,91 @@ +<script> +import { GlModal, GlFormGroup, GlFormInput, GlSprintf } from '@gitlab/ui'; +import { isSafeURL } from '~/lib/utils/url_utility'; +import { __ } from '~/locale'; +import { YOUTUBE_URL, YOUTUBE_EMBED_URL } from '../constants'; + +export default { + components: { + GlModal, + GlFormGroup, + GlFormInput, + GlSprintf, + }, + data() { + return { + url: null, + urlError: null, + description: __( + 'If the YouTube URL is https://www.youtube.com/watch?v=0t1DgySidms then the video ID is %{id}', + ), + }; + }, + modalTitle: __('Insert a video'), + okTitle: __('Insert video'), + label: __('YouTube URL or ID'), + methods: { + show() { + this.urlError = null; + this.url = null; + + this.$refs.modal.show(); + }, + onPrimary(event) { + this.submitURL(event); + }, + submitURL(event) { + const url = this.generateUrl(); + + if (!url) { + event.preventDefault(); + return; + } + + this.$emit('insertVideo', url); + }, + generateUrl() { + let { url } = this; + const reYouTubeId = /^[A-z0-9]*$/; + const reYouTubeUrl = RegExp(`${YOUTUBE_URL}/(embed/|watch\\?v=)([A-z0-9]+)`); + + if (reYouTubeId.test(url)) { + url = `${YOUTUBE_EMBED_URL}/${url}`; + } else if (reYouTubeUrl.test(url)) { + url = `${YOUTUBE_EMBED_URL}/${reYouTubeUrl.exec(url)[2]}`; + } + + if (!isSafeURL(url) || !reYouTubeUrl.test(url)) { + this.urlError = __('Please provide a valid YouTube URL or ID'); + this.$refs.urlInput.$el.focus(); + return null; + } + + return url; + }, + }, +}; +</script> +<template> + <gl-modal + ref="modal" + size="sm" + modal-id="insert-video-modal" + :title="$options.modalTitle" + :ok-title="$options.okTitle" + @primary="onPrimary" + > + <gl-form-group + :label="$options.label" + label-for="video-modal-url-input" + :state="!Boolean(urlError)" + :invalid-feedback="urlError" + > + <gl-form-input id="video-modal-url-input" ref="urlInput" v-model="url" /> + <gl-sprintf slot="description" :message="description" class="text-gl-muted"> + <template #id> + <strong>{{ __('0t1DgySidms') }}</strong> + </template> + </gl-sprintf> + </gl-form-group> + </gl-modal> +</template> |