feat(avplayerui): 自动播放时如果 audioContext 处于 suspended 状态给出提示

src/ui/avplayer/AVPlayer.ts

@@ -255,6 +255,13 @@ const AVPlayerUIComponentOptions: ComponentOptions = {
     },
 
     playClick(container: boolean) {
+      const player = this.get('player') as AVPlayer
+      if (player.isSuspended()) {
+        player.resume()
+        if (player.getStatus() === AVPlayerStatus.PLAYED) {
+          return
+        }
+      }
       if (os.ios || os.android || os.harmony && os.mobile) {
         return
       }

src/ui/avplayer/components/control/volume/Volume.ts

@@ -34,9 +34,11 @@ const Volume: ComponentOptions = {
 
   watchers: {
     volume: function (volume) {
-      storage.set(storage.LOCAL_STORAGE_KEY_VOLUME, volume)
       const player = this.get('player') as AVPlayer
       player.setVolume(volume / 100)
+      if (!(player.isSuspended() && volume === 0)) {
+        storage.set(storage.LOCAL_STORAGE_KEY_VOLUME, volume)
+      }
     },
   },
 
@@ -48,6 +50,10 @@ const Volume: ComponentOptions = {
       }
       else {
         this.set('volume', this.get('lastVolume'))
+        const player = this.get('player') as AVPlayer
+        if (player.isSuspended()) {
+          player.resume()
+        }
       }
     }
   },
@@ -59,7 +65,16 @@ const Volume: ComponentOptions = {
     player.on(eventType.VOLUME_CHANGE + this.namespace, (volume) => {
       this.set('volume', Math.floor(volume * 100))
     })
-
+    player.on(eventType.PLAYED + this.namespace, () => {
+      if (player.isSuspended() && this.get('volume')) {
+        this.volumeClick()
+      }
+    })
+    player.on(eventType.AUDIO_CONTEXT_RUNNING + this.namespace, () => {
+      if (!this.get('volume')) {
+        this.volumeClick()
+      }
+    })
     player.setVolume(this.get('volume') / 100)
   },
 

src/ui/avplayer/components/loadingTip/LoadingTip.ts

@@ -1,5 +1,5 @@
 import { ComponentOptions } from 'yox'
-import AVPlayer, { AVPlayerProgress } from 'avplayer/AVPlayer'
+import AVPlayer, { AVPlayerProgress, AVPlayerStatus } from 'avplayer/AVPlayer'
 import * as eventType from 'avplayer/eventType'
 
 import template from './LoadingTip.hbs'
@@ -66,15 +66,25 @@ const LoadingTip: ComponentOptions = {
         clearTimeout(this.showTimer)
       }
       this.showTimer = setTimeout(() => {
-        this.set('showMessage', false)
         this.showTimer = null
+        if (player.isSuspended()) {
+          this.set('message', [this.get('language.LOADING_MESSAGE_RESUME')])
+        }
+        else {
+          this.set('showMessage', false)
+        }
       }, 2000)
     }
 
     player.on(eventType.PLAYED + this.namespace, () => {
       this.queue.push(() => {
         this.append('message', this.get('language.LOADING_MESSAGE_LOAD_END'))
       })
+      if (player.isSuspended()) {
+        this.queue.push(() => {
+          this.append('message', this.get('language.LOADING_MESSAGE_RESUME'))
+        })
+      }
       this.queue.end()
     })
     player.on(eventType.LOADING + this.namespace, () => {
@@ -86,6 +96,12 @@ const LoadingTip: ComponentOptions = {
       this.set('message', [])
       this.set('showMessage', true)
     })
+    player.on(eventType.AUDIO_CONTEXT_RUNNING + this.namespace, () => {
+      const message = this.get('message')
+      if (!this.showTimer && message.length === 1 && message[0] === this.get('language.LOADING_MESSAGE_RESUME')) {
+        this.set('showMessage', false)
+      }
+    })
     player.on(eventType.PROGRESS + this.namespace, (progress: AVPlayerProgress, data: string | AVStreamInterface) => {
       let message = this.get('language.' + info[progress])
       switch (progress) {
@@ -101,6 +117,10 @@ const LoadingTip: ComponentOptions = {
         this.append('message', message)
       })
     })
+
+    if (player.getStatus() >= AVPlayerStatus.LOADING) {
+      this.set('showMessage', true)
+    }
   },
 
   beforeDestroy() {

src/ui/avplayer/i18n/chinese.ts

@@ -52,6 +52,8 @@ export const LOADING_MESSAGE_LOAD_END = '已就绪 (`･ω･´)ゞ'
 
 export const LOADING_MESSAGE_LOAD_FAILED = '加载失败 (∩︵∩)'
 
+export const LOADING_MESSAGE_RESUME = '点击画面处或者底部音量按钮取消静音'
+
 export const INFO_TITLE = '统计信息'
 
 export const MENU_STATS = '源统计信息'

src/ui/avplayer/i18n/english.ts

@@ -50,6 +50,8 @@ export const LOADING_MESSAGE_LOAD_END = 'readied (`･ω･´)ゞ'
 
 export const LOADING_MESSAGE_LOAD_FAILED = 'failed (∩︵∩)'
 
+export const LOADING_MESSAGE_RESUME = 'Click on the screen or volume button in footer to unmute audio'
+
 export const INFO_TITLE = 'Stats Info'
 
 export const MENU_STATS = 'Source Stats Info'