update loading state

Author: shiyiya

packages/shaka/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oplayer/shaka",
-  "version": "1.2.26-beta.4",
+  "version": "1.2.26-beta.5",
   "description": "shaka-player plugin for oplayer",
   "type": "module",
   "main": "./dist/index.es.js",

packages/shaka/src/index.ts

@@ -102,21 +102,24 @@ class ShakaPlugin implements PlayerPlugin {
 
     const eventManager = (this.instance.eventManager = new ShakaPlugin.library.util.EventManager())
 
-    eventManager.listen(this.instance, 'loaded', (event) => {
-      player.emit('canplay', event)
+    eventManager.listen(this.instance, 'loading', (event) => {
+      player.emit('loading', event)
     })
 
-    eventManager.listen(this.instance, 'loading', (event) => {
-      player.emit('waiting', event)
+    eventManager.listen(this.instance, 'loaded', (event) => {
+      player.emit('loaded', event)
     })
 
     eventManager.listen(this.instance, 'error', (event) => {
       player.emit('error', { pluginName: ShakaPlugin.name, ...event })
     })
 
-    // eventManager.listen(this.instance, 'play', () => {
-    //   player.$video.currentTime = this.seekRange.end
-    // })
+    eventManager.listenOnce(player.$video, 'seeking', () => {
+      // ignore first seeking ?
+      setTimeout(() => {
+        player.emit('seeked')
+      })
+    })
 
     try {
       await this.instance.load(source.src)
@@ -125,6 +128,10 @@ class ShakaPlugin implements PlayerPlugin {
     }
 
     if (player.options.isLive) {
+      eventManager.listenOnce(player.$video, 'loadedmetadata', () => {
+        player.$video.currentTime = this.seekRange.end
+      })
+
       const button = player.$root.querySelector('[aria-label="time"')?.parentElement
       const dot = button?.firstElementChild as HTMLSpanElement | undefined
 

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oplayer/ui",
-  "version": "1.3.4-beta.7",
+  "version": "1.3.4-beta.8",
   "description": "ui plugin for oplayer",
   "type": "module",
   "main": "./dist/index.es.js",

packages/ui/src/listeners/loading.ts

@@ -18,7 +18,7 @@ const loadingListener = (player: Player) => {
     if (player.$video.preload == 'none') removeClass()
   })
 
-  player.on(['loading', 'seeking', 'videoqualitychange', 'videosourcechange'], addClass)
+  player.on(['loading', 'seeking', 'videoqualitychange', 'videosourcechange', 'waiting'], addClass)
   player.on(['loaded', 'canplaythrough', 'playing', 'pause', 'seeked', 'error'], removeClass)
 
   // safari 不预加载, 当 autoplay = true 才触发 canplay(预加载), 改变视频地址后默认预加载(或者是有用户交互?)
@@ -29,27 +29,29 @@ const loadingListener = (player: Player) => {
     player.$root.classList.remove(loading)
   )
 
-  // why playing:  暂停很久后在播放可能会卡很久
-  player.on(['waiting', 'playing'], ({ type }) => {
-    const timeWhenWaiting = player.currentTime
-
-    if (!timeWhenWaiting) return
+  let prevPlayStateIsPaused: boolean = !player.isPlaying
 
-    if (type == 'waiting') addClass()
-
-    // Browsers may emit a timeupdate event after a waiting event. In order to prevent
-    // premature removal of the waiting class, wait for the time to change.
+  player.on(['play', 'pause'], () => {
+    prevPlayStateIsPaused = !player.isPlaying
+  })
 
-    const timeUpdateListener = () => {
-      if (timeWhenWaiting !== player.currentTime) {
-        removeClass()
-        player.off('timeupdate', timeUpdateListener)
-      } else {
-        addClass()
+  // why playing:  暂停很久后在播放可能会卡很久
+  player.on('playing', () => {
+    if (prevPlayStateIsPaused) {
+      const timeWhenWaiting = player.currentTime
+      // Browsers may emit a timeupdate event after a waiting event. In order to prevent
+      // premature removal of the waiting class, wait for the time to change.
+      const timeUpdateListener = () => {
+        if (timeWhenWaiting !== player.currentTime) {
+          removeClass()
+          player.off('timeupdate', timeUpdateListener)
+        } else {
+          addClass()
+        }
       }
-    }
 
-    player.on('timeupdate', timeUpdateListener)
+      player.on('timeupdate', timeUpdateListener)
+    }
   })
 }