update autoPlayback

packages/artplayer/src/plugins/autoPlayback.js

@@ -1,17 +1,34 @@
-import { secondToTime, setStyle } from '../utils';
+import { secondToTime, setStyle, query, append } from '../utils';
 
 export default function autoPlayback(art) {
     const {
         i18n,
+        icons,
         storage,
         constructor,
+        events: { proxy },
         template: { $poster },
     } = art;
 
+    const $autoPlayback = art.layers.add({
+        name: 'autoPlayback',
+        html: `
+            <div class="art-autoPlayback-close"></div>
+            <div class="art-autoPlayback-last"></div>
+            <div class="art-autoPlayback-jump"></div>
+        `,
+    });
+
+    const $last = query('.art-autoPlayback-last', $autoPlayback);
+    const $jump = query('.art-autoPlayback-jump', $autoPlayback);
+    const $close = query('.art-autoPlayback-close', $autoPlayback);
+
     art.on('video:timeupdate', () => {
         const times = storage.get('times') || {};
         const keys = Object.keys(times);
-        if (keys.length > constructor.AUTO_PLAYBACK_MAX) delete times[keys[0]];
+        if (keys.length > constructor.AUTO_PLAYBACK_MAX) {
+            delete times[keys[0]];
+        }
         times[art.option.url] = art.currentTime;
         storage.set('times', times);
     });
@@ -20,9 +37,26 @@ export default function autoPlayback(art) {
         const times = storage.get('times') || {};
         const currentTime = times[art.option.url];
         if (currentTime) {
-            art.seek = currentTime;
-            setStyle($poster, 'display', 'none');
-            art.notice.show = `${i18n.get('Auto playback at')} ${secondToTime(currentTime)}`;
+            append($close, icons.close);
+            setStyle($autoPlayback, 'display', 'flex');
+
+            $last.innerText = `${i18n.get('Last Seen')} ${secondToTime(currentTime)}`;
+            $jump.innerText = i18n.get('Jump Play');
+
+            proxy($close, 'click', () => {
+                setStyle($autoPlayback, 'display', 'none');
+            });
+
+            proxy($jump, 'click', () => {
+                art.seek = currentTime;
+                art.play();
+                setStyle($poster, 'display', 'none');
+                setStyle($autoPlayback, 'display', 'none');
+            });
+
+            art.on('video:timeupdate', () => {
+                setStyle($autoPlayback, 'display', 'none');
+            });
         }
     });