see changelog

packages/docs/public/ohls.html

@@ -30,14 +30,17 @@
     <script>
       var hlsScriptCdn = 'https://cdn.jsdelivr.net/npm/@oplayer/hls@latest/dist/index.hls.js'
       var danmakuScriptCdn = 'https://cdn.jsdelivr.net/npm/@oplayer/danmaku@latest/dist/index.min.js'
-      var playlistScriptCdn = 'https://cdn.jsdelivr.net/npm/@oplayer/[email protected]/dist/playlist.min.js'
+      var playlistScriptCdn =
+        'https://cdn.jsdelivr.net/npm/@oplayer/[email protected]/dist/playlist.min.js'
       var chromecastScriptCdn = 'https://cdn.jsdelivr.net/npm/@oplayer/plugins@latest/dist/chromecast.min.js'
 
       var query = document.location.search.substring(1)
       var src, poster, subtitle, danmaku, title, watermark
       var playlist = []
       if (query.startsWith('http')) {
-        src = query.endsWith('==') ? atob(query.substring(0, query.length - 2)) : safeDecodeURIComponent(query)
+        src = query.endsWith('==')
+          ? atob(query.substring(0, query.length - 2))
+          : safeDecodeURIComponent(query)
       } else {
         var search = new URLSearchParams(document.location.search)
         src = safeDecodeURIComponent(search.get('src'))
@@ -52,9 +55,9 @@
                 {
                   name: 'Default',
                   default: true,
-                  src: decodeURIComponent(search.get('subtitle')),
-                },
-              ],
+                  src: decodeURIComponent(search.get('subtitle'))
+                }
+              ]
             }
           : undefined
 
@@ -68,16 +71,16 @@
                 top: '10px',
                 right: '10px',
                 maxWidth: '200px',
-                height: 'auto',
-              },
+                height: 'auto'
+              }
             }
           : undefined
       }
 
       var player = OPlayer.make('#oplayer', {
         source: { src: !playlist.length ? src : undefined, poster, title: title || 'Free HTML5 Player' },
-        playbackRate: localStorage.getItem('@oplayer/UserPreferences/speed'),
-        volume: localStorage.getItem('@oplayer/UserPreferences/volume'),
+        playbackRate: localStorage.getItem('@oplayer/UserPreferences/speed') || 1,
+        volume: localStorage.getItem('@oplayer/UserPreferences/volume') || 1
       })
         .use([
           OUI({
@@ -89,10 +92,12 @@
             errorBuilder(e, t, builder) {
               builder({
                 ...e,
-                message: e.message || '' + '\n' + 'Open an issues https://github.com/shiyiya/oplayer/issues/new/choose',
+                message:
+                  e.message ||
+                  '' + '\n' + 'Open an issues https://github.com/shiyiya/oplayer/issues/new/choose'
               })
-            },
-          }),
+            }
+          })
         ])
         .create()
         .on(console.log)
@@ -102,16 +107,16 @@
           chromecastScriptCdn,
           () => {
             player.applyPlugin(OChromecast)
-          },
-        ],
+          }
+        ]
       ]
 
       if (/m3u8(#|\?|$)/.test(src) || playlist.some((it) => /m3u8(#|\?|$)/.test(it.src))) {
         deps.push([
           hlsScriptCdn,
           () => {
             player.applyPlugin(OHls({ forceHLS: true }))
-          },
+          }
         ])
       }
 
@@ -123,7 +128,7 @@
             const dash = ODash()
             dash.constructor.library = dashjs
             player.applyPlugin(dash)
-          },
+          }
         ])
       }
 
@@ -134,10 +139,10 @@
             player.applyPlugin(
               new OPlaylist({
                 initialIndex: 0,
-                sources: playlist,
+                sources: playlist
               })
             )
-          },
+          }
         ])
       }
 

packages/plugins/CHANGELOG.md

@@ -2,7 +2,12 @@
 
 ## UnRelease
 
-## 1.0.10-beta.1
+## 1.0.10-beta.3
+
+- playlist
+  - style fixed.
+
+## 1.0.10-beta.2
 
 - playlist
   - style fixed.

packages/plugins/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oplayer/plugins",
-  "version": "1.0.10-beta.2",
+  "version": "1.0.10-beta.3",
   "author": "shiyiya",
   "description": "oplayer's plugin",
   "homepage": "https://github.com/shiyiya/oplayer",

packages/plugins/src/playlist.css

@@ -15,19 +15,19 @@
   }
 }
 
-.playlist.active {
+.playlist.playlist__active {
   transform: translateX(-100%);
 }
 
-.playlist.wait .playlist-list {
+.playlist.playlist__wait .playlist-list {
   cursor: wait;
 }
 
-.playlist.wait .playlist-list .playlist-list-item {
+.playlist.playlist__wait .playlist-list .playlist-list-item {
   pointer-events: none;
 }
 
-.playlist.active::before {
+.playlist.playlist__active::before {
   content: '';
   position: absolute;
   width: 100vw;
@@ -41,12 +41,14 @@
   justify-content: space-between;
   background: #000;
   border-bottom: 1px solid #484848;
-  padding: 0.2em 0.4em;
+  padding: 0.2em 0.2em 0.2em 0.4em;
   align-items: center;
   color: #fff;
+  box-sizing: border-box;
+  height: 2.2em;
 
   > span {
-    font-size: 0.875em;
+    font-size: 0.8em;
   }
 }
 
@@ -71,7 +73,7 @@
 .playlist-list {
   overflow: auto;
   height: 100%;
-  padding-bottom: 39px;
+  padding-bottom: 2.2em;
   box-sizing: border-box;
   color: #ccc;
 }
@@ -100,12 +102,12 @@
 }
 
 .playlist-list-item:hover,
-.playlist-list-item.active {
+.playlist-list-item.playlist-source__active {
   color: #fff;
   background-color: rgba(255, 255, 255, 0.1);
 }
 
-.playlist-list-item.progress::before {
+.playlist-list-item.playlist-source__progress::before {
   content: '';
   top: 0;
   left: -100%;

packages/plugins/src/playlist.ts

@@ -77,7 +77,7 @@ export default class PlaylistPlugin implements PlayerPlugin {
       }
       this.player.context.ui.keyboard?.register({
         l: () => {
-          this.$root.classList.toggle('active')
+          this.$root.classList.toggle('playlist__active')
         }
       })
     }
@@ -110,16 +110,16 @@ export default class PlaylistPlugin implements PlayerPlugin {
   }
 
   get isWaiting() {
-    return this.$root.classList.contains('wait')
+    return this.$root.classList.contains('playlist__wait')
   }
 
   changeSource(idx: number) {
     if (!this.options.sources[idx] || this.isWaiting) return
 
     const $target = this.$root.querySelector(`.playlist-list-item[data-index='${idx}']`)
 
-    this.$root.classList.add('wait')
-    $target?.classList.add('progress')
+    this.$root.classList.add('playlist__wait')
+    $target?.classList.add('playlist-source__progress')
 
     const source: PlaylistSource = this.options.sources[idx]!
 
@@ -164,11 +164,13 @@ export default class PlaylistPlugin implements PlayerPlugin {
       .finally(() => {
         this.currentIndex = idx
         this._updateHeader()
-        this.$root.querySelector('.playlist-list-item.active')?.classList.remove('active')
-        $target?.classList.add('active')
+        console.log(this.$root.querySelector('.playlist-source__active'))
+
+        this.$root.querySelector('.playlist-source__active')?.classList.remove('playlist-source__active')
+        $target?.classList.add('playlist-source__active')
         setTimeout(() => {
-          this.$root.classList.remove('wait')
-          $target?.classList.remove('progress')
+          this.$root.classList.remove('playlist__wait')
+          $target?.classList.remove('playlist-source__progress')
         }, 500)
       })
   }
@@ -187,11 +189,11 @@ export default class PlaylistPlugin implements PlayerPlugin {
   }
 
   showUI() {
-    this.$root.classList.add('active')
+    this.$root.classList.add('playlist__active')
   }
 
   hideUI() {
-    this.$root.classList.remove('active')
+    this.$root.classList.remove('playlist__active')
   }
 
   render() {
@@ -217,7 +219,7 @@ export default class PlaylistPlugin implements PlayerPlugin {
         this.changeSource(+target.getAttribute('data-index')!)
       } else if (
         target.classList.contains('playlist-back') ||
-        (target == this.$root && target.classList.contains('active'))
+        (target == this.$root && target.classList.contains('playlist__active'))
       ) {
         this.hideUI()
       }
@@ -233,7 +235,7 @@ export default class PlaylistPlugin implements PlayerPlugin {
       onClick: () => {
         this.showUI()
         const list = this.$root.querySelector('.playlist-list')!
-        const active = this.$root.querySelector<HTMLDivElement>('.playlist-list-item.active')
+        const active = this.$root.querySelector<HTMLDivElement>('.playlist-source__active')
         if (active && list.scrollHeight > 0 && this.currentIndex) {
           list.scrollTo(0, active.offsetHeight * this.currentIndex)
         }
@@ -271,7 +273,7 @@ export default class PlaylistPlugin implements PlayerPlugin {
   _updateHeader() {
     this.$root.querySelector('.playlist-head-title')!.textContent = `${this.player.locales.get(
       'PLAYLIST'
-    )} (${this.currentIndex}/${this.options.sources.length})`
+    )} (${this.currentIndex !== undefined ? `${this.currentIndex + 1}/` : ''}${this.options.sources.length})`
   }
 
   destroy() {}