From 5c067c2c47c564eca7b7a5593dc77458a71c5041 Mon Sep 17 00:00:00 2001
From: Harvey Zack <laozhaochaguan@hotmail.com>
Date: Sun, 2 Dec 2018 10:37:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=9C=AC=E5=9C=B0=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/lab/js/example.js                        | 10 +--
 docs/uncompiled/artplayer.js                  | 58 ++++++++++++++++-
 .../plugins/artplayer-plugin-localPreview.js  | 63 +++++++++++++++++--
 3 files changed, 120 insertions(+), 11 deletions(-)

diff --git a/docs/lab/js/example.js b/docs/lab/js/example.js
index d6a32fa44..c9a76047a 100644
--- a/docs/lab/js/example.js
+++ b/docs/lab/js/example.js
@@ -96,13 +96,10 @@ var art = new Artplayer({
     ],
     controls: [
         {
-            name: 'line',
+            name: 'preview',
             position: 'right',
             index: 1,
-            html: '主线',
-            click: function() {
-                console.log('click line');
-            },
+            html: '打开'
         },
     ],
     icons: {
@@ -111,6 +108,9 @@ var art = new Artplayer({
 });
 
 art.on('firstCanplay', () => {
+    var preview = document.querySelector('.art-control-preview');
+    art.plugins.artplayerPluginLocalPreview.attach(preview);
+
     art.on('resize', $player => {
         art.controls.quality.show();
         art.controls.setting.show();
diff --git a/docs/uncompiled/artplayer.js b/docs/uncompiled/artplayer.js
index 5633beb66..2b43558f2 100644
--- a/docs/uncompiled/artplayer.js
+++ b/docs/uncompiled/artplayer.js
@@ -5535,9 +5535,63 @@
     };
   }
 
+  function i18nMix$1(i18n) {
+    i18n.update({
+      'zh-cn': {
+        'Only file types are supported': '只支持文件类型',
+        'Load local video successfully': '加载本地视频成功'
+      },
+      'zh-tw': {
+        'Only file types are supported': '只支持文件類型',
+        'Load local video successfully': '加載本地視頻成功'
+      }
+    });
+  }
+
   function artplayerPluginLocalPreview(art) {
-    var getExt = art.constructor.utils.getExt;
-    return {// TODO...
+    var _art$constructor$util = art.constructor.utils,
+        getExt = _art$constructor$util.getExt,
+        append = _art$constructor$util.append,
+        setStyle = _art$constructor$util.setStyle,
+        setStyles = _art$constructor$util.setStyles;
+    var formats = ['mp4', 'ogg', 'webm'];
+    var proxy = art.events.proxy,
+        notice = art.notice,
+        i18n = art.i18n,
+        template = art.template;
+    i18nMix$1(i18n);
+    return {
+      attach: function attach(target) {
+        console.log(target);
+        var $input = append(target, '<input type="file">');
+        setStyle(target, 'position', 'relative');
+        setStyles($input, {
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          left: '0',
+          top: '0',
+          opacity: '0'
+        });
+        proxy($input, 'change', function () {
+          var file = $input.files[0];
+
+          if (!file) {
+            return;
+          }
+
+          var ext = getExt(file.name);
+
+          if (ext && formats.includes(ext)) {
+            template.$video.src = URL.createObjectURL(file);
+            notice.show(i18n.get('Load local video successfully'));
+          } else {
+            var tip = "".concat(i18n.get('Only file types are supported'), ": ").concat(formats.toString());
+            notice.show(tip, true, 3000);
+            console.warn(tip);
+          }
+        });
+      }
     };
   }
 
diff --git a/packages/artplayer/src/plugins/artplayer-plugin-localPreview.js b/packages/artplayer/src/plugins/artplayer-plugin-localPreview.js
index 80b71c162..244c3a8aa 100644
--- a/packages/artplayer/src/plugins/artplayer-plugin-localPreview.js
+++ b/packages/artplayer/src/plugins/artplayer-plugin-localPreview.js
@@ -1,7 +1,62 @@
+function i18nMix(i18n) {
+    i18n.update({
+        'zh-cn': {
+            'Only file types are supported': '只支持文件类型',
+            'Load local video successfully': '加载本地视频成功',
+        },
+        'zh-tw': {
+            'Only file types are supported': '只支持文件類型',
+            'Load local video successfully': '加載本地視頻成功',
+        },
+    });
+}
+
 export default function artplayerPluginLocalPreview(art) {
-    const { getExt } = art.constructor.utils;
-    const formats = ['mp4', 'ogg', 'webm', 'srt', 'vtt'];
+    const {
+        getExt,
+        append,
+        setStyle,
+        setStyles,
+    } = art.constructor.utils;
+    const formats = ['mp4', 'ogg', 'webm'];
+    const {
+        events: {
+            proxy,
+        },
+        notice,
+        i18n,
+        template,
+    } = art;
+    i18nMix(i18n);
+
     return {
-        // TODO...
+        attach(target) {
+            console.log(target);
+            const $input = append(target, '<input type="file">');
+            setStyle(target, 'position', 'relative');
+            setStyles($input, {
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                left: '0',
+                top: '0',
+                opacity: '0',
+            });
+            proxy($input, 'change', () => {
+                const file = $input.files[0];
+                if (!file) {
+                    return;
+                }
+                const ext = getExt(file.name);
+                if (ext && formats.includes(ext)) {
+                    template.$video.src = URL.createObjectURL(file);
+                    notice.show(i18n.get('Load local video successfully'));
+                } else {
+                    const tip = `${i18n.get('Only file types are supported')}: ${formats.toString()}`;
+                    notice.show(tip, true, 3000);
+                    console.warn(tip);
+                }
+            });
+        },
     };
-}
\ No newline at end of file
+}