Skip to content

Commit

Permalink
Merge pull request #163 from nnnnn319/dev
Browse files Browse the repository at this point in the history 
resolve video problem
  • Loading branch information
@IRONICBo
IRONICBo authored Feb 20, 2024
2 parents 0e756b6 + 1b20ea4 commit cab071b
Show file tree
Hide file tree
Showing 4 changed files with 618 additions and 529 deletions.
41 changes: 24 additions & 17 deletions cmd/gopcomm/yap/markdown-vue/src/components/MarkdownEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import Cherry from 'cherry-markdown'
import axios from 'axios'
// import Plyr from 'plyr';
import Plyr from 'plyr';
import 'plyr/dist/plyr.css'
// const player = new Plyr('#player');
// const p = new Plyr('video', {captions: {active: true}});
Expand Down Expand Up @@ -82,6 +83,7 @@ function fileUpload(file) {
// console.log("type", file.type)
// let type = file.type
// let url = 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4'
// vtt_src = "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
// onloadCallback(type, url)
}
Expand All @@ -90,7 +92,7 @@ function onloadCallback(type, url) {
let imgMdStr = ""
if (/mp4|avi|rmvb/i.test(type)) {
// 会渲染成video标签 需要替换video1标签 <video controls src=""> <video>
imgMdStr = `!video[${type}](${url})`;
imgMdStr = `!video[${type}](${url})(${vtt_src})`;
} else if (/mp3/i.test(type)) {
imgMdStr = `!audio[${type}](${url})`;
} else if (/bmp|gif|jpg|jpeg|png/i.test(type)) {
Expand All @@ -113,8 +115,11 @@ function urlProcessor(url, srcType) {
function afterChange(text, html) {
this.content = text
// console.log("markdown", this.getCherryContent())
// console.log("html", this.getCherryHtml())
console.log("markdown", getCherryContent())
console.log("html", getCherryHtml())
const p = new Plyr('video', {captions: {active: true}});
// this.$emit('mdChange', html, text)
// this.$emit('input', text)
}
Expand Down Expand Up @@ -217,16 +222,16 @@ function initCherryMD(value, config) {
var defaultValue = value || ""
// 自定义工具栏 - 翻译按钮
var customMenuF = Cherry.createMenuHook('Translate', {
noIcon: true,
iconName: true,
name: 'Translate',
onClick: (selection) => {
console.log("点击翻译")
// 调用 提交函数
this.tranlate_md()
},
});
// var customMenuF = Cherry.createMenuHook('Translate', {
// noIcon: true,
// iconName: true,
// name: 'Translate',
// onClick: (selection) => {
// console.log("点击翻译")
// // 调用 提交函数
// this.tranlate_md()
// },
// });
// 测试数据
// !video[video/mp4](https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4)
Expand Down Expand Up @@ -255,6 +260,7 @@ function initCherryMD(value, config) {
}
});
},
rule(str) {
return {
// reg: /^!video.*.mp4\)/
Expand Down Expand Up @@ -486,7 +492,8 @@ function initCherryMD(value, config) {
'settings', 'theme',
],
toolbarRight: ['fullScreen', '|', 'customMenuFName'],
// toolbarRight: ['fullScreen', '|', 'customMenuFName'],
toolbarRight: ['fullScreen'],
bubble: ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'quote', 'ruby', '|', 'size',
'color'
],
Expand All @@ -497,7 +504,7 @@ function initCherryMD(value, config) {
// customMenuAName: customMenuA,
// customMenuBName: customMenuB,
// customMenuCName: customMenuC,
customMenuFName: customMenuF
// customMenuFName: customMenuF
},
},
// 打开draw.io编辑页的url，如果为空则drawio按钮失效
Expand Down Expand Up @@ -807,5 +814,5 @@ export default {
</script>

<style>
@import url('https://cdn.plyr.io/3.6.8/plyr.css');
/* @import url('https://cdn.plyr.io/3.6.8/plyr.css'); */
</style>
115 changes: 98 additions & 17 deletions cmd/gopcomm/yap/markdown-vue/src/components/MarkdownViewer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
</template>
<script>
import CherryEngine from 'cherry-markdown/dist/cherry-markdown.engine.core'
// import Plyr from 'plyr';
// import 'plyr/dist/plyr.css'
const cherryEngineInstance = new CherryEngine();
export default {
name: "MarkdownViewer",
Expand All @@ -20,38 +23,81 @@ export default {
},
data() {
return {
content: '<h1>Hello World!</h1>' // HTML内容
content: "Hello World",
// content: '!video[video/mp4](https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4)(https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt)', // HTML内容
vtts: [],
videos: []
}
},
watch: {
md(newValue) {
// 在这里处理新值的更新逻辑
console.log("更新子组件值", newValue)
this.computeOut(newValue)
}
},
beforeMount() {
// const cherryEngineInstance = new CherryEngine();
// var html = this.getVttfile(this.md)
// console.log("++++++++", html)
// var htmlContent = cherryEngineInstance.makeHtml(html);
// console.log("html content", htmlContent)
// htmlContent = this.replaceVideo(htmlContent)
// htmlContent = this.replaceGoplus(htmlContent)
// this.content = htmlContent
// console.log("result", htmlContent)
this.computeOut(this.md)
},
mounted() {
console.log("mounted", this.md)
const cherryEngineInstance = new CherryEngine();
// markdown语法以 <code>gop 开头</code>结尾
// video <video>开头 </video>结尾
// <code>gop println&quot;&quot;</code>
// var md = this.replaceGoplus(this.md)
var htmlContent = cherryEngineInstance.makeHtml(this.md);
console.log("html content", htmlContent)
htmlContent = this.replaceVideo(htmlContent)
htmlContent = this.replaceGoplus(htmlContent)
this.content = htmlContent
console.log("result", htmlContent)
// console.log("mounted", this.md)
// const cherryEngineInstance = new CherryEngine();
// // markdown语法以 <code>gop 开头</code>结尾
// // video <video>开头 </video>结尾
// // <code>gop println&quot;&quot;</code>
// // var md = this.replaceGoplus(this.md)
// var html = this.getVttfile(this.md)
// console.log("++++++++", html)
// var htmlContent = cherryEngineInstance.makeHtml(html);
// console.log("html content", htmlContent)
// htmlContent = this.replaceVideo(htmlContent)
// htmlContent = this.replaceGoplus(htmlContent)
// this.content = htmlContent
// console.log("result", htmlContent)
// const p = new Plyr('video', {captions: {active: true}});
},
methods: {
computeOut(md) {
// const cherryEngineInstance = new CherryEngine();
var html = this.getVttfile(md)
console.log("++++++++", html)
var htmlContent = cherryEngineInstance.makeHtml(html);
console.log("html content", htmlContent)
htmlContent = this.replaceVideo(htmlContent)
htmlContent = this.replaceGoplus(htmlContent)
this.content = htmlContent
console.log("result", htmlContent)
},
replaceVideo(htmlContent) {
var regex = /<video(.*?)<\/video>/g
var matches = htmlContent.match(regex); // 使用match()函数获取匹配结果
console.log("m", matches)
let now_s = this.videos
let now_v = this.vtts
if(matches) {
for(let i=0; i<matches.length; i++) {
console.log("match", matches[i])
// htmlContent = htmlContent.replace(matches[i], "video replace" )
htmlContent = htmlContent.replace(matches[i], function(h) {
var regex1 = /src="(.*?)">video\/mp4/
let src = matches[i].match(regex1)[1]
console.log("src", src)
return `<div><video controls crossorigin playsinline data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player"><source src=${src} type="video/mp4" size="576"/><track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default/><track kind="captions" label="Français" srclang="fr" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"/><a href=${src} download>Download</a></video></div>`
let src_a = now_s[i]
// console.log("---------", this.videos)
let vtt_a = now_v[i]
console.log("=========duibi", src, src_a)
// console.log("src", src)
return `<div><video controls crossorigin playsinline data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player"><source src=${src_a} type="video/mp4" size="576"/><track kind="captions" label="English" srclang="en" src=${vtt_a} default/><track kind="captions" label="Français" srclang="fr" src=${vtt_a}/><a href=${src_a} download>Download</a></video></div>`
})
}
console.log("replace")
Expand All @@ -60,7 +106,42 @@ export default {
}
return htmlContent
},
replaceGoplus(htmlContent) {
getVttfile(mdContent) {
// let reg1 = /^!video.*\)/g
let reg1 = /!video(.*?)\((.*?)\)\((.*?)\)/g
let sttt = reg1.exec(mdContent)
console.log("sttt", sttt)
// let p_str = sttt[0]
// console.log(p_str)
var replace_vtt = ""
if(sttt) {
for(let i = 0; i<sttt.length; i++) {
let p_str = sttt[i]
const regex = /\((.*?)\)/g; // 定义正则表达式，其中 \() 表示左括号，(.*?) 表示非贪婪模式匹配任意字符，\)) 表示右括号
const matchResult = p_str.match(regex); // 使用 match 函数进行匹配
let video_src = ""
if (matchResult && matchResult[1]) {
console.log("提取到的结果为：" , matchResult[0],"===", matchResult[1]);
replace_vtt = mdContent.replace(matchResult[1], "")
matchResult[1] = matchResult[1].replace("(", "")
matchResult[0] = matchResult[0].replace("(", "")
matchResult[1] = matchResult[1].replace(")", "")
matchResult[0] = matchResult[0].replace(")", "")
this.vtts.push(matchResult[1])
this.videos.push(matchResult[0])
console.log('temp', replace_vtt)
}
}
return replace_vtt
}
// 替换一下
console.log(this.videos, this.vtts)
return mdContent
},
replaceGoplus(htmlContent) {
// 获取 data-lang 如果是gop 就进行匹配
var regex_l = /data-lang="(.*?)"/
var m_lan = htmlContent.match(regex_l)
Expand Down
989 changes: 495 additions & 494 deletions cmd/gopcomm/yap/static/GoplusMarkdown/GoplusMarkdown.umd.cjs
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion cmd/gopcomm/yap/static/GoplusMarkdown/style.css
View file

Large diffs are not rendered by default.

0 comments on commit cab071b

Please sign in to comment.