优化gif演示

docs/gif/css/common.css

@@ -1,4 +1,6 @@
-html, body, .container {
+html,
+body,
+.container {
     height: 100%;
 }
 
@@ -9,43 +11,17 @@ html, body, .container {
 
 .part-top {
     display: flex;
+    align-items: center;
+    justify-content: center;
     height: 70%;
 }
 
+.part-top .artplayer {
+    width: 500px;
+    height: 500px;
+}
+
 .part-bottom {
     position: relative;
     height: 30%;
 }
-
-.part-left {
-    width: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.part-right {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.part-left .artplayer {
-    width: 500px;
-    height: 500px;
-    background: #fff;
-}
-
-.part-right .preview {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 500px;
-    height: 500px;
-    background: #f3f3f3;
-}
-
-.part-right .preview img {
-    max-width: 100%;
-}

docs/gif/index.html

@@ -18,12 +18,7 @@
 <body>
     <div class="container">
         <div class="part-top">
-            <div class="part-left">
+            <div class="artplayer"></div>
-                <div class="artplayer"></div>
-            </div>
-            <div class="part-right">
-                <div class="preview"></div>
-            </div>
         </div>
         <div class="part-bottom"></div>
     </div>

docs/uncompiled/artplayer-plugin-gif.js

@@ -2772,6 +2772,7 @@
     var isProcessing = false;
     var pressStartTime = 0;
     var progressTimer = null;
+    var isPress = false;
 
     function cleanTimer() {
       $progress.style.width = '0%';
@@ -2807,6 +2808,7 @@
       html: 'GIF',
       mounted: function mounted($gif) {
         proxy($gif, 'mousedown', function () {
+          isPress = true;
           cleanTimer();
           pressStartTime = new Date();
           notice.show(i18n.get('Long press, gif length is between 1 second and 5 seconds'));
@@ -2824,8 +2826,11 @@
             }, 50);
           })();
         });
-        proxy($gif, 'mouseup', function () {
+        proxy(document, 'mouseup', function () {
-          createGif();
+          if (isPress) {
+            isPress = false;
+            createGif();
+          }
         });
       }
     });

packages/artplayer-plugin-gif/src/index.js

@@ -53,6 +53,7 @@ function artplayerPluginGif(art) {
     let isProcessing = false;
     let pressStartTime = 0;
     let progressTimer = null;
+    let isPress = false;
 
     function cleanTimer() {
         $progress.style.width = '0%';
@@ -63,7 +64,6 @@ function artplayerPluginGif(art) {
     function createGif() {
         cleanTimer();
         const pressTime = new Date() - pressStartTime;
-
         if (isProcessing) {
             notice.show(i18n.get('There is another gif in the processing'));
         } else if (pressTime < 1000) {
@@ -90,6 +90,7 @@ function artplayerPluginGif(art) {
         html: 'GIF',
         mounted: $gif => {
             proxy($gif, 'mousedown', () => {
+                isPress = true;
                 cleanTimer();
                 pressStartTime = new Date();
                 notice.show(i18n.get('Long press, gif length is between 1 second and 5 seconds'));
@@ -106,8 +107,11 @@ function artplayerPluginGif(art) {
                 })();
             });
 
-            proxy($gif, 'mouseup', () => {
+            proxy(document, 'mouseup', () => {
-                createGif();
+                if (isPress) {
+                    isPress = false;
+                    createGif();
+                }
             });
         },
     });