修正播放列表样式

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

@@ -14,8 +14,8 @@ function artplayerPluginPlaylist(list) {
         const $playlist = append(
             $player,
             `
-            <div class="artplay-playlist">
-                <div class="artplay-playlist-inner"></div>
+            <div class="artplayer-playlist">
+                <div class="artplayer-playlist-inner"></div>
             </div>
         `,
         );
@@ -28,10 +28,10 @@ function artplayerPluginPlaylist(list) {
             return item;
         });
 
-        const $playlistInner = $playlist.querySelector('.artplay-playlist-inner');
+        const $playlistInner = $playlist.querySelector('.artplayer-playlist-inner');
         $playlistInner.innerHTML = playlist
             .map((item, index) => {
-                return `<div class="artplay-playlist-item" data-option-index="${index}">${item.title}</div>`;
+                return `<div class="artplayer-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) {
-                $playlist.style.display = 'none';
+                $player.classList.remove('artplayer-playlist-show');
             }
         });
 
@@ -92,10 +92,10 @@ function artplayerPluginPlaylist(list) {
         return {
             name: 'artplayerPluginPlaylist',
             show() {
-                $playlist.style.display = 'flex';
+                $player.classList.add('artplayer-playlist-show');
             },
             hide() {
-                $playlist.style.display = 'none';
+                $player.classList.remove('artplayer-playlist-show');
             },
             next() {
                 nextVideo();

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

@@ -1,27 +1,32 @@
 .artplayer-video-player {
-    .artplay-playlist {
-        display: none;
+    .artplayer-playlist {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         position: absolute;
         z-index: 120;
         left: 0;
         top: 0;
         height: 100%;
         width: 100%;
-        align-items: center;
-        justify-content: center;
+        opacity: 0;
+        visibility: hidden;
+        pointer-events: none;
+        overflow: hidden;
 
-        .artplay-playlist-inner {
+        .artplayer-playlist-inner {
             position: absolute;
             top: 0;
-            right: 0;
+            right: -300px;
             bottom: 0;
-            width: 50%;
+            width: 300px;
             height: 100%;
             font-size: 12px;
             background: rgba(0, 0, 0, 0.8);
+            transition: all 0.2s ease-in-out;
             overflow: auto;
 
-            .artplay-playlist-item {
+            .artplayer-playlist-item {
                 cursor: pointer;
                 border-bottom: 1px solid rgba(255,255,255,.1);
                 padding: 12px 20px 12px 20px;
@@ -36,4 +41,15 @@
             }
         }
     }
+
+    &.artplayer-playlist-show {
+        .artplayer-playlist {
+            opacity: 1;
+            visibility: visible;
+            pointer-events: auto;
+            .artplayer-playlist-inner {
+                right: 0;
+            }
+        }
+    }
 }