Merge pull request #163 from nnnnn319/dev

resolve video problem

cmd/gopcomm/yap/markdown-vue/src/components/MarkdownEditor.vue

@@ -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}});
 
@@ -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) 
 
 }
@@ -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)) {
@@ -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)
 }
@@ -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)
 
@@ -255,6 +260,7 @@ function initCherryMD(value, config) {
  }
  });
  },
+ 
  rule(str) {
  return {
  // reg: /^!video.*.mp4\)/
@@ -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'
  ],
@@ -497,7 +504,7 @@ function initCherryMD(value, config) {
  // customMenuAName: customMenuA,
  // customMenuBName: customMenuB,
  // customMenuCName: customMenuC,
- customMenuFName: customMenuF
+ // customMenuFName: customMenuF
  },
  },
  // 打开draw.io编辑页的url，如果为空则drawio按钮失效
@@ -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>

cmd/gopcomm/yap/markdown-vue/src/components/MarkdownViewer.vue

@@ -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",
@@ -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")
@@ -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)