mirror of https://github.com/requarks/wiki
NGPixel
8 years ago
parent
2aaebb3ce0
commit
87e780bea7
@ -1,55 +0,0 @@
|
||||
'use strict'
|
||||
|
||||
import $ from 'jquery'
|
||||
import Vue from 'vue'
|
||||
import _ from 'lodash'
|
||||
|
||||
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')
|
||||
}
|
||||
|
||||
module.exports = (mde, mdeModalOpenState) => {
|
||||
// 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()
|
||||
}
|
||||
}
|
||||
})
|
||||
return vueVideo
|
||||
}
|
||||
@ -0,0 +1,94 @@
|
||||
<template lang="pug">
|
||||
transition(:duration="400")
|
||||
.modal(v-show='isShown', v-cloak)
|
||||
transition(name='modal-background')
|
||||
.modal-background(v-show='isShown')
|
||||
.modal-container
|
||||
transition(name='modal-content')
|
||||
.modal-content(v-show='isShown')
|
||||
header.is-green
|
||||
span {{ $t('editor.videotitle') }}
|
||||
section
|
||||
label.label
|
||||
p.control.is-fullwidth
|
||||
input.input(type='text', placeholder='https://www.youtube.com/watch?v=xxxxxxxxxxx', v-model='link', ref='editorVideoInput', @keyup.enter='insertVideo', @keyup.esc='cancel')
|
||||
span.help.is-red(v-show='isInvalid') {{ $t('editor.videonotsupported') }}
|
||||
.note {{ $t('editor.videosupportedtitle') }}
|
||||
ul
|
||||
li
|
||||
i.icon-youtube-play
|
||||
span Youtube
|
||||
li
|
||||
i.icon-vimeo
|
||||
span Vimeo
|
||||
li
|
||||
i.icon-film
|
||||
span Dailymotion
|
||||
li
|
||||
i.icon-video
|
||||
span {{ $t('editor.videoanymp4file') }}
|
||||
footer
|
||||
a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('editor.discard') }}
|
||||
a.button.is-green(v-on:click='insertVideo') {{ $t('editor.videoinsert') }}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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')
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'editor-video',
|
||||
data () {
|
||||
return {
|
||||
link: '',
|
||||
isInvalid: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isShown () {
|
||||
return this.$store.state.editorVideo.shown
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
let self = this
|
||||
self.isInvalid = false
|
||||
self._.delay(() => {
|
||||
self.$refs.editorVideoInput.focus()
|
||||
}, 100)
|
||||
},
|
||||
cancel () {
|
||||
this.$store.dispatch('editorVideo/close')
|
||||
},
|
||||
insertVideo () {
|
||||
let self = this
|
||||
|
||||
if (this._.isEmpty(self.link) || self.link.length < 5) {
|
||||
this.isInvalid = true
|
||||
return
|
||||
}
|
||||
|
||||
let videoType = this._.findKey(videoRules, (vr) => {
|
||||
return vr.test(self.link)
|
||||
})
|
||||
if (this._.isNil(videoType)) {
|
||||
videoType = 'video'
|
||||
}
|
||||
let videoText = '[video](' + this.link + '){.' + videoType + '}\n'
|
||||
this.$store.dispatch('editor/insert', videoText)
|
||||
this.$store.dispatch('alert', {
|
||||
style: 'blue',
|
||||
icon: 'video',
|
||||
msg: self.$t('editor.videosuccess')
|
||||
})
|
||||
this.cancel()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$root.$on('editorVideo/init', this.init)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,19 @@
|
||||
'use strict'
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
shown: false
|
||||
},
|
||||
getters: {},
|
||||
mutations: {
|
||||
shownChange: (state, shownState) => { state.shown = shownState }
|
||||
},
|
||||
actions: {
|
||||
open({ commit }) {
|
||||
commit('shownChange', true)
|
||||
wikijs.$emit('editorVideo/init')
|
||||
},
|
||||
close({ commit }) { commit('shownChange', false) }
|
||||
}
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
|
||||
.modal#modal-editor-video
|
||||
.modal-background
|
||||
.modal-container
|
||||
.modal-content
|
||||
header.is-green Insert Video Player
|
||||
section
|
||||
label.label Enter the link to the video to be embedded:
|
||||
p.control.is-fullwidth
|
||||
input.input(type='text', placeholder='https://www.youtube.com/watch?v=xxxxxxxxxxx', v-model='link')
|
||||
span.help.is-red.is-hidden This URL is invalid or not supported!
|
||||
.note The following are supported:
|
||||
ul
|
||||
li
|
||||
i.icon-youtube-play
|
||||
span Youtube
|
||||
li
|
||||
i.icon-vimeo
|
||||
span Vimeo
|
||||
li
|
||||
i.icon-film
|
||||
span Dailymotion
|
||||
li
|
||||
i.icon-video
|
||||
span Any standard MP4 file
|
||||
footer
|
||||
a.button.is-grey.is-outlined(v-on:click='cancel') Discard
|
||||
a.button.is-green(v-on:click='insertVideo') Insert Video
|
||||
Loading…
Reference in new issue