Merge branch 'develop' into fix/ImplementPasswordRules

web/components/admin/CurrentVariantsTable.tsx

@@ -151,7 +151,9 @@ export const CurrentVariantsTable: FC = () => {
       dataIndex: 'cpuUsageLevel',
       key: 'cpuUsageLevel',
       render: (level: string, variant: VideoVariant) =>
-        !level || variant.videoPassthrough ? 'n/a' : ENCODER_PRESET_TOOLTIPS[level].split(' ')[0],
+        !level || variant.videoPassthrough
+          ? 'n/a'
+          : ENCODER_PRESET_TOOLTIPS[level]?.split(' ')[0] || 'Warning: please edit & reset',
     },
     {
       title: '',

web/components/admin/EditCustomJavascript.tsx

@@ -68,7 +68,7 @@ export const EditCustomJavascript: FC = () => {
     setContent(initialContent);
   }, [instanceDetails]);
 
-  const onCSSValueChange = React.useCallback(value => {
+  const onValueChange = React.useCallback(value => {
     setContent(value);
     if (value !== initialContent && !hasChanged) {
       setHasChanged(true);
@@ -80,20 +80,18 @@ export const EditCustomJavascript: FC = () => {
   return (
     <div className="edit-custom-css">
       <Title level={3} className="section-title">
-        Customize your page styling with CSS
+        Customize your page with Javascript
       </Title>
 
       <p className="description">
-        Customize the look and feel of your Owncast instance by overriding the CSS styles of various
-        components on the page. Refer to the{' '}
+        Insert custom Javascript into your Owncast page to add your own functionality or to add 3rd
+        party scripts. Read more about how to use this feature in the{' '}
         <a href="https://owncast.online/docs/website/" rel="noopener noreferrer" target="_blank">
-          CSS &amp; Components guide
+          Web page documentation.
         </a>
         .
       </p>
-      <p className="description">
-        Please input plain CSS text, as this will be directly injected onto your page during load.
-      </p>
+      <p className="description">Please use raw Javascript, no HTML or any script tags.</p>
 
       <CodeMirror
         value={content}
@@ -101,7 +99,7 @@ export const EditCustomJavascript: FC = () => {
         theme={bbedit}
         height="200px"
         extensions={[javascript()]}
-        onChange={onCSSValueChange}
+        onChange={onValueChange}
       />
 
       <br />

web/components/admin/EditInstanceDetails2.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useContext, useEffect } from 'react';
-import { Button, Collapse, Typography, Tooltip } from 'antd';
-import dynamic from 'next/dynamic';
+import { Collapse, Typography } from 'antd';
 import { TEXTFIELD_TYPE_NUMBER, TEXTFIELD_TYPE_PASSWORD, TEXTFIELD_TYPE_URL } from './TextField';
 import { TextFieldWithSubmit } from './TextFieldWithSubmit';
 import { ServerStatusContext } from '../../utils/server-status-context';
@@ -15,16 +14,6 @@ import {
 import { UpdateArgs } from '../../types/config-section';
 import { ResetYP } from './ResetYP';
 
-// Lazy loaded components
-
-const CopyOutlined = dynamic(() => import('@ant-design/icons/CopyOutlined'), {
-  ssr: false,
-});
-
-const RedoOutlined = dynamic(() => import('@ant-design/icons/RedoOutlined'), {
-  ssr: false,
-});
-
 const { Panel } = Collapse;
 
 // eslint-disable-next-line react/function-component-definition
@@ -38,10 +27,6 @@ export default function EditInstanceDetails() {
   const { adminPassword, ffmpegPath, rtmpServerPort, webServerPort, yp, socketHostOverride } =
     serverConfig;
 
-  const [copyIsVisible, setCopyVisible] = useState(false);
-
-  const COPY_TOOLTIP_TIMEOUT = 3000;
-
   useEffect(() => {
     setFormDataValues({
       adminPassword,
@@ -79,22 +64,6 @@ export default function EditInstanceDetails() {
     }
   };
 
-  function generateStreamKey() {
-    let key = '';
-    for (let i = 0; i < 3; i += 1) {
-      key += Math.random().toString(36).substring(2);
-    }
-
-    handleFieldChange({ fieldName: 'streamKey', value: key });
-  }
-
-  function copyStreamKey() {
-    navigator.clipboard.writeText(formDataValues.streamKey).then(() => {
-      setCopyVisible(true);
-      setTimeout(() => setCopyVisible(false), COPY_TOOLTIP_TIMEOUT);
-    });
-  }
-
   return (
     <div className="edit-server-details-container">
       <div className="field-container field-streamkey-container">
@@ -108,18 +77,6 @@ export default function EditInstanceDetails() {
             onChange={handleFieldChange}
             onSubmit={showStreamKeyChangeMessage}
           />
-          <div className="streamkey-actions">
-            <Tooltip title="Generate a stream key">
-              <Button icon={<RedoOutlined />} size="small" onClick={generateStreamKey} />
-            </Tooltip>
-
-            <Tooltip
-              className="copy-tooltip"
-              title={copyIsVisible ? 'Copied!' : 'Copy to clipboard'}
-            >
-              <Button icon={<CopyOutlined />} size="small" onClick={copyStreamKey} />
-            </Tooltip>
-          </div>
         </div>
       </div>
       <TextFieldWithSubmit

web/components/admin/MainLayout.tsx

@@ -1,5 +1,4 @@
 import React, { FC, ReactNode, useContext, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import Link from 'next/link';
 import Head from 'next/head';
 import { differenceInSeconds } from 'date-fns';
@@ -224,7 +223,7 @@ export const MainLayout: FC<MainLayoutProps> = ({ children }) => {
       key: 'viewer-info',
     },
     !chatDisabled && {
-      label: <Link href="/admin/viewer-info">Chat &amp; Users</Link>,
+      label: <span>Chat &amp; Users</span>,
       icon: <MessageOutlined />,
       children: chatMenu,
       key: 'chat-and-users',
@@ -338,7 +337,3 @@ export const MainLayout: FC<MainLayoutProps> = ({ children }) => {
     </Layout>
   );
 };
-
-MainLayout.propTypes = {
-  children: PropTypes.element.isRequired,
-};

web/components/admin/Offline.tsx

@@ -44,7 +44,7 @@ export const Offline: FC<OfflineProps> = ({ logs = [], config }) => {
   const serverStatusData = useContext(ServerStatusContext);
 
   const { serverConfig } = serverStatusData || {};
-  const { rtmpServerPort } = serverConfig;
+  const { rtmpServerPort, streamKeyOverridden } = serverConfig;
   const instanceUrl = global.window?.location.hostname || '';
 
   let rtmpURL;
@@ -79,7 +79,13 @@ export const Offline: FC<OfflineProps> = ({ logs = [], config }) => {
               Streaming Keys:
             </Text>
             <Text strong className="stream-info-box">
-              <Link href="/admin/config/server"> View </Link>
+              {!streamKeyOverridden ? (
+                <Link href="/admin/config/server"> View </Link>
+              ) : (
+                <span style={{ paddingLeft: '10px', fontWeight: 'normal' }}>
+                  Overridden via command line.
+                </span>
+              )}
             </Text>
           </div>
         </div>

web/components/admin/VideoVariantForm.tsx

@@ -159,8 +159,8 @@ export const VideoVariantForm: FC<VideoVariantFormProps> = ({
               <Slider
                 tipFormatter={value => ENCODER_PRESET_TOOLTIPS[value]}
                 onChange={handleVideoCpuUsageLevelChange}
-                min={1}
-                max={Object.keys(ENCODER_PRESET_SLIDER_MARKS).length}
+                min={0}
+                max={Object.keys(ENCODER_PRESET_SLIDER_MARKS).length - 1}
                 marks={ENCODER_PRESET_SLIDER_MARKS}
                 defaultValue={dataState.cpuUsageLevel}
                 value={dataState.cpuUsageLevel}

web/components/admin/config/server/StreamKeys.tsx

@@ -87,7 +87,7 @@ const AddKeyForm = ({ setShowAddKeyForm, setFieldInConfigState, streamKeys, setE
       setHasChanged(false);
     }
   };
-
+  
   // Default auto-generated key
   const defaultKey = generateRndKey();