├── .babelrc
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── config
    ├── env.js
    ├── paths.js
    ├── polyfills.js
    └── webpack.config.prod.js
├── lib
    └── index.js
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── manifest.json
    └── xgplayer-demo.mp4
├── scripts
    └── build.js
├── server.js
└── src
    ├── App.css
    ├── App.js
    ├── index.css
    ├── index.js
    ├── registerServiceWorker.js
    └── xgplayer-react.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ['react', 'es2015'],
3 |   "plugins": ['transform-react-jsx']
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 
23 | yarn.lock
24 | package-lock.json
25 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | build
 2 | config
 3 | public
 4 | scripts
 5 | src/App.css
 6 | src/App.js
 7 | src/index.css
 8 | src/index.js
 9 | src/registerServiceWorker.js
10 | server.js
11 | yarn.lock
12 | package-lock.json
13 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Bytedance Inc.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <div align="center">
  2 |     <img src="https://raw.githubusercontent.com/bytedance/xgplayer/master/xgplayer.png" width="384" height="96">
  3 | </div>
  4 | <div align="center">
  5 |     <a href="https://www.npmjs.com/package/xgplayer-react" target="_blank">
  6 |         <img src="https://img.shields.io/npm/v/xgplayer-react.svg" alt="npm">
  7 |     </a>
  8 |     <a href="https://www.npmjs.com/package/xgplayer-react" target="_blank">
  9 |         <img src="https://img.shields.io/npm/l/xgplayer-react.svg" alt="license">
 10 |     </a>
 11 |     <a href="http://commitizen.github.io/cz-cli/">
 12 |         <img src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg" alt="commitizen">
 13 |     </a>
 14 | </div>
 15 | 
 16 | ### Introduction
 17 | 
 18 | xgplayer is a web video player library. It has designed a separate, detachable UI component based on the principle that everything is componentized. More importantly, it is not only flexible in the UI layer, but also bold in its functionality: it gets rid of video loading, buffering, and format support for video dependence. Especially on mp4
 19 | it can be staged loading for that does not support streaming mp4. This means seamless switching with clarity, load control, and video savings. It also integrates on-demand and live support for FLV, HLS, and dash. [Document](http://h5player.bytedance.com/en/)
 20 | 
 21 | xgplayer-react is the React component which encapsulating the xgplayer.
 22 | 
 23 | ### Start
 24 | 
 25 | 1. Install
 26 | 
 27 |     ```
 28 |     $ npm install xgplayer-react@latest
 29 |     ```
 30 | 
 31 | 2. Usage
 32 | 
 33 |     Step 1. Add xgplayer-react component
 34 |     ```js
 35 |     import Xgplayer from 'xgplayer-react';
 36 |     ```
 37 | 
 38 |     Step 2. Use in template
 39 |     ```html
 40 |     <Xgplayer config={config} playerInit={(player)=>{ Player = player; }} />
 41 |     ```
 42 | 
 43 |     Step 3. Config for xgplayer
 44 |     ```js
 45 |     let config = {
 46 |       id: 'mse',
 47 |       url: '/xgplayer-demo.mp4'
 48 |     };
 49 |     let Player = null;
 50 |     ```
 51 |     You can use 'config' object to pre-config xgplayer, such as size, volume, autoplay and so on. [More config](http://h5player.bytedance.com/en/config/)
 52 | 
 53 |     'mp4', 'hls', 'flv', 'dash' are supported to play and you should add the plugin you want to use. [Functional Plugins List](http://h5player.bytedance.com/en/plugins/#functional-plugins-list).
 54 | 
 55 |     'Player' is the xgplayer instance which exposed from the component. You can use 'Player' to access the API of xgplayer as follows.
 56 | 
 57 | 
 58 | ### API
 59 | 
 60 | #### Attributes
 61 | 
 62 | ```js
 63 | console.log(Player.currentTime)
 64 | ```
 65 | [More attributes](http://h5player.bytedance.com/en/api/#attributes)
 66 | 
 67 | #### Method
 68 | 
 69 | ```js
 70 | Player.pause();
 71 | ```
 72 | [More methods](http://h5player.bytedance.com/en/api/#method)
 73 | 
 74 | #### Event
 75 | 
 76 | ```js
 77 | Player.on('play', ()=>{console.log('play')})
 78 | ```
 79 | [More events](http://h5player.bytedance.com/en/api/#event)
 80 | 
 81 | #### Life Cycle
 82 | 
 83 | ```js
 84 | Player.once('ready', ()=>{console.log('ready')})
 85 | ```
 86 | [More events](http://h5player.bytedance.com/en/api/#life-cycle)
 87 | 
 88 | 
 89 | ### Plugins
 90 | 
 91 | xgplayer supports your custom plugins for more content viewing [plugins](http://h5player.bytedance.com/en/plugins/)
 92 | 
 93 | ```js
 94 | import Xgplayer from 'xgplayer-react';
 95 | import 'xgplayer-custom';
 96 | ```
 97 | 
 98 | ### Demo
 99 | 
100 | ```
101 | $ git clone git@github.com:bytedance/xgplayer-react.git
102 | $ cd xgplayer-react
103 | $ npm install
104 | $ npm start
105 | ```
106 | 
107 | please visit [http://localhost:9090/index.html](http://localhost:9090/index.html)
108 | 
109 | 
110 | ### License
111 | 
112 | [MIT](http://opensource.org/licenses/MIT)
113 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.  Variable expansion is supported in .env files.
31 | // https://github.com/motdotla/dotenv
32 | // https://github.com/motdotla/dotenv-expand
33 | dotenvFiles.forEach(dotenvFile => {
34 |   if (fs.existsSync(dotenvFile)) {
35 |     require('dotenv-expand')(
36 |       require('dotenv').config({
37 |         path: dotenvFile,
38 |       })
39 |     );
40 |   }
41 | });
42 | 
43 | // We support resolving modules according to `NODE_PATH`.
44 | // This lets you use absolute paths in imports inside large monorepos:
45 | // https://github.com/facebookincubator/create-react-app/issues/253.
46 | // It works similar to `NODE_PATH` in Node itself:
47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
50 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
51 | // We also resolve them to make sure all tools using them work consistently.
52 | const appDirectory = fs.realpathSync(process.cwd());
53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
54 |   .split(path.delimiter)
55 |   .filter(folder => folder && !path.isAbsolute(folder))
56 |   .map(folder => path.resolve(appDirectory, folder))
57 |   .join(path.delimiter);
58 | 
59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
60 | // injected into the application via DefinePlugin in Webpack configuration.
61 | const REACT_APP = /^REACT_APP_/i;
62 | 
63 | function getClientEnvironment(publicUrl) {
64 |   const raw = Object.keys(process.env)
65 |     .filter(key => REACT_APP.test(key))
66 |     .reduce(
67 |       (env, key) => {
68 |         env[key] = process.env[key];
69 |         return env;
70 |       },
71 |       {
72 |         // Useful for determining whether we’re running in production mode.
73 |         // Most importantly, it switches React into the correct mode.
74 |         NODE_ENV: process.env.NODE_ENV || 'development',
75 |         // Useful for resolving the correct path to static assets in `public`.
76 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
77 |         // This should only be used as an escape hatch. Normally you would put
78 |         // images into the `src` and `import` them in code to get their paths.
79 |         PUBLIC_URL: publicUrl,
80 |       }
81 |     );
82 |   // Stringify all values so we can feed into Webpack DefinePlugin
83 |   const stringified = {
84 |     'process.env': Object.keys(raw).reduce((env, key) => {
85 |       env[key] = JSON.stringify(raw[key]);
86 |       return env;
87 |     }, {}),
88 |   };
89 | 
90 |   return { raw, stringified };
91 | }
92 | 
93 | module.exports = getClientEnvironment;
94 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebookincubator/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(path, needsSlash) {
15 |   const hasSlash = path.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return path.substr(path, path.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${path}/`;
20 |   } else {
21 |     return path;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appBuild: resolveApp('build'),
45 |   appPublic: resolveApp('public'),
46 |   appHtml: resolveApp('public/index.html'),
47 |   appIndexJs: resolveApp('src/index.js'),
48 |   appPackageJson: resolveApp('package.json'),
49 |   appSrc: resolveApp('src'),
50 |   yarnLockFile: resolveApp('yarn.lock'),
51 |   testsSetup: resolveApp('src/setupTests.js'),
52 |   appNodeModules: resolveApp('node_modules'),
53 |   publicUrl: getPublicUrl(resolveApp('package.json')),
54 |   servedPath: getServedPath(resolveApp('package.json')),
55 | };
56 | 


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 
18 | // In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
19 | // We don't polyfill it in the browser--this is user's responsibility.
20 | if (process.env.NODE_ENV === 'test') {
21 |   require('raf').polyfill(global);
22 | }
23 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
  8 | const ManifestPlugin = require('webpack-manifest-plugin');
  9 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 10 | const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 11 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 12 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 13 | const paths = require('./paths');
 14 | const getClientEnvironment = require('./env');
 15 | 
 16 | // Webpack uses `publicPath` to determine where the app is being served from.
 17 | // It requires a trailing slash, or the file assets will get an incorrect path.
 18 | const publicPath = paths.servedPath;
 19 | // Some apps do not use client-side routing with pushState.
 20 | // For these, "homepage" can be set to "." to enable relative asset paths.
 21 | const shouldUseRelativeAssetPaths = publicPath === './';
 22 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 23 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 24 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 25 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 26 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 27 | const publicUrl = publicPath.slice(0, -1);
 28 | // Get environment variables to inject into our app.
 29 | const env = getClientEnvironment(publicUrl);
 30 | 
 31 | // Assert this just to be safe.
 32 | // Development builds of React are slow and not intended for production.
 33 | if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 34 |   throw new Error('Production builds must have NODE_ENV=production.');
 35 | }
 36 | 
 37 | // Note: defined here because it will be used more than once.
 38 | const cssFilename = 'static/css/[name].[contenthash:8].css';
 39 | 
 40 | // ExtractTextPlugin expects the build output to be flat.
 41 | // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 42 | // However, our output is structured with css, js and media folders.
 43 | // To have this structure working with relative paths, we have to use custom options.
 44 | const extractTextPluginOptions = shouldUseRelativeAssetPaths
 45 |   ? // Making sure that the publicPath goes back to to build folder.
 46 |     { publicPath: Array(cssFilename.split('/').length).join('../') }
 47 |   : {};
 48 | 
 49 | // This is the production configuration.
 50 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 51 | // The development configuration is different and lives in a separate file.
 52 | module.exports = {
 53 |   // Don't attempt to continue if there are any errors.
 54 |   bail: true,
 55 |   // We generate sourcemaps in production. This is slow but gives good results.
 56 |   // You can exclude the *.map files from the build during deployment.
 57 |   devtool: shouldUseSourceMap ? 'source-map' : false,
 58 |   // In production, we only want to load the polyfills and the app code.
 59 |   entry: [require.resolve('./polyfills'), paths.appIndexJs],
 60 |   output: {
 61 |     // The build folder.
 62 |     path: paths.appBuild,
 63 |     // Generated JS file names (with nested folders).
 64 |     // There will be one main bundle, and one file per asynchronous chunk.
 65 |     // We don't currently advertise code splitting but Webpack supports it.
 66 |     filename: 'static/js/[name].[chunkhash:8].js',
 67 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 68 |     // We inferred the "public path" (such as / or /my-project) from homepage.
 69 |     publicPath: publicPath,
 70 |     // Point sourcemap entries to original disk location (format as URL on Windows)
 71 |     devtoolModuleFilenameTemplate: info =>
 72 |       path
 73 |         .relative(paths.appSrc, info.absoluteResourcePath)
 74 |         .replace(/\\/g, '/'),
 75 |   },
 76 |   resolve: {
 77 |     // This allows you to set a fallback for where Webpack should look for modules.
 78 |     // We placed these paths second because we want `node_modules` to "win"
 79 |     // if there are any conflicts. This matches Node resolution mechanism.
 80 |     // https://github.com/facebookincubator/create-react-app/issues/253
 81 |     modules: ['node_modules', paths.appNodeModules].concat(
 82 |       // It is guaranteed to exist because we tweak it in `env.js`
 83 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 84 |     ),
 85 |     // These are the reasonable defaults supported by the Node ecosystem.
 86 |     // We also include JSX as a common component filename extension to support
 87 |     // some tools, although we do not recommend using it, see:
 88 |     // https://github.com/facebookincubator/create-react-app/issues/290
 89 |     // `web` extension prefixes have been added for better support
 90 |     // for React Native Web.
 91 |     extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
 92 |     alias: {
 93 |       
 94 |       // Support React Native Web
 95 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 96 |       'react-native': 'react-native-web',
 97 |     },
 98 |     plugins: [
 99 |       // Prevents users from importing files from outside of src/ (or node_modules/).
100 |       // This often causes confusion because we only process files within src/ with babel.
101 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
102 |       // please link the files into your node_modules/ and let module-resolution kick in.
103 |       // Make sure your source files are compiled, as they will not be processed in any way.
104 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
105 |     ],
106 |   },
107 |   module: {
108 |     strictExportPresence: true,
109 |     rules: [
110 |       // TODO: Disable require.ensure as it's not a standard language feature.
111 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
112 |       // { parser: { requireEnsure: false } },
113 | 
114 |       // First, run the linter.
115 |       // It's important to do this before Babel processes the JS.
116 |       {
117 |         test: /\.(js|jsx|mjs)$/,
118 |         enforce: 'pre',
119 |         use: [
120 |           {
121 |             options: {
122 |               formatter: eslintFormatter,
123 |               eslintPath: require.resolve('eslint'),
124 |               
125 |             },
126 |             loader: require.resolve('eslint-loader'),
127 |           },
128 |         ],
129 |         include: paths.appSrc,
130 |       },
131 |       {
132 |         // "oneOf" will traverse all following loaders until one will
133 |         // match the requirements. When no loader matches it will fall
134 |         // back to the "file" loader at the end of the loader list.
135 |         oneOf: [
136 |           // "url" loader works just like "file" loader but it also embeds
137 |           // assets smaller than specified size as data URLs to avoid requests.
138 |           {
139 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
140 |             loader: require.resolve('url-loader'),
141 |             options: {
142 |               limit: 10000,
143 |               name: 'static/media/[name].[hash:8].[ext]',
144 |             },
145 |           },
146 |           // Process JS with Babel.
147 |           {
148 |             test: /\.(js|jsx|mjs)$/,
149 |             include: paths.appSrc,
150 |             loader: require.resolve('babel-loader'),
151 |             options: {
152 |               
153 |               compact: true,
154 |             },
155 |           },
156 |           // The notation here is somewhat confusing.
157 |           // "postcss" loader applies autoprefixer to our CSS.
158 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
159 |           // "style" loader normally turns CSS into JS modules injecting <style>,
160 |           // but unlike in development configuration, we do something different.
161 |           // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
162 |           // (second argument), then grabs the result CSS and puts it into a
163 |           // separate file in our build process. This way we actually ship
164 |           // a single CSS file in production instead of JS code injecting <style>
165 |           // tags. If you use code splitting, however, any async bundles will still
166 |           // use the "style" loader inside the async code so CSS from them won't be
167 |           // in the main CSS file.
168 |           {
169 |             test: /\.css$/,
170 |             loader: ExtractTextPlugin.extract(
171 |               Object.assign(
172 |                 {
173 |                   fallback: {
174 |                     loader: require.resolve('style-loader'),
175 |                     options: {
176 |                       hmr: false,
177 |                     },
178 |                   },
179 |                   use: [
180 |                     {
181 |                       loader: require.resolve('css-loader'),
182 |                       options: {
183 |                         importLoaders: 1,
184 |                         minimize: true,
185 |                         sourceMap: shouldUseSourceMap,
186 |                       },
187 |                     },
188 |                     {
189 |                       loader: require.resolve('postcss-loader'),
190 |                       options: {
191 |                         // Necessary for external CSS imports to work
192 |                         // https://github.com/facebookincubator/create-react-app/issues/2677
193 |                         ident: 'postcss',
194 |                         plugins: () => [
195 |                           require('postcss-flexbugs-fixes'),
196 |                           autoprefixer({
197 |                             browsers: [
198 |                               '>1%',
199 |                               'last 4 versions',
200 |                               'Firefox ESR',
201 |                               'not ie < 9', // React doesn't support IE8 anyway
202 |                             ],
203 |                             flexbox: 'no-2009',
204 |                           }),
205 |                         ],
206 |                       },
207 |                     },
208 |                   ],
209 |                 },
210 |                 extractTextPluginOptions
211 |               )
212 |             ),
213 |             // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
214 |           },
215 |           // "file" loader makes sure assets end up in the `build` folder.
216 |           // When you `import` an asset, you get its filename.
217 |           // This loader doesn't use a "test" so it will catch all modules
218 |           // that fall through the other loaders.
219 |           {
220 |             loader: require.resolve('file-loader'),
221 |             // Exclude `js` files to keep "css" loader working as it injects
222 |             // it's runtime that would otherwise processed through "file" loader.
223 |             // Also exclude `html` and `json` extensions so they get processed
224 |             // by webpacks internal loaders.
225 |             exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
226 |             options: {
227 |               name: 'static/media/[name].[hash:8].[ext]',
228 |             },
229 |           },
230 |           // ** STOP ** Are you adding a new loader?
231 |           // Make sure to add the new loader(s) before the "file" loader.
232 |         ],
233 |       },
234 |     ],
235 |   },
236 |   plugins: [
237 |     // Makes some environment variables available in index.html.
238 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
239 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
240 |     // In production, it will be an empty string unless you specify "homepage"
241 |     // in `package.json`, in which case it will be the pathname of that URL.
242 |     new InterpolateHtmlPlugin(env.raw),
243 |     // Generates an `index.html` file with the <script> injected.
244 |     new HtmlWebpackPlugin({
245 |       inject: true,
246 |       template: paths.appHtml,
247 |       minify: {
248 |         removeComments: true,
249 |         collapseWhitespace: true,
250 |         removeRedundantAttributes: true,
251 |         useShortDoctype: true,
252 |         removeEmptyAttributes: true,
253 |         removeStyleLinkTypeAttributes: true,
254 |         keepClosingSlash: true,
255 |         minifyJS: true,
256 |         minifyCSS: true,
257 |         minifyURLs: true,
258 |       },
259 |     }),
260 |     // Makes some environment variables available to the JS code, for example:
261 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
262 |     // It is absolutely essential that NODE_ENV was set to production here.
263 |     // Otherwise React will be compiled in the very slow development mode.
264 |     new webpack.DefinePlugin(env.stringified),
265 |     // Minify the code.
266 |     new webpack.optimize.UglifyJsPlugin({
267 |       compress: {
268 |         warnings: false,
269 |         // Disabled because of an issue with Uglify breaking seemingly valid code:
270 |         // https://github.com/facebookincubator/create-react-app/issues/2376
271 |         // Pending further investigation:
272 |         // https://github.com/mishoo/UglifyJS2/issues/2011
273 |         comparisons: false,
274 |       },
275 |       mangle: {
276 |         safari10: true,
277 |       },
278 |       output: {
279 |         comments: false,
280 |         // Turned on because emoji and regex is not minified properly using default
281 |         // https://github.com/facebookincubator/create-react-app/issues/2488
282 |         ascii_only: true,
283 |       },
284 |       sourceMap: shouldUseSourceMap,
285 |     }),
286 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
287 |     new ExtractTextPlugin({
288 |       filename: cssFilename,
289 |     }),
290 |     // Generate a manifest file which contains a mapping of all asset filenames
291 |     // to their corresponding output file so that tools can pick it up without
292 |     // having to parse `index.html`.
293 |     new ManifestPlugin({
294 |       fileName: 'asset-manifest.json',
295 |     }),
296 |     // Generate a service worker script that will precache, and keep up to date,
297 |     // the HTML & assets that are part of the Webpack build.
298 |     new SWPrecacheWebpackPlugin({
299 |       // By default, a cache-busting query parameter is appended to requests
300 |       // used to populate the caches, to ensure the responses are fresh.
301 |       // If a URL is already hashed by Webpack, then there is no concern
302 |       // about it being stale, and the cache-busting can be skipped.
303 |       dontCacheBustUrlsMatching: /\.\w{8}\./,
304 |       filename: 'service-worker.js',
305 |       logger(message) {
306 |         if (message.indexOf('Total precache size is') === 0) {
307 |           // This message occurs for every build and is a bit too noisy.
308 |           return;
309 |         }
310 |         if (message.indexOf('Skipping static resource') === 0) {
311 |           // This message obscures real errors so we ignore it.
312 |           // https://github.com/facebookincubator/create-react-app/issues/2612
313 |           return;
314 |         }
315 |         console.log(message);
316 |       },
317 |       minify: true,
318 |       // For unknown URLs, fallback to the index page
319 |       navigateFallback: publicUrl + '/index.html',
320 |       // Ignores URLs starting from /__ (useful for Firebase):
321 |       // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
322 |       navigateFallbackWhitelist: [/^(?!\/__).*/],
323 |       // Don't precache sourcemaps (they're large) and build asset manifest:
324 |       staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
325 |     }),
326 |     // Moment.js is an extremely popular library that bundles large locale files
327 |     // by default due to how Webpack interprets its code. This is a practical
328 |     // solution that requires the user to opt into importing specific locales.
329 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
330 |     // You can remove this if you don't use Moment.js:
331 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
332 |   ],
333 |   // Some libraries import Node modules but don't use them in the browser.
334 |   // Tell Webpack to provide empty mocks for them so importing them works.
335 |   node: {
336 |     dgram: 'empty',
337 |     fs: 'empty',
338 |     net: 'empty',
339 |     tls: 'empty',
340 |     child_process: 'empty',
341 |   },
342 | };
343 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | Object.defineProperty(exports, "__esModule", {
  4 |   value: true
  5 | });
  6 | 
  7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  8 | 
  9 | var _react = require('react');
 10 | 
 11 | var _react2 = _interopRequireDefault(_react);
 12 | 
 13 | var _propTypes = require('prop-types');
 14 | 
 15 | var _propTypes2 = _interopRequireDefault(_propTypes);
 16 | 
 17 | var _xgplayer = require('xgplayer');
 18 | 
 19 | var _xgplayer2 = _interopRequireDefault(_xgplayer);
 20 | 
 21 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 22 | 
 23 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 24 | 
 25 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 26 | 
 27 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 28 | 
 29 | var player = null;
 30 | 
 31 | var ReactXgplayer = function (_Component) {
 32 |   _inherits(ReactXgplayer, _Component);
 33 | 
 34 |   function ReactXgplayer(props) {
 35 |     _classCallCheck(this, ReactXgplayer);
 36 | 
 37 |     return _possibleConstructorReturn(this, (ReactXgplayer.__proto__ || Object.getPrototypeOf(ReactXgplayer)).call(this, props));
 38 |   }
 39 | 
 40 |   _createClass(ReactXgplayer, [{
 41 |     key: 'init',
 42 |     value: function init(props) {
 43 |       var _this2 = this;
 44 | 
 45 |       var playerInit = props.playerInit;
 46 | 
 47 |       if (props.config.url && props.config.url !== '') {
 48 |         player = new _xgplayer2.default(props.config) || {};
 49 |         player.once('ready', function () {
 50 |           _this2.props.readyHandle();
 51 |         });
 52 |         player.once('complete', function () {
 53 |           _this2.props.completeHandle();
 54 |         });
 55 |         player.once('destroy', function () {
 56 |           _this2.props.destroyHandle();
 57 |         });
 58 |         playerInit && props.playerInit(player);
 59 |       }
 60 |     }
 61 |   }, {
 62 |     key: 'shouldComponentUpdate',
 63 |     value: function shouldComponentUpdate(nextProps) {
 64 |       if (JSON.stringify(nextProps.config) !== JSON.stringify(this.props.config) || JSON.stringify(nextProps.format) !== JSON.stringify(this.props.format) || JSON.stringify(nextProps.rootStyle) !== JSON.stringify(this.props.rootStyle)) {
 65 |         return true;
 66 |       }
 67 |       return false;
 68 |     }
 69 |   }, {
 70 |     key: 'componentWillUpdate',
 71 |     value: function componentWillUpdate(nextProps) {
 72 |       if (JSON.stringify(nextProps.config) !== JSON.stringify(this.props.config)) {
 73 |         this.init(nextProps);
 74 |       }
 75 |     }
 76 |   }, {
 77 |     key: 'getPlayer',
 78 |     value: function getPlayer(ref) {
 79 |       if (ref) {
 80 |         var config = {
 81 |           el: ref
 82 |         };
 83 |         var props = Object.assign({}, this.props);
 84 |         props.config = Object.assign({}, props.config, config);
 85 |         this.init(props);
 86 |       }
 87 |     }
 88 | 
 89 |     // componentWillUnmount() {
 90 |     // if (player) {
 91 |     //   this.destroy(player);
 92 |     // }
 93 |     // setTimeout(function () {
 94 |     //   player = null;
 95 |     // }, 0);
 96 |     // }
 97 | 
 98 |   }, {
 99 |     key: 'render',
100 |     value: function render() {
101 |       return _react2.default.createElement('div', {
102 |         ref: this.getPlayer.bind(this),
103 |         style: this.props.rootStyle
104 |       });
105 |     }
106 |   }]);
107 | 
108 |   return ReactXgplayer;
109 | }(_react.Component);
110 | 
111 | exports.default = ReactXgplayer;
112 | 
113 | 
114 | ReactXgplayer.propTypes = {
115 |   config: _propTypes2.default.object,
116 |   format: _propTypes2.default.string,
117 |   playerInit: _propTypes2.default.func,
118 |   rootStyle: _propTypes2.default.object,
119 |   readyHandle: _propTypes2.default.func,
120 |   completeHandle: _propTypes2.default.func,
121 |   destroyHandle: _propTypes2.default.func
122 | };
123 | ReactXgplayer.defaultProps = {
124 |   config: { id: 'mse', url: '' },
125 |   format: 'mp4',
126 |   playerInit: function playerInit() {},
127 |   rootStyle: {},
128 |   readyHandle: function readyHandle() {},
129 |   completeHandle: function completeHandle() {},
130 |   destroyHandle: function destroyHandle() {}
131 | };
132 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "xgplayer-react",
 3 |   "version": "2.4.0",
 4 |   "description": "React component for xgplayer, a HTML5 video player with a parser that saves traffic",
 5 |   "author": "zhangxin.frontend@bytedance.com",
 6 |   "license": "MIT",
 7 |   "main": "./lib/index.js",
 8 |   "dependencies": {
 9 |     "prop-types": "^15.6.1",
10 |     "react": "^16.4.2",
11 |     "react-dev-utils": "^5.0.1",
12 |     "react-dom": "^16.4.2",
13 |     "xgplayer": "^2.18.0"
14 |   },
15 |   "devDependencies": {
16 |     "@koa/cors": "^2.2.1",
17 |     "autoprefixer": "7.1.6",
18 |     "babel-core": "6.26.0",
19 |     "babel-eslint": "7.2.3",
20 |     "babel-jest": "20.0.3",
21 |     "babel-loader": "7.1.2",
22 |     "babel-preset-es2015": "^6.24.1",
23 |     "babel-preset-react-app": "^3.1.1",
24 |     "babel-runtime": "6.26.0",
25 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
26 |     "chalk": "1.1.3",
27 |     "css-loader": "0.28.7",
28 |     "cz-conventional-changelog": "^2.1.0",
29 |     "dotenv": "4.0.0",
30 |     "dotenv-expand": "4.2.0",
31 |     "eslint": "4.19.1",
32 |     "eslint-config-react-app": "^2.1.0",
33 |     "eslint-loader": "1.9.0",
34 |     "eslint-plugin-flowtype": "2.39.1",
35 |     "eslint-plugin-import": "2.8.0",
36 |     "eslint-plugin-jsx-a11y": "5.1.1",
37 |     "eslint-plugin-react": "7.4.0",
38 |     "extract-text-webpack-plugin": "3.0.2",
39 |     "file-loader": "1.1.5",
40 |     "fs-extra": "3.0.1",
41 |     "html-webpack-plugin": "2.29.0",
42 |     "jest": "20.0.4",
43 |     "koa": "^2.5.1",
44 |     "koa-range": "^0.3.0",
45 |     "koa-static": "^4.0.3",
46 |     "object-assign": "4.1.1",
47 |     "postcss-flexbugs-fixes": "3.2.0",
48 |     "postcss-loader": "2.0.8",
49 |     "promise": "8.0.1",
50 |     "raf": "3.4.0",
51 |     "resolve": "1.6.0",
52 |     "style-loader": "0.19.0",
53 |     "sw-precache-webpack-plugin": "0.11.4",
54 |     "url-loader": "0.6.2",
55 |     "webpack": "3.8.1",
56 |     "webpack-manifest-plugin": "1.3.2",
57 |     "whatwg-fetch": "2.0.3"
58 |   },
59 |   "scripts": {
60 |     "start": "node scripts/build.js && node server.js",
61 |     "build": "mkdir -p lib && babel src/xgplayer-react.js --out-file lib/index.js"
62 |   },
63 |   "keywords": [
64 |     "xgplayer",
65 |     "react",
66 |     "mp4"
67 |   ],
68 |   "config": {
69 |     "commitizen": {
70 |       "path": "./node_modules/cz-conventional-changelog"
71 |     }
72 |   },
73 |   "babel": {
74 |     "presets": [
75 |       "react-app"
76 |     ]
77 |   },
78 |   "eslintConfig": {
79 |     "extends": "react-app"
80 |   },
81 |   "repository": {
82 |     "type": "git",
83 |     "url": "git@github.com:bytedance/xgplayer-react.git"
84 |   }
85 | }
86 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bytedance/xgplayer-react/96741b51dbb14b43fb6592300205023931c4e366/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>React App</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="root"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/public/xgplayer-demo.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bytedance/xgplayer-react/96741b51dbb14b43fb6592300205023931c4e366/public/xgplayer-demo.mp4


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | const path = require('path');
 18 | const chalk = require('chalk');
 19 | const fs = require('fs-extra');
 20 | const webpack = require('webpack');
 21 | const config = require('../config/webpack.config.prod');
 22 | const paths = require('../config/paths');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 25 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 26 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 27 | const printBuildError = require('react-dev-utils/printBuildError');
 28 | 
 29 | const measureFileSizesBeforeBuild =
 30 |   FileSizeReporter.measureFileSizesBeforeBuild;
 31 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 32 | const useYarn = fs.existsSync(paths.yarnLockFile);
 33 | 
 34 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 35 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 36 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 37 | 
 38 | // Warn and crash if required files are missing
 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 40 |   process.exit(1);
 41 | }
 42 | 
 43 | // First, read the current file sizes in build directory.
 44 | // This lets us display how much they changed later.
 45 | measureFileSizesBeforeBuild(paths.appBuild)
 46 |   .then(previousFileSizes => {
 47 |     // Remove all content but keep the directory so that
 48 |     // if you're in it, you don't end up in Trash
 49 |     fs.emptyDirSync(paths.appBuild);
 50 |     // Merge with the public folder
 51 |     copyPublicFolder();
 52 |     // Start the webpack build
 53 |     return build(previousFileSizes);
 54 |   })
 55 |   .then(
 56 |     ({ stats, previousFileSizes, warnings }) => {
 57 |       if (warnings.length) {
 58 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 59 |         console.log(warnings.join('\n\n'));
 60 |         console.log(
 61 |           '\nSearch for the ' +
 62 |             chalk.underline(chalk.yellow('keywords')) +
 63 |             ' to learn more about each warning.'
 64 |         );
 65 |         console.log(
 66 |           'To ignore, add ' +
 67 |             chalk.cyan('// eslint-disable-next-line') +
 68 |             ' to the line before.\n'
 69 |         );
 70 |       } else {
 71 |         console.log(chalk.green('Compiled successfully.\n'));
 72 |       }
 73 | 
 74 |       console.log('File sizes after gzip:\n');
 75 |       printFileSizesAfterBuild(
 76 |         stats,
 77 |         previousFileSizes,
 78 |         paths.appBuild,
 79 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 80 |         WARN_AFTER_CHUNK_GZIP_SIZE
 81 |       );
 82 |       console.log();
 83 | 
 84 |       const appPackage = require(paths.appPackageJson);
 85 |       const publicUrl = paths.publicUrl;
 86 |       const publicPath = config.output.publicPath;
 87 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
 88 |       printHostingInstructions(
 89 |         appPackage,
 90 |         publicUrl,
 91 |         publicPath,
 92 |         buildFolder,
 93 |         useYarn
 94 |       );
 95 |     },
 96 |     err => {
 97 |       console.log(chalk.red('Failed to compile.\n'));
 98 |       printBuildError(err);
 99 |       process.exit(1);
100 |     }
101 |   );
102 | 
103 | // Create the production build and print the deployment instructions.
104 | function build(previousFileSizes) {
105 |   console.log('Creating an optimized production build...');
106 | 
107 |   let compiler = webpack(config);
108 |   return new Promise((resolve, reject) => {
109 |     compiler.run((err, stats) => {
110 |       if (err) {
111 |         return reject(err);
112 |       }
113 |       const messages = formatWebpackMessages(stats.toJson({}, true));
114 |       if (messages.errors.length) {
115 |         // Only keep the first error. Others are often indicative
116 |         // of the same problem, but confuse the reader with noise.
117 |         if (messages.errors.length > 1) {
118 |           messages.errors.length = 1;
119 |         }
120 |         return reject(new Error(messages.errors.join('\n\n')));
121 |       }
122 |       if (
123 |         process.env.CI &&
124 |         (typeof process.env.CI !== 'string' ||
125 |           process.env.CI.toLowerCase() !== 'false') &&
126 |         messages.warnings.length
127 |       ) {
128 |         console.log(
129 |           chalk.yellow(
130 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
131 |               'Most CI servers set it automatically.\n'
132 |           )
133 |         );
134 |         return reject(new Error(messages.warnings.join('\n\n')));
135 |       }
136 |       return resolve({
137 |         stats,
138 |         previousFileSizes,
139 |         warnings: messages.warnings,
140 |       });
141 |     });
142 |   });
143 | }
144 | 
145 | function copyPublicFolder() {
146 |   fs.copySync(paths.appPublic, paths.appBuild, {
147 |     dereference: true,
148 |     filter: file => file !== paths.appHtml,
149 |   });
150 | }
151 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | const Koa = require('koa')
 2 | const Serve = require('koa-static')
 3 | const Cors = require('@koa/cors')
 4 | const Range = require('koa-range')
 5 | 
 6 | const app = new Koa()
 7 | app.use(Range)
 8 | app.use(Cors())
 9 | 
10 | app.use(Serve('./build'))
11 | app.listen(9090)
12 | 
13 | console.log(`server is ready,please visit http://localhost:9090/index.html`)
14 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 |   text-align: left;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import ReactXgplayer from './xgplayer-react';
 3 | import './App.css';
 4 | 
 5 | let configMp4 = {
 6 |   id: 'vs1',
 7 |   url: '/xgplayer-demo.mp4'
 8 | };
 9 | let Mp4Player = null;
10 | let rootStyle = {
11 |   backgroundColor: 'rgba(0,0,0,0.87)'
12 | };
13 | 
14 | class App extends Component {
15 | 
16 |   readyHandle(){
17 |     console.log('Mp4 player ready!')
18 |   }
19 | 
20 |   completeHandle(){
21 |     console.log('Mp4 player complete!')
22 |   }
23 | 
24 |   destroyHandle(){
25 |     console.log('Mp4 player destroy!')
26 |   }
27 | 
28 |   render() {
29 |     return (<div className="App">
30 |       <ReactXgplayer rootStyle={rootStyle} config={configMp4} playerInit={(player)=>{ Mp4Player = player; }}  readyHandle={ ()=>{ this.readyHandle(); } } completeHandle={ ()=>{ this.completeHandle(); } } destroyHandle={ ()=>{ this.destroyHandle(); } }/>
31 |     </div>);
32 |   }
33 | }
34 | 
35 | export default App;
36 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 |   margin: 0;
3 |   padding: 0;
4 |   font-family: sans-serif;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import registerServiceWorker from './registerServiceWorker';
6 | 
7 | ReactDOM.render(<App />, document.getElementById('root'));
8 | registerServiceWorker();
9 | 


--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
  1 | // In production, we register a service worker to serve assets from local cache.
  2 | 
  3 | // This lets the app load faster on subsequent visits in production, and gives
  4 | // it offline capabilities. However, it also means that developers (and users)
  5 | // will only see deployed updates on the "N+1" visit to a page, since previously
  6 | // cached resources are updated in the background.
  7 | 
  8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
  9 | // This link also includes instructions on opting out of this behavior.
 10 | 
 11 | const isLocalhost = Boolean(
 12 |   window.location.hostname === 'localhost' ||
 13 |     // [::1] is the IPv6 localhost address.
 14 |     window.location.hostname === '[::1]' ||
 15 |     // 127.0.0.1/8 is considered localhost for IPv4.
 16 |     window.location.hostname.match(
 17 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 18 |     )
 19 | );
 20 | 
 21 | export default function register() {
 22 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 23 |     // The URL constructor is available in all browsers that support SW.
 24 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
 25 |     if (publicUrl.origin !== window.location.origin) {
 26 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 27 |       // from what our page is served on. This might happen if a CDN is used to
 28 |       // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
 29 |       return;
 30 |     }
 31 | 
 32 |     window.addEventListener('load', () => {
 33 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 34 | 
 35 |       if (isLocalhost) {
 36 |         // This is running on localhost. Lets check if a service worker still exists or not.
 37 |         checkValidServiceWorker(swUrl);
 38 | 
 39 |         // Add some additional logging to localhost, pointing developers to the
 40 |         // service worker/PWA documentation.
 41 |         navigator.serviceWorker.ready.then(() => {
 42 |           console.log(
 43 |             'This web app is being served cache-first by a service ' +
 44 |               'worker. To learn more, visit https://goo.gl/SC7cgQ'
 45 |           );
 46 |         });
 47 |       } else {
 48 |         // Is not local host. Just register service worker
 49 |         registerValidSW(swUrl);
 50 |       }
 51 |     });
 52 |   }
 53 | }
 54 | 
 55 | function registerValidSW(swUrl) {
 56 |   navigator.serviceWorker
 57 |     .register(swUrl)
 58 |     .then(registration => {
 59 |       registration.onupdatefound = () => {
 60 |         const installingWorker = registration.installing;
 61 |         installingWorker.onstatechange = () => {
 62 |           if (installingWorker.state === 'installed') {
 63 |             if (navigator.serviceWorker.controller) {
 64 |               // At this point, the old content will have been purged and
 65 |               // the fresh content will have been added to the cache.
 66 |               // It's the perfect time to display a "New content is
 67 |               // available; please refresh." message in your web app.
 68 |               console.log('New content is available; please refresh.');
 69 |             } else {
 70 |               // At this point, everything has been precached.
 71 |               // It's the perfect time to display a
 72 |               // "Content is cached for offline use." message.
 73 |               console.log('Content is cached for offline use.');
 74 |             }
 75 |           }
 76 |         };
 77 |       };
 78 |     })
 79 |     .catch(error => {
 80 |       console.error('Error during service worker registration:', error);
 81 |     });
 82 | }
 83 | 
 84 | function checkValidServiceWorker(swUrl) {
 85 |   // Check if the service worker can be found. If it can't reload the page.
 86 |   fetch(swUrl)
 87 |     .then(response => {
 88 |       // Ensure service worker exists, and that we really are getting a JS file.
 89 |       if (
 90 |         response.status === 404 ||
 91 |         response.headers.get('content-type').indexOf('javascript') === -1
 92 |       ) {
 93 |         // No service worker found. Probably a different app. Reload the page.
 94 |         navigator.serviceWorker.ready.then(registration => {
 95 |           registration.unregister().then(() => {
 96 |             window.location.reload();
 97 |           });
 98 |         });
 99 |       } else {
100 |         // Service worker found. Proceed as normal.
101 |         registerValidSW(swUrl);
102 |       }
103 |     })
104 |     .catch(() => {
105 |       console.log(
106 |         'No internet connection found. App is running in offline mode.'
107 |       );
108 |     });
109 | }
110 | 
111 | export function unregister() {
112 |   if ('serviceWorker' in navigator) {
113 |     navigator.serviceWorker.ready.then(registration => {
114 |       registration.unregister();
115 |     });
116 |   }
117 | }
118 | 


--------------------------------------------------------------------------------
/src/xgplayer-react.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import Player from 'xgplayer';
 4 | 
 5 | let player = null;
 6 | 
 7 | export default class ReactXgplayer extends Component {
 8 |   constructor(props) {
 9 |     super(props);
10 |   }
11 |   init(props) {
12 |     const { playerInit } = props;
13 |     if (props.config.url && props.config.url !== '') {
14 |       player = new Player(props.config) || {};
15 |       player.once('ready', () => { this.props.readyHandle(); });
16 |       player.once('complete', () => { this.props.completeHandle(); });
17 |       player.once('destroy', () => { this.props.destroyHandle(); });
18 |       playerInit && props.playerInit(player);
19 |     }
20 |   }
21 | 
22 |   shouldComponentUpdate(nextProps) {
23 |     if (JSON.stringify(nextProps.config) !== JSON.stringify(this.props.config) ||
24 |         JSON.stringify(nextProps.format) !== JSON.stringify(this.props.format) ||
25 |         JSON.stringify(nextProps.rootStyle) !== JSON.stringify(this.props.rootStyle)) {
26 |       return true;
27 |     }
28 |     return false;
29 |   }
30 | 
31 |   componentWillUpdate(nextProps) {
32 |     if (JSON.stringify(nextProps.config) !== JSON.stringify(this.props.config)) {
33 |       this.init(nextProps);
34 |     }
35 |   }
36 | 
37 |   getPlayer(ref) {
38 |     if (ref) {
39 |       const config = {
40 |         el: ref
41 |       };
42 |       const props = Object.assign({}, this.props);
43 |       props.config = Object.assign({}, props.config, config);
44 |       this.init(props);
45 |     }
46 |   }
47 | 
48 |   // componentWillUnmount() {
49 |   // if (player) {
50 |   //   this.destroy(player);
51 |   // }
52 |   // setTimeout(function () {
53 |   //   player = null;
54 |   // }, 0);
55 |   // }
56 |   render() {
57 |     return (
58 |       <div
59 |         ref={this.getPlayer.bind(this)}
60 |         style={this.props.rootStyle}
61 |       />
62 |     );
63 |   }
64 | }
65 | 
66 | ReactXgplayer.propTypes = {
67 |   config: PropTypes.object,
68 |   format: PropTypes.string,
69 |   playerInit: PropTypes.func,
70 |   rootStyle: PropTypes.object,
71 |   readyHandle: PropTypes.func,
72 |   completeHandle: PropTypes.func,
73 |   destroyHandle: PropTypes.func
74 | };
75 | ReactXgplayer.defaultProps = {
76 |   config: { id: 'mse', url: '' },
77 |   format: 'mp4',
78 |   playerInit: () => {},
79 |   rootStyle: {},
80 |   readyHandle: () => {},
81 |   completeHandle: () => {},
82 |   destroyHandle: () => {}
83 | };
84 | 


--------------------------------------------------------------------------------