feat(avplayerui): 支持配置 footer，支持通过 url 参数控制 ui 和播放

product/player/player.html

@@ -90,6 +90,12 @@
     let supportSimd = false
     let useWasm64 = false
 
+    const search = new URL(location.href).searchParams
+    const params = {}
+    for (const [key, value] of search) {
+      params[key] = value
+    }
+
     let player
 
     function run() {
@@ -181,10 +187,29 @@
         errorStateUrl: './img/error.svg',
         fullscreenDom: document.body,
         ui: {
-          hasFolder: true,
-          hasHeader: true
+          hasFolder: !params.hasFolder || params.hasFolder && params.hasFolder !== '0' && params.hasFolder !== 'false',
+          hasHeader: !params.hasHeader || params.hasHeader && params.hasHeader !== '0' && params.hasHeader !== 'false',
+          hasFooter: !params.hasFooter || params.hasFooter && params.hasFooter !== '0' && params.hasFooter !== 'false'
         }
       })
+      if (player.options.ui.hasFolder) {
+        player.on('folderLoaded', () => {
+          if (params.url) {
+            player.addUrl(params.url, !(!params.isLive || params.isLive === '0' || params.isLive === 'false'), true)
+          }
+        })
+        if (params.foldFolder && params.foldFolder !== '0' && params.foldFolder !== 'false') {
+          player.foldFolder()
+        }
+      }
+      if (params.url && !player.options.ui.hasFolder) {
+        player.load(params.url, {
+          isLive: !(!params.isLive || params.isLive === '0' || params.isLive === 'false')
+        }).then(() => {
+          player.play()
+        })
+      }
+
 
       if (typeof VideoDecoder === 'function' && (AVPlayer.Util.os.windows || AVPlayer.Util.os.mac || AVPlayer.Util.os.linux)) {
         const support = VideoDecoder.isConfigSupported({

src/ui/avplayer/AVPlayer.hbs

@@ -10,6 +10,7 @@
   </div>
   {{/if}}
 
+  {{#if hasFooter}}
   <div class="avplayer-ui-footer">
     {{#if !isLive}}
     <div class="avplayer-ui-progress-container">
@@ -19,7 +20,7 @@
     <div class="avplayer-ui-control">
       <div class="avplayer-ui-footer-left">
         <div class="avplayer-ui-control-item">
-          <Play player="{{player}}" language="{{language}}" model="played" ref="play" />
+          <Play player="{{player}}" language="{{language}}" played="{{played}}" ref="play" />
         </div>
         <div class="avplayer-ui-control-item">
           <Volume player="{{player}}" language="{{language}}" />
@@ -68,6 +69,7 @@
       </div>
     </div>
   </div>
+  {{/if}}
 
   {{#if hasFolder}}
   <div class="avplayer-ui-folder-container" data-fold="{{folded ? 1 : 0}}">
@@ -76,7 +78,7 @@
         <path d="m10 17 5-5-5-5v10z"></path>
       </svg>
     </div>
-    <Folder player="{{player}}" language="{{language}}" />
+    <Folder ref="folder" player="{{player}}" language="{{language}}"  />
   </div>
   {{/if}}
 

src/ui/avplayer/AVPlayer.ts

@@ -35,6 +35,7 @@ import debounce from 'common/function/debounce'
 import { AVMediaType } from 'avutil/codec'
 import { AVStreamInterface } from 'avutil/AVStream'
 import Keyboard from './Keyboard'
+import * as eventTypeUI from './eventType'
 
 import outside from '../util/outside'
 
@@ -72,6 +73,10 @@ const AVPlayerUIComponentOptions: ComponentOptions = {
     hasHeader: {
       type: 'boolean',
       value: true
+    },
+    hasFooter: {
+      type: 'boolean',
+      value: true
     }
   },
 
@@ -126,6 +131,11 @@ const AVPlayerUIComponentOptions: ComponentOptions = {
 
     closeSettings: function () {
       this.set('showSettings', false)
+    },
+
+    folderLoaded: function () {
+      const player = this.get('player') as AVPlayer
+      player.fire(eventTypeUI.FOLDER_LOADED)
     }
   },
 
@@ -216,6 +226,7 @@ const AVPlayerUIComponentOptions: ComponentOptions = {
       }
       this.set('streams', player.getStreams())
       this.set('isLive', player.isLive())
+      this.set('played', player.getStatus() === AVPlayerStatus.PLAYED)
 
       player.getVideoList().then((list) => {
         this.set('videoList', list.list)
@@ -264,6 +275,10 @@ const AVPlayerUIComponentOptions: ComponentOptions = {
       this.set('folded', false)
     },
 
+    toggleFolder() {
+      this.set('folded', !this.get('folded'))
+    },
+
     menuAction(action: MenuAction) {
       if (action === MenuAction.STATS) {
         this.set('showInfo', true)
@@ -273,6 +288,12 @@ const AVPlayerUIComponentOptions: ComponentOptions = {
 
     menuOutside() {
       this.set('showMenu', false)
+    },
+
+    addUrl(url: string, isLive: boolean, playAfterAdded: boolean) {
+      if (this.$refs.folder) {
+        this.$refs.folder.openUrl(url, isLive, playAfterAdded)
+      }
     }
   },
 
@@ -295,10 +316,15 @@ const AVPlayerUIComponentOptions: ComponentOptions = {
     })
     player.on(eventType.PLAYED + this.namespace, () => {
       this.set('loading', false)
+      this.set('played', true)
+    })
+    player.on(eventType.PAUSED + this.namespace, () => {
+      this.set('played', false)
     })
     player.on(eventType.STOPPED + this.namespace, () => {
       this.set('title', '')
       this.set('streams', [])
+      this.set('played', false)
     })
     if (player.getStatus() >= AVPlayerStatus.LOADED) {
       this.init(player)
@@ -360,6 +386,7 @@ export interface AVPlayerUIOptions extends AVPlayerOptions {
   ui?: {
     hasFolder?: boolean
     hasHeader?: boolean
+    hasFooter?: boolean
   }
 }
 
@@ -382,7 +409,8 @@ export default class AVPlayerUI extends AVPlayer {
         errorStateUrl: options.errorStateUrl,
         fullscreenDom: options.fullscreenDom,
         hasFolder: options.ui?.hasFolder,
-        hasHeader: options.ui?.hasHeader
+        hasHeader: options.ui?.hasHeader,
+        hasFooter: options.ui?.hasFooter
       }
     }, AVPlayerUIComponentOptions))
 
@@ -399,6 +427,16 @@ export default class AVPlayerUI extends AVPlayer {
     this.ui.unfold()
   }
 
+  public toggleFolder() {
+    // @ts-ignore
+    this.ui.toggleFolder()
+  }
+
+  public addUrl(url: string, isLive: boolean, playAfterAdded: boolean) {
+    // @ts-ignore
+    this.ui.addUrl(url, isLive, playAfterAdded)
+  }
+
   public async destroy() {
     await super.destroy()
     this.keyboard.destroy()

src/ui/avplayer/Keyboard.ts

@@ -279,7 +279,7 @@ export default class Keyboard {
   }
 
   private actionFoldFolder() {
-    this.player.foldFolder()
+    this.player.toggleFolder()
   }
 
   private actionUnFoldFolder() {

src/ui/avplayer/components/control/play/Play.ts

@@ -9,8 +9,6 @@ const Play: ComponentOptions = {
 
   name: 'Play',
 
-  model: 'played',
-
   template,
 
   propTypes: {
@@ -63,40 +61,7 @@ const Play: ComponentOptions = {
       }
       this.set('played', !this.get('played'))
     },
-
-    init(player: AVPlayer) {
-      this.set('played', player.getStatus() === AVPlayerStatus.PLAYED)
-    }
-  },
-
-  afterMount() {
-    this.namespace = '.component_control_play' + Math.random()
-
-    const player = this.get('player') as AVPlayer
-
-    player.on(eventType.STOPPED + this.namespace, () => {
-      this.set('played', false)
-    })
-    player.on(eventType.PAUSED + this.namespace, () => {
-      this.set('played', false)
-    })
-    player.on(eventType.PLAYED + this.namespace, () => {
-      this.set('played', true)
-    })
-    player.on(eventType.LOADED + this.namespace, () => {
-      this.init(player)
-    })
-    if (player.getStatus() >= AVPlayerStatus.LOADED) {
-      this.init(player)
-    }
   },
-
-  beforeDestroy() {
-    const player = this.get('player') as AVPlayer
-    if (this.namespace) {
-      player.off(this.namespace)
-    }
-  }
 }
 
 export default Play