Removing unused Progresses. Fixing issues reported by React.

app/src/components/Admin.js

@@ -9,7 +9,6 @@ import {
     Header,
     Loader,
     Placeholder,
-    Tab,
     Table
 } from "semantic-ui-react";
 import {

app/src/components/Archive.js

@@ -256,9 +256,13 @@ class ManageArchives extends React.Component {
         return (<>
             <WROLModeMessage content='Cannot modify Archives'/>
             <Button secondary
+                    id='refresh_archives'
                     onClick={this.refresh}>
                 Refresh Archive Files
             </Button>
+            <label htmlFor='refresh_archives'>
+                Find any new archive files. Remove Archives which no longer have files.
+            </label>
         </>)
     }
 }

app/src/components/Common.js

@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from "react";
-import {Card, Container, Form, Icon, Image, Input, Menu, Pagination, Progress, Responsive} from 'semantic-ui-react';
+import {Card, Container, Form, Icon, Image, Input, Menu, Pagination, Responsive} from 'semantic-ui-react';
 import {Link, NavLink} from "react-router-dom";
 import Button from "semantic-ui-react/dist/commonjs/elements/Button";
 import Grid from "semantic-ui-react/dist/commonjs/collections/Grid";
@@ -397,61 +397,6 @@ export class APIForm extends React.Component {
 
 }
 
-export class Progresses extends React.Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            progresses: [],
-        }
-        this.socket = null;
-    }
-
-    componentDidMount() {
-        this.socket = new WebSocket(this.props.streamUrl);
-        this.socket.onmessage = this.handleMessage;
-    }
-
-    handleMessage = async (e) => {
-        let data = await JSON.parse(e.data);
-        if (data.progresses) {
-            let progresses = [];
-            for (let i = 0; i < data.progresses.length; i++) {
-                let progress = data.progresses[i];
-                // Add a key to each progress.
-                progress.key = i;
-
-                if (progress.percent === 100) {
-                    progress.active = false;
-                    progress.success = true;
-                } else {
-                    progress.active = true;
-                    progress.success = false;
-                }
-
-                progresses = progresses.concat([progress]);
-            }
-            this.setState({progresses: progresses});
-        }
-    }
-
-    render() {
-        return <>
-            {this.state.progresses.map((i) =>
-                <Progress
-                    progress='ratio'
-                    key={i.key}
-                    active={i.active}
-                    success={i.success}
-                    total={i.total}
-                    value={i.value}
-                >{i.message || ''}</Progress>
-            )}
-        </>
-    }
-
-}
-
 export function replaceNullValues(obj, newValue) {
     newValue = newValue === undefined ? '' : newValue;
     let keys = Object.keys(obj);

app/src/components/Videos.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import {Link, NavLink, Route} from "react-router-dom";
+import {Link, Route} from "react-router-dom";
 import Paginator, {
     changePageHistory,
     DEFAULT_LIMIT,
     defaultSearchOrder,
     defaultVideoOrder,
-    humanFileSize, PageContainer,
-    Progresses,
+    humanFileSize,
+    PageContainer,
     scrollToTop,
     searchOrders,
     secondsToString,
@@ -67,26 +67,17 @@ class ManageVideos extends React.Component {
             <Container fluid>
                 <WROLModeMessage content='Cannot modify Videos'/>
 
-                <p>
-                    <Button primary
-                            onClick={this.download}
-                    >
-                        Download Videos
-                    </Button>
-                    <label>Download any missing videos</label>
-                    <br/>
-                </p>
-
                 <p>
                     <Button secondary
+                            id='refresh_videos'
                             onClick={this.refresh}
                     >
                         Refresh Video Files
                     </Button>
-                    <label>Search for any videos in the media directory</label>
+                    <label htmlFor='refresh_videos'>
+                        Find any new video files. Remove any Videos which no longer have files.
+                    </label>
                 </p>
-
-                {this.state.streamUrl && <Progresses streamUrl={this.state.streamUrl}/>}
             </Container>
         )
     }

app/src/hooks/customHooks.js

@@ -16,7 +16,7 @@ export const useSearchParam = (key, defaultValue = null) => {
             params.append(key, value);
         }
         history.push({search: params.toString()});
-    }, [value])
+    }, [value, history, key])
 
     return [value, setValue];
 }
@@ -29,13 +29,13 @@ export const useSearch = () => {
 
     const localSearchArchives = async (term) => {
         setArchives(null);
-        const [archives, total] = await searchArchives(0, 6, null, term);
+        const [archives] = await searchArchives(0, 6, null, term);
         setArchives(archives);
     }
 
     const localSearchVideos = async (term) => {
         setVideos(null);
-        const [videos, total] = await searchVideos(0, 6, null, term);
+        const [videos] = await searchVideos(0, 6, null, term);
         setVideos(videos);
     }