fix artplayer-plugin-playlist

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

@@ -14,8 +14,8 @@ function artplayerPluginPlaylist(list) {
         const $playlist = append(
             $player,
             `
-            <div class="artplayer-playlist">
-                <div class="artplayer-playlist-inner artplayer-backdrop-filter"></div>
+            <div class="art-playlist">
+                <div class="art-playlist-inner art-backdrop-filter"></div>
             </div>
         `,
         );
@@ -28,10 +28,10 @@ function artplayerPluginPlaylist(list) {
             return item;
         });
 
-        const $playlistInner = $playlist.querySelector('.artplayer-playlist-inner');
+        const $playlistInner = $playlist.querySelector('.art-playlist-inner');
         $playlistInner.innerHTML = playlist
             .map((item, index) => {
-                return `<div class="artplayer-playlist-item" data-option-index="${index}">${item.title}</div>`;
+                return `<div class="art-playlist-item" data-option-index="${index}">${item.title}</div>`;
             })
             .join('');
 
@@ -71,7 +71,7 @@ function artplayerPluginPlaylist(list) {
 
         proxy($playlist, 'click', e => {
             if (e.target === $playlist) {
-                $player.classList.remove('artplayer-playlist-show');
+                $player.classList.remove('art-playlist-show');
             }
         });
 
@@ -94,10 +94,10 @@ function artplayerPluginPlaylist(list) {
         return {
             name: 'artplayerPluginPlaylist',
             show() {
-                $player.classList.add('artplayer-playlist-show');
+                $player.classList.add('art-playlist-show');
             },
             hide() {
-                $player.classList.remove('artplayer-playlist-show');
+                $player.classList.remove('art-playlist-show');
             },
             next() {
                 nextVideo();

packages/artplayer-plugin-playlist/src/index.scss

@@ -1,5 +1,5 @@
-.artplayer-video-player {
-    .artplayer-playlist {
+.art-video-player {
+    .art-playlist {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -14,7 +14,7 @@
         pointer-events: none;
         overflow: hidden;
 
-        .artplayer-playlist-inner {
+        .art-playlist-inner {
             position: absolute;
             top: 0;
             right: -300px;
@@ -26,7 +26,7 @@
             transition: all 0.2s ease-in-out;
             overflow: auto;
 
-            .artplayer-playlist-item {
+            .art-playlist-item {
                 cursor: pointer;
                 border-bottom: 1px solid rgba(255,255,255,.1);
                 padding: 12px 20px 12px 20px;
@@ -42,12 +42,12 @@
         }
     }
 
-    &.artplayer-playlist-show {
-        .artplayer-playlist {
+    &.art-playlist-show {
+        .art-playlist {
             opacity: 1;
             visibility: visible;
             pointer-events: auto;
-            .artplayer-playlist-inner {
+            .art-playlist-inner {
                 right: 0;
             }
         }