{
60 | dp?: DPlayer;
61 | container?: Element;
62 | }
63 | }
--------------------------------------------------------------------------------
/src/DPlayer.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import clsx from 'clsx';
3 | import omit from 'omit.js';
4 | import DPlayer from 'dplayer';
5 |
6 | const events = [
7 | "abort", "canplay", "canplaythrough",
8 | "durationchange", "emptied", "ended",
9 | "error", "loadeddata", "loadedmetadata",
10 | "loadstart", "mozaudioavailable", "pause",
11 | "play", "playing", "progress", "ratechange",
12 | "seeked", "seeking", "stalled", "suspend",
13 | "timeupdate", "volumechange", "waiting",
14 | "screenshot", "thumbnails_show", "thumbnails_hide",
15 | "danmaku_show", "danmaku_hide", "danmaku_clear",
16 | "danmaku_loaded", "danmaku_send", "danmaku_opacity",
17 | "contextmenu_show", "contextmenu_hide", "notice_show",
18 | "notice_hide", "quality_start", "quality_end",
19 | "destroy", "resize", "fullscreen", "fullscreen_cancel",
20 | "subtitle_show", "subtitle_hide", "subtitle_change"
21 | ];
22 | const capitalize = function (str) {
23 | return `${str.charAt(0).toUpperCase()}${str.substring(1)}`;
24 | };
25 | const capitalizeEventName = function (str) {
26 | return str.split('_').map(capitalize).join('');
27 | };
28 | const eventsProps = events.map(eventName => ({ eventName, prop: `on${capitalizeEventName(eventName)}` }))
29 |
30 | class DPlayerComponent extends React.Component {
31 |
32 | constructor(props, context) {
33 | super(props, context);
34 | }
35 |
36 | componentDidMount() {
37 | let { onLoad, options } = this.props;
38 | //new player
39 | const player = this.dp = new DPlayer({
40 | ...Object.assign({}, {
41 | lang: 'zh-cn',
42 | contextmenu: [
43 | {
44 | text: 'Author',
45 | link: 'https://github.com/hnsylitao'
46 | },
47 | {
48 | text: 'GitHub',
49 | link: 'https://github.com/MoePlayer/react-dplayer'
50 | }
51 | ],
52 | }, options),
53 | container: this.container
54 | });
55 | //run load
56 | onLoad && onLoad(player);
57 | //bind player events
58 | eventsProps.forEach(({ eventName, prop }) => {
59 | if (prop in this.props) {
60 | player.on(eventName, this.props[prop])
61 | }
62 | })
63 | }
64 |
65 | render() {
66 | const { className, ...otherProps } = this.props;
67 | const resetProps = omit(otherProps, ['options', 'onLoad', ...eventsProps.map(ev => ev.prop)])
68 | const wrapperClassName = clsx({
69 | [`dplayer`]: true,
70 | [`${className}`]: !!className,
71 | });
72 | return this.container = ref} className={wrapperClassName} {...resetProps} />;
73 | }
74 | }
75 |
76 | export default DPlayerComponent;
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import DPlayer from './DPlayer';
2 |
3 | export default DPlayer;
4 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const rootPath = process.cwd();
3 | const srcPath = path.resolve(rootPath, 'src');
4 | const pkg = require('./package.json');
5 | const libraryName = 'ReactDPlayer';
6 | const webpack = require('webpack');
7 | const { merge } = require('webpack-merge');
8 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
9 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
10 |
11 | const baseWebpackConfig = {
12 | output: {
13 | path: path.resolve(rootPath, 'dist'),
14 | filename: '[name].js',
15 | chunkFilename: '[name].js',
16 | library: libraryName,
17 | libraryTarget: 'umd',
18 | },
19 | externals: {
20 | [`react`]: {
21 | root: 'React',
22 | commonjs2: 'react',
23 | commonjs: 'react',
24 | amd: 'react',
25 | },
26 | [`dplayer`]: 'DPlayer',
27 | },
28 | devtool: '#sourcemap',
29 | resolve: {
30 | modules: ['node_modules'],
31 | extensions: ['.js', '.jsx', '.json'],
32 | },
33 | optimization: {
34 | splitChunks: {
35 | cacheGroups: {
36 | styles: {
37 | name: 'styles',
38 | test: /\.css$/,
39 | chunks: 'all',
40 | enforce: true,
41 | },
42 | },
43 | },
44 | },
45 | module: {
46 | rules: [
47 | {
48 | test: /\.(js|jsx)$/,
49 | exclude: [/node_modules/],
50 | use: [
51 | {
52 | loader: 'babel-loader',
53 | options: {
54 | configFile: path.resolve(rootPath, 'babelrc/default/.babelrc'),
55 | },
56 | },
57 | ],
58 | },
59 | {
60 | test: /\.css$/,
61 | use: [MiniCssExtractPlugin.loader, 'css-loader'],
62 | },
63 | ],
64 | },
65 | plugins: [
66 | new MiniCssExtractPlugin({
67 | filename: '[name].css',
68 | }),
69 | new webpack.optimize.OccurrenceOrderPlugin(),
70 | new webpack.NoEmitOnErrorsPlugin(),
71 | new webpack.BannerPlugin(
72 | `${pkg.name} v${pkg.version}
73 |
74 | Copyright 2017-present, MoePlayer, Inc.
75 | All rights reserved.`,
76 | ),
77 | ],
78 | };
79 |
80 | const createWebpackConfig = function (config) {
81 | return merge(baseWebpackConfig, config);
82 | };
83 |
84 | const minWebpackConfig = createWebpackConfig({
85 | mode: 'production',
86 | entry: {
87 | [`${pkg.name}.min`]: path.resolve(srcPath, 'index.js'),
88 | },
89 | optimization: {
90 | minimizer: [
91 | new UglifyJsPlugin({
92 | uglifyOptions: {
93 | warnings: false,
94 | output: {
95 | ascii_only: true,
96 | },
97 | },
98 | sourceMap: true,
99 | }),
100 | ],
101 | },
102 | plugins: [
103 | new webpack.DefinePlugin({
104 | 'process.env.NODE_ENV': JSON.stringify('production'),
105 | }),
106 | ],
107 | });
108 |
109 | const uncompressedWebpackConfig = createWebpackConfig({
110 | mode: 'development',
111 | entry: {
112 | [`${pkg.name}`]: path.resolve(srcPath, 'index.js'),
113 | },
114 | plugins: [
115 | new webpack.DefinePlugin({
116 | 'process.env.NODE_ENV': JSON.stringify('development'),
117 | }),
118 | ],
119 | });
120 |
121 | module.exports = [minWebpackConfig, uncompressedWebpackConfig];
122 |
--------------------------------------------------------------------------------