If media urls missing http/https protocol then add https protocol.

packages/client/src/components/UploadForm.tsx

@@ -1,4 +1,4 @@
-import { authFetch } from '@/helpers';
+import { addHttpsProtocol, authFetch } from '@/helpers';
 import React, { useContext, useState } from 'react';
 import {
 	SignedUrlResponseBody,
@@ -134,7 +134,8 @@ const checkUrlValid = (url_input: string): MediaUrlInput => {
 		if (url_input === '') {
 			return { value: url_input, status: 'empty' };
 		}
-		const url = new URL(url_input);
+		const cleanedUrlInput = addHttpsProtocol(url_input);
+		const url = new URL(cleanedUrlInput);
 		// we don't want people providing search results pages as yt-dlp will try and fetch every video
 		if (
 			url.pathname.includes('results') &&
@@ -223,8 +224,9 @@ export const UploadForm = () => {
 			);
 			setMediaUrls(urlsWithStatus);
 			for (const url of urls) {
+				const urlWithProtocol = addHttpsProtocol(url);
 				const success = await submitMediaUrl(
-					url,
+					urlWithProtocol,
 					token,
 					mediaFileLanguageCode,
 					translationRequested,
@@ -300,8 +302,8 @@ export const UploadForm = () => {
 	return (
 		<>
 			<p className={' pb-3 font-light'}>
-				This tool can transcribe both audio and video. You will receive an
-				email when the transcription is ready.
+				This tool can transcribe both audio and video. You will receive an email
+				when the transcription is ready.
 			</p>
 			<form id="media-upload-form" onSubmit={handleSubmit}>
 				<div className={'mb-1'}>

packages/client/src/helpers.ts

@@ -8,3 +8,9 @@ export const authFetch = async (
 
 	return await fetch(request);
 };
+
+export const addHttpsProtocol = (url: string) => {
+	if (url.startsWith('http://') || url.startsWith('https://')) {
+		return url;
+	} else return `https://${url}`;
+};