From 9f52f41d56cb981851fc4fd7c19f5c3c49824cc6 Mon Sep 17 00:00:00 2001
From: Roland <roland@learningselfreliance.com>
Date: Wed, 30 Nov 2022 19:31:18 -0700
Subject: [PATCH] Reformatting Channel page to display buttons better on
 mobile.  Creating BackButton to consolidate functionality.  Expanding search
 input on mobile.

---
 app/src/Dashboard.js              |  23 +-
 app/src/components/Archive.js     |   3 +-
 app/src/components/Channels.js    | 399 +++++++++++++++---------------
 app/src/components/Common.js      |   9 +-
 app/src/components/VideoPlayer.js |  12 +-
 app/src/components/Videos.js      |  14 +-
 6 files changed, 235 insertions(+), 225 deletions(-)

diff --git a/app/src/Dashboard.js b/app/src/Dashboard.js
index ea0c0dea..87530ca8 100644
--- a/app/src/Dashboard.js
+++ b/app/src/Dashboard.js
@@ -9,6 +9,7 @@ import {Link} from "react-router-dom";
 import {BandwidthProgressCombined, CPUUsageProgress} from "./components/admin/Status";
 import {ProgressPlaceholder} from "./components/Placeholder";
 import {Divider} from "semantic-ui-react";
+import Grid from "semantic-ui-react/dist/commonjs/collections/Grid";
 
 export function Dashboard() {
     useTitle('Dashboard');
@@ -35,14 +36,20 @@ export function Dashboard() {
     }
 
     return (<PageContainer>
-        <SearchInput clearable
-                     searchStr={searchStr}
-                     onSubmit={setSearchStr}
-                     size='large'
-                     placeholder='Search Everywhere...'
-                     actionIcon='search'
-                     style={{marginBottom: '2em'}}
-        />
+        <Grid>
+            <Grid.Row>
+                <Grid.Column mobile={16} computer={8}>
+                    <SearchInput clearable
+                                 searchStr={searchStr}
+                                 onSubmit={setSearchStr}
+                                 size='large'
+                                 placeholder='Search Everywhere...'
+                                 actionIcon='search'
+                                 style={{marginBottom: '2em'}}
+                    />
+                </Grid.Column>
+            </Grid.Row>
+        </Grid>
         {body}
     </PageContainer>)
 }
diff --git a/app/src/components/Archive.js b/app/src/components/Archive.js
index aa4cef07..6895daef 100644
--- a/app/src/components/Archive.js
+++ b/app/src/components/Archive.js
@@ -14,6 +14,7 @@ import {
     TableRow
 } from "semantic-ui-react";
 import {
+    BackButton,
     CardLink,
     defaultSearchOrder,
     ExternalCardLink,
@@ -140,7 +141,7 @@ function ArchivePage() {
 
     return (
         <>
-            <Button icon='arrow left' content='Back' onClick={() => navigate(-1)}/>
+            <BackButton/>
 
             <Segment>
                 {screenshot}
diff --git a/app/src/components/Channels.js b/app/src/components/Channels.js
index 4827b96c..9ec0ac4c 100644
--- a/app/src/components/Channels.js
+++ b/app/src/components/Channels.js
@@ -16,6 +16,7 @@ import {
 import {createChannel, deleteChannel, downloadChannel, refreshChannel, updateChannel, validateRegex} from "../api";
 import Container from "semantic-ui-react/dist/commonjs/elements/Container";
 import {
+    BackButton,
     DirectoryInput,
     frequencyOptions,
     humanFileSize,
@@ -146,10 +147,12 @@ function ChannelPage({create, header}) {
             download_frequency: channel.download_frequency,
             match_regex: channel.match_regex,
         };
+
+        setDisabled(true);
+        setLoading(true);
+
         let response = null;
         try {
-            setLoading(true);
-
             if (create !== undefined) {
                 response = await createChannel(body);
             } else {
@@ -163,7 +166,9 @@ function ChannelPage({create, header}) {
                 description: 'Could not save channel',
                 time: 5000,
             });
+            return;
         } finally {
+            setDisabled(false);
             setLoading(false);
         }
 
@@ -244,185 +249,184 @@ function ChannelPage({create, header}) {
         setDeleteOpen(true);
     }
 
-    const handleCancel = (e) => {
-        e.preventDefault();
-        navigate(-1);
-    }
-
     return <Container fluid>
-        <Segment>
-            <Header as="h1">{header}</Header>
-            <WROLModeMessage content='Channel page is disabled while WROL Mode is enabled.'/>
-            <Form
-                id="editChannel"
-                onSubmit={handleSubmit}
-                error={error}
-                success={success}
-                autoComplete="off"
-            >
-                <FormGroup>
-                    <FormField width={8}>
-                        <FormInput required
-                                   label="Channel Name"
-                                   name="name"
-                                   type="text"
-                                   placeholder="Short Channel Name"
-                                   disabled={disabled}
-                                   error={errors.name}
-                                   value={channel.name}
-                                   onChange={(e, {value}) => changeValue('name', value)}
-                        />
-                    </FormField>
-                    <FormField width={8}>
-                        <label>
-                            Directory <RequiredAsterisk/>
-                        </label>
-                        <DirectoryInput required
-                                        disabled={create === undefined}
-                                        value={channel.directory}
-                                        setInput={value => changeValue('directory', value)}
-                                        placeholder='videos/channel directory'
-                        />
-                    </FormField>
-                </FormGroup>
-                {
-                    create !== undefined &&
-                    <FormGroup>
-                        <FormField width={8}/>{/* Empty field*/}
-                        <FormField width={8}>
-                            <FormField>
-                                <Toggle
-                                    toggle
-                                    label="Create this directory, if it doesn't exist."
-                                    name="mkdir"
-                                    disabled={disabled}
-                                    error={errors.mkdir}
-                                    checked={channel.mkdir}
-                                    onChange={i => {
-                                        handleCheckbox(null, {name: 'mkdir', checked: i})
-                                    }}
-                                />
-                            </FormField>
-                        </FormField>
-                    </FormGroup>
-                }
-                <FormGroup>
-                    <FormField width={16}>
-                        <FormInput
-                            label="URL"
-                            name="url"
-                            type="url"
-                            disabled={disabled}
-                            placeholder='https://example.com/channel/videos'
-                            error={errors.url}
-                            value={channel.url}
-                            onChange={handleInputChange}
-                        />
-                    </FormField>
-                </FormGroup>
+        <BackButton/>
+        {!create &&
+            <Link to={`/videos/channel/${channel.id}/video`}>
+                <Button>Videos</Button>
+            </Link>}
 
-                <FormGroup>
-                    <FormField>
-                        <label>Download Frequency</label>
-                        <Dropdown selection
-                                  name='download_frequency'
-                                  placeholder='Frequency'
-                                  error={errors.download_frequency}
-                                  value={channel.download_frequency}
-                                  disabled={disabled || !channel.url}
-                                  options={frequencyOptions}
-                                  onChange={handleInputChange}
-                        />
-                    </FormField>
-                </FormGroup>
-
-                <Accordion style={{marginBottom: '1em'}}>
-                    <AccordionTitle
-                        onClick={handleAdvancedClick}
-                        index={0}
-                        active={activeIndex === 0}
-                    >
-                        <Icon name='dropdown'/>
-                        Advanced Settings
-                    </AccordionTitle>
-                    <AccordionContent active={activeIndex === 0}>
-                        <Segment secondary>
-                            <Header as="h4">
-                                The following settings are encouraged by default, modify them at your own risk.
-                            </Header>
-                            <FormField>
-                                <FormInput
-                                    label="Title Match Regex"
-                                    name="match_regex"
-                                    type="text"
-                                    disabled={disabled}
-                                    error={!validRegex}
-                                    placeholder='.*([Nn]ame Matching).*'
-                                    value={channel.match_regex}
-                                    onChange={checkRegex}
-                                />
-                            </FormField>
-                        </Segment>
-                    </AccordionContent>
-                </Accordion>
-
-                <Container>
-                    <Message error
-                             header={messageHeader}
-                             content={messageContent}
+        <Header as="h1">{header}</Header>
+        <WROLModeMessage content='Channel page is disabled while WROL Mode is enabled.'/>
+        <Form
+            id="editChannel"
+            onSubmit={handleSubmit}
+            error={error}
+            success={success}
+            autoComplete="off"
+        >
+            <FormGroup>
+                <FormField width={8}>
+                    <FormInput required
+                               label="Channel Name"
+                               name="name"
+                               type="text"
+                               placeholder="Short Channel Name"
+                               disabled={disabled}
+                               error={errors.name}
+                               value={channel.name}
+                               onChange={(e, {value}) => changeValue('name', value)}
                     />
-                    <Message success
-                             header={messageHeader}
-                             content={messageContent}
+                </FormField>
+                <FormField width={8}>
+                    <label>
+                        Directory <RequiredAsterisk/>
+                    </label>
+                    <DirectoryInput required
+                                    disabled={create === undefined}
+                                    value={channel.directory}
+                                    setInput={value => changeValue('directory', value)}
+                                    placeholder='videos/channel directory'
                     />
-
-                    <Button
-                        color="green"
-                        type="submit"
-                        floated='right'
-                    >
-                        {disabled ? <Loader active inline/> : 'Save'}
-                    </Button>
-
-                    <Button
-                        secondary
-                        floated='right'
-                        onClick={handleCancel}
-                    >
-                        Cancel
-                    </Button>
-
-                    {!create &&
-                        <>
-                            <Button color='red' onClick={handleDeleteButton}>
-                                Delete
-                            </Button>
-                            <Confirm
-                                open={deleteOpen}
-                                content='Are you sure you want to delete this channel?  No video files will be deleted.'
-                                confirmButton='Delete'
-                                onCancel={() => setDeleteOpen(false)}
-                                onConfirm={handleDeleteConfirm}
+                </FormField>
+            </FormGroup>
+            {
+                create !== undefined &&
+                <FormGroup>
+                    <FormField width={8}/>{/* Empty field*/}
+                    <FormField width={8}>
+                        <FormField>
+                            <Toggle
+                                toggle
+                                label="Create this directory, if it doesn't exist."
+                                name="mkdir"
+                                disabled={disabled}
+                                error={errors.mkdir}
+                                checked={channel.mkdir}
+                                onChange={i => {
+                                    handleCheckbox(null, {name: 'mkdir', checked: i})
+                                }}
                             />
-                            <Button
-                                color='violet'
-                                onClick={handleDownloadChannel}
-                                disabled={!channel.url || !channel.download_frequency}
-                            >
-                                Download
-                            </Button>
-                            <Button color='blue' onClick={handleRefreshChannel}>
-                                Refresh
-                            </Button>
-                            <Link to={`/videos/channel/${channel.id}/video`}>
-                                <Button>Videos</Button>
-                            </Link>
-                        </>
-                    }
-                </Container>
-            </Form>
-        </Segment>
-        {channel.statistics && <ChannelStatistics statistics={channel.statistics}/>}
+                        </FormField>
+                    </FormField>
+                </FormGroup>
+            }
+            <FormGroup>
+                <FormField width={16}>
+                    <FormInput
+                        label="URL"
+                        name="url"
+                        type="url"
+                        disabled={disabled}
+                        placeholder='https://example.com/channel/videos'
+                        error={errors.url}
+                        value={channel.url}
+                        onChange={handleInputChange}
+                    />
+                </FormField>
+            </FormGroup>
+
+            <FormGroup>
+                <FormField>
+                    <label>Download Frequency</label>
+                    <Dropdown selection
+                              name='download_frequency'
+                              placeholder='Frequency'
+                              error={errors.download_frequency}
+                              value={channel.download_frequency}
+                              disabled={disabled || !channel.url}
+                              options={frequencyOptions}
+                              onChange={handleInputChange}
+                    />
+                </FormField>
+            </FormGroup>
+
+            <Accordion style={{marginBottom: '1em'}}>
+                <AccordionTitle
+                    onClick={handleAdvancedClick}
+                    index={0}
+                    active={activeIndex === 0}
+                >
+                    <Icon name='dropdown'/>
+                    Advanced Settings
+                </AccordionTitle>
+                <AccordionContent active={activeIndex === 0}>
+                    <Segment secondary>
+                        <Header as="h4">
+                            The following settings are encouraged by default, modify them at your own risk.
+                        </Header>
+                        <FormField>
+                            <FormInput
+                                label="Title Match Regex"
+                                name="match_regex"
+                                type="text"
+                                disabled={disabled}
+                                error={!validRegex}
+                                placeholder='.*([Nn]ame Matching).*'
+                                value={channel.match_regex}
+                                onChange={checkRegex}
+                            />
+                        </FormField>
+                    </Segment>
+                </AccordionContent>
+            </Accordion>
+
+            <Message error
+                     header={messageHeader}
+                     content={messageContent}
+            />
+            <Message success
+                     header={messageHeader}
+                     content={messageContent}
+            />
+
+            <Grid stackable columns={2}>
+                <Grid.Row>
+                    <Grid.Column>
+                        {!create &&
+                            <>
+                                <Button color='red' onClick={handleDeleteButton} size='small'>
+                                    Delete
+                                </Button>
+                                <Confirm
+                                    open={deleteOpen}
+                                    content='Are you sure you want to delete this channel?  No video files will be deleted.'
+                                    confirmButton='Delete'
+                                    onCancel={() => setDeleteOpen(false)}
+                                    onConfirm={handleDeleteConfirm}
+                                />
+                                <Button
+                                    color='violet'
+                                    size='small'
+                                    onClick={handleDownloadChannel}
+                                    disabled={!channel.url || !channel.download_frequency}
+                                >
+                                    Download
+                                </Button>
+                                <Button color='blue' size='small' onClick={handleRefreshChannel}>
+                                    Refresh
+                                </Button>
+                            </>
+                        }
+                    </Grid.Column>
+                    <Grid.Column>
+                        <Button
+                            color="green"
+                            size='big'
+                            type="submit"
+                            floated='right'
+                        >
+                            {disabled ? <Loader active inline/> : 'Save'}
+                        </Button>
+                    </Grid.Column>
+                </Grid.Row>
+            </Grid>
+
+        </Form>
+
+        <div style={{marginTop: '2em'}}>
+            {channel.statistics && <ChannelStatistics statistics={channel.statistics}/>}
+        </div>
     </Container>
 }
 
@@ -494,28 +498,27 @@ export function Channels() {
         setSearchStr(value);
     }
 
-    let header = <Grid columns={2} style={{marginBottom: '1em'}}>
-        <Grid.Column>
-            <Header as='h1'>Channels</Header>
-        </Grid.Column>
-        <Grid.Column textAlign='right'>
-            <Input
-                icon='search'
-                placeholder='Name filter...'
-                size="large"
-                name="filterStr"
-                value={searchStr}
-                onChange={handleInputChange}/>
-        </Grid.Column>
-        <Grid.Row>
-            <Grid.Column/>
-            <Grid.Column textAlign='right'>
-                <Link to='/videos/channel/new'>
-                    <Button secondary>New Channel</Button>
-                </Link>
-            </Grid.Column>
-        </Grid.Row>;
-    </Grid>;
+    let header = <div style={{marginBottom: '1em'}}>
+        <Header as='h1'>Channels</Header>
+        <Grid stackable columns={2}>
+            <Grid.Row>
+                <Grid.Column>
+                    <Input fluid
+                           icon='search'
+                           placeholder='Name filter...'
+                           size="large"
+                           name="filterStr"
+                           value={searchStr}
+                           onChange={handleInputChange}/>
+                </Grid.Column>
+                <Grid.Column textAlign='right'>
+                    <Link to='/videos/channel/new'>
+                        <Button secondary>New Channel</Button>
+                    </Link>
+                </Grid.Column>
+            </Grid.Row>
+        </Grid>
+    </div>;
 
     let tableHeader = <TableHeader>
         <TableRow>
diff --git a/app/src/components/Common.js b/app/src/components/Common.js
index 7e63fb06..ca2c23a2 100644
--- a/app/src/components/Common.js
+++ b/app/src/components/Common.js
@@ -1,6 +1,6 @@
 import React, {useContext, useEffect, useState} from "react";
 import {Card, Container, IconGroup, Image, Input, Modal, Pagination, Responsive} from 'semantic-ui-react';
-import {Link, NavLink} from "react-router-dom";
+import {Link, NavLink, useNavigate} from "react-router-dom";
 import Message from "semantic-ui-react/dist/commonjs/collections/Message";
 import {useDirectories, useDownloaders, useHotspot, useSettings, useThrottle} from "../hooks/customHooks";
 import {StatusContext, ThemeContext} from "../contexts/contexts";
@@ -344,7 +344,7 @@ export function SearchInput({
     }
 
     return <Form onSubmit={localOnSubmit} {...props}>
-        <Input
+        <Input fluid
             placeholder={placeholder}
             type='text'
             onChange={(e) => setValue(e.target.value)}
@@ -740,3 +740,8 @@ export function DirectoryInput({disabled, error, placeholder, setInput, value, r
         </datalist>
     </div>);
 }
+
+export const BackButton = () => {
+    const navigate = useNavigate();
+    return <Button icon='arrow left' content='Back' onClick={() => navigate(-1)}/>;
+}
diff --git a/app/src/components/VideoPlayer.js b/app/src/components/VideoPlayer.js
index 86587344..c09e39cc 100644
--- a/app/src/components/VideoPlayer.js
+++ b/app/src/components/VideoPlayer.js
@@ -2,7 +2,7 @@ import React, {useContext, useState} from 'react';
 import {deleteVideos} from "../api";
 import {Link, useNavigate, useParams} from "react-router-dom";
 import _ from "lodash";
-import {humanFileSize, humanNumber, PageContainer, uploadDate, useTitle} from "./Common";
+import {BackButton, humanFileSize, humanNumber, PageContainer, uploadDate, useTitle} from "./Common";
 import {Confirm} from "semantic-ui-react";
 import Grid from "semantic-ui-react/dist/commonjs/collections/Grid";
 import Container from "semantic-ui-react/dist/commonjs/elements/Container";
@@ -153,14 +153,8 @@ function VideoPage({videoFile, prevFile, nextFile, setFavorite, ...props}) {
     const tabMenu = theme === darkTheme ? {inverted: true, attached: true} : {attached: true};
 
     return (<>
-        <Container>
-            <Button
-                style={{marginTop: '1em', marginBottom: '1em'}}
-                onClick={() => navigate(-1)}
-            >
-                <Icon name='left arrow'/>
-                Back
-            </Button>
+        <Container style={{margin: '1em'}}>
+            <BackButton/>
         </Container>
 
         <video controls
diff --git a/app/src/components/Videos.js b/app/src/components/Videos.js
index f6ba0ccb..728395f3 100644
--- a/app/src/components/Videos.js
+++ b/app/src/components/Videos.js
@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState} from 'react';
+import React, {Fragment, useContext, useEffect, useState} from 'react';
 import {Link, Route, Routes, useParams} from "react-router-dom";
 import {
     CardLink,
@@ -50,7 +50,7 @@ export function VideoWrapper() {
                       setFavorite={setFavorite} autoplay={true}/>
 }
 
-function Videos({filter}) {
+function VideosPage({filter}) {
     let title = 'Videos';
     if (filter && filter.indexOf('favorite') >= 0) {
         title = 'Favorite Videos';
@@ -105,7 +105,7 @@ function Videos({filter}) {
         videoOrders = [{key: 'rank', value: 'rank', text: 'Search Rank'}, ...videoOrders];
     }
 
-    const menuColumns = <>
+    const menuColumns = <Fragment>
         <Grid.Column mobile={8} computer={5}>
             <SearchInput clearable searchStr={searchStr} onSubmit={setSearchStr} actionIcon='search'/>
         </Grid.Column>
@@ -118,7 +118,7 @@ function Videos({filter}) {
                       onChange={(e, {value}) => setOrderBy(value)}
             />
         </Grid.Column>
-    </>;
+    </Fragment>;
 
     let header;
     if (channel && channel.name) {
@@ -287,13 +287,13 @@ export function VideosRoute(props) {
         <PageContainer>
             <TabLinks links={links}/>
             <Routes>
-                <Route path='/' exact element={<Videos/>}/>
-                <Route path='favorites' exact element={<Videos filter='favorite' header='Favorite Videos'/>}/>
+                <Route path='/' exact element={<VideosPage/>}/>
+                <Route path='favorites' exact element={<VideosPage filter='favorite' header='Favorite Videos'/>}/>
                 <Route path='channel' exact element={<Channels/>}/>
                 <Route path='statistics' exact element={<Statistics/>}/>
                 <Route path='channel/new' exact element={<NewChannel/>}/>
                 <Route path='channel/:channelId/edit' exact element={<EditChannel/>}/>
-                <Route path='channel/:channelId/video' exact element={<Videos/>}/>
+                <Route path='channel/:channelId/video' exact element={<VideosPage/>}/>
             </Routes>
         </PageContainer>
     )