Add reset YP setting. Closes https://github.com/owncast/owncast/issues/701

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

@@ -1,6 +1,7 @@
 import React, { useState, useContext, useEffect } from 'react';
-import { Button, Tooltip } from 'antd';
+import { Button, Tooltip, Collapse, Popconfirm } from 'antd';
 import { CopyOutlined, RedoOutlined } from '@ant-design/icons';
+const { Panel } = Collapse;
 
 import { TEXTFIELD_TYPE_NUMBER, TEXTFIELD_TYPE_PASSWORD } from './form-textfield';
 import TextFieldWithSubmit from './form-textfield-with-submit';
@@ -14,6 +15,7 @@ import {
   TEXTFIELD_PROPS_STREAM_KEY,
   TEXTFIELD_PROPS_WEB_PORT,
 } from '../../utils/config-constants';
+import { fetchData, API_YP_RESET } from '../../utils/apis';
 
 import { UpdateArgs } from '../../types/config-section';
 
@@ -24,7 +26,7 @@ export default function EditInstanceDetails() {
 
   const { serverConfig } = serverStatusData || {};
 
-  const { streamKey, ffmpegPath, rtmpServerPort, webServerPort } = serverConfig;
+  const { streamKey, ffmpegPath, rtmpServerPort, webServerPort, yp } = serverConfig;
 
   const [copyIsVisible, setCopyVisible] = useState(false);
 
@@ -66,6 +68,41 @@ export default function EditInstanceDetails() {
     }
   };
 
+  const resetDirectoryRegistration = async () => {
+    try {
+      await fetchData(API_YP_RESET);
+      setMessage('');
+    } catch (error) {
+      alert(error);
+    }
+  };
+
+  function ResetYP() {
+    // TODO: Uncomment this after it's styled.
+    // if (yp.enabled) {
+    return (
+      <div className="field-container">
+        Reset Directory:
+        <Popconfirm
+          placement="topLeft"
+          title={'Are you sure you want to reset your connection to the Owncast directory?'}
+          onConfirm={resetDirectoryRegistration}
+          okText="Yes"
+          cancelText="No"
+        >
+          <Button>Reset Directory Connection</Button>
+        </Popconfirm>
+        <p>
+          If you are experiencing issues with your listing on the Owncast Directory and were asked
+          to "reset" your connection to the service, you can do that here. The next time you go live
+          it will try and re-register your server with the directory from scratch.
+        </p>
+      </div>
+    );
+    // }
+    // return null;
+  }
+
   function generateStreamKey() {
     let key = '';
     for (let i = 0; i < 3; i += 1) {
@@ -135,6 +172,13 @@ export default function EditInstanceDetails() {
         onChange={handleFieldChange}
         onSubmit={showConfigurationRestartMessage}
       />
+      <Collapse>
+        <Panel header="Advanced Settings" key="1">
+          <div className="form-fields">
+            <ResetYP />
+          </div>
+        </Panel>
+      </Collapse>
     </div>
   );
 }

web/utils/apis.ts

@@ -63,6 +63,8 @@ export const CREATE_WEBHOOK = `${API_LOCATION}webhooks/create`;
 // hard coded social icons list
 export const SOCIAL_PLATFORMS_LIST = `${NEXT_PUBLIC_API_HOST}api/socialplatforms`;
 
+export const API_YP_RESET = `${API_LOCATION}yp/reset`;
+
 export const TEMP_UPDATER_API = LOGS_ALL;
 
 const GITHUB_RELEASE_URL = 'https://api.github.com/repos/owncast/owncast/releases/latest';
@@ -71,14 +73,10 @@ interface FetchOptions {
   data?: any;
   method?: string;
   auth?: boolean;
-};
+}
 
 export async function fetchData(url: string, options?: FetchOptions) {
-  const {
+  const { data, method = 'GET', auth = true } = options || {};
-    data,
-    method = 'GET',
-    auth = true,
-  } = options || {};
 
   const requestOptions: RequestInit = {
     method,
@@ -114,7 +112,6 @@ export async function fetchData(url: string, options?: FetchOptions) {
   return {};
 }
 
-
 export async function getGithubRelease() {
   try {
     const response = await fetch(GITHUB_RELEASE_URL);
@@ -133,29 +130,25 @@ export async function getGithubRelease() {
 // Stolen from https://gist.github.com/prenagha/98bbb03e27163bc2f5e4
 const VPAT = /^\d+(\.\d+){0,2}$/;
 function upToDate(local, remote) {
-    if (!local || !remote || local.length === 0 || remote.length === 0)
+  if (!local || !remote || local.length === 0 || remote.length === 0) return false;
-        return false;
+  if (local === remote) return true;
-    if (local === remote)
+  if (VPAT.test(local) && VPAT.test(remote)) {
-        return true;
+    const lparts = local.split('.');
-    if (VPAT.test(local) && VPAT.test(remote)) {
+    while (lparts.length < 3) lparts.push('0');
-        const lparts = local.split('.');
+    const rparts = remote.split('.');
-        while(lparts.length < 3)
+    while (rparts.length < 3) rparts.push('0');
-            lparts.push("0");
+    // eslint-disable-next-line no-plusplus
-        const rparts = remote.split('.');
+    for (let i = 0; i < 3; i++) {
-        while (rparts.length < 3)
+      const l = parseInt(lparts[i], 10);
-            rparts.push("0");
+      const r = parseInt(rparts[i], 10);
-        // eslint-disable-next-line no-plusplus
+      if (l === r)
-        for (let i=0; i<3; i++) {
+        // eslint-disable-next-line no-continue
-            const l = parseInt(lparts[i], 10);
+        continue;
-            const r = parseInt(rparts[i], 10);
+      return l > r;
-            if (l === r)
+    }
-                // eslint-disable-next-line no-continue
+    return true;
-                continue;
+  }
-            return l > r;
+  return local >= remote;
-        }
-        return true;
-    } 
-    return local >= remote;
 }
 
 // Make a request to the server status API and the Github releases API
@@ -165,12 +158,12 @@ export async function upgradeVersionAvailable(currentVersion) {
   let recentReleaseVersion = recentRelease.tag_name;
 
   if (recentReleaseVersion.substr(0, 1) === 'v') {
-    recentReleaseVersion = recentReleaseVersion.substr(1)
+    recentReleaseVersion = recentReleaseVersion.substr(1);
   }
 
   if (!upToDate(currentVersion, recentReleaseVersion)) {
-    return recentReleaseVersion
+    return recentReleaseVersion;
   }
 
   return null;
-}
+}