[v1.1.9] node-minify & slider (#18)

* working with node-minify & ui.css (#17)
* remove unused global playerStats ref
* fix slider-thumb on firefox
* overlay classname
* create a custom rollup-plugin-node-minify

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|

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",

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;

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 = {

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<HTMLVideoElement>(null);
   const uiContainerRef = React.useRef<HTMLDivElement>(null);
-  const playerStats = React.useRef<Shaka.extern.Stats | null>(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 (
-    <div
-      style={style}
-      ref={uiContainerRef}
-      className={props.className == undefined ? "mk-theme" : props.className}
-    >
+    <div style={style} ref={uiContainerRef} className={overlayClassName}>
       <video
         ref={videoRef}
         className={props.playerClassName}

src/hooks/usePlayerListener.tsx

@@ -2,7 +2,6 @@ import * as Shaka from "shaka-player/dist/shaka-player.ui";
 import * as React from "react";
 
 import { PlayerProps } from "../types";
-import { SuperConfig } from "../types/enum";
 
 const usePlayerListener = (player: Shaka.Player, props?: PlayerProps) => {
   React.useEffect(() => {

src/hooks/useStats.tsx

@@ -5,7 +5,6 @@ import { PlayerProps } from "../types";
 
 const useStats = (
   player: Shaka.Player,
-  statsRef: React.MutableRefObject<Shaka.extern.Stats>,
   props?: PlayerProps
 ) => {
   const timer = React.useRef<Shaka.util.Timer | null>(null);
@@ -22,7 +21,6 @@ const useStats = (
           mediaEndTime,
         };
 
-        statsRef.current = stats_;
         props.onStatsChanged &&
           props.onStatsChanged({ ...stats_, ...additionalStats });
       };
@@ -35,7 +33,6 @@ const useStats = (
 
     return () => {
       if (player && timer) {
-        statsRef.current = null;
         timer.current.stop();
       }
     };

src/styles/ui.css

@@ -721,6 +721,7 @@
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
+  font-feature-settings: "liga";
   -webkit-font-feature-settings: "liga";
   -webkit-font-smoothing: antialiased;
 }
@@ -772,7 +773,7 @@
 }
 
 .mk-theme .shaka-small-play-button[aria-label="Pause"] {
-  content: "pause_circle_filled"
+  content: "pause_circle_filled";
 }
 
 .mk-theme .shaka-mute-button {
@@ -790,8 +791,6 @@
 
 .mk-theme .shaka-controls-button-panel > :focus {
   outline: 0;
-  -webkit-box-shadow: inset 0 0 0 2px rgba(27, 127, 204, 0.8);
-  box-shadow: inset 0 0 0 2px rgba(27, 127, 204, 0.8);
   color: #fff;
 }
 
@@ -866,9 +865,9 @@
 } */
 
 .mk-theme .shaka-seek-bar-container input[type="range"] {
-  height: 0px;
+  height: 5px;
   -webkit-appearance: none;
-  /* margin: 10px 0; */
+  margin: 1px 0;
   opacity: 1;
   width: 100%;
 }
@@ -878,28 +877,26 @@
 .mk-theme .shaka-seek-bar-container input[type="range"]::-webkit-slider-thumb {
   box-shadow: 0px 0px 0px #000000;
   border: 0px solid #000000;
-  height: 27px;
-  width: 40px;
+  height: 19px;
+  width: 26px;
   border-radius: 49px;
   background: #2eb5c0;
   cursor: pointer;
   -webkit-appearance: none;
 }
 .mk-theme .shaka-seek-bar-container input[type="range"]::-moz-range-track {
   width: 100%;
-  height: 14px;
+  height: 16px;
   cursor: pointer;
-  animate: 0.2s;
   box-shadow: 1px 1px 1px #50555c;
   background: #50555c;
-  border-radius: 14px;
   border: 0px solid #000000;
 }
 .mk-theme .shaka-seek-bar-container input[type="range"]::-moz-range-thumb {
   box-shadow: 0px 0px 0px #000000;
   border: 0px solid #000000;
-  height: 27px;
-  width: 50px;
+  height: 16px;
+  width: 26px;
   border-radius: 49px;
   background: #2eb5c0;
   cursor: pointer;
@@ -908,7 +905,6 @@
   width: 100%;
   height: 14px;
   cursor: pointer;
-  animate: 0.2s;
   background: transparent;
   border-color: transparent;
   color: transparent;
@@ -926,11 +922,10 @@
   box-shadow: 1px 1px 1px #50555c;
 }
 .mk-theme .shaka-seek-bar-container input[type="range"]::-ms-thumb {
-  margin-top: 1px;
   box-shadow: 0px 0px 0px #000000;
   border: 0px solid #000000;
-  height: 27px;
-  width: 50px;
+  height: 19px;
+  width: 26px;
   border-radius: 49px;
   background: #2eb5c0;
   cursor: pointer;