压缩多余字符

packages/artplayer/src/contextmenu/aspectRatio.js

@@ -7,7 +7,7 @@ export default function aspectRatio(option) {
             ...option,
             html: `
                 ${i18n.get('Aspect ratio')}:
-                <span data-ratio="default" class="default current">${i18n.get('Default')}</span>
+                <span data-ratio="default" class="art-current">${i18n.get('Default')}</span>
                 <span data-ratio="4:3">4:3</span>
                 <span data-ratio="16:9">16:9</span>
             `,
@@ -22,7 +22,7 @@ export default function aspectRatio(option) {
                 art.on('aspectRatioChange', ratio => {
                     const $current = queryAll('span', $menu).find(item => item.dataset.ratio === ratio);
                     if ($current) {
-                        inverseClass($current, 'current');
+                        inverseClass($current, 'art-current');
                     }
                 });
             },

packages/artplayer/src/contextmenu/index.js

@@ -114,17 +114,11 @@ export default class Contextmenu {
     set show(value) {
         const { $player } = this.art.template;
         if (value) {
-            this.state = true;
-            addClass($player, 'artplayer-contextmenu-show');
+            addClass($player, 'art-contextmenu-show');
             this.art.emit('contextmenu:show');
         } else {
-            this.state = false;
-            removeClass($player, 'artplayer-contextmenu-show');
+            removeClass($player, 'art-contextmenu-show');
             this.art.emit('contextmenu:hide');
         }
     }
-
-    toggle() {
-        this.show = !this.state;
-    }
 }

packages/artplayer/src/contextmenu/playbackRate.js

@@ -9,7 +9,7 @@ export default function playbackRate(option) {
                 ${i18n.get('Play speed')}:
                 <span data-rate="0.5">0.5</span>
                 <span data-rate="0.75">0.75</span>
-                <span data-rate="1.0" class="normal current">${i18n.get('Normal')}</span>
+                <span data-rate="1.0" class="art-current">${i18n.get('Normal')}</span>
                 <span data-rate="1.25">1.25</span>
                 <span data-rate="1.5">1.5</span>
                 <span data-rate="2.0">2.0</span>
@@ -25,7 +25,7 @@ export default function playbackRate(option) {
                 art.on('playbackRateChange', rate => {
                     const $current = queryAll('span', $menu).find(item => Number(item.dataset.rate) === rate);
                     if ($current) {
-                        inverseClass($current, 'current');
+                        inverseClass($current, 'art-current');
                     }
                 });
             },

packages/artplayer/src/controls/index.js

@@ -172,17 +172,11 @@ export default class Controls {
     set show(value) {
         const { $player } = this.art.template;
         if (value) {
-            this.state = true;
-            addClass($player, 'artplayer-controls-show');
+            addClass($player, 'art-controls-show');
             this.art.emit('controls:show');
         } else {
-            this.state = false;
-            removeClass($player, 'artplayer-controls-show');
+            removeClass($player, 'art-controls-show');
             this.art.emit('controls:hide');
         }
     }
-
-    toggle() {
-        this.show = !this.state;
-    }
 }

packages/artplayer/src/controls/volume.js

@@ -66,7 +66,7 @@ export default function volume(option) {
                 isDroging = true;
             });
 
-            proxy($volumeHandle, 'mousemove', event => {
+            proxy(document, 'mousemove', event => {
                 if (isDroging) {
                     player.muted = false;
                     player.volume = volumeChangeFromEvent(event);

packages/artplayer/src/events/hoverInit.js

@@ -7,11 +7,11 @@ export default function hoverInit(art, events) {
     events.hover(
         $player,
         () => {
-            addClass($player, 'artplayer-hover');
+            addClass($player, 'art-hover');
             art.emit('hoverenter');
         },
         () => {
-            removeClass($player, 'artplayer-hover');
+            removeClass($player, 'art-hover');
             art.emit('hoverleave');
         },
     );

packages/artplayer/src/events/mousemoveInit.js

@@ -7,8 +7,8 @@ export default function mousemoveInitInit(art, events) {
     } = art;
 
     const autoHide = debounce(() => {
-        addClass($player, 'artplayer-hide-cursor');
-        removeClass($player, 'artplayer-hover');
+        addClass($player, 'art-hide-cursor');
+        removeClass($player, 'art-hover');
         art.controls.show = false;
     }, 3000);
 
@@ -20,7 +20,7 @@ export default function mousemoveInitInit(art, events) {
 
     events.proxy($player, 'mousemove', event => {
         autoHide.clearTimeout();
-        removeClass($player, 'artplayer-hide-cursor');
+        removeClass($player, 'art-hide-cursor');
         art.controls.show = true;
         if (!art.player.pip && player.playing && event.target === $video) {
             autoHide();

packages/artplayer/src/info.js

@@ -41,13 +41,13 @@ export default class Info {
         const { $player } = this.art.template;
         if (value) {
             this.state = true;
-            addClass($player, 'artplayer-info-show');
+            addClass($player, 'art-info-show');
             clearTimeout(this.timer);
             this.loop();
             this.art.emit('info:show');
         } else {
             this.state = false;
-            removeClass($player, 'artplayer-info-show');
+            removeClass($player, 'art-info-show');
             clearTimeout(this.timer);
             this.art.emit('info:hide');
         }

packages/artplayer/src/layers.js

@@ -23,11 +23,11 @@ export default class Layers {
         const { $player } = this.art.template;
         if (value) {
             this.state = true;
-            removeClass($player, 'artplayer-layers-hide');
+            removeClass($player, 'art-layers-hide');
             this.art.emit('layers:show');
         } else {
             this.state = false;
-            addClass($player, 'artplayer-layers-hide');
+            addClass($player, 'art-layers-hide');
             this.art.emit('layers:hide');
         }
     }

packages/artplayer/src/loading.js

@@ -11,11 +11,11 @@ export default class Loading {
         const { $player } = this.art.template;
         if (value) {
             this.state = true;
-            addClass($player, 'artplayer-loading-show');
+            addClass($player, 'art-loading-show');
             this.art.emit('loading:show');
         } else {
             this.state = false;
-            removeClass($player, 'artplayer-loading-show');
+            removeClass($player, 'art-loading-show');
             this.art.emit('loading:hide');
         }
     }

packages/artplayer/src/mask.js

@@ -11,11 +11,11 @@ export default class Mask {
         const { $player } = this.art.template;
         if (value) {
             this.state = true;
-            addClass($player, 'artplayer-mask-show');
+            addClass($player, 'art-mask-show');
             this.art.emit('mask:show');
         } else {
             this.state = false;
-            removeClass($player, 'artplayer-mask-show');
+            removeClass($player, 'art-mask-show');
             this.art.emit('mask:hide');
         }
     }

packages/artplayer/src/notice.js

@@ -9,7 +9,7 @@ export default class Notice {
     show(msg, autoHide = true, time = 1000) {
         const { $player, $noticeInner } = this.art.template;
         this.state = true;
-        addClass($player, 'artplayer-notice-show');
+        addClass($player, 'art-notice-show');
         $noticeInner.innerHTML = msg instanceof Error ? msg.message.trim() : msg;
         clearTimeout(this.timer);
         if (autoHide) {
@@ -23,7 +23,7 @@ export default class Notice {
     hide() {
         const { $player } = this.art.template;
         this.state = false;
-        removeClass($player, 'artplayer-notice-show');
+        removeClass($player, 'art-notice-show');
         this.art.emit('notice:hide');
     }
 }

packages/artplayer/src/player/autoSizeMix.js

@@ -7,7 +7,7 @@ export default function resizeMix(art, player) {
 
     Object.defineProperty(player, 'autoSize', {
         get() {
-            return hasClass($container, 'artplayer-auto-size');
+            return hasClass($container, 'art-auto-size');
         },
         set(value) {
             if (value) {
@@ -15,7 +15,7 @@ export default function resizeMix(art, player) {
                 const { width, height } = $container.getBoundingClientRect();
                 const videoRatio = videoWidth / videoHeight;
                 const containerRatio = width / height;
-                addClass($container, 'artplayer-auto-size');
+                addClass($container, 'art-auto-size');
                 if (containerRatio > videoRatio) {
                     const percentage = ((height * videoRatio) / width) * 100;
                     setStyle($player, 'width', `${percentage}%`);
@@ -30,7 +30,7 @@ export default function resizeMix(art, player) {
                     height: player.height,
                 });
             } else {
-                removeClass($container, 'artplayer-auto-size');
+                removeClass($container, 'art-auto-size');
                 setStyle($player, 'width', null);
                 setStyle($player, 'height', null);
                 art.emit('autoSizeRemove');

packages/artplayer/src/player/eventInit.js

@@ -69,7 +69,7 @@ export default function eventInit(art, player) {
         } else {
             art.loading.show = false;
             art.controls.show = false;
-            addClass($player, 'artplayer-error');
+            addClass($player, 'art-error');
             sleep(1000).then(() => {
                 notice.show(i18n.get('Video load failed'), false);
                 art.destroy();

packages/artplayer/src/player/fullscreenMix.js

@@ -42,7 +42,7 @@ export default function fullscreenMix(art, player) {
                 }
 
                 screenfull.request($player).then(() => {
-                    addClass($player, 'artplayer-fullscreen');
+                    addClass($player, 'art-fullscreen');
                     player.aspectRatioReset = true;
                     art.emit('fullscreenEnabled');
                 });
@@ -52,7 +52,7 @@ export default function fullscreenMix(art, player) {
                 }
 
                 screenfull.exit().then(() => {
-                    removeClass($player, 'artplayer-fullscreen');
+                    removeClass($player, 'art-fullscreen');
                     player.aspectRatioReset = true;
                     art.emit('fullscreenExit');
                 });

packages/artplayer/src/player/fullscreenWebMix.js

@@ -7,21 +7,21 @@ export default function fullscreenWebMix(art, player) {
 
     Object.defineProperty(player, 'fullscreenWeb', {
         get() {
-            return hasClass($player, 'artplayer-web-fullscreen');
+            return hasClass($player, 'art-web-fullscreen');
         },
         set(value) {
             if (value) {
                 if (player.fullscreen) {
                     player.fullscreen = false;
                 }
-                addClass($player, 'artplayer-web-fullscreen');
+                addClass($player, 'art-web-fullscreen');
                 player.aspectRatioReset = true;
                 art.emit('fullscreenWebEnabled');
             } else {
                 if (player.fullscreen) {
                     player.fullscreen = false;
                 }
-                removeClass($player, 'artplayer-web-fullscreen');
+                removeClass($player, 'art-web-fullscreen');
                 player.aspectRatioReset = true;
                 art.emit('fullscreenWebExit');
             }

packages/artplayer/src/player/pipMix.js

@@ -89,7 +89,7 @@ function customPip(art, player) {
 
     proxy($pipHeader, 'mousemove', event => {
         if (isDroging) {
-            addClass($player, 'is-dragging');
+            addClass($player, 'art-is-dragging');
             setStyle($player, 'left', `${lastPlayerLeft + event.pageX - lastPageX}px`);
             setStyle($player, 'top', `${lastPlayerTop + event.pageY - lastPageY}px`);
         }
@@ -97,26 +97,26 @@ function customPip(art, player) {
 
     proxy(document, 'mouseup', () => {
         isDroging = false;
-        removeClass($player, 'is-dragging');
+        removeClass($player, 'art-is-dragging');
     });
 
     proxy($pipClose, 'click', () => {
         player.pip = false;
         isDroging = false;
-        removeClass($player, 'is-dragging');
+        removeClass($player, 'art-is-dragging');
     });
 
     append($pipTitle, option.title || i18n.get('Mini player'));
 
     const property = {
         get() {
-            return hasClass($player, 'artplayer-pip');
+            return hasClass($player, 'art-pip');
         },
         set(value) {
             if (value) {
                 player.autoSize = false;
                 cacheStyle = $player.style.cssText;
-                addClass($player, 'artplayer-pip');
+                addClass($player, 'art-pip');
                 const $body = document.body;
                 setStyle($player, 'top', `${$body.clientHeight - player.height - 50}px`);
                 setStyle($player, 'left', `${$body.clientWidth - player.width - 50}px`);
@@ -127,7 +127,7 @@ function customPip(art, player) {
                 art.emit('pipEnabled');
             } else if (player.pip) {
                 $player.style.cssText = cacheStyle;
-                removeClass($player, 'artplayer-pip');
+                removeClass($player, 'art-pip');
                 setStyle($player, 'top', null);
                 setStyle($player, 'left', null);
                 player.fullscreen = false;

packages/artplayer/src/setting/index.js

@@ -65,11 +65,11 @@ export default class Setting {
         const { $player } = this.art.template;
         if (value) {
             this.state = true;
-            addClass($player, 'artplayer-setting-show');
+            addClass($player, 'art-setting-show');
             this.art.emit('setting:show');
         } else {
             this.state = false;
-            removeClass($player, 'artplayer-setting-show');
+            removeClass($player, 'art-setting-show');
             this.art.emit('setting:hide');
         }
     }

packages/artplayer/src/style/artplayer.scss

@@ -1,4 +1,4 @@
-.artplayer-video-player {
+.art-video-player {
     display: flex;
     position: relative;
     margin: 0 auto;
@@ -59,7 +59,7 @@
     }
 
     @supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {
-        .artplayer-backdrop-filter {
+        .art-backdrop-filter {
             -webkit-backdrop-filter: saturate(180%) blur(20px);
             backdrop-filter: saturate(180%) blur(20px);
             background-color: rgba(0, 0, 0, 0.7) !important;

packages/artplayer/src/style/aspectRatio.scss

@@ -1,4 +1,4 @@
-.artplayer-video-player {
+.art-video-player {
     &[data-aspect-ratio] {
         video {
             box-sizing: content-box;

packages/artplayer/src/style/autoSize.scss

@@ -1,4 +1,4 @@
-.artplayer-auto-size {
+.art-auto-size {
     display: flex;
     align-items: center;
     justify-content: center;

packages/artplayer/src/style/bottom.scss

@@ -1,5 +1,5 @@
-.artplayer-video-player {
-    .artplayer-bottom {
+.art-video-player {
+    .art-bottom {
         position: absolute;
         z-index: 60;
         left: 0;
@@ -14,7 +14,7 @@
         background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==)
             repeat-x bottom;
 
-        .artplayer-progress {
+        .art-progress {
             position: relative;
             pointer-events: auto;
             .art-control-progress {
@@ -130,7 +130,7 @@
             }
         }
 
-        .artplayer-controls {
+        .art-controls {
             position: relative;
             pointer-events: auto;
             display: flex;
@@ -139,8 +139,8 @@
             height: 40px;
             padding: 5px 0;
 
-            .artplayer-controls-left,
-            .artplayer-controls-right {
+            .art-controls-left,
+            .art-controls-right {
                 display: flex;
             }
 
@@ -248,16 +248,16 @@
         }
     }
 
-    &.artplayer-controls-show,
-    &.artplayer-hover {
-        .artplayer-bottom {
+    &.art-controls-show,
+    &.art-hover {
+        .art-bottom {
             opacity: 1;
             visibility: visible;
         }
     }
 
-    &.artplayer-error,
-    &.artplayer-destroy {
+    &.art-error,
+    &.art-destroy {
         .art-progress-indicator,
         .art-progress-tip {
             display: none !important;

packages/artplayer/src/style/contextmenu.scss

@@ -1,5 +1,5 @@
-.artplayer-video-player {
-    .artplayer-contextmenu {
+.art-video-player {
+    .art-contextmenus {
         display: none;
         flex-direction: column;
         position: absolute;
@@ -31,7 +31,7 @@
             span {
                 display: inline-block;
                 padding: 0 7px;
-                &:hover, &.current {
+                &:hover, &.art-current {
                     color: #00c9ff;
                 }
             }
@@ -46,8 +46,8 @@
         }
     }
 
-    &.artplayer-contextmenu-show {
-        .artplayer-contextmenu {
+    &.art-contextmenu-show {
+        .art-contextmenus {
             display: flex;
         }
     }

packages/artplayer/src/style/danmuku.scss

@@ -1,5 +1,5 @@
-.artplayer-video-player {
-    .artplayer-danmuku {
+.art-video-player {
+    .art-danmuku {
         position: absolute;
         z-index: 30;
         left: 0;

packages/artplayer/src/style/flip.scss

@@ -1,9 +1,9 @@
-.artplayer-video-player {
-    &[data-flip="horizontal"] .artplayer-video{
+.art-video-player {
+    &[data-flip="horizontal"] .art-video{
         transform: scaleX(-1);
     }
 
-    &[data-flip="vertical"] .artplayer-video{
+    &[data-flip="vertical"] .art-video{
         transform: scaleY(-1);
     }
 }

packages/artplayer/src/style/fullscreenWeb.scss

@@ -1,5 +1,5 @@
-.artplayer-video-player {
-    &.artplayer-web-fullscreen {
+.art-video-player {
+    &.art-web-fullscreen {
         position: fixed;
         z-index: 9999;
         width: 100%;

packages/artplayer/src/style/hideCursor.scss

@@ -1,5 +1,5 @@
-.artplayer-video-player {
-    &.artplayer-hide-cursor {
+.art-video-player {
+    &.art-hide-cursor {
         * {
             cursor: none !important;
         }

packages/artplayer/src/style/info.scss

@@ -1,5 +1,5 @@
-.artplayer-video-player {
-    .artplayer-info {
+.art-video-player {
+    .art-info {
         display: none;
         flex-direction: column;
         position: absolute;
@@ -32,7 +32,7 @@
             }
         }
     
-        .artplayer-info-close {
+        .art-info-close {
             position: absolute;
             top: 5px;
             right: 5px;
@@ -40,8 +40,8 @@
         }
     }
 
-    &.artplayer-info-show {
-        .artplayer-info {
+    &.art-info-show {
+        .art-info {
             display: flex;
         }
     }

packages/artplayer/src/style/layers.scss

@@ -1,5 +1,5 @@
-.artplayer-video-player {
-    .artplayer-layers {
+.art-video-player {
+    .art-layers {
         position: absolute;
         z-index: 40;
         left: 0;
@@ -15,8 +15,8 @@
         }
     }
 
-    &.artplayer-layers-hide {
-        .artplayer-layers {
+    &.art-layers-hide {
+        .art-layers {
             display: none;
         }
     }

packages/artplayer/src/style/loading.scss

@@ -1,5 +1,5 @@
-.artplayer-video-player {
-    .artplayer-loading {
+.art-video-player {
+    .art-loading {
         display: none;
         position: absolute;
         z-index: 70;
@@ -14,8 +14,8 @@
         pointer-events: none;
     }
 
-    &.artplayer-loading-show {
-        .artplayer-loading {
+    &.art-loading-show {
+        .art-loading {
             display: flex;
         }
     }

packages/artplayer/src/style/mask.scss

@@ -1,5 +1,5 @@
-.artplayer-video-player {
-    .artplayer-mask {
+.art-video-player {
+    .art-mask {
         display: none;
         align-items: center;
         justify-content: center;
@@ -14,7 +14,7 @@
         overflow: hidden;
         pointer-events: none;
 
-        .artplayer-state {
+        .art-state {
             display: flex;
             justify-content: center;
             align-items: center;
@@ -27,8 +27,8 @@
         }
     }
 
-    &.artplayer-mask-show {
-        .artplayer-mask {
+    &.art-mask-show {
+        .art-mask {
             display: flex;
         }
     }

packages/artplayer/src/style/notice.scss

@@ -1,5 +1,5 @@
-.artplayer-video-player {
-    .artplayer-notice {
+.art-video-player {
+    .art-notice {
         display: none;
         font-size: 14px;
         position: absolute;
@@ -9,7 +9,7 @@
         padding: 10px;
         width: 100%;
         pointer-events: none;
-        .artplayer-notice-inner {
+        .art-notice-inner {
             display: inline-block;
             padding: 5px 10px;
             color: #fff;
@@ -18,8 +18,8 @@
         }
     }
 
-    &.artplayer-notice-show {
-        .artplayer-notice {
+    &.art-notice-show {
+        .art-notice {
             display: flex;
         }
     }

packages/artplayer/src/style/pip.scss

@@ -1,5 +1,5 @@
-.artplayer-video-player {
-    .artplayer-pip-header {
+.art-video-player {
+    .art-pip-header {
         display: none;
         position: absolute;
         z-index: 110;
@@ -15,7 +15,7 @@
         opacity: 0;
         visibility: hidden;
         transition: all 0.2s ease-in-out;
-        .artplayer-pip-title {
+        .art-pip-title {
             flex: 1;
             padding: 0 10px;
             overflow: hidden;
@@ -23,7 +23,7 @@
             white-space: nowrap;
             cursor: move;
         }
-        .artplayer-pip-close {
+        .art-pip-close {
             width: 35px;
             text-align: center;
             font-size: 22px;
@@ -31,43 +31,43 @@
         }
     }
 
-    &.is-dragging {
+    &.art-is-dragging {
         opacity: 0.7;
     }
 
-    &.artplayer-pip {
+    &.art-pip {
         position: fixed;
         z-index: 9999;
         width: 400px;
         height: 225px;
         box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.2);
 
-        .artplayer-pip-header {
+        .art-pip-header {
             display: flex;
             user-select: none;
         }
 
-        &.artplayer-hover {
-            .artplayer-pip-header {
+        &.art-hover {
+            .art-pip-header {
                 opacity: 1;
                 visibility: visible;
             }
         }
 
-        .artplayer-mask {
+        .art-mask {
             .art-state {
                 position: static;
             }
         }
 
-        .artplayer-contextmenu,
-        .artplayer-bottom,
-        .artplayer-danmu,
-        .artplayer-info,
-        .artplayer-layers,
-        .artplayer-notice,
-        .artplayer-setting,
-        .artplayer-subtitle {
+        .art-contextmenu,
+        .art-bottom,
+        .art-danmu,
+        .art-info,
+        .art-layers,
+        .art-notice,
+        .art-setting,
+        .art-subtitle {
             display: none !important;
         }
     }

packages/artplayer/src/style/setting.scss

@@ -1,5 +1,5 @@
-.artplayer-video-player {
-    .artplayer-setting {
+.art-video-player {
+    .art-settings {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -13,8 +13,8 @@
         visibility: hidden;
         pointer-events: none;
         overflow: hidden;
-        
-        .artplayer-setting-inner {
+
+        .art-setting-inner {
             position: absolute;
             top: 0;
             right: -300px;
@@ -26,7 +26,7 @@
             transition: all 0.2s ease-in-out;
             overflow: auto;
 
-            .artplayer-setting-body {
+            .art-setting-body {
                 overflow-y: auto;
                 width: 100%;
                 height: 100%;
@@ -103,12 +103,12 @@
         }
     }
 
-    &.artplayer-setting-show {
-        .artplayer-setting {
+    &.art-setting-show {
+        .art-settings {
             opacity: 1;
             visibility: visible;
             pointer-events: auto;
-            .artplayer-setting-inner {
+            .art-setting-inner {
                 right: 0;
             }
         }

packages/artplayer/src/style/subtitle.scss

@@ -1,5 +1,5 @@
-.artplayer-video-player {
-    .artplayer-subtitle {
+.art-video-player {
+    .art-subtitle {
         position: absolute;
         z-index: 20;
         bottom: 40px;
@@ -16,8 +16,8 @@
         }
     }
 
-    &.artplayer-subtitle-hide {
-        .artplayer-subtitle {
+    &.art-subtitle-hide {
+        .art-subtitle {
             display: none;
         }
     }

packages/artplayer/src/style/video.scss

@@ -1,5 +1,5 @@
-.artplayer-video-player {
-    .artplayer-video {
+.art-video-player {
+    .art-video {
         position: absolute;
         z-index: 10;
         left: 0;

packages/artplayer/src/subtitle.js

@@ -93,11 +93,11 @@ export default class Subtitle {
         const { $player } = this.art.template;
         if (value) {
             this.state = true;
-            removeClass($player, 'artplayer-subtitle-hide');
+            removeClass($player, 'art-subtitle-hide');
             this.art.emit('subtitle:show');
         } else {
             this.state = false;
-            addClass($player, 'artplayer-subtitle-hide');
+            addClass($player, 'art-subtitle-hide');
             this.art.emit('subtitle:hide');
         }
     }

packages/artplayer/src/template.js

@@ -33,113 +33,113 @@ export default class Template {
 
     initDesktop() {
         this.$container.innerHTML = `
-          <div class="artplayer-video-player" style="--theme: ${this.art.option.theme}">
-            <video class="artplayer-video">
-              <track default kind="metadata"></track>
-            </video>
-            <div class="artplayer-subtitle"></div>
-            <div class="artplayer-danmuku"></div>
-            <div class="artplayer-layers"></div>
-            <div class="artplayer-mask">
-              <div class="artplayer-state"></div>
-            </div>
-            <div class="artplayer-bottom">
-              <div class="artplayer-progress"></div>
-              <div class="artplayer-controls">
-                <div class="artplayer-controls-left"></div>
-                <div class="artplayer-controls-right"></div>
-              </div>
-            </div>
-            <div class="artplayer-loading"></div>
-            <div class="artplayer-notice">
-              <div class="artplayer-notice-inner"></div>
-            </div>
-            <div class="artplayer-setting">
-              <div class="artplayer-setting-inner artplayer-backdrop-filter">
-                <div class="artplayer-setting-body"></div>
-              </div>
-            </div>
-            <div class="artplayer-info artplayer-backdrop-filter">
-              <div class="artplayer-info-panel">
-                <div class="art-info-item">
-                  <div class="art-info-title">Player version:</div>
-                  <div class="art-info-content">__VERSION__</div>
-                </div>
-                <div class="art-info-item">
-                  <div class="art-info-title">Video url:</div>
-                  <div class="art-info-content" data-video="src"></div>
-                </div>
-                <div class="art-info-item">
-                  <div class="art-info-title">Video volume:</div>
-                  <div class="art-info-content" data-video="volume"></div>
-                </div>
-                <div class="art-info-item">
-                  <div class="art-info-title">Video time:</div>
-                  <div class="art-info-content" data-video="currentTime"></div>
-                </div>
-                <div class="art-info-item">
-                  <div class="art-info-title">Video duration:</div>
-                  <div class="art-info-content" data-video="duration"></div>
-                </div>
-                <div class="art-info-item">
-                  <div class="art-info-title">Video resolution:</div>
-                  <div class="art-info-content">
-                    <span data-video="videoWidth"></span> x <span data-video="videoHeight"></span>
-                  </div>
-                </div>
-              </div>
-              <div class="artplayer-info-close">[x]</div>
-            </div>
-            <div class="artplayer-pip-header">
-              <div class="artplayer-pip-title"></div>
-              <div class="artplayer-pip-close">×</div>
-            </div>
-            <div class="artplayer-contextmenu artplayer-backdrop-filter"></div>
-          </div>
+<div class="art-video-player" style="--theme: ${this.art.option.theme}">
+  <video class="art-video">
+    <track default kind="metadata"></track>
+  </video>
+  <div class="art-subtitle"></div>
+  <div class="art-danmuku"></div>
+  <div class="art-layers"></div>
+  <div class="art-mask">
+    <div class="art-state"></div>
+  </div>
+  <div class="art-bottom">
+    <div class="art-progress"></div>
+    <div class="art-controls">
+      <div class="art-controls-left"></div>
+      <div class="art-controls-right"></div>
+    </div>
+  </div>
+  <div class="art-loading"></div>
+  <div class="art-notice">
+    <div class="art-notice-inner"></div>
+  </div>
+  <div class="art-settings">
+    <div class="art-setting-inner art-backdrop-filter">
+      <div class="art-setting-body"></div>
+    </div>
+  </div>
+  <div class="art-info art-backdrop-filter">
+    <div class="art-info-panel">
+      <div class="art-info-item">
+        <div class="art-info-title">Player version:</div>
+        <div class="art-info-content">__VERSION__</div>
+      </div>
+      <div class="art-info-item">
+        <div class="art-info-title">Video url:</div>
+        <div class="art-info-content" data-video="src"></div>
+      </div>
+      <div class="art-info-item">
+        <div class="art-info-title">Video volume:</div>
+        <div class="art-info-content" data-video="volume"></div>
+      </div>
+      <div class="art-info-item">
+        <div class="art-info-title">Video time:</div>
+        <div class="art-info-content" data-video="currentTime"></div>
+      </div>
+      <div class="art-info-item">
+        <div class="art-info-title">Video duration:</div>
+        <div class="art-info-content" data-video="duration"></div>
+      </div>
+      <div class="art-info-item">
+        <div class="art-info-title">Video resolution:</div>
+        <div class="art-info-content">
+          <span data-video="videoWidth"></span> x <span data-video="videoHeight"></span>
+        </div>
+      </div>
+    </div>
+    <div class="art-info-close">[x]</div>
+  </div>
+  <div class="art-pip-header">
+    <div class="art-pip-title"></div>
+    <div class="art-pip-close">×</div>
+  </div>
+  <div class="art-contextmenus art-backdrop-filter"></div>
+</div>
         `;
-        this.$player = this.query('.artplayer-video-player');
-        this.$video = this.query('.artplayer-video');
-        this.$track = this.query('.artplayer-video track');
-        this.$subtitle = this.query('.artplayer-subtitle');
-        this.$danmuku = this.query('.artplayer-danmuku');
-        this.$bottom = this.query('.artplayer-bottom');
-        this.$progress = this.query('.artplayer-progress');
-        this.$controls = this.query('.artplayer-controls');
-        this.$controlsLeft = this.query('.artplayer-controls-left');
-        this.$controlsRight = this.query('.artplayer-controls-right');
-        this.$layers = this.query('.artplayer-layers');
-        this.$loading = this.query('.artplayer-loading');
-        this.$notice = this.query('.artplayer-notice');
-        this.$noticeInner = this.query('.artplayer-notice-inner');
-        this.$mask = this.query('.artplayer-mask');
-        this.$state = this.query('.artplayer-state');
-        this.$setting = this.query('.artplayer-setting');
-        this.$settingInner = this.query('.artplayer-setting-inner');
-        this.$settingBody = this.query('.artplayer-setting-body');
-        this.$info = this.query('.artplayer-info');
-        this.$infoPanel = this.query('.artplayer-info-panel');
-        this.$infoClose = this.query('.artplayer-info-close');
-        this.$pipHeader = this.query('.artplayer-pip-header');
-        this.$pipTitle = this.query('.artplayer-pip-title');
-        this.$pipClose = this.query('.artplayer-pip-close');
-        this.$contextmenu = this.query('.artplayer-contextmenu');
+        this.$player = this.query('.art-video-player');
+        this.$video = this.query('.art-video');
+        this.$track = this.query('.art-video track');
+        this.$subtitle = this.query('.art-subtitle');
+        this.$danmuku = this.query('.art-danmuku');
+        this.$bottom = this.query('.art-bottom');
+        this.$progress = this.query('.art-progress');
+        this.$controls = this.query('.art-controls');
+        this.$controlsLeft = this.query('.art-controls-left');
+        this.$controlsRight = this.query('.art-controls-right');
+        this.$layers = this.query('.art-layers');
+        this.$loading = this.query('.art-loading');
+        this.$notice = this.query('.art-notice');
+        this.$noticeInner = this.query('.art-notice-inner');
+        this.$mask = this.query('.art-mask');
+        this.$state = this.query('.art-state');
+        this.$setting = this.query('.art-settings');
+        this.$settingInner = this.query('.art-setting-inner');
+        this.$settingBody = this.query('.art-setting-body');
+        this.$info = this.query('.art-info');
+        this.$infoPanel = this.query('.art-info-panel');
+        this.$infoClose = this.query('.art-info-close');
+        this.$pipHeader = this.query('.art-pip-header');
+        this.$pipTitle = this.query('.art-pip-title');
+        this.$pipClose = this.query('.art-pip-close');
+        this.$contextmenu = this.query('.art-contextmenus');
     }
 
     initMobile() {
         this.$container.innerHTML = `
-          <div class="artplayer-video-player">
-            <video class="artplayer-video"></video>
+          <div class="art-video-player">
+            <video class="art-video"></video>
           </div>
         `;
-        this.$player = this.query('.artplayer-video-player');
-        this.$video = this.query('.artplayer-video');
+        this.$player = this.query('.art-video-player');
+        this.$video = this.query('.art-video');
     }
 
     destroy(removeHtml) {
         if (removeHtml) {
             this.$container.innerHTML = '';
         } else {
-            addClass(this.$player, 'artplayer-destroy');
+            addClass(this.$player, 'art-destroy');
         }
     }
 }