diff --git a/README.md b/README.md index a8f4dcd..ec23de0 100644 --- a/README.md +++ b/README.md @@ -76,8 +76,8 @@ This is main props for the components: |----------------|--------|-------------------------------|-----------------------------| |src|No|MPD or HLS to play |string | |className |Yes| string of ui overlay classname | string | -|autoPlay (default: `true`)|Yes| as it described | boolean | -|superConfig (optional: "STREAMING", "VOD") |Yes|The special configs for Streaming or VOD. Will add more `superConfig` soon. | string ("STREAMING" / "VOD") | +|autoPlay|Yes| as it described | boolean | +|superConfig|Yes|The special configs for Streaming or VOD. Will add more `superConfig` soon. | string ("STREAMING" / "VOD") | |config |Yes|Changes configuration settings on Shaka Player. Reference: [shaka.extern.PlayerConfiguration](https://shaka-player-demo.appspot.com/docs/api/shaka.extern.html#.PlayerConfiguration). This config will override `superConfig`. | object | |uiConfig |Yes|Changes configuration settings for UI elements. Reference: [shaka.extern.UIConfiguration](https://shaka-player-demo.appspot.com/docs/api/shaka.extern.html#.UIConfiguration). This config will override `superConfig`. | object | |onLoad |Yes|Catch `Shaka.Player`, `Shaka.ui.Overlay` and `HTMLVideoElement` for manual usages or improvement of configuration. see: [PlayerRefs](https://github.com/mkhuda/react-shaka-player/blob/c4459e31027a08165007d03c9a08ff8a3e5de3dc/src/types/index.ts#L3) |object: PlayerRefs => func| diff --git a/package.json b/package.json index f5ee861..bb2e455 100644 --- a/package.json +++ b/package.json @@ -1,25 +1,28 @@ { "name": "@mkhuda/react-shaka-player", - "version": "1.1.8", + "version": "1.1.9", "description": "React video player built with Shaka-Player", "main": "dist/index.js", "types": "dist/index.d.ts", "author": "Muhammad K. Huda", "license": "MIT", "scripts": { + "nodeminify": "node ./node_modules/.bin/node-minify", + "build-css": "yarn nodeminify --compressor clean-css --input \"src/styles/ui.css\" --output \"dist/ui.css\"", "build": "rimraf dist && rollup -c --perf", "start": "rimraf dist && DEV=1 rollup -c --watch", "test": "jest", "watch": "rollup -c --watch" }, "dependencies": { - "rollup": "^2.56.2", "shaka-player": "^3.2.0" }, "devDependencies": { "@babel/core": "^7.15.0", "@babel/preset-env": "^7.15.0", "@babel/preset-react": "^7.14.5", + "@node-minify/clean-css": "^6.2.0", + "@node-minify/cli": "^6.2.0", "@rollup/plugin-alias": "^3.1.5", "@rollup/plugin-babel": "^5.3.0", "@rollup/plugin-commonjs": "^20.0.0", @@ -43,6 +46,7 @@ "react-dom": "^17.0.2", "react-test-renderer": "^17.0.2", "rimraf": "^3.0.2", + "rollup": "^2.56.3", "rollup-plugin-bundle-html": "^0.2.2", "rollup-plugin-copy": "^3.4.0", "rollup-plugin-html2": "^3.0.1", diff --git a/rollup-plugin-node-minify.js b/rollup-plugin-node-minify.js new file mode 100644 index 0000000..8a14ec1 --- /dev/null +++ b/rollup-plugin-node-minify.js @@ -0,0 +1,34 @@ +import fs from "fs"; +import path from "path"; +import minifyCore from "@node-minify/core"; +import cleanCss from "@node-minify/clean-css"; + +const name = "node-minify"; +const exec = async (input, output) => { + await minifyCore({ compressor: cleanCss, input: input, output: output }); +}; + +const minifyCss = (options) => { + const { input = "", output = "" } = options; + return { + name, + transform() { + // add current input into rollup watch file + this.addWatchFile(path.join(__dirname, input)); + }, + writeBundle: async () => { + // get output dirname + const outputDir = path.dirname(output); + + // for in case, if directory was not found + if (!fs.existsSync(outputDir)) { + fs.mkdirSync(outputDir, { recursive: true }); + } + + // execute + return await exec(input, output); + }, + }; +}; + +export default minifyCss; diff --git a/rollup.config.js b/rollup.config.js index 11303e4..b6c0265 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -12,6 +12,7 @@ import html2 from "rollup-plugin-html2"; import postcss from "rollup-plugin-postcss"; import replace from "@rollup/plugin-replace"; import serve from "rollup-plugin-serve"; +import minifyCss from "./rollup-plugin-node-minify"; let builds = []; @@ -23,14 +24,6 @@ const defaultPlugins = [ babel({ exclude: "node_modules/**", }), - copy({ - targets: [ - { - src: "src/styles/ui.css", - dest: "dist", - }, - ], - }), nodeResolve(), commonjs(), typescript({ @@ -39,6 +32,10 @@ const defaultPlugins = [ target: "es5", }), strip(), + minifyCss({ + input: "src/styles/ui.css", + output: "dist/ui.css", + }), ]; const distBuildConfig = { diff --git a/src/components/player.tsx b/src/components/player.tsx index 1d5d2ed..b703cc3 100644 --- a/src/components/player.tsx +++ b/src/components/player.tsx @@ -1,18 +1,16 @@ import * as React from "react"; import * as Hooks from "../hooks"; -import * as Shaka from "shaka-player/dist/shaka-player.ui"; import { PlayerProps } from "../types/"; const ReactShakaPlayer = (props: PlayerProps) => { const videoRef = React.useRef(null); const uiContainerRef = React.useRef(null); - const playerStats = React.useRef(null); const { player, ui } = Hooks.usePlayer(videoRef, uiContainerRef, props); Hooks.usePlayerListener(player, props); Hooks.useUIListener(ui, player, props); - Hooks.useStats(player, playerStats, props); + Hooks.useStats(player, props); const { className, @@ -35,12 +33,11 @@ const ReactShakaPlayer = (props: PlayerProps) => { width: "100%", }; + const overlayClassName = + className == undefined ? "mk-theme" : "mk-theme " + props.className; + return ( -
+