feat(frontend) - Export to Podlove Publisher

frontend/src/editor/export/webvtt.tsx

@@ -5,14 +5,21 @@ import { Checkbox, FormControl, Input, Select } from '../../components/form';
 import { canGenerateVtt, generateWebVtt } from '../../utils/export/webvtt';
 import { SubtitleFormat } from '@audapolis/webvtt-writer';
 import { downloadTextAsFile } from '../../utils/download_text_as_file';
+import { pushToPodlove } from '../../utils/export_to_podlove';
 import { ExportProps } from '.';
-import { PrimaryButton, SecondaryButton } from '../../components/button';
+import { PrimaryButton, SecondaryButton, IconButton } from '../../components/button';
+import { BsEye, BsEyeSlash } from 'react-icons/bs';
 
 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 [format, setFormat] = useState('vtt' as SubtitleFormat);
   const canExport = useMemo(() => canGenerateVtt(editor.doc.children), [editor.v]);
 
@@ -22,13 +29,14 @@ export function WebVttExportBody({ onClose, outputNameBase, editor }: ExportProp
         <Select
           value={format}
           onChange={(e) => {
-            if (e.target.value === 'srt' || e.target.value === 'vtt') {
+            if (e.target.value === 'srt' || e.target.value === 'vtt' || e.target.value === 'podlove') {
               setFormat(e.target.value);
             }
           }}
         >
           <option value="vtt">WebVTT</option>
           <option value="srt">SRT</option>
+          <option value="podlove">Podlove</option>
         </Select>
       </FormControl>
       {format == 'vtt' ? (
@@ -47,6 +55,76 @@ export function WebVttExportBody({ onClose, outputNameBase, editor }: ExportProp
       ) : (
         <></>
       )}
+      {format == 'podlove' ? (
+        <>
+          <Checkbox
+            label="Include Speaker Names"
+            value={format == 'podlove' && includeSpeakerNames}
+            onChange={(x) => setIncludeSpeakerNames(x)}
+          />
+          <FormControl label={'Episode (id)'}>
+            <Input
+              autoFocus
+              value={podloveEpisodeId}
+              type="number"
+              onChange={(e) => {
+                setPodloveEpisodeId(parseInt(e.target.value));
+              }}
+            />
+          </FormControl>
+          <FormControl label={'User'}>
+            <Input
+              autoFocus
+              value={podloveUser}
+              type="string"
+              onChange={(e) => {
+                setPodloveUser(e.target.value);
+              }}
+            />
+          </FormControl>
+          <FormControl label={'Application Password'}>
+            <div className="mb-4 flex">
+              <Input
+                autoFocus
+                value={podloveApplicationId}
+                type={
+                  podloveShowApplicationId ? "text" : "password"
+                }
+                onChange={(e) => {
+                  setPodloveId(e.target.value);
+                }}
+              />
+              <IconButton
+                icon={podloveShowApplicationId ? BsEyeSlash : BsEye }
+                size={20}
+                onClick={(e) => {
+                    e.preventDefault();
+                    setPodloveShowApplicationId(!podloveShowApplicationId);
+                  }
+                }
+                label="Show / Hide"
+                iconClassName="inline-block -mt-1"
+                className="rounded-xl px-4 py-1"
+                iconAfter={true}
+              >
+              </IconButton>
+            </div>
+          </FormControl>
+          <FormControl label={'Podlove Publisher baseUrl'}>
+            <Input
+              autoFocus
+              value={podloveUrl}
+              type="string"
+              onChange={(e) => {
+                setPodloveUrl(e.target.value);
+              }}
+            />
+          </FormControl>
+
+        </>
+      ) : (
+        <></>
+      )}
       <Checkbox
         label="Limit line length"
         value={limitLineLength}
@@ -82,11 +160,16 @@ export function WebVttExportBody({ onClose, outputNameBase, editor }: ExportProp
               includeWordTimings,
               maxLineLength,
             );
-            downloadTextAsFile(
-              `${outputNameBase}.${format}`,
-              `text/${format}`,
-              vtt.toString(format),
-            );
+            if (format === 'vtt' || format === 'srt') {
+              downloadTextAsFile(
+                `${outputNameBase}.${format}`,
+                `text/${format}`,
+                vtt.toString(format),
+              );
+            }
+            else {
+              pushToPodlove(podloveEpisodeId, podloveUser, podloveApplicationId, podloveUrl, vtt.toString('vtt'));
+            }
             onClose();
           }}
           disabled={!canExport.canGenerate}

frontend/src/utils/export_to_podlove.ts

@@ -0,0 +1,53 @@
+export function pushToPodlove(episodeId: Number, user: string, appId: string, url: string, text: string) {
+
+    // check if episode exist
+    const podloveUrlEpispde = url + '/wp-json/podlove/v2/episodes/' + episodeId.toString();
+    fetch(podloveUrlEpispde, {
+        method: "GET",
+        headers: {
+            'Content-type': 'application/json;charset=UTF-8',
+            'Authorization': `Basic ${btoa(`${user}:${appId}`)}`
+        }
+    })
+        .then(response => {
+            // export the vtt to the podlove publisher
+            if (response.status === 200) {
+                const podloveUrlTranscript = url + '/wp-json/podlove/v2/transcripts/' + episodeId.toString();
+                const podloveData = {
+                    type: "vtt",
+                    content: text
+                }
+                fetch(podloveUrlTranscript, {
+                    method: "POST",
+                    body: JSON.stringify(podloveData),
+                    headers: {
+                        'Content-type': 'application/json;charset=UTF-8',
+                        'Authorization': `Basic ${btoa(`${user}:${appId}`)}`
+                    }
+                })
+                    .then(response => response.json())
+                    .catch(err => console.error(err));
+            }
+        })
+        .catch(err => console.error(err))
+}
+
+export function isEpisodeExistAtPodlove(episodeId: Number, url: string) {
+    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) {
+                return true;
+            }
+            else {
+                return false;
+            }
+        })
+        .catch(err => {
+            console.error(err);
+            return false;
+        })
+}