Added video zoom mode, auto play

Author: lgf196

README.md

@@ -79,9 +79,11 @@ The following attributes come from the `option` property configuration item
 
 | Parameter           | Description                                                  | type                      | Default value |
 | ------------------- | ------------------------------------------------------------ | ------------------------- | ------------- |
-| height              | The height of the video container (**required**)             | `number`                  | required      |
 | videoSrc            | Video address (**required**)                                 | `string`                  | required      |
+| mode | Video zoom mode | `scaleToFill`(Does not maintain the aspect ratio to scale the video)，`widthFix`(The width is unchanged, and the height changes automatically, keeping the aspect ratio of the original video unchanged)，`heightFix`(When the height is unchanged, the width changes automatically, keeping the aspect ratio of the original video unchanged) | `scaleToFill` |
+| height              | The height of the video container             | `number`                  | -     |
 | width               | The width of the video container                  | `number`                  | -     |
+| autoPlay | Video autoplay | `boolean` | false |
 | theme               | theme                                                        | `string`                  | \#ffb821      |
 | poster              | Video cover image                                            | `string`                  | -             |
 | setEndPlayContent   | Customize what is displayed at the end of the video          | `React.ReactNode`         | -             |

build/webpack.prod.config.js

@@ -1,57 +1,73 @@
 const merge = require("webpack-merge");
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 const common = require("./webpack.common.config.js");
 const path = require("path");
 
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const TerserPlugin = require("terser-webpack-plugin");
 
 module.exports = merge(common, {
-  mode: "production",
-  devtool: "",
-  entry: {
-    index: "./src/index",
-  },
-  output: {
-    filename: "[name].js",
-    path: path.resolve(__dirname, "../dist"),
-    libraryTarget: "commonjs2",
-  },
-  optimization: {
-    minimize: true,
-    minimizer: [new TerserPlugin()],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: ["style-loader", "css-loader"],
-      },
-      {
-        test: /\.s[ac]ss$/i,
-        use: [
-          // Creates `style` nodes from JS strings
-          "style-loader",
-          // Translates CSS into CommonJS
-          "css-loader",
-          // Compiles Sass to CSS
-          "sass-loader",
+    mode: "production",
+    devtool: "",
+    entry: {
+        index: "./src/index",
+    },
+    output: {
+        filename: "[name].js",
+        path: path.resolve(__dirname, "../dist"),
+        libraryTarget: "commonjs2",
+    },
+    optimization: {
+        minimize: true,
+        minimizer: [new TerserPlugin()],
+    },
+    module: {
+        rules: [{
+                test: /\.css$/,
+                use: ["style-loader", "css-loader"],
+            },
+            {
+                test: /\.s[ac]ss$/i,
+                use: [
+                    // Creates `style` nodes from JS strings
+                    "style-loader",
+                    // Translates CSS into CommonJS
+                    "css-loader",
+                    // Compiles Sass to CSS
+                    "sass-loader",
+                ],
+            },
         ],
-      },
-    ],
-  },
-  plugins: [new CleanWebpackPlugin()],
-  externals: {
-    react: {
-      root: "React",
-      commonjs2: "react",
-      commonjs: "react",
-      amd: "react",
     },
-    "react-dom": {
-      root: "ReactDOM",
-      commonjs2: "react-dom",
-      commonjs: "react-dom",
-      amd: "react-dom",
+    plugins: [new CleanWebpackPlugin(),
+        new CopyWebpackPlugin({
+            patterns: [{
+                    from: path.resolve(__dirname, '../package.json'),
+                },
+                {
+                    from: path.resolve(__dirname, '../README.md'),
+                },
+                {
+                    from: path.resolve(__dirname, '../zh.md'),
+                },
+                {
+                    from: path.resolve(__dirname, '../types/index.d.ts'),
+                },
+            ],
+        }),
+    ],
+    externals: {
+        react: {
+            root: "React",
+            commonjs2: "react",
+            commonjs: "react",
+            amd: "react",
+        },
+        "react-dom": {
+            root: "ReactDOM",
+            commonjs2: "react-dom",
+            commonjs: "react-dom",
+            amd: "react-dom",
+        },
     },
-  },
-});
+});

example/src/app.tsx

@@ -1,6 +1,6 @@
-import { callBackType, JoLPlayerRef, qualityKey } from '@/interface';
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, useMemo } from 'react';
 import { createRoot } from 'react-dom/client';
+import { callBackType, JoLPlayerRef, qualityKey } from 'types';
 import { JolPlayer } from '../../src/index';
 
 const AppCompent = () => {
@@ -71,11 +71,14 @@ const AppCompent = () => {
         option={{
           // videoType: 'hls',
           videoSrc:
-            'https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/prod/file/2021/08/31/540p.mp4',
+            // 'https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/prod/file/2021/08/31/540p.mp4',
+            'https://cdn.gudsen.vip/2022/11/14/422e7528fce64f03bf1b378cff393237.mp4',
           // 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
-          // width: 750,
-          height: 420,
+          height: 900,
+          // width: 500,
+          mode: 'heightFix',
           theme: 'red',
+          autoPlay: true,
           poster:
             'https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/prod/file/2021/08/31/1080pp.png',
           language: 'zh',