All files / app/assets/javascripts/static_site_editor/rich_content_editor/modals insert_video_modal.vue

85.19% Statements 23/27
90% Branches 9/10
83.33% Functions 5/6
85.19% Lines 23/27

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94  4x 4x 4x 4x                   5x                                     3x     3x   3x 1x 1x     2x     3x 3x 3x   3x   3x 2x     3x 1x 1x 1x     2x         39x                                                    
<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]+)`);
 
I      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" />
      <template #description>
        <gl-sprintf :message="description" class="text-gl-muted">
          <template #id>
            <strong>{{ __('0t1DgySidms') }}</strong>
          </template>
        </gl-sprintf>
      </template>
    </gl-form-group>
  </gl-modal>
</template>