pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Only client-render server-rendered templates in production builds. Closes #2176

pull/2181/head
Gabe Kangas 3 years ago
parent
eed76ddbd2
commit
2de23a3458
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA
3 changed files with 54 additions and 31 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      web/components/ServerRendered/ServerRenderedHydration.tsx
  2. 34
      web/components/ServerRendered/ServerRenderedMetadata.tsx
  3. 41
      web/components/layouts/Main.tsx

10
web/components/ServerRendered/ServerRenderedHydration.tsx
Unescape View File

@ -0,0 +1,10 @@ @@ -0,0 +1,10 @@
import { FC } from 'react';
export type ServerRenderedHydrationProps = {
hydrationScript: string;
};
export const ServerRenderedHydration: FC<ServerRenderedHydrationProps> = ({ hydrationScript }) => (
// eslint-disable-next-line react/no-danger
<script dangerouslySetInnerHTML={{ __html: hydrationScript }} />
);

34
web/components/ServerRendered/ServerRenderedMetadata.tsx
Unescape View File

@ -0,0 +1,34 @@ @@ -0,0 +1,34 @@
import { FC } from 'react';
export const ServerRenderedMetadata: FC = () => (
<>
<meta name="description" content="{{.Summary}}" />
<meta property="og:title" content="{{.Name}}" />
<meta property="og:site_name" content="{{.Name}}" />
<meta property="og:url" content="{{.RequestedURL}}" />
<meta property="og:description" content="{{.Summary}}" />
<meta property="og:type" content="video.other" />
<meta property="video:tag" content="{{.TagsString}}" />
<meta property="og:image" content="{{.Thumbnail}}" />
<meta property="og:image:url" content="{{.Thumbnail}}" />
<meta property="og:image:alt" content="{{.Image}}" />
<meta property="og:video" content="{{.RequestedURL}}embed/video" />
<meta property="og:video:secure_url" content="{{.RequestedURL}}embed/video" />
<meta property="og:video:height" content="315" />
<meta property="og:video:width" content="560" />
<meta property="og:video:type" content="text/html" />
<meta property="og:video:actor" content="{{.Name}}" />
<meta property="twitter:title" content="{{.Name}}" />
<meta property="twitter:url" content="{{.RequestedURL}}" />
<meta property="twitter:description" content="{{.Summary}}" />
<meta property="twitter:image" content="{{.Image}}" />
<meta property="twitter:card" content="player" />
<meta property="twitter:player" content="{{.RequestedURL}}embed/video" />
<meta property="twitter:player:width" content="560" />
<meta property="twitter:player:height" content="315" />
</>
);

41
web/components/layouts/Main.tsx
Unescape View File

@ -16,6 +16,8 @@ import { ClientConfig } from '../../interfaces/client-config.model'; @@ -16,6 +16,8 @@ import { ClientConfig } from '../../interfaces/client-config.model';
import { DisplayableError } from '../../types/displayable-error';
import { FatalErrorStateModal } from '../modals/FatalErrorStateModal/FatalErrorStateModal';
import setupNoLinkReferrer from '../../utils/no-link-referrer';
import { ServerRenderedMetadata } from '../ServerRendered/ServerRenderedMetadata';
import { ServerRenderedHydration } from '../ServerRendered/ServerRenderedHydration';
export const Main: FC = () => {
const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
@ -30,42 +32,19 @@ export const Main: FC = () => { @@ -30,42 +32,19 @@ export const Main: FC = () => {
setupNoLinkReferrer(layoutRef.current);
}, []);
const hydrationScript = `
const isProduction = process.env.NODE_ENV === 'production';
const hydrationScript = isProduction
? `
window.statusHydration = {{.StatusJSON}};
window.configHydration = {{.ServerConfigJSON}};
`;
`
: null;
return (
<>
<Head>
<meta name="description" content="{{.Summary}}" />
<meta property="og:title" content="{{.Name}}" />
<meta property="og:site_name" content="{{.Name}}" />
<meta property="og:url" content="{{.RequestedURL}}" />
<meta property="og:description" content="{{.Summary}}" />
<meta property="og:type" content="video.other" />
<meta property="video:tag" content="{{.TagsString}}" />
<meta property="og:image" content="{{.Thumbnail}}" />
<meta property="og:image:url" content="{{.Thumbnail}}" />
<meta property="og:image:alt" content="{{.Image}}" />
<meta property="og:video" content="{{.RequestedURL}}embed/video" />
<meta property="og:video:secure_url" content="{{.RequestedURL}}embed/video" />
<meta property="og:video:height" content="315" />
<meta property="og:video:width" content="560" />
<meta property="og:video:type" content="text/html" />
<meta property="og:video:actor" content="{{.Name}}" />
<meta property="twitter:title" content="{{.Name}}" />
<meta property="twitter:url" content="{{.RequestedURL}}" />
<meta property="twitter:description" content="{{.Summary}}" />
<meta property="twitter:image" content="{{.Image}}" />
<meta property="twitter:card" content="player" />
<meta property="twitter:player" content="{{.RequestedURL}}embed/video" />
<meta property="twitter:player:width" content="560" />
<meta property="twitter:player:height" content="315" />
{isProduction && <ServerRenderedMetadata />}
<link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png" />
@ -94,7 +73,7 @@ export const Main: FC = () => { @@ -94,7 +73,7 @@ export const Main: FC = () => {
<meta name="theme-color" content="#ffffff" />
<style>{customStyles}</style>
<script dangerouslySetInnerHTML={{ __html: hydrationScript }} />
{isProduction && <ServerRenderedHydration hydrationScript={hydrationScript} />}
</Head>
<ClientConfigStore />

Write Preview
Loading…
Cancel
Save