feat(playlist): see changelog

shiyiya · Mar 12, 2024 · bec1865 · bec1865
1 parent 01a41ec
commit bec1865
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 36 deletions.
diff --git a/examples/standalone/main.ts b/examples/standalone/main.ts
@@ -117,6 +117,7 @@ const player = Player.make<Ctx>('#player', {
         {
           title: 'HLS with default SRT subtitle',
           src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+          poster: 'https://api.imlazy.ink/img?id19',
           subtitles: [
             {
               name: 'Default',

diff --git a/packages/docs/public/ios_debug.html b/packages/docs/public/ios_debug.html
@@ -25,7 +25,7 @@
         .use([OUI(), OHls({ forceHLS: true })])
         .create()
         .on(({ type }) => {
-          if (['timeupdate', 'controllervisibilitychange'].includes(type)) {
+          if (!['timeupdate', 'controllervisibilitychange'].includes(type)) {
             console.log(type)
           }
         })

diff --git a/packages/plugins/CHANGELOG.md b/packages/plugins/CHANGELOG.md
@@ -0,0 +1,10 @@
+# Changelog
+
+## UnRelease
+
+## 1.0.10-beta.0
+
+- playlist
+  - lazy loading playlist cover.
+  - loading animation.
+  - add event `playlistsourceerror`.
diff --git a/packages/plugins/package.json b/packages/plugins/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oplayer/plugins",
-  "version": "1.0.9",
+  "version": "1.0.10-beta.0",
   "description": "oplayer's plugin",
   "type": "module",
   "main": "dist/index.es.js",

diff --git a/packages/plugins/src/playlist.css b/packages/plugins/src/playlist.css
@@ -51,6 +51,7 @@
 .playlist-head .playlist-back {
   display: flex;
   align-items: center;
+  cursor: pointer;
 }
 
 .playlist-head .playlist-back > svg {
@@ -82,6 +83,7 @@
 }
 
 .playlist-list-item {
+  position: relative;
   border-bottom: 1px solid #444;
   padding: 8px;
   display: flex;
@@ -100,16 +102,43 @@
   background-color: rgba(255, 255, 255, 0.1);
 }
 
+.playlist-list-item.progress::before {
+  content: '';
+  top: 0;
+  left: -100%;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  animation: progress 1s infinite;
+  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
+}
+
+@keyframes progress {
+  from {
+    left: -100%;
+  }
+  to {
+    left: 100%;
+  }
+}
+
 .playlist-list-item-thumb {
   background-color: #000;
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-  background-size: cover;
   border: 1px solid #444;
   float: left;
   margin-right: 10px;
   height: 100%;
   aspect-ratio: 16/9;
+  color: #555;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.playlist-list-item-img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
 
 .playlist-list-item-desc {

diff --git a/packages/plugins/src/playlist.ts b/packages/plugins/src/playlist.ts
@@ -64,7 +64,7 @@ export default class PlaylistPlugin implements PlayerPlugin {
     return this
   }
 
-  async _init() {
+  _init() {
     const start = () => {
       this.render()
       if (typeof initialIndex == 'number') {
@@ -108,46 +108,62 @@ export default class PlaylistPlugin implements PlayerPlugin {
     return this.$root.classList.contains('wait')
   }
 
-  async changeSource(idx: number) {
+  changeSource(idx: number) {
     if (!this.options.sources[idx] || this.isWaiting) return
 
-    this.$root.classList.add('wait')
-    let source: PlaylistSource = this.options.sources[idx]!
-    if (!source.src && this.options.customFetcher) {
-      try {
-        source = await this.options.customFetcher?.(source, idx)
-      } catch (e) {
-        // fail
-        this.$root.classList.remove('wait')
-        return
-      }
-    }
+    const $target = this.$root.querySelector(`.playlist-list-item[data-index='${idx}']`)
 
-    const { src, poster, format, title, subtitles, thumbnails, highlights } = source
+    this.$root.classList.add('wait')
+    $target?.classList.add('progress')
 
-    if (!src) return this.player.context.ui.notice('Empty Source')
-    this.currentIndex = idx
+    const source: PlaylistSource = this.options.sources[idx]!
 
-    this.player
-      .changeSource({ src, poster, format, title })
-      .then(() => {
-        if (subtitles) {
-          this.player.context.ui.subtitle.changeSource(subtitles)
-        }
-        if (thumbnails) {
-          this.player.context.ui.changThumbnails(thumbnails)
-        }
-        if (highlights) {
-          this.player.context.ui.changHighlightSource(highlights)
+    return new Promise<PlaylistSource>((resolve) => {
+      if (!source.src && this.options.customFetcher) {
+        resolve(this.options.customFetcher?.(source, idx))
+        return
+      }
+      resolve(source)
+    })
+      .then((source) => {
+        if (!source.src) {
+          this.player.context.ui.notice('Empty Source')
+          throw new Error('Empty Source')
         }
 
+        const { src, poster, format, title, subtitles, thumbnails, highlights } = source
+
+        return this.player.changeSource({ src, poster, format, title }).then(() => {
+          if (subtitles) {
+            this.player.context.ui.subtitle.changeSource(subtitles)
+          }
+          if (thumbnails) {
+            this.player.context.ui.changThumbnails(thumbnails)
+          }
+          if (highlights) {
+            this.player.context.ui.changHighlightSource(highlights)
+          }
+        })
+      })
+      .then(() => {
+        this.currentIndex = idx
         this.player.emit('playlistsourcechange', { source, id: idx })
         this.$root.querySelector('.playlist-list-item.active')?.classList.remove('active')
-        this.$root.querySelector(`.playlist-list-item[data-index='${idx}']`)?.classList.add('active')
-        if (this.options.autoHide) this.hideUI()
+        $target?.classList.add('active')
+        if (this.options.autoHide) {
+          setTimeout(() => {
+            this.hideUI()
+          }, 500)
+        }
+      })
+      .catch((err) => {
+        this.player.emit('playlistsourceerror', err)
       })
       .finally(() => {
-        this.$root.classList.remove('wait')
+        setTimeout(() => {
+          this.$root.classList.remove('wait')
+          $target?.classList.remove('progress')
+        }, 500)
       })
   }
 
@@ -224,7 +240,16 @@ export default class PlaylistPlugin implements PlayerPlugin {
       .map(
         (source, idx) => `
   <div class="playlist-list-item" data-index="${idx}">
-    <div class="playlist-list-item-thumb" style="background-image: url('${source.poster}');"></div>
+  <div class="playlist-list-item-thumb">
+    ${
+      source.poster
+        ? `<img class="playlist-list-item-img" src="${source.poster}" alt="${
+            source.title || ''
+          }" loading="lazy" />`
+        : '<span>EMPTY</span>'
+    }
+    </div>
+
     <div class="playlist-list-item-desc">
       <p>${source.title}</p>
       ${source.duration ? `<span>${source.duration}</span>` : ''}