add option to choose the transcript format

packages/api/src/index.ts

@@ -189,10 +189,14 @@ const getApp = async () => {
 				res.status(404).send(`Transcript not found`);
 				return;
 			}
+
+			const transcriptS3Key =
+				parsedItem.data.transcriptKeys[exportRequest.data.transcriptFormat];
+			console.log(`transcriptS3Key: ${transcriptS3Key}`);
 			const transcriptText = await getObjectText(
 				s3Client,
 				config.app.transcriptionOutputBucket,
-				parsedItem.data.transcriptKeys.text,
+				transcriptS3Key,
 			);
 			if (isS3Failure(transcriptText)) {
 				if (transcriptText.failureReason === 'NoSuchKey') {

packages/client/src/app/layout.tsx

@@ -29,7 +29,7 @@ export default function RootLayout({
 					</div>
 				</header>
 				<main>
-					<div className="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
+					<div className="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8 px-4">
 						{children}
 					</div>
 				</main>

packages/client/src/components/ExportButton.tsx

@@ -1,5 +1,8 @@
 import React, { useContext, useState } from 'react';
-import { ExportResponse } from '@guardian/transcription-service-common';
+import {
+	ExportResponse,
+	TranscriptFormat,
+} from '@guardian/transcription-service-common';
 import { AuthContext } from '@/app/template';
 import Script from 'next/script';
 import { useSearchParams } from 'next/navigation';
@@ -10,13 +13,19 @@ import {
 } from '@heroicons/react/16/solid';
 import { RequestStatus } from '@/types';
 import { InfoMessage } from '@/components/InfoMessage';
+import { Dropdown } from 'flowbite-react';
 
 const ExportButton = () => {
 	const { token } = useContext(AuthContext);
 	const searchParams = useSearchParams();
 	const [docId, setDocId] = useState<string | undefined>();
 	const [loading, setLoading] = useState(false);
 	const [failureMessage, setFailureMessage] = useState<string>('');
+	const [transcriptFormat, setTranscriptFormat] =
+		useState<TranscriptFormat | null>(null);
+	const [transcriptFormatValid, setTranscriptFormatValid] = useState<
+		boolean | undefined
+	>(undefined);
 	const [requestStatus, setRequestStatus] = useState<RequestStatus>(
 		RequestStatus.Ready,
 	);
@@ -26,6 +35,13 @@ const ExportButton = () => {
 			<InfoMessage message={'not logged in'} status={RequestStatus.Failed} />
 		);
 	}
+
+	const transcriptFormatDescription: Record<TranscriptFormat, string> = {
+		srt: 'SRT format (Time Coded)',
+		text: 'TEXT format',
+		json: 'JSON format',
+	};
+
 	const transcriptId = searchParams.get('transcriptId');
 	if (!transcriptId) {
 		return (
@@ -69,9 +85,18 @@ const ExportButton = () => {
 	}
 
 	const exportHandler = async () => {
+		if (!transcriptFormat) {
+			console.log(`transcript format value is ${transcriptFormat}`);
+			setTranscriptFormatValid(false);
+			return;
+		}
 		setLoading(true);
 		try {
-			const response = await exportTranscript(token, transcriptId);
+			const response = await exportTranscript(
+				token,
+				transcriptId,
+				transcriptFormat,
+			);
 			setLoading(false);
 			if (response && response.status !== 200) {
 				const text = await response.text();
@@ -101,6 +126,42 @@ const ExportButton = () => {
 	return (
 		<>
 			<Script src="https://accounts.google.com/gsi/client" async></Script>
+			<div className="flex flex-col space-y-2 mb-8 ">
+				<Dropdown
+					color={transcriptFormatValid === false ? 'red' : 'gray'}
+					label={
+						transcriptFormat === null
+							? 'Choose transcript format'
+							: transcriptFormatDescription[transcriptFormat]
+					}
+				>
+					<Dropdown.Item
+						value={TranscriptFormat.TEXT}
+						onClick={() => {
+							setTranscriptFormat(TranscriptFormat.TEXT);
+							setTranscriptFormatValid(true);
+						}}
+					>
+						{transcriptFormatDescription[TranscriptFormat.TEXT]}
+					</Dropdown.Item>
+					<Dropdown.Divider />
+					<Dropdown.Item
+						value={TranscriptFormat.SRT}
+						onClick={() => {
+							setTranscriptFormat(TranscriptFormat.SRT);
+							setTranscriptFormatValid(true);
+						}}
+					>
+						{transcriptFormatDescription[TranscriptFormat.SRT]}
+					</Dropdown.Item>
+				</Dropdown>
+				{transcriptFormatValid === false ? (
+					<span className="font-light text-sm align-middle" color="red">
+						A transcript format must be chosen!
+					</span>
+				) : null}
+			</div>
+
 			<button
 				type="button"
 				className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"

packages/client/src/services/export.ts

@@ -1,6 +1,7 @@
 import {
 	ClientConfig,
 	TranscriptExportRequest,
+	TranscriptFormat,
 } from '@guardian/transcription-service-common';
 import { authFetch } from '@/helpers';
 
@@ -48,6 +49,7 @@ const promiseInitTokenClient = (
 export const exportTranscript = async (
 	authToken: string,
 	transcriptId: string,
+	transcriptFormat: TranscriptFormat,
 ): Promise<Response> => {
 	const config = await getClientConfig(authToken);
 
@@ -62,6 +64,7 @@ export const exportTranscript = async (
 		id: transcriptId,
 		// @ts-expect-error (return object from google isn't actually a TokenResponse, our zod type is more accurate)
 		oAuthTokenResponse: tokenResponse,
+		transcriptFormat,
 	};
 
 	const exportResponse = await authFetch('/api/export', authToken, {

packages/common/src/types.ts

@@ -116,9 +116,16 @@ export const ZTokenResponse = z.object({
 
 export type ZTokenResponse = z.infer<typeof ZTokenResponse>;
 
+export enum TranscriptFormat {
+	SRT = 'srt',
+	TEXT = 'text',
+	JSON = 'json',
+}
+
 export const TranscriptExportRequest = z.object({
 	id: z.string(),
 	oAuthTokenResponse: ZTokenResponse,
+	transcriptFormat: z.nativeEnum(TranscriptFormat),
 });
 
 export type TranscriptExportRequest = z.infer<typeof TranscriptExportRequest>;