Fix broken urls. Closes https://github.com/owncast/owncast/issues/798

web/components/config/edit-logo.tsx

@@ -16,6 +16,7 @@ import {
   STATUS_PROCESSING,
   STATUS_SUCCESS,
 } from '../../utils/input-statuses';
+import { NEXT_PUBLIC_API_HOST } from '../../utils/apis';
 
 const ACCEPTED_FILE_TYPES = ['image/svg+xml', 'image/png', 'image/jpeg', 'image/gif'];
 
@@ -88,6 +89,8 @@ export default function EditLogo() {
     }
   };
 
+  const logoDisplayUrl = NEXT_PUBLIC_API_HOST + 'logo';
+
   return (
     <div className="formfield-container logo-upload-container">
       <div className="label-side">
@@ -96,7 +99,7 @@ export default function EditLogo() {
 
       <div className="input-side">
         <div className="input-group">
-          <img src={logoUrl || currentLogo || '/logo'} alt="avatar" className="logo-preview" />
+          <img src={logoDisplayUrl} alt="avatar" className="logo-preview" />
           <Upload
             name="logo"
             listType="picture"

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

@@ -17,6 +17,7 @@ import isValidUrl from '../../utils/urls';
 import TextField from './form-textfield';
 import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../utils/input-statuses';
 import FormStatusIndicator from './form-status-indicator';
+import { NEXT_PUBLIC_API_HOST } from '../../utils/apis';
 
 const { Title } = Typography;
 
@@ -176,10 +177,12 @@ export default function EditSocialLinks() {
           return platform;
         }
         const { icon, platform: platformName } = platformInfo;
+        const iconUrl = NEXT_PUBLIC_API_HOST + `${icon.slice(1)}`;
+
         return (
           <div className="social-handle-cell">
             <span className="option-icon">
-              <img src={`${icon}`} alt="" className="option-icon" />
+              <img src={ iconUrl } alt="" className="option-icon" />
             </span>
             <p className="option-label">
               <strong>{platformName}</strong>

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

@@ -39,10 +39,12 @@ export default function SocialDropdown({ iconList, selectedOption, onSelected }:
           >
             {iconList.map(item => {
               const { platform, icon, key } = item;
+              const iconUrl = NEXT_PUBLIC_API_HOST + `${icon.slice(1)}`;
+
               return (
                 <Select.Option className="social-option" key={`platform-${key}`} value={key}>
                   <span className="option-icon">
-                    <img src={`${icon}`} alt="" className="option-icon" />
+                    <img src={iconUrl} alt="" className="option-icon" />
                   </span>
                   <span className="option-label">{platform}</span>
                 </Select.Option>