start on social links editing, wip

web/pages/components/config/constants.tsx

@@ -19,13 +19,14 @@ export const SUCCESS_STATES = {
   },
   error: {
     icon: <ExclamationCircleFilled style={{ color: 'red' }} />,
-    message: 'An error occurred.',
+    message: 'An error occurred.',  
   },
 };
 
 // CONFIG API ENDPOINTS
 export const API_VIDEO_VARIANTS = '/video/streamoutputvariants';
 export const API_VIDEO_SEGMENTS = '/video/streamlatencylevel';
+export const API_SOCIAL_HANDLES = '/socialhandles';
 
 export async function postConfigUpdateToAPI(args: ApiPostArgs) {
   const {

web/pages/components/config/edit-social-links.tsx

@@ -0,0 +1,132 @@
+import React, { useContext, useState, useEffect } from 'react';
+import { Typography, Input } from 'antd';
+
+import { ServerStatusContext } from '../../../utils/server-status-context';
+import { TEXTFIELD_DEFAULTS, RESET_TIMEOUT, SUCCESS_STATES, postConfigUpdateToAPI } from './constants';
+
+const { Title } = Typography;
+
+export default function EditSocialLinks() {
+  const [newTagInput, setNewTagInput] = useState('');
+  const [submitStatus, setSubmitStatus] = useState(null);
+  const [submitStatusMessage, setSubmitStatusMessage] = useState('');
+  const serverStatusData = useContext(ServerStatusContext);
+  const { serverConfig, setFieldInConfigState } = serverStatusData || {};
+
+  const { instanceDetails } = serverConfig;
+  const { tags = [] } = instanceDetails;
+
+  const configPath = 'instanceDetails';
+
+  const {
+    apiPath,
+    maxLength,
+    placeholder,
+  } = TEXTFIELD_DEFAULTS[configPath].tags || {};
+
+
+  let resetTimer = null;
+
+  useEffect(() => {
+    return () => {
+      clearTimeout(resetTimer);
+    }  
+  }, []);
+
+  const resetStates = () => {
+    setSubmitStatus(null);
+    setSubmitStatusMessage('');
+    resetTimer = null;
+    clearTimeout(resetTimer);
+  }
+
+  // posts all the tags at once as an array obj
+  const postUpdateToAPI = async (postValue: any) => {
+    await postConfigUpdateToAPI({
+      apiPath,
+      data: { value: postValue },
+      onSuccess: () => {
+        setFieldInConfigState({ fieldName: 'socialHandles', value: postValue, path: configPath });
+        setSubmitStatus('success');
+        setSubmitStatusMessage('Tags updated.');
+        setNewTagInput('');
+        resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
+      },
+      onError: (message: string) => {
+        setSubmitStatus('error');
+        setSubmitStatusMessage(message);
+        resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
+      },
+    });
+  };
+
+  const handleInputChange = e => {
+    if (submitStatusMessage !== '') {
+      setSubmitStatusMessage('');
+    }
+    setNewTagInput(e.target.value);
+  };
+
+  // send to api and do stuff
+  const handleSubmitNewLink = () => {
+    resetStates();
+    const newTag = newTagInput.trim();
+    if (newTag === '') {
+      setSubmitStatusMessage('Please enter a tag');
+      return;
+    } 
+    if (tags.some(tag => tag.toLowerCase() === newTag.toLowerCase())) {
+      setSubmitStatusMessage('This tag is already used!');
+      return;
+    }
+
+    const updatedTags = [...tags, newTag];
+    postUpdateToAPI(updatedTags);
+  };
+
+  const handleDeleteLink = index => {
+    resetStates();
+    const updatedTags = [...tags];
+    updatedTags.splice(index, 1);
+    postUpdateToAPI(updatedTags);
+  }
+
+  const {
+    icon: newStatusIcon = null,
+    message: newStatusMessage = '',
+  } = SUCCESS_STATES[submitStatus] || {};
+
+  return (
+    <div className="tag-editor-container">
+
+      <Title level={3}>Add Tags</Title>
+      <p>This is a great way to categorize your Owncast server on the Directory!</p>
+
+      <div className="tag-current-tags">
+        {tags.map((tag, index) => {
+          const handleClose = () => {
+            handleDeleteLink(index);
+          };
+          return (
+            <Tag closable onClose={handleClose} key={`tag-${tag}-${index}`}>{tag}</Tag>
+          );
+        })}
+      </div>
+      <div className={`status-message ${submitStatus || ''}`}>
+        {newStatusIcon} {newStatusMessage} {submitStatusMessage}
+      </div>
+      <div className="add-new-tag-section">
+        <Input
+          type="text"
+          className="new-tag-input"
+          value={newTagInput}
+          onChange={handleInputChange}
+          onPressEnter={handleSubmitNewTag}
+          maxLength={maxLength}
+          placeholder={placeholder}
+          allowClear
+        />
+      </div>
+    </div>
+  );
+}

web/pages/components/config/social-icons-dropdown.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { PlusOutlined } from "@ant-design/icons";
+import { Select, Divider, Input } from "antd";
+import classNames from 'classnames';
+import { SocialHandleItem } from "../../../types/config-section";
+import { NEXT_PUBLIC_API_HOST } from '../../../utils/apis';
+
+
+interface DropdownProps {
+  iconList: SocialHandleItem[];
+  selectedOption?: string;
+}
+interface DropdownOptionProps extends SocialHandleItem {
+  isSelected: boolean;
+}
+
+// Add "Other" item which creates a text field
+// Add fixed custom ones - "url", "donate", "follow", "rss"
+
+function dropdownRender(menu) {
+  console.log({menu})
+  return 'hi';
+}
+
+export default function SocialDropdown({ iconList, selectedOption }: DropdownProps) {
+  const [name, setName] = useState('');
+
+  const handleNameChange = event => {
+    setName(event.target.value);
+  };
+
+  const handleAddItem = () => {
+    console.log('addItem');
+    // const { items, name } = this.state;
+    // this.setState({
+    //   items: [...items, name || `New item ${index++}`],
+    //   name: '',
+    // });
+  };
+
+
+  return (
+    <div className="social-dropdown-container">
+      <Select
+        style={{ width: 240 }}
+        className="social-dropdown"
+        placeholder="Social platform..."
+        // defaultValue
+        dropdownRender={menu => (
+          <>
+            {menu}
+            <Divider style={{ margin: '4px 0' }} />
+            <div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
+              <Input style={{ flex: 'auto' }} value="" onChange={handleNameChange} />
+              <a
+                style={{ flex: 'none', padding: '8px', display: 'block', cursor: 'pointer' }}
+                onClick={handleAddItem}
+              >
+                <PlusOutlined /> Add item
+              </a>
+            </div>
+          </>
+        )}
+      >
+        {iconList.map(item => {
+          const { platform, icon, key } =  item;
+          return (
+            <Select.Option className="social-option" key={`platform-${key}`} value={key}>
+              <span className="option-icon">
+                <img src={`${NEXT_PUBLIC_API_HOST}${icon}`} alt="" className="option-icon" />
+              </span>
+              <span className="option-label">{platform}</span>
+            </Select.Option>
+          );
+        })
+      }
+      </Select>
+
+    </div>
+  );
+}

web/pages/components/main-layout.tsx

@@ -144,6 +144,9 @@ export default function MainLayout(props) {
             <Menu.Item key="config-page-content">
               <Link href="/config-page-content">Custom page content</Link>
             </Menu.Item>
+            <Menu.Item key="config-social-links">
+              <Link href="/config-social-links">Social links</Link>
+            </Menu.Item>
             <Menu.Item key="config-server-details">
               <Link href="/config-server-details">Server Details</Link>
             </Menu.Item>

web/pages/config-social-links.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useContext, useEffect } from 'react';
+import { Typography } from 'antd';
+import SocialDropdown from './components/config/social-icons-dropdown';
+import { fetchData, SOCIAL_PLATFORMS_LIST } from '../utils/apis';
+import { ServerStatusContext } from '../utils/server-status-context';
+
+const { Title } = Typography;
+
+
+// get icons
+
+export default function ConfigSocialLinks() {
+  const [availableIconsList, setAvailableIconsList] = useState([]);
+  const [currentSocialHandles, setCurrentSocialHandles] = useState([]);
+
+  const serverStatusData = useContext(ServerStatusContext);
+  const { serverConfig, setFieldInConfigState } = serverStatusData || {};
+
+  const { instanceDetails } = serverConfig;
+  const { socialHandles: initialSocialHandles } = instanceDetails;
+
+  const getAvailableIcons = async () => {
+    try {
+      const result = await fetchData(SOCIAL_PLATFORMS_LIST, { auth: false });
+      const list = Object.keys(result).map(item => ({
+        key: item,
+        ...result[item],
+      }));
+      console.log({result})
+      setAvailableIconsList(list);
+
+    } catch (error) {
+      console.log(error)
+      //  do nothing
+    }
+  };
+
+  useEffect(() => {
+    getAvailableIcons();
+  }, []);
+
+  useEffect(() => {
+    setCurrentSocialHandles(initialSocialHandles);
+  }, [instanceDetails]);
+
+
+
+  return (
+    <div className="config-social-links">
+      <Title level={2}>Social Links</Title>
+      <p>Add all your social media handles and links to your other profiles here.</p>
+        
+      <SocialDropdown iconList={availableIconsList} />
+    </div>
+  ); 
+}
+

web/pages/config-video.tsx

@@ -6,7 +6,7 @@ import VideoLatency from './components/config/video-latency';
 
 const { Title } = Typography;
 
-export default function VideoConfig() {
+export default function ConfigVideoSettings() {
   return (
     <div className="config-video-variants">
       <Title level={2}>Video configuration</Title>

web/styles/config.scss

@@ -292,3 +292,49 @@
   margin: auto;
   display: inline-block;
 }
+
+.social-option,
+.social-dropdown {
+  // .ant-select-selector,
+  // .ant-select-selection-search-input {
+  //   height: 40px !important;
+  // }
+  .ant-select-item-option-content,
+  .ant-select-selection-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    padding: .25em;
+    line-height: normal;
+
+    .option-icon {
+      height: 1.5em;
+      width: 1.5em;
+      line-height: normal;
+    }
+    .option-label {
+      display: inline-block;
+      margin-left: 1em;
+      line-height: normal;
+    }
+  }
+}
+// .social-option {
+//   .ant-select-item-option-content {
+//     display: flex;
+//     flex-direction: row;
+//     justify-content: flex-start;
+//     align-items: center;
+//     padding: .25em;
+
+//     .option-icon {
+//       height: 1.75em;
+//       width: 1.75em;
+//     }
+//     .option-label {
+//       display: inline-block;
+//       margin-left: 1em;
+//     }
+//   }
+// }

web/styles/globals.scss

@@ -98,6 +98,16 @@ code {
   font-size: 1.5em;
 }
 
+
+
+.ant-select-dropdown {
+  background-color: #334;
+}
+.rc-virtual-list-scrollbar {
+  display: block !important;
+}
+
+
 // markdown editor overrides
 
 .rc-md-editor {

web/types/config-section.ts

@@ -45,6 +45,7 @@ export interface ConfigInstanceDetailsFields {
   logo: string;
   name: string;
   nsfw: boolean;
+  socialHandles: SocialHandleItem[],
   streamTitle: string;
   summary: string;
   tags: string[];
@@ -54,6 +55,12 @@ export interface ConfigInstanceDetailsFields {
 
 export type PRESET = 'fast' | 'faster' | 'veryfast' | 'superfast' | 'ultrafast';
 
+export interface SocialHandleItem {
+  icon: string;
+  platform: string;
+  key: string;
+}
+
 export interface VideoVariant {
   key?: number; // unique identifier generated on client side just for ant table rendering
   encoderPreset: PRESET,

web/utils/apis.ts

@@ -1,7 +1,7 @@
 /* eslint-disable prefer-destructuring */
 const ADMIN_USERNAME = process.env.NEXT_PUBLIC_ADMIN_USERNAME;
 const ADMIN_STREAMKEY = process.env.NEXT_PUBLIC_ADMIN_STREAMKEY;
-const NEXT_PUBLIC_API_HOST = process.env.NEXT_PUBLIC_API_HOST;
+export const NEXT_PUBLIC_API_HOST = process.env.NEXT_PUBLIC_API_HOST;
 
 const API_LOCATION = `${NEXT_PUBLIC_API_HOST}api/admin/`;
 
@@ -60,6 +60,9 @@ export const DELETE_WEBHOOK = `${API_LOCATION}webhooks/delete`;
 
 // Create a single webhook
 export const CREATE_WEBHOOK = `${API_LOCATION}webhooks/create`;
+// hard coded social icons list
+export const SOCIAL_PLATFORMS_LIST = `${NEXT_PUBLIC_API_HOST}api/socialplatforms`;
+
 
 const GITHUB_RELEASE_URL = "https://api.github.com/repos/owncast/owncast/releases/latest";
 

web/utils/server-status-context.tsx

@@ -14,6 +14,7 @@ export const initialServerConfigState: ConfigDetails = {
     logo: '',
     name: '',
     nsfw: false,
+    socialHandles: [],
     streamTitle: '',
     summary: '',
     tags: [],