update autoPlayback

packages/artplayer/package.json

@@ -1,7 +1,7 @@
 {
     "license": "MIT",
     "name": "artplayer",
-    "version": "4.5.0",
+    "version": "4.5.1",
     "main": "dist/artplayer.js",
     "types": "types/artplayer.d.ts",
     "homepage": "https://artplayer.org",

packages/artplayer/src/i18n/cs.json

@@ -31,5 +31,6 @@
     "PIP Not Supported": "Režim PIP není podporován",
     "Fullscreen Not Supported": "Režim celé obrazovky není podporován",
     "Subtitle Offset": "Posun titulků",
-    "Auto playback at": "Automatické přehrávání za"
+    "Last Seen": "Naposledy viděn",
+    "Jump Play": "Hra na skok"
 }

packages/artplayer/src/i18n/pl.json

@@ -31,5 +31,6 @@
     "PIP Not Supported": "Tryb PiP nieobsługiwany",
     "Fullscreen Not Supported": "Pełny ekran nieobsługiwany",
     "Subtitle Offset": "Przesunięcie napisów",
-    "Auto playback at": "Automatyczne odtwarzanie za"
+    "Last Seen": "Ostatnio widziany",
+    "Jump Play": "Skocz do gry"
 }

packages/artplayer/src/i18n/zh-cn.json

@@ -31,5 +31,6 @@
     "PIP Not Supported": "不支持画中画",
     "Fullscreen Not Supported": "不支持全屏",
     "Subtitle Offset": "字幕偏移",
-    "Auto playback at": "已为您定位至"
+    "Last Seen": "上次看到",
+    "Jump Play": "跳转播放"
 }

packages/artplayer/src/i18n/zh-tw.json

@@ -31,5 +31,6 @@
     "PIP Not Supported": "不支持畫中畫",
     "Fullscreen Not Supported": "不支持全屏",
     "Subtitle Offset": "字幕偏移",
-    "Auto playback at": "已為您定位至"
+    "Last Seen": "上次看到",
+    "Jump Play": "跳轉播放"
 }

packages/artplayer/src/icons/close.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1655876154826" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="22">
+<path d="M571.733333 512l268.8-268.8c17.066667-17.066667 17.066667-42.666667 0-59.733333-17.066667-17.066667-42.666667-17.066667-59.733333 0L512 452.266667 243.2 183.466667c-17.066667-17.066667-42.666667-17.066667-59.733333 0-17.066667 17.066667-17.066667 42.666667 0 59.733333L452.266667 512 183.466667 780.8c-17.066667 17.066667-17.066667 42.666667 0 59.733333 8.533333 8.533333 19.2 12.8 29.866666 12.8s21.333333-4.266667 29.866667-12.8L512 571.733333l268.8 268.8c8.533333 8.533333 19.2 12.8 29.866667 12.8s21.333333-4.266667 29.866666-12.8c17.066667-17.066667 17.066667-42.666667 0-59.733333L571.733333 512z" p-id="2131">
+</path>
+</svg>

packages/artplayer/src/icons/index.js

@@ -24,6 +24,7 @@ import switchOn from 'bundle-text:./switch-on.svg';
 import switchOff from 'bundle-text:./switch-off.svg';
 import flip from 'bundle-text:./flip.svg';
 import error from 'bundle-text:./error.svg';
+import close from 'bundle-text:./close.svg';
 
 export default class Icons {
     constructor(art) {
@@ -53,6 +54,7 @@ export default class Icons {
             switchOn,
             switchOff,
             error,
+            close,
             ...art.option.icons,
         };
 

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');
+            });
         }
     });
 

packages/artplayer/src/style/plugins.less

@@ -23,6 +23,41 @@
         background-color: rgba(0, 0, 0, 0.5);
     }
 
+    .art-layer-autoPlayback {
+        display: none;
+        align-items: center;
+        position: absolute;
+        left: 20px;
+        bottom: 60px;
+        border-radius: 3px;
+        padding: 10px;
+        font-size: 13px;
+        line-height: 1;
+        background-color: rgb(0 0 0 / 80%);
+
+        .art-autoPlayback-close {
+            display: flex;
+            align-items: center;
+            margin-right: 10px;
+            cursor: pointer;
+
+            svg {
+                width: 15px;
+                height: 15px;
+                fill: #00c9ff;
+            }
+        }
+
+        .art-autoPlayback-last {
+            margin-right: 10px;
+        }
+
+        .art-autoPlayback-jump {
+            color: #00c9ff;
+            cursor: pointer;
+        }
+    }
+
     &.art-lock {
         .art-bottom {
             display: none !important;