support dplayer

cheney-yan · Jan 26, 2020 · 1d2b3c9 · 1d2b3c9
1 parent 4c48461
commit 1d2b3c9
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 15 deletions.
diff --git a/app/views/default/manage.pug b/app/views/default/manage.pug
@@ -98,7 +98,12 @@ block content
                   .col-sm-4
                     label= i.value.label
                   .col-sm-8
-                    input.form-control(type='text',placeholder=i.value.placeholder, name=i.key , value=i.value.value)
+                    -if(i.value.options)
+                      select.form-control(name=i.key,value=i.value.value)
+                        each j in i.value.options
+                          option(value=j.value, selected=j.value==i.value.value ? 'selected' : null)= j.label
+                    -else
+                      input.form-control(type='text',placeholder=i.value.placeholder, name=i.key , value=i.value.value)
               .form-group.text-center
                 button.btn.btn-default(type='submit')= __('save')
         .panel.panel-default

diff --git a/plugins/preview.media.js b/plugins/preview.media.js
@@ -3,22 +3,59 @@
  */
 const name = 'mediaParse'
 
-const version = '1.0'
+const version = '1.1'
 
 module.exports = ({getSource , getPluginOption , setPluginOption}) => {
 
+  const preview = {};
+  let videoFormatKey = 'video_previewable_formats'
+  let videoPlayerKey = 'video_previewable_player'
+
+  let videoFormatOption = getPluginOption(videoFormatKey) || {};
+  let videoPlayerOption = getPluginOption(videoPlayerKey) || {};
+  let videoFormat = 'mp4,ogg,webm,mpeg,m4v'
+  let videoPlayer = 'default'
+
+  if( videoFormatOption.value ){
+    videoFormat = videoFormatOption.value
+    videoPlayer = videoPlayerOption.value
+  }else{
+    setPluginOption(videoFormatKey,{value:videoFormat , label:'支持预览的视频后缀','placeholder':'文件扩展名，多个用逗号分隔'})
+  }
+
+  if( videoPlayerOption.value ){
+    videoPlayer = videoPlayerOption.value
+  }else{
+    setPluginOption(videoPlayerKey,{value:videoPlayer , label:'视频预览播放器',options:[{'label':'默认','value':'default'},{'label':'DPlayer','value':'dplayer'}]})
+  }
+
   const decodeUrl = (req) => {
     return req.path + ( req.querystring ? '?' + req.querystring.replace(/preview&?/,'') : '')
   }
 
   const video = async (data , req) => {
+    let videoPlayer = (getPluginOption(videoPlayerKey) || {value:'default'}).value;
+
     return {
       ...data,
       // body:`
       //   <video src="${req.path}" style="min-width: 90%;min-height: 60vh;" controls="controls" autoplay="autoplay"></video>
       // `,
-       body:'<iframe></iframe><script>var content=\'<style>video{width:100%;height:100%;background:#000;}body{margin:0;padding:0;}</style><video src=\"'+decodeUrl(req)+'\" controls=\"controls\" autoplay=\"autoplay\"></video>\';document.querySelector("iframe").contentWindow.document.write(content);</script>'
-
+       body: videoPlayer == 'dplayer' ? `
+        <script src="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.js"></script>
+        <link href="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.css" rel="stylesheet" />
+        <div id="dplayer" style="margin-top:32px;height:60vh;">
+        <script>
+          var dp = new DPlayer({
+            container: document.getElementById('dplayer'),
+            video: {
+                url: '${decodeUrl(req)}',
+            },
+          });
+        </script>
+      ` : `
+        <iframe></iframe><script>var content='<style>video{width:100%;height:100%;background:#000;}body{margin:0;padding:0;}</style><video src="${decodeUrl(req)}" controls="controls" autoplay="autoplay"></video>';document.querySelector("iframe").contentWindow.document.write(content);</script>
+      `
     }
   }
 
@@ -41,17 +78,7 @@ module.exports = ({getSource , getPluginOption , setPluginOption}) => {
   }
 
 
-  const preview = {};
-  let videoKey = 'video_previewable_formats'
-  let videoOptions = getPluginOption(videoKey) || {};
-  let videoFormats = 'mp4,ogg,webm,mpeg,m4v'
-  if( videoOptions.value ){
-    videoFormats = videoOptions.value
-  }else{
-    setPluginOption(videoKey,{value:videoFormats , label:'支持预览的视频后缀','placeholder':'文件扩展名，多个用逗号分隔'})
-  }
-
-  videoFormats.split(',').forEach( ext => {
+  videoFormat.split(',').forEach( ext => {
     preview[ext] = video
   });