From f787db46ae49475c519d44ffbea05756971c5222 Mon Sep 17 00:00:00 2001 From: vdalex <9810260@gmail.com> Date: Wed, 15 Jun 2022 01:46:13 +0300 Subject: [PATCH] Add react component example --- examples/ReactComponent/README.md | 16 +++++++ examples/ReactComponent/package.json | 34 +++++++++++++ examples/ReactComponent/public/index.html | 13 +++++ examples/ReactComponent/src/App.js | 29 +++++++++++ .../src/components/control-btn.js | 15 ++++++ .../src/components/images/pause.svg | 15 ++++++ .../src/components/images/play.svg | 11 +++++ .../src/components/input-group.js | 28 +++++++++++ .../components/react-player/react-player.css | 33 +++++++++++++ .../components/react-player/react-player.js | 48 +++++++++++++++++++ examples/ReactComponent/src/index.js | 7 +++ 11 files changed, 249 insertions(+) create mode 100644 examples/ReactComponent/README.md create mode 100644 examples/ReactComponent/package.json create mode 100644 examples/ReactComponent/public/index.html create mode 100644 examples/ReactComponent/src/App.js create mode 100644 examples/ReactComponent/src/components/control-btn.js create mode 100644 examples/ReactComponent/src/components/images/pause.svg create mode 100644 examples/ReactComponent/src/components/images/play.svg create mode 100644 examples/ReactComponent/src/components/input-group.js create mode 100644 examples/ReactComponent/src/components/react-player/react-player.css create mode 100644 examples/ReactComponent/src/components/react-player/react-player.js create mode 100644 examples/ReactComponent/src/index.js diff --git a/examples/ReactComponent/README.md b/examples/ReactComponent/README.md new file mode 100644 index 0000000..cdb1b1e --- /dev/null +++ b/examples/ReactComponent/README.md @@ -0,0 +1,16 @@ +# React Player Component + +## Project setup +``` +npm install +``` + +### Compiles and hot-reloads for development +``` +npm start +``` + +### Compiles and minifies for production +``` +npm run build +``` diff --git a/examples/ReactComponent/package.json b/examples/ReactComponent/package.json new file mode 100644 index 0000000..dbab51f --- /dev/null +++ b/examples/ReactComponent/package.json @@ -0,0 +1,34 @@ +{ + "name": "rtsp-to-web-react", + "version": "0.1.0", + "private": true, + "dependencies": { + "cra-template": "1.1.3", + "react": "^18.0.0", + "react-dom": "^18.0.0", + "react-scripts": "^5.0.0", + "rtsptowebplayer": "github:vdalex25/rtsp-to-web-player#51832916615d9e6c72ae2962ebec35a5061eb775" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/examples/ReactComponent/public/index.html b/examples/ReactComponent/public/index.html new file mode 100644 index 0000000..f8a0799 --- /dev/null +++ b/examples/ReactComponent/public/index.html @@ -0,0 +1,13 @@ + + + + + + RTSPtoWEBPlayerReact + + + + +
+ + diff --git a/examples/ReactComponent/src/App.js b/examples/ReactComponent/src/App.js new file mode 100644 index 0000000..7d1af5d --- /dev/null +++ b/examples/ReactComponent/src/App.js @@ -0,0 +1,29 @@ +import ReactPlayer from "./components/react-player/react-player"; +import {useState} from "react"; +import InputGroup from "./components/input-group"; + +const App = () => { + + const [url, setUrl] = useState(null); + + return (
+

Simple Example RTSPtoWEB player React

+
+
+ +
+
+
+
+ PLAYER +
+
+ +
+
+
+
+
) +} + +export default App; diff --git a/examples/ReactComponent/src/components/control-btn.js b/examples/ReactComponent/src/components/control-btn.js new file mode 100644 index 0000000..8a46725 --- /dev/null +++ b/examples/ReactComponent/src/components/control-btn.js @@ -0,0 +1,15 @@ +import {ReactComponent as PlayImg} from '../components/images/play.svg'; +import {ReactComponent as PauseImg} from '../components/images/pause.svg'; + +const ControlButton = ({type, onClick}) => { + switch (type) { + case 'pause': + return () + case 'play': + return () + default: + return null; + } +} + +export default ControlButton; \ No newline at end of file diff --git a/examples/ReactComponent/src/components/images/pause.svg b/examples/ReactComponent/src/components/images/pause.svg new file mode 100644 index 0000000..830314a --- /dev/null +++ b/examples/ReactComponent/src/components/images/pause.svg @@ -0,0 +1,15 @@ + + + + + + + + + + diff --git a/examples/ReactComponent/src/components/images/play.svg b/examples/ReactComponent/src/components/images/play.svg new file mode 100644 index 0000000..3488aea --- /dev/null +++ b/examples/ReactComponent/src/components/images/play.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/examples/ReactComponent/src/components/input-group.js b/examples/ReactComponent/src/components/input-group.js new file mode 100644 index 0000000..23fb6f2 --- /dev/null +++ b/examples/ReactComponent/src/components/input-group.js @@ -0,0 +1,28 @@ +import {useState} from "react"; + +const InputGroup = ({setUrl}) => { + + const [linkInput, setLinkInput] = useState(''); + const onClickHandler = () => { + try { + new URL(linkInput); + } catch (e) { + console.warn("URL is not valid ") + return false; + } + setUrl(linkInput); + } + + return (
+ { + setLinkInput(e.target.value); + }}/> + +
) +} + +export default InputGroup; \ No newline at end of file diff --git a/examples/ReactComponent/src/components/react-player/react-player.css b/examples/ReactComponent/src/components/react-player/react-player.css new file mode 100644 index 0000000..715a76d --- /dev/null +++ b/examples/ReactComponent/src/components/react-player/react-player.css @@ -0,0 +1,33 @@ +.player-wrapper { + position: relative; + aspectRatio: '16/9'; +} + +.player-wrapper video { + margin-bottom: -6px; +} + +.player-wrapper .control { + position: absolute; + bottom: 0; + width: 100%; + height: 50px; + padding: 10px; +} + +.player-wrapper .control span { + width: 40px; + height: 40px; + cursor: pointer; + opacity: 0.7; +} + + +.player-wrapper .control span:hover { + opacity: 1; +} + +.player-wrapper .control span svg { + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/examples/ReactComponent/src/components/react-player/react-player.js b/examples/ReactComponent/src/components/react-player/react-player.js new file mode 100644 index 0000000..2867d5c --- /dev/null +++ b/examples/ReactComponent/src/components/react-player/react-player.js @@ -0,0 +1,48 @@ +import {useEffect, useRef, useState} from "react"; +import './react-player.css'; +import RTSPtoWEBPlayer from "rtsptowebplayer"; +import ControlButton from "../control-btn"; + +const ReactPlayer = ({url}) => { + + const playerElement = useRef(null); + const [player, setPlayer] = useState(null); + const [state, setState] = useState('pause'); + const stateListener = (e) => { + setState(e.type); + } + const playPause = () => { + if (player.video.src !== '') { + player.video.paused ? player.video.play() : player.video.pause(); + } + } + + useEffect(() => { + if (player === null) { + setPlayer(new RTSPtoWEBPlayer({ + parentElement: playerElement.current, controls: false + })); + } else if (player.video.onpause === null && player.video.onplay === null) { + player.video.onpause = stateListener; + player.video.onplay = stateListener; + } + if (url !== null && player !== null) { + player.load(url); + } + + return () => { + if (player !== null) { + player.destroy(); + } + } + }, [url, player]); + + return (
+
+
+ +
+
) +} + +export default ReactPlayer; \ No newline at end of file diff --git a/examples/ReactComponent/src/index.js b/examples/ReactComponent/src/index.js new file mode 100644 index 0000000..15fd238 --- /dev/null +++ b/examples/ReactComponent/src/index.js @@ -0,0 +1,7 @@ +import {createRoot} from "react-dom/client"; +import App from "./App"; + +const container = document.getElementById('root'); +const root = createRoot(container); + +root.render(); \ No newline at end of file