diff --git a/app/src/components/Apps.js b/app/src/components/Apps.js
index 7d9b4824..04ce221f 100644
--- a/app/src/components/Apps.js
+++ b/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`;
diff --git a/app/src/components/Archive.js b/app/src/components/Archive.js
index 3ece98f4..f87b8859 100644
--- a/app/src/components/Archive.js
+++ b/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 ;
}
@@ -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 => {
diff --git a/app/src/components/Channels.js b/app/src/components/Channels.js
index 4d0dbb16..91d61820 100644
--- a/app/src/components/Channels.js
+++ b/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 ;
}
@@ -455,6 +462,7 @@ export function EditChannel(props) {
}
export function NewChannel(props) {
+ useTitle('New Channel');
return
}
@@ -507,6 +515,7 @@ function MobileChannelRow({channel}) {
export function Channels() {
+ useTitle('Channels');
const {channels} = useChannels();
const [searchStr, setSearchStr] = useState('');
diff --git a/app/src/components/Common.js b/app/src/components/Common.js
index 4153c7f5..e59542fd 100644
--- a/app/src/components/Common.js
+++ b/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]);
}
diff --git a/app/src/components/Files.js b/app/src/components/Files.js
index 96e7c7b0..cecf7cf1 100644
--- a/app/src/components/Files.js
+++ b/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();
diff --git a/app/src/components/Inventory.js b/app/src/components/Inventory.js
index 4240c97a..55c5bfc3 100644
--- a/app/src/components/Inventory.js
+++ b/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'},
diff --git a/app/src/components/Map.js b/app/src/components/Map.js
index b34f39f5..7276fc82 100644
--- a/app/src/components/Map.js
+++ b/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'},
diff --git a/app/src/components/Nav.js b/app/src/components/Nav.js
index f981827f..fc89509c 100644
--- a/app/src/components/Nav.js
+++ b/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 > : 'WROLPi';
+ const name = NAME || 'WROLPi';
+ const topNavText = wrol_mode ? <>{name} > : name;
const {i} = useContext(ThemeContext);
return (
diff --git a/app/src/components/Videos.js b/app/src/components/Videos.js
index 114f6943..92c9d21b 100644
--- a/app/src/components/Videos.js
+++ b/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'},
diff --git a/app/src/components/admin/Admin.js b/app/src/components/admin/Admin.js
index c7655e69..adac4ff0 100644
--- a/app/src/components/admin/Admin.js
+++ b/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";
diff --git a/app/src/components/admin/Downloads.js b/app/src/components/admin/Downloads.js
index d2ea978f..3272d644 100644
--- a/app/src/components/admin/Downloads.js
+++ b/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();
diff --git a/app/src/components/admin/Status.js b/app/src/components/admin/Status.js
index df82e54c..30fae4cc 100644
--- a/app/src/components/admin/Status.js
+++ b/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;