♻️ Refactor podlove export code

bugbakery · Dec 10, 2023 · d5b37b6 · d5b37b6
1 parent d46c062
commit d5b37b6
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 114 deletions.
diff --git a/frontend/src/editor/export/webvtt.tsx b/frontend/src/editor/export/webvtt.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import * as Automerge from '@automerge/automerge';
 
 import { Checkbox, FormControl, Input, Select } from '../../components/form';
@@ -10,18 +10,30 @@ import { ExportProps } from '.';
 import { PrimaryButton, SecondaryButton, IconButton } from '../../components/button';
 import { BsEye, BsEyeSlash } from 'react-icons/bs';
 
+type ExportFormat = SubtitleFormat | 'podlove';
+
 export function WebVttExportBody({ onClose, outputNameBase, editor }: ExportProps) {
   const [includeSpeakerNames, setIncludeSpeakerNames] = useState(true);
   const [includeWordTimings, setIncludeWordTimings] = useState(false);
   const [limitLineLength, setLimitLineLength] = useState(false);
   const [maxLineLength, setMaxLineLength] = useState(60);
+
   const [podloveEpisodeId, setPodloveEpisodeId] = useState(1);
   const [podloveUser, setPodloveUser] = useState('');
   const [podloveShowApplicationId, setPodloveShowApplicationId] = useState(false);
   const [podloveApplicationId, setPodloveId] = useState('');
   const [podloveUrl, setPodloveUrl] = useState('');
-  const [podloveExportPossible, setPodloveExportPossible] = useState(true);
-  const [format, setFormat] = useState('vtt' as SubtitleFormat);
+  const [podloveExportPossible, setPodloveExportPossible] = useState(false);
+  useEffect(() => {
+    checkIsPodloveExportPossible(
+      podloveEpisodeId,
+      podloveUser,
+      podloveApplicationId,
+      podloveUrl,
+    ).then(setPodloveExportPossible);
+  }, [podloveEpisodeId, podloveUser, podloveApplicationId, podloveApplicationId, podloveUrl]);
+
+  const [format, setFormat] = useState('vtt' as ExportFormat);
   const canExport = useMemo(() => canGenerateVtt(editor.doc.children), [editor.v]);
 
   return (
@@ -36,11 +48,6 @@ export function WebVttExportBody({ onClose, outputNameBase, editor }: ExportProp
               e.target.value === 'podlove'
             ) {
               setFormat(e.target.value);
-              if (e.target.value == 'srt' || e.target.value == 'vtt') {
-                setPodloveExportPossible(true);
-              } else {
-                setPodloveExportPossible(false);
-              }
             }
           }}
         >
@@ -49,42 +56,15 @@ export function WebVttExportBody({ onClose, outputNameBase, editor }: ExportProp
           <option value="podlove">Upload to Podlove Publisher</option>
         </Select>
       </FormControl>
-      {format == 'vtt' || format == 'podlove' ? (
-        <Checkbox
-          label="Include Speaker Names"
-          value={(format == 'vtt' || format == 'podlove') && includeSpeakerNames}
-          onChange={(x) => setIncludeSpeakerNames(x)}
-        />
-      ) : (
-        <></>
-      )}
-      {format == 'vtt' ? (
-        <Checkbox
-          label="Include Word-Timings"
-          value={format == 'vtt' && includeWordTimings}
-          onChange={(x) => {
-            setIncludeWordTimings(x);
-          }}
-        />
-      ) : (
-        <></>
-      )}
       {format == 'podlove' ? (
         <>
-          <FormControl label={'Episode (id)'}>
+          <FormControl label={'Podlove Publisher baseUrl'}>
             <Input
               autoFocus
-              value={podloveEpisodeId}
-              type="number"
+              value={podloveUrl}
+              type="string"
               onChange={(e) => {
-                setPodloveEpisodeId(parseInt(e.target.value));
-                checkIsPodloveExportPossible(
-                  parseInt(e.target.value),
-                  podloveUser,
-                  podloveApplicationId,
-                  podloveUrl,
-                  setPodloveExportPossible,
-                );
+                setPodloveUrl(e.target.value);
               }}
             />
           </FormControl>
@@ -95,31 +75,17 @@ export function WebVttExportBody({ onClose, outputNameBase, editor }: ExportProp
               type="string"
               onChange={(e) => {
                 setPodloveUser(e.target.value);
-                checkIsPodloveExportPossible(
-                  podloveEpisodeId,
-                  e.target.value,
-                  podloveApplicationId,
-                  podloveUrl,
-                  setPodloveExportPossible,
-                );
               }}
             />
           </FormControl>
           <FormControl label={'Application Password'}>
-            <div className="mb-4 flex">
+            <div className="flex">
               <Input
                 autoFocus
                 value={podloveApplicationId}
                 type={podloveShowApplicationId ? 'text' : 'password'}
                 onChange={(e) => {
                   setPodloveId(e.target.value);
-                  checkIsPodloveExportPossible(
-                    podloveEpisodeId,
-                    podloveUser,
-                    e.target.value,
-                    podloveUrl,
-                    setPodloveExportPossible,
-                  );
                 }}
               />
               <IconButton
@@ -136,27 +102,40 @@ export function WebVttExportBody({ onClose, outputNameBase, editor }: ExportProp
               ></IconButton>
             </div>
           </FormControl>
-          <FormControl label={'Podlove Publisher baseUrl'}>
+          <FormControl label={'Episode (id)'}>
             <Input
               autoFocus
-              value={podloveUrl}
-              type="string"
+              value={podloveEpisodeId}
+              type="number"
               onChange={(e) => {
-                setPodloveUrl(e.target.value);
-                checkIsPodloveExportPossible(
-                  podloveEpisodeId,
-                  podloveUser,
-                  podloveApplicationId,
-                  e.target.value,
-                  setPodloveExportPossible,
-                );
+                setPodloveEpisodeId(parseInt(e.target.value));
               }}
             />
           </FormControl>
         </>
       ) : (
         <></>
       )}
+      {format == 'vtt' || format == 'podlove' ? (
+        <Checkbox
+          label="Include Speaker Names"
+          value={(format == 'vtt' || format == 'podlove') && includeSpeakerNames}
+          onChange={(x) => setIncludeSpeakerNames(x)}
+        />
+      ) : (
+        <></>
+      )}
+      {format == 'vtt' ? (
+        <Checkbox
+          label="Include Word-Timings"
+          value={format == 'vtt' && includeWordTimings}
+          onChange={(x) => {
+            setIncludeWordTimings(x);
+          }}
+        />
+      ) : (
+        <></>
+      )}
       <Checkbox
         label="Limit line length"
         value={limitLineLength}
@@ -209,7 +188,7 @@ export function WebVttExportBody({ onClose, outputNameBase, editor }: ExportProp
             }
             onClose();
           }}
-          disabled={!canExport.canGenerate || !podloveExportPossible}
+          disabled={!canExport.canGenerate || (!podloveExportPossible && format == 'podlove')}
         >
           Export
         </PrimaryButton>

diff --git a/frontend/src/utils/export_to_podlove.ts b/frontend/src/utils/export_to_podlove.ts
@@ -38,60 +38,32 @@ export function pushToPodlove(
     .catch((err) => console.error(err));
 }
 
-export function checkIsPodloveExportPossible(
+export async function checkIsPodloveExportPossible(
   episodeId: number,
   user: string,
   appId: string,
   url: string,
-  setIsPodloveUploadPossible: (v: boolean) => void,
-) {
+): Promise<boolean> {
   if (url.length < 1 || appId.length < 1 || user.length < 1 || episodeId < 1) {
-    setIsPodloveUploadPossible(false);
+    return false;
   }
 
-  const podloveUrlEpispde = url + '/wp-json/podlove/v2/episodes/' + episodeId.toString();
-  fetch(podloveUrlEpispde, {
-    method: 'GET',
-  })
-    .then((response) => {
-      // export the vtt to the podlove publisher
-      if (response.status === 200) {
-        setIsPodloveUploadPossible(true);
-      } else {
-        if (response.status === 401) {
-          fetch(podloveUrlEpispde, {
-            method: 'GET',
-            headers: {
-              'Content-type': 'application/json;charset=UTF-8',
-              Authorization: `Basic ${btoa(`${user}:${appId}`)}`,
-            },
-          })
-            .then((response) => {
-              if (response.status === 200) {
-                setIsPodloveUploadPossible(true);
-              } else {
-                if (response.status === 401) {
-                  setIsPodloveUploadPossible(false);
-                }
-                if (response.status === 404) {
-                  setIsPodloveUploadPossible(false);
-                }
-                setIsPodloveUploadPossible(false);
-              }
-            })
-            .catch((err) => {
-              console.error(err);
-              setIsPodloveUploadPossible(false);
-            });
-        }
-        if (response.status === 404) {
-          setIsPodloveUploadPossible(false);
-        }
-        setIsPodloveUploadPossible(false);
-      }
-    })
-    .catch((err) => {
-      console.error(err);
-      setIsPodloveUploadPossible(false);
+  const podloveUrlEpisode = url + '/wp-json/podlove/v2/episodes/' + episodeId.toString();
+  try {
+    const response = await fetch(podloveUrlEpisode, {
+      method: 'GET',
+      headers: {
+        'Content-type': 'application/json;charset=UTF-8',
+        Authorization: `Basic ${btoa(`${user}:${appId}`)}`,
+      },
     });
+    if (response.status === 200) {
+      return true;
+    } else {
+      return false;
+    }
+  } catch (err) {
+    console.log(err);
+    return false;
+  }
 }