#1495 Path-style S3 compatibile URLs implemented (#346)

* #1495 Path-style S3 compatibile URLs implemented

https://github.com/owncast/owncast/issues/1495

It gives ability to use S3 compatibile providers that doesn't
support virtual-host-style URLs (i.e. Oracle Cloud Object Storage)

* https://github.com/owncast/owncast/issues/1495 Renaming rest of 'pathBased' to 'forcePathStyle'

web/components/config/edit-storage.tsx

@@ -28,7 +28,7 @@ const { Panel } = Collapse;
 // we could probably add more detailed checks here
 // `currentValues` is what's currently in the global store and in the db
 function checkSaveable(formValues: any, currentValues: any) {
-  const { endpoint, accessKey, secret, bucket, region, enabled, servingEndpoint, acl } = formValues;
+  const { endpoint, accessKey, secret, bucket, region, enabled, servingEndpoint, acl, forcePathStyle } = formValues;
   // if fields are filled out and different from what's in store, then return true
   if (enabled) {
     if (!!endpoint && isValidUrl(endpoint) && !!accessKey && !!secret && !!bucket && !!region) {
@@ -41,7 +41,8 @@ function checkSaveable(formValues: any, currentValues: any) {
         (!currentValues.servingEndpoint && servingEndpoint !== '') ||
         (!!currentValues.servingEndpoint && servingEndpoint !== currentValues.servingEndpoint) ||
         (!currentValues.acl && acl !== '') ||
-        (!!currentValues.acl && acl !== currentValues.acl)
+        (!!currentValues.acl && acl !== currentValues.acl) ||
+        forcePathStyle !== currentValues.forcePathStyle
       ) {
         return true;
       }
@@ -72,6 +73,7 @@ export default function EditStorage() {
     region = '',
     secret = '',
     servingEndpoint = '',
+    forcePathStyle = false,
   } = s3;
 
   useEffect(() => {
@@ -84,6 +86,7 @@ export default function EditStorage() {
       region,
       secret,
       servingEndpoint,
+      forcePathStyle,
     });
     setShouldDisplayForm(enabled);
   }, [s3]);
@@ -136,6 +139,10 @@ export default function EditStorage() {
     handleFieldChange({ fieldName: 'enabled', value: storageEnabled });
   };
 
+  const handleForcePathStyleSwitchChange = (forcePathStyleEnabled: boolean) => {
+    handleFieldChange({ fieldName: 'forcePathStyle', value: forcePathStyleEnabled });
+  };
+
   const containerClass = classNames({
     'edit-storage-container': true,
     'form-module': true,
@@ -217,6 +224,14 @@ export default function EditStorage() {
                 onChange={handleFieldChange}
               />
             </div>
+            <div className="enable-switch">
+              <ToggleSwitch
+                {...S3_TEXT_FIELDS_INFO.forcePathStyle}
+                fieldName="forcePathStyle"
+                checked={formDataValues.forcePathStyle}
+                onChange={handleForcePathStyleSwitchChange}
+              />
+            </div>
           </Panel>
         </Collapse>
       </div>

web/types/config-section.ts

@@ -79,6 +79,7 @@ export interface S3Field {
   region: string;
   secret: string;
   servingEndpoint?: string;
+  forcePathStyle: boolean;
 }
 
 export interface ExternalAction {

web/utils/config-constants.tsx

@@ -357,4 +357,9 @@ export const S3_TEXT_FIELDS_INFO = {
     pattern: DEFAULT_TEXTFIELD_URL_PATTERN,
     useTrim: true,
   },
+  forcePathStyle: {
+    fieldName: 'forcePathStyle',
+    label: 'Force path-style',
+    tip: 'If your S3 provider doesn\'t support virtual-hosted-style URLs set this to ON (i.e. Oracle Cloud Object Storage)',
+  },
 };

web/utils/server-status-context.tsx

@@ -34,6 +34,7 @@ export const initialServerConfigState: ConfigDetails = {
     region: '',
     secret: '',
     servingEndpoint: '',
+    forcePathStyle: false,
   },
   yp: {
     enabled: false,