config_store

config-fe/package.json

@@ -22,6 +22,7 @@
     "clsx": "^1.1.1",
     "cors": "^2.8.5",
     "fontsource-roboto": "^3.0.3",
+    "get-video-dimensions": "^1.0.0",
     "konva": "^7.2.0",
     "line-reader": "^0.4.0",
     "prop-types": "^15.7.2",

config-fe/src/api/FeedApi.tsx

@@ -43,9 +43,13 @@ export async function createFeed(feed: Feed) {
     return data;
 }
 
+export async function updateFeed(feed: Feed) {
+    let { data } = await axios.put<Feed>(`/feeds/${feed.id}`, feed);
+    return data;
+}
+
 export async function deleteFeed(feed: Feed) {
     let response = await axios.delete(`/feeds/${feed.id}`)
-
     return response.status === 204;
 }
 

config-fe/src/api/axios.js

@@ -2,7 +2,7 @@ import axios from "axios";
 import * as qs from "qs";
 import { PathLike } from "fs";
 
-let API_URL = process.env.API_URL || "http://localhost:5050";
+let API_URL = process.env.API_URL || "http://localhost:5000";
 
 const apiConfig = {
   returnRejectedPromiseOnError: true,

config-fe/src/features/card/customVideoCard.jsx

@@ -29,7 +29,7 @@ const styles = theme => ({
 
 class customVideoCard extends React.Component {
     FetchUrlObjectForBlob(blob) {
-        if(blob) {
+        if (blob) {
             let url = URL.createObjectURL(blob);
             return url;
         } else {
@@ -66,18 +66,18 @@ class customVideoCard extends React.Component {
                 </CardContent>
                 <CardActions disableSpacing>
                     <IconButton aria-label="add to favorites">
-                        <Link to={'/configuration/' + this.props.Id}>
+                        <Link to={{ pathname: '/configuration/' + this.props.Id, state: { feed: this.props.Feed } }}>
                             <EditIcon color="primary" />
                         </Link>
                     </IconButton>
                     {(this.props.Active) ?
-                    <IconButton aria-label="Start" onClick={() => this.props.OnStartStop(this.props.Id)}>
-                         <StopIcon/>
-                    </IconButton>
-                    :
-                    <IconButton aria-label="Stop" onClick={() => this.props.OnStartStop(this.props.Id)}>
-                        <PlayIcon/>
-                    </IconButton>
+                        <IconButton aria-label="Start" onClick={() => this.props.OnStartStop(this.props.Id)}>
+                            <StopIcon />
+                        </IconButton>
+                        :
+                        <IconButton aria-label="Stop" onClick={() => this.props.OnStartStop(this.props.Id)}>
+                            <PlayIcon />
+                        </IconButton>
                     }
                 </CardActions>
             </Card>

config-fe/src/features/custom/Popup.jsx

@@ -26,6 +26,18 @@ const useStyles = makeStyles({
         marginBottom: 15,
         textAlign: "left"
     },
+    successMessage: {
+        fontSize: 14,
+        fontWeight: 400,
+        marginBottom: 15,
+        paddingLeft: 10,
+        textAlign: "left",
+        backgroundColor: "#57c22d",
+        color: "white",
+        borderRadius: 5,
+        lineHeight: 3,
+
+    },
     pos: {
         marginBottom: 12
     },
@@ -134,6 +146,7 @@ function Popup(props) {
     const pulseclasses = pulseStyles();
     const [value, setValue] = React.useState(0);
     const [open, setOpen] = React.useState(false);
+    const [success, setSuccess] = React.useState(false);
     const [newFeed, setNewFeed] = React.useState({
         name: "",
         location: "",
@@ -174,8 +187,39 @@ function Popup(props) {
     const onFormSubmit = e => {
         e.preventDefault();
         console.log(newFeed)
-        props.AddVideoSource(newFeed)
 
+        //get video resolution
+        getVideoDimensionsOf(newFeed.url)
+            .then(({ width, height }) => {
+                console.log("Video width: " + width);
+                console.log("Video height: " + height);
+            });
+
+        props.AddVideoSource(newFeed);
+
+        setSuccess(true);
+    }
+
+    function getVideoDimensionsOf(url) {
+        return new Promise(function (resolve) {
+            // create the video element
+            let video = document.createElement('video');
+
+            // place a listener on it
+            video.addEventListener("loadedmetadata", function () {
+                // retrieve dimensions
+                let height = this.videoHeight;
+                let width = this.videoWidth;
+                // send back result
+                resolve({
+                    height: height,
+                    width: width
+                });
+            }, false);
+
+            // start download meta-datas
+            video.src = url;
+        });
     }
 
     return (
@@ -269,6 +313,11 @@ function Popup(props) {
                     </Grid>
                 </TabPanel>
                 <TabPanel value={value} index={1}>
+
+                    {success ? <Typography className={classes.successMessage}>
+                        Video successfully added!
+                    </Typography> : null}
+
                     <Typography className={classes.title3} >
                         New feed config:
                     </Typography>
@@ -277,6 +326,7 @@ function Popup(props) {
                             <TextField
                                 className={classes.textField}
                                 id="outlined-basic"
+                                required="Required"
                                 label="Name"
                                 onInput={e => editName(e.target)}
                             />
@@ -290,12 +340,14 @@ function Popup(props) {
                                 className={classes.urlField}
                                 id="outlined-basic"
                                 label="Description"
+                                required="Required"
                                 onInput={e => editDescription(e.target)}
                             />
                             <TextField
                                 className={classes.urlField}
                                 id="outlined-basic"
                                 label="URL"
+                                required="Required"
                                 placeholder="https://www.openremote.com/media/street.mp4"
                                 onInput={e => editUrl(e.target)}
                             />