fix quality component hiding issue (#342)

* 修复清晰度组件在ios设备上点击不隐藏问题 * chore: make it easier to import development script in demo files --------- Co-authored-by: ji <[email protected]>
aliyunvideo · Nov 29, 2024 · bdabffa · bdabffa
1 parent 46986ed
commit bdabffa
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 6 deletions.
diff --git a/customComponents/demo/audio-track.html b/customComponents/demo/audio-track.html
@@ -7,7 +7,7 @@
   <title>Aliplayer Functions</title>
   <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.27.1/skins/default/aliplayer-min.css" />
   <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.27.1/aliplayer-min.js"></script>
-  <script src="./aliplayercomponents-1.1.2.js"></script>
+  <script src="./aliplayercomponents.js"></script>
 </head>
 <body>
 <div id="player-con"></div>

diff --git a/customComponents/demo/play-list.html b/customComponents/demo/play-list.html
@@ -7,7 +7,7 @@
   <title>Aliplayer Functions</title>
   <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.26.0/skins/default/aliplayer-min.css" />
   <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.26.0/aliplayer-min.js"></script>
-  <script src="./aliplayercomponents-1.1.0.js"></script>
+  <script src="./aliplayercomponents.js"></script>
 </head>
 <body>
 <div id="player-con"></div>

diff --git a/customComponents/demo/quality-component.html b/customComponents/demo/quality-component.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="IE=edge" >
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
+  <title>Aliplayer Functions</title>
+  <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.27.1/skins/default/aliplayer-min.css" />
+  <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.27.1/aliplayer-min.js"></script>
+  <!-- 请下载之后使用 -->
+  <script src="./aliplayercomponents.js"></script>
+</head>
+<body>
+<div id="player-con"></div>
+<script>
+  var player = new Aliplayer({
+    id: "player-con",
+    source: JSON.stringify({"HD":"//player.alicdn.com/resource/player/qupai.mp4", "SD":"//player.alicdn.com/video/editor.mp4"}),
+    width: "100%",
+    autoSize: true,
+    clickPause: true,
+    components: [{
+      name: 'QualityComponent',
+      type: AliPlayerComponent.QualityComponent,
+      args: [function(definition,desc) {
+        console.log(definition + '-----' + desc)
+      }]
+    }]
+  }, function(player) {
+    console.log("The player is created");
+
+    /* Register the sourceloaded of the player, query the resolution of the video, invoke the resolution component, and call the setCurrentQuality method to set the resolution. */
+    player.on('sourceloaded', function(params) {
+      var paramData = params.paramData
+      var desc = paramData.desc
+      var definition = paramData.definition
+      player.getComponent('QualityComponent').setCurrentQuality(desc, definition)
+    })
+  });
+</script>
+</body>
+</html>
diff --git a/customComponents/demo/track-component.html b/customComponents/demo/track-component.html
@@ -8,7 +8,7 @@
   <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.26.0/skins/default/aliplayer-min.css" />
   <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.26.0/aliplayer-min.js"></script>
   <!-- 请下载之后使用 -->
-   <script src="./aliplayercomponents-1.1.0.js"></script>
+   <script src="./aliplayercomponents.js"></script>
 </head>
 <body>
 <div id="player-con"></div>

diff --git a/customComponents/dist/aliplayer-components/aliplayercomponents-1.1.4.min.js b/customComponents/dist/aliplayer-components/aliplayercomponents-1.1.4.min.js
diff --git a/customComponents/package-lock.json b/customComponents/package-lock.json
diff --git a/customComponents/package.json b/customComponents/package.json
@@ -1,6 +1,6 @@
 {
   "name": "custom-components",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "aliplayer's components",
   "main": "index.js",
   "scripts": {

diff --git a/customComponents/src/components/QualityComponent/index.js b/customComponents/src/components/QualityComponent/index.js
@@ -51,6 +51,9 @@ export default class QualityComponent {
     let qualityListEle = this.html.querySelector('.quality-list')
     qualityListEle.style.display = 'none';
 
+    player.on('settingListHide', () => {
+      qualityListEle.style.display = 'none';
+    })
     player.on('selectorUpdateList', (param) => {
       if (param.paramData.type !== 'quality') return;
       if (!player.getOptions().isVBR) return;

diff --git a/customComponents/webpack.config.customize.js b/customComponents/webpack.config.customize.js
@@ -18,7 +18,7 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, './dist/aliplayer-components'),
     publicPath: '',
-    filename: './aliplayercomponents-' + pkg.version + (isDev ? '.js' : '.min.js')
+    filename: `./aliplayercomponents${isDev ? '.js' : ('-' + pkg.version + '.min.js')}`
   },
   resolve: {
     extensions: ['.js', '.json'],