add error icon

packages/artplayer-document/docs/en/Options.mdx

@@ -991,6 +991,7 @@ var art = new Artplayer({
         fullscreenWebOn: '',
         switchOn: '',
         switchOff: '',
+        error: '',
         indicator: '',
     },
 });

packages/artplayer-document/docs/zh-cn/Options.mdx

@@ -989,6 +989,7 @@ var art = new Artplayer({
         fullscreenWebOn: '',
         switchOn: '',
         switchOff: '',
+        error: '',
         indicator: '',
     },
 });

packages/artplayer/src/icons/error.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="1652850026663" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2749" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50">
+<path d="M593.8176 168.5504l356.00384 595.21024c26.15296 43.74528 10.73152 99.7376-34.44736 125.05088-14.39744 8.06912-30.72 12.30848-47.37024 12.30848H155.97568C103.75168 901.12 61.44 860.16 61.44 809.61536c0-16.09728 4.38272-31.92832 12.71808-45.8752L430.16192 168.5504c26.17344-43.7248 84.00896-58.65472 129.20832-33.34144a93.0816 93.0816 0 0 1 34.44736 33.34144zM512 819.2a61.44 61.44 0 1 0 0-122.88 61.44 61.44 0 0 0 0 122.88z m0-512a72.31488 72.31488 0 0 0-71.76192 81.3056l25.72288 205.7216a46.40768 46.40768 0 0 0 92.07808 0l25.72288-205.74208A72.31488 72.31488 0 0 0 512 307.2z" p-id="2750">
+</path>
+</svg>

packages/artplayer/src/icons/index.js

@@ -23,6 +23,7 @@ import fullscreenWebOn from 'bundle-text:./fullscreen-web-on.svg';
 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';
 
 export default class Icons {
     constructor(art) {
@@ -51,6 +52,7 @@ export default class Icons {
             fullscreenWebOn,
             switchOn,
             switchOff,
+            error,
             ...art.option.icons,
         };
 

packages/artplayer/src/mask.js

@@ -1,12 +1,23 @@
-import { append } from './utils';
+import { append, setStyle } from './utils';
 import Component from './utils/component';
 
 export default class Mask extends Component {
     constructor(art) {
         super(art);
+
         this.name = 'mask';
         const { template, icons, events } = art;
-        append(template.$state, icons.state);
+
+        const $state = append(template.$state, icons.state);
+        const $error = append(template.$state, icons.error);
+
+        setStyle($error, 'display', 'none');
+
+        art.on('destroy', () => {
+            setStyle($state, 'display', 'none');
+            setStyle($error, 'display', null);
+        });
+
         events.proxy(template.$state, 'click', () => art.play());
     }
 }

packages/artplayer/src/player/eventInit.js

@@ -68,8 +68,9 @@ export default function eventInit(art) {
             notice.show = `${i18n.get('Reconnect')}: ${reconnectTime}`;
             art.emit('error', reconnectTime);
         } else {
+            art.mask.show = true;
             art.loading.show = false;
-            art.controls.show = false;
+            art.controls.show = true;
             addClass($player, 'art-error');
             await sleep(constructor.RECONNECT_SLEEP_TIME);
             notice.show = i18n.get('Video Load Failed');