wiki/client/js/components/editor-video.js

/* global $, Vue, mde, _ */

const videoRules = {
  'youtube': new RegExp(/(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|&v(?:i)?=))([^#&?]*).*/, 'i'),
  'vimeo': new RegExp(/vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/(?:[^/]*)\/videos\/|album\/(?:\d+)\/video\/|)(\d+)(?:$|\/|\?)/, 'i'),
  'dailymotion': new RegExp(/(?:dailymotion\.com(?:\/embed)?(?:\/video|\/hub)|dai\.ly)\/([0-9a-z]+)(?:[-_0-9a-zA-Z]+(?:#video=)?([a-z0-9]+)?)?/, 'i')
}

// Vue Video instance

let vueVideo = new Vue({
  el: '#modal-editor-video',
  data: {
    link: ''
  },
  methods: {
    open: (ev) => {
      $('#modal-editor-video').addClass('is-active')
      $('#modal-editor-video input').focus()
    },
    cancel: (ev) => {
      mdeModalOpenState = false // eslint-disable-line no-undef
      $('#modal-editor-video').removeClass('is-active')
      vueVideo.link = ''
    },
    insertVideo: (ev) => {
      if (mde.codemirror.doc.somethingSelected()) {
        mde.codemirror.execCommand('singleSelection')
      }

      // Guess video type

      let videoType = _.findKey(videoRules, (vr) => {
        return vr.test(vueVideo.link)
      })
      if (_.isNil(videoType)) {
        videoType = 'video'
      }

      // Insert video tag

      let videoText = '[video](' + vueVideo.link + '){.' + videoType + '}\n'

      mde.codemirror.doc.replaceSelection(videoText)
      vueVideo.cancel()
    }
  }
})