Adding useTitle to every function page.

app/src/components/Apps.js

@@ -3,7 +3,7 @@ import {Divider, SegmentGroup} from "semantic-ui-react";
 import {Route, Routes} from "react-router-dom";
 import "../static/wrolpi.css";
 import {decryptOTP, encryptOTP} from "../api";
-import {PageContainer} from "./Common";
+import {PageContainer, useTitle} from "./Common";
 import {ThemeContext} from "../contexts/contexts";
 import {Button, Header, Segment, TextArea} from "./Theme";
 
@@ -122,6 +122,8 @@ class Decrypt extends React.Component {
 }
 
 function OTP() {
+    useTitle('One Time Pad');
+
     const {t} = useContext(ThemeContext);
 
     let newPadURL = `http://${window.location.host}/api/otp/html`;

app/src/components/Archive.js

@@ -24,7 +24,8 @@ import {
     SearchInput,
     TabLinks,
     textEllipsis,
-    uploadDate
+    uploadDate,
+    useTitle
 } from "./Common";
 import {deleteArchives, postDownload} from "../api";
 import {Link, Route, Routes, useNavigate, useParams} from "react-router-dom";
@@ -44,6 +45,12 @@ function ArchivePage() {
     const {archiveId} = useParams();
     const {archiveFile, alternatives} = useArchive(archiveId);
 
+    let title;
+    if (archiveFile && archiveFile.archive) {
+        title = archiveFile.archive.title;
+    }
+    useTitle(title);
+
     if (archiveFile === null) {
         return <Segment><Loader active/></Segment>;
     }
@@ -195,6 +202,8 @@ export function ArchiveCard({file}) {
 }
 
 export function Domains() {
+    useTitle('Archive Domains');
+
     const [domains] = useDomains();
     const [searchStr, setSearchStr] = useState('');
 
@@ -258,6 +267,8 @@ function Archives() {
     const [selectedArchives, setSelectedArchives] = useState([]);
     const [deleteOpen, setDeleteOpen] = useState(false);
 
+    useTitle('Archives');
+
     let filterOptions = [];
     if (domains && domains.length > 0) {
         domains.forEach(i => {

app/src/components/Channels.js

@@ -22,6 +22,7 @@ import {
     secondsToDate,
     secondsToFrequency,
     Toggle,
+    useTitle,
     WROLModeMessage
 } from "./Common";
 import {Link, useNavigate, useParams} from "react-router-dom";
@@ -124,6 +125,12 @@ function ChannelPage({create, header}) {
     const {channelId} = useParams();
     const {channel, changeValue, fetchChannel} = useChannel(channelId);
 
+    let title;
+    if (channel && channel.name) {
+        title = channel.name;
+    }
+    useTitle(title);
+
     if (!channel) {
         return <Loader active/>;
     }
@@ -455,6 +462,7 @@ export function EditChannel(props) {
 }
 
 export function NewChannel(props) {
+    useTitle('New Channel');
     return <ChannelPage header='New Channel' {...props} create/>
 }
 
@@ -507,6 +515,7 @@ function MobileChannelRow({channel}) {
 
 
 export function Channels() {
+    useTitle('Channels');
 
     const {channels} = useChannels();
     const [searchStr, setSearchStr] = useState('');

app/src/components/Common.js

@@ -11,6 +11,7 @@ export const VIDEOS_API = `${API_URI}/videos`;
 export const ARCHIVES_API = `${API_URI}/archive`;
 export const OTP_API = `${API_URI}/otp`;
 export const DEFAULT_LIMIT = 20;
+export const NAME = process.env && process.env.REACT_APP_NAME ? process.env.REACT_APP_NAME : null;
 
 export function Paginator({activePage, onPageChange, totalPages, showFirstAndLast, size = 'mini'}) {
     const handlePageChange = (e, {activePage}) => {
@@ -777,18 +778,19 @@ export function HotspotStatusIcon() {
 export function useTitle(title) {
     const documentDefined = typeof document !== 'undefined';
     const originalTitle = React.useRef(documentDefined ? document.title : null);
+    const name = NAME ? `${NAME} WROLPi` : `WROLPi`;
 
     useEffect(() => {
         if (!documentDefined) {
             return;
         }
 
-        const newTitle = `${title} - WROLPi`
+        const newTitle = `${title} - ${name}`
         if (title && document.title !== newTitle) {
             document.title = newTitle;
         }
         return () => {
             document.title = originalTitle.current;
         }
-    }, []);
+    }, [title]);
 }

app/src/components/Files.js

@@ -14,6 +14,7 @@ import {
     Paginator,
     textEllipsis,
     uploadDate,
+    useTitle,
     VideoCard,
     VideoRowCells
 } from "./Common";
@@ -35,6 +36,8 @@ const icons = {
 };
 
 export function Files() {
+    useTitle('Files');
+
     const {t} = useContext(ThemeContext);
 
     const {browseFiles, setOpenFolders, fetchFiles} = useBrowseFiles();

app/src/components/Inventory.js

@@ -26,7 +26,7 @@ import {
 } from "semantic-ui-react";
 import {Route, Routes} from "react-router-dom";
 import {toast} from 'react-semantic-toasts';
-import {arraysEqual, enumerate, PageContainer, replaceNullValues, TabLinks} from './Common';
+import {arraysEqual, enumerate, PageContainer, replaceNullValues, TabLinks, useTitle} from './Common';
 import _ from 'lodash';
 import {ThemeContext} from "../contexts/contexts";
 import {useInventory} from "../hooks/customHooks";
@@ -1096,6 +1096,8 @@ class InventoryAddList extends React.Component {
 }
 
 export function InventoryRoute(props) {
+    useTitle('Inventory');
+
     const links = [
         {text: 'List', to: '/inventory', key: 'inventory', end: true},
         {text: 'Summary', to: '/inventory/summary', key: 'summary'},

app/src/components/Map.js

@@ -1,5 +1,5 @@
 import React from "react";
-import {HelpPopup, humanFileSize, PageContainer, TabLinks, WROLModeMessage} from "./Common";
+import {HelpPopup, humanFileSize, PageContainer, TabLinks, useTitle, WROLModeMessage} from "./Common";
 import {Route, Routes} from "react-router-dom";
 import {getMapImportStatus, importMapFiles} from "../api";
 import {
@@ -248,6 +248,8 @@ function MapApp() {
 }
 
 export function MapRoute() {
+    useTitle('Map');
+
     const links = [
         {text: 'Map', to: '/map', key: 'map', end: true},
         {text: 'Manage', to: '/map/manage', key: 'manage'},

app/src/components/Nav.js

@@ -3,7 +3,7 @@ import {NavLink} from "react-router-dom";
 import {Dropdown, Menu, Responsive} from "semantic-ui-react";
 import {StatusContext, ThemeContext} from "../contexts/contexts";
 import Icon from "semantic-ui-react/dist/commonjs/elements/Icon";
-import {DarkModeToggle, HotspotStatusIcon} from "./Common";
+import {DarkModeToggle, HotspotStatusIcon, NAME} from "./Common";
 
 const responsiveWidth = 500;
 
@@ -70,7 +70,8 @@ function NavIcon(props) {
 export function NavBar() {
     const {status} = useContext(StatusContext);
     const wrol_mode = status ? status['wrol_mode'] : null;
-    const topNavText = wrol_mode ? <>WROLPi&nbsp; <Icon name='lock'/></> : 'WROLPi';
+    const name = NAME || 'WROLPi';
+    const topNavText = wrol_mode ? <>{name}&nbsp; <Icon name='lock'/></> : name;
     const {i} = useContext(ThemeContext);
 
     return (

app/src/components/Videos.js

@@ -29,6 +29,12 @@ export function VideoWrapper() {
 }
 
 function Videos({filter}) {
+    let title = 'Videos';
+    if (filter && filter.indexOf('favorite') >= 0) {
+        title = 'Favorite Videos';
+    }
+    useTitle(title);
+
     const {channelId} = useParams();
     const {searchParams, updateQuery} = useQuery();
     const [selectedVideos, setSelectedVideos] = useState([]);
@@ -196,6 +202,8 @@ function Videos({filter}) {
 }
 
 function Statistics() {
+    useTitle('Video Statistics');
+
     const {statistics} = useVideoStatistics();
     const {videos, historical, channels} = statistics;
 
@@ -246,8 +254,6 @@ function Statistics() {
 }
 
 export function VideosRoute(props) {
-    useTitle('Videos');
-
     const links = [
         {text: 'Videos', to: '/videos', key: 'videos', end: true},
         {text: 'Favorites', to: '/videos/favorites', key: 'favorites'},

app/src/components/admin/Admin.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Container} from "semantic-ui-react";
 import {getStatus, saveSettings} from "../../api";
-import {PageContainer, TabLinks, Toggle} from "../Common";
+import {PageContainer, TabLinks, Toggle, useTitle} from "../Common";
 import {Route, Routes} from "react-router-dom";
 import {ThemeContext} from "../../contexts/contexts";
 import {Header, Loader} from "../Theme";

app/src/components/admin/Downloads.js

@@ -6,6 +6,7 @@ import {
     secondsToElapsedPopup,
     secondsToFrequency,
     textEllipsis,
+    useTitle,
     WROLModeMessage
 } from "../Common";
 import {
@@ -266,6 +267,8 @@ class StoppableRow extends React.Component {
 }
 
 export function Downloads() {
+    useTitle('Downloads');
+
     const {t} = useContext(ThemeContext);
 
     const {onceDownloads, recurringDownloads, fetchDownloads} = useDownloads();

app/src/components/admin/Status.js

@@ -1,6 +1,6 @@
 import {Header, Progress, Statistic, StatisticGroup} from "../Theme";
 import React, {useContext} from "react";
-import {humanBandwidth, humanFileSize, LoadStatistic} from "../Common";
+import {humanBandwidth, humanFileSize, LoadStatistic, useTitle} from "../Common";
 import {Divider, Responsive} from "semantic-ui-react";
 import {ProgressPlaceholder} from "../Placeholder";
 import Grid from "semantic-ui-react/dist/commonjs/collections/Grid";
@@ -141,6 +141,8 @@ export function CPUUsageProgress({value, label}) {
 }
 
 export function Status() {
+    useTitle('Status');
+
     const {status} = useContext(StatusContext);
 
     let percent;