diff --git a/src/renderer/components/ActionButton.tsx b/src/renderer/components/ActionButton.tsx
new file mode 100644
index 0000000..dc88483
--- /dev/null
+++ b/src/renderer/components/ActionButton.tsx
@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import {css} from '@emotion/core';
+
+const primary = css`
+ background: #28272b;
+ color: #fff;
+
+ &:hover {
+ background: #000;
+ }
+`;
+
+const muted = css`
+ background: #eee;
+
+ &:hover {
+ background: #e5e5e5;
+ }
+`;
+
+const ActionButton = styled('button')<{muted?: boolean}>`
+ display: grid;
+ grid-auto-flow: column;
+ grid-auto-columns: max-content;
+ grid-gap: 0.5rem;
+ align-items: center;
+ border: none;
+ padding: 0.5rem 1rem;
+ font-weight: bold;
+ border-radius: 3px;
+ ${p => (p.muted ? muted : primary)}
+`;
+
+export default ActionButton;
diff --git a/src/renderer/components/Footer.tsx b/src/renderer/components/Footer.tsx
new file mode 100644
index 0000000..292c03e
--- /dev/null
+++ b/src/renderer/components/Footer.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import {Save} from 'react-feather';
+import {shell} from 'electron';
+
+import Logo from 'src/shared/components/Logo';
+import ActionButton from './ActionButton';
+import useRelease from 'src/utils/useLatestRelease';
+
+const Footer = () => {
+ const latestRelease = useRelease();
+
+ const hasNewVersion =
+ latestRelease &&
+ process.env.RELEASE_CHANNEL === 'stable' &&
+ process.env.RELEASE !== latestRelease.name;
+
+ const newVersion = latestRelease && hasNewVersion && (
+ shell.openExternal(latestRelease.html_url)}>
+ {latestRelease.name} available
+
+ );
+
+ return (
+
+
+
+
prolink tools
+ {process.env.RELEASE}
+
+ {newVersion}
+
+ );
+};
+
+const Info = styled('div')`
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+ justify-content: flex-end;
+`;
+
+const NewVersionButton = styled(ActionButton)`
+ background: #ef5f73;
+ color: #fff;
+ padding: 0.375rem 0.5rem;
+ font-size: 0.75rem;
+`;
+
+const Title = styled('h2')`
+ display: flex;
+ align-items: center;
+ font-size: 0.8rem;
+ margin: 0;
+`;
+
+const Release = styled('div')`
+ font-size: 0.7rem;
+ color: #777a7b;
+`;
+
+const Wrapper = styled('div')`
+ padding: 0.5rem;
+ display: grid;
+ align-items: center;
+ grid-template-columns: max-content max-content 1fr;
+ grid-gap: 0.5rem;
+`;
+
+export default Footer;
diff --git a/src/renderer/components/PaneHeader.tsx b/src/renderer/components/PaneHeader.tsx
new file mode 100644
index 0000000..40ea137
--- /dev/null
+++ b/src/renderer/components/PaneHeader.tsx
@@ -0,0 +1,20 @@
+import styled from '@emotion/styled';
+
+const Header = styled('header')`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1.5rem;
+ border-bottom: 1px solid #eee;
+`;
+
+const HeaderInfo = styled('p')`
+ font-family: Ubuntu;
+ flex-grow: 1;
+ margin-right: 1.5rem;
+ font-size: 0.8rem;
+ max-width: 450px;
+ margin: 0;
+`;
+
+export {Header, HeaderInfo};
diff --git a/src/renderer/components/Version.tsx b/src/renderer/components/Version.tsx
deleted file mode 100644
index 002ac29..0000000
--- a/src/renderer/components/Version.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-
-import Logo from 'src/shared/components/Logo';
-
-const Version = () => (
-
-
-
-
prolink tools
- {process.env.RELEASE}
-
-
-);
-
-const Title = styled('h2')`
- font-size: 0.8rem;
- margin: 0;
-`;
-
-const Release = styled('div')`
- font-size: 0.7rem;
- color: #777a7b;
-`;
-
-const Wrapper = styled('div')`
- padding: 0.5rem;
- display: grid;
- grid-template-columns: max-content max-content;
- grid-gap: 0.5rem;
-`;
-
-export default Version;
diff --git a/src/renderer/views/Application.tsx b/src/renderer/views/Application.tsx
index a17e16e..75154c3 100644
--- a/src/renderer/views/Application.tsx
+++ b/src/renderer/views/Application.tsx
@@ -5,7 +5,7 @@ import {MemoryRouter, Switch, Route, Redirect} from 'react-router-dom';
import globalCss, {noSelect} from 'src/shared/globalCss';
import Titlebar from 'app/components/Titlebar';
-import Version from 'app/components/Version';
+import Footer from 'app/components/Footer';
import Devices from 'app/views/devices';
import OverlayConfig from 'app/views/overlayConfig';
import Settings from 'app/views/settings';
@@ -22,7 +22,7 @@ const Application = () => (
-
+
);
diff --git a/src/renderer/views/overlayConfig/index.tsx b/src/renderer/views/overlayConfig/index.tsx
index 5da2276..f3d8de0 100644
--- a/src/renderer/views/overlayConfig/index.tsx
+++ b/src/renderer/views/overlayConfig/index.tsx
@@ -2,9 +2,11 @@ import * as React from 'react';
import {observer} from 'mobx-react';
import styled from '@emotion/styled';
import {Plus, ArrowLeft} from 'react-feather';
-import {css} from '@emotion/core';
import {AnimatePresence} from 'framer-motion';
+import {Header, HeaderInfo} from 'src/renderer/components/PaneHeader';
+import ActionButton from 'src/renderer/components/ActionButton';
+
import AvailableOverlays from './components/AvailableOverlays';
import OverlayList from './components/OverlayList';
@@ -14,23 +16,21 @@ const OverlayConfig = observer(() => {
return (
-
+
Overlays are small websites that you can embed into a livestream using the{' '}
OBS Browser Source
{' '}
(or similar). Each instance of an overlay has it's own configuration.
-
+
{addNewOpen ? (
- setOpen(!addNewOpen)}>
+ setOpen(!addNewOpen)}>
Back
-
+
) : (
- setOpen(!addNewOpen)}>
-
- Add Overlay
-
-
+ setOpen(!addNewOpen)}>
+ Add Overlay
+
)}
@@ -48,53 +48,6 @@ const OverlayConfig = observer(() => {
);
});
-const Header = styled('header')`
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 1.5rem;
- border-bottom: 1px solid #eee;
-`;
-
-const Help = styled('p')`
- font-family: Ubuntu;
- flex-grow: 1;
- margin-right: 1.5rem;
- font-size: 0.8rem;
- max-width: 450px;
- margin: 0;
-`;
-
-const actionButtonCss = css`
- display: grid;
- grid-template-columns: max-content max-content;
- grid-gap: 0.5rem;
- align-items: center;
- border: none;
- padding: 0.5rem 1rem;
- font-weight: bold;
- border-radius: 3px;
-`;
-
-const AddButton = styled('button')`
- ${actionButtonCss};
- background: #28272b;
- color: #fff;
-
- &:hover {
- background: #000;
- }
-`;
-
-const BackButton = styled('button')`
- ${actionButtonCss};
- background: #eee;
-
- &:hover {
- background: #e5e5e5;
- }
-`;
-
const Container = styled('div')`
position: relative;
flex-grow: 1;
diff --git a/src/shared/constants.tsx b/src/shared/constants.tsx
index e5e63f9..76f94e7 100644
--- a/src/shared/constants.tsx
+++ b/src/shared/constants.tsx
@@ -1 +1,8 @@
+export const GITHUB_REPO = {
+ owner: 'evanpurkhiser',
+ repo: 'prolink-tools',
+};
+
+export const GITHUB_REPO_URL = `https://github.com/${GITHUB_REPO.owner}/${GITHUB_REPO.repo}`;
+
export const WEBSERVER_PORT = 5152;
diff --git a/src/utils/useLatestRelease.tsx b/src/utils/useLatestRelease.tsx
new file mode 100644
index 0000000..c13867b
--- /dev/null
+++ b/src/utils/useLatestRelease.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import {request} from '@octokit/request';
+import {Endpoints} from '@octokit/types';
+import {GITHUB_REPO} from 'src/shared/constants';
+
+type Release = Endpoints['GET /repos/:owner/:repo/releases/latest']['response'];
+
+const useRelease = () => {
+ const [release, setRelease] = React.useState(null);
+
+ const getReleases = async () => {
+ const release = await request('GET /repos/:owner/:repo/releases/latest', GITHUB_REPO);
+ setRelease(release['data']);
+ };
+
+ React.useEffect(() => void getReleases(), []);
+
+ return release;
+};
+
+export default useRelease;
diff --git a/src/website/components/DownloadCta.tsx b/src/website/components/DownloadCta.tsx
index acc9030..6304dd8 100644
--- a/src/website/components/DownloadCta.tsx
+++ b/src/website/components/DownloadCta.tsx
@@ -1,28 +1,12 @@
import * as React from 'react';
import styled from '@emotion/styled';
import {motion} from 'framer-motion';
-import {request} from '@octokit/request';
-import {Endpoints} from '@octokit/types';
+import useRelease from 'src/utils/useLatestRelease';
import {AppleLogo, WindowsLogo, LinuxLogo} from 'src/shared/components/Icons';
import {format, parseISO} from 'date-fns';
-import {GITHUB_REPO} from '../constants';
type Platform = NonNullable>;
-type Release = Endpoints['GET /repos/:owner/:repo/releases/latest']['response'];
-
-const useRelease = () => {
- const [release, setRelease] = React.useState(null);
-
- const getReleases = async () => {
- const release = await request('GET /repos/:owner/:repo/releases/latest', GITHUB_REPO);
- setRelease(release);
- };
-
- React.useEffect(() => void getReleases(), []);
-
- return release;
-};
const getPlatform = () => {
const platform = window.navigator.platform.toLowerCase();
@@ -58,7 +42,7 @@ const DownloadCta = (props: React.ComponentProps) => {
}
// Find the asset for the paltform they're on
- const asset = release.data.assets.find(asset => asset.name.includes(platform));
+ const asset = release.assets.find(asset => asset.name.includes(platform));
if (asset) {
window.location.replace(asset.browser_download_url);
}
@@ -74,10 +58,10 @@ const DownloadCta = (props: React.ComponentProps) => {
- version {release?.data.name.slice(1) ?? 'x.x.x'}
+ version {release?.name.slice(1) ?? 'x.x.x'}
{release
- ? format(parseISO(release.data.published_at), 'MMMM do yyyy')
+ ? format(parseISO(release.published_at), 'MMMM do yyyy')
: 'Fetching release...'}
diff --git a/src/website/constants.tsx b/src/website/constants.tsx
deleted file mode 100644
index 8893cbb..0000000
--- a/src/website/constants.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-export const GITHUB_REPO = {
- owner: 'evanpurkhiser',
- repo: 'prolink-tools',
-};
-
-export const GITHUB_REPO_URL = `https://github.com/${GITHUB_REPO.owner}/${GITHUB_REPO.repo}`;