owncast/web/pages/components/config/edit-server-details.tsx

import React, { useState, useContext, useEffect } from 'react';
import { Button, Input, Tooltip } from 'antd';
import { CopyOutlined, RedoOutlined } from '@ant-design/icons';

import TextField, { TEXTFIELD_TYPE_NUMBER, TEXTFIELD_TYPE_PASSWORD } from './form-textfield';

import { ServerStatusContext } from '../../../utils/server-status-context';
import { TEXTFIELD_PROPS_FFMPEG, TEXTFIELD_PROPS_RTMP_PORT, TEXTFIELD_PROPS_STREAM_KEY, TEXTFIELD_PROPS_WEB_PORT,  } from './constants';

import configStyles from '../../../styles/config-pages.module.scss';
import { UpdateArgs } from '../../../types/config-section';

export default function EditInstanceDetails() {
  const [formDataValues, setFormDataValues] = useState(null);
  const serverStatusData = useContext(ServerStatusContext);
  const { serverConfig } = serverStatusData || {};

  const { streamKey, ffmpegPath, rtmpServerPort, webServerPort } = serverConfig;

  const [copyIsVisible, setCopyVisible]  = useState(false);

  const COPY_TOOLTIP_TIMEOUT = 3000;

  useEffect(() => {
    setFormDataValues({
      streamKey, ffmpegPath, rtmpServerPort, webServerPort
    });
  }, [serverConfig]);

  if (!formDataValues) {
    return null;
  }

  const handleFieldChange = ({ fieldName, value }: UpdateArgs) => {
    setFormDataValues({
      ...formDataValues,
      [fieldName]: value,
    });
  }

  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={configStyles.publicDetailsContainer}>
      <div className={configStyles.textFieldsSection}>
        <TextField
          fieldName="streamKey"
          {...TEXTFIELD_PROPS_STREAM_KEY}
          value={formDataValues.streamKey}
          initialValue={streamKey}
          type={TEXTFIELD_TYPE_PASSWORD}
          onChange={handleFieldChange}
        />
        <div>
          <span style={{fontSize: '0.75em', color: '#ff7777', marginRight: '0.5em'}}>
            Save this key somewhere safe,
            you will need it to stream or login to the admin dashboard!
          </span>
          <Tooltip className="copy-tooltip"
                   title="Copied!"
                   trigger=""
                   visible={copyIsVisible}>
            <Button type="primary"
                    icon={<CopyOutlined />}
                    size="small"
                    onClick={copyStreamKey}
            />
          </Tooltip>
          <Button type="primary"
                  icon={<RedoOutlined />}
                  size="small"
                  onClick={generateStreamKey}
          />
        </div>
        <TextField
          fieldName="ffmpegPath"
          {...TEXTFIELD_PROPS_FFMPEG}
          value={formDataValues.ffmpegPath}
          initialValue={ffmpegPath}
          onChange={handleFieldChange}
        />
        <TextField
          fieldName="webServerPort"
          {...TEXTFIELD_PROPS_WEB_PORT}
          value={formDataValues.webServerPort}
          initialValue={webServerPort}
          type={TEXTFIELD_TYPE_NUMBER}
          onChange={handleFieldChange}
        />
        <TextField
          fieldName="rtmpServerPort"
          {...TEXTFIELD_PROPS_RTMP_PORT}
          value={formDataValues.rtmpServerPort}
          initialValue={rtmpServerPort}
          type={TEXTFIELD_TYPE_NUMBER}
          onChange={handleFieldChange}
        />
      </div>
    </div>      
  ); 
}