add back to live tooltips

Author: shiyiya

packages/core/src/i18n/zh-CN.json

@@ -6,7 +6,8 @@
   "Volume: %s": "音量：%s",
   "Mute": "静音",
   "Speed": "播放速度",
-  "LIVE": "直播",
+  "Live": "直播",
+  "Back to Live": "回到直播",
 
   "Language": "语言",
   "Screenshot": "截图",

packages/shaka/src/index.ts

@@ -107,6 +107,10 @@ class ShakaPlugin implements PlayerPlugin {
       player.emit('error', { pluginName: ShakaPlugin.name, ...event })
     })
 
+    // eventManager.listen(this.instance, 'play', () => {
+    //   player.$video.currentTime = this.seekRange.end
+    // })
+
     try {
       await this.instance.load(source.src)
     } catch (error: any) {
@@ -115,12 +119,28 @@ class ShakaPlugin implements PlayerPlugin {
 
     if (player.options.isLive) {
       const button = player.$root.querySelector('[aria-label="time"')?.parentElement
-      const dot = button?.firstElementChild as HTMLSpanElement
+      const dot = button?.firstElementChild as HTMLSpanElement | undefined
 
-      if (button) {
+      if (button && dot) {
         eventManager.listen(button, 'click', () => {
           player.$video.currentTime = this.seekRange.end
         })
+
+        const backText = player.locales.get('Back to Live')
+        const updateIsLive = () => {
+          const timeBehindLiveEdge = this.seekRange.end - player.$video.currentTime
+          // var streamPosition = Date.now() / 1000 - timeBehindLiveEdge
+
+          if (timeBehindLiveEdge > 5) {
+            dot.style.backgroundColor = '#ccc'
+            button.ariaLabel = backText
+          } else {
+            dot.style.cssText = ''
+            button.removeAttribute('aria-label')
+          }
+        }
+
+        this.instance.eventManager.listen(player.$video, 'timeupdate', updateIsLive)
       }
 
       //TODO: revert
@@ -148,19 +168,6 @@ class ShakaPlugin implements PlayerPlugin {
           else player.$video.currentTime = v
         }
       })
-
-      const updateIsLive = () => {
-        const timeBehindLiveEdge = this.seekRange.end - player.$video.currentTime
-        // var streamPosition = Date.now() / 1000 - timeBehindLiveEdge
-
-        if (timeBehindLiveEdge > 5) {
-          dot.style.backgroundColor = '#ccc'
-        } else {
-          dot.style.cssText = ''
-        }
-      }
-
-      this.instance.eventManager.listen(player.$video, 'timeupdate', updateIsLive)
     }
 
     if (player.context.ui) {

packages/ui/src/components/ControllerBottom.ts

@@ -202,7 +202,7 @@ const render = (it: UIInterface, $el: HTMLDivElement) => {
     switcher($play, player.isPlaying)
   })
 
-  const LIVE = player.locales.get('LIVE')
+  const LIVE = player.locales.get('Live')
   player.on('volumechange', () => switcher($volume, player.isMuted))
   player.on(['durationchange', 'timeupdate', 'seeking', 'seeked'], () => {
     if (player.options.isLive) {