prevent downloading playlist with format selection

frontend/pnpm-lock.yaml

@@ -59,7 +59,7 @@ importers:
         version: 18.3.3
       '@types/react-dom':
         specifier: ^18.2.18
-        version: 18.2.18
+        version: 18.3.1
       '@types/react-helmet':
         specifier: ^6.1.11
         version: 6.1.11
@@ -689,8 +689,8 @@ packages:
   '@types/prop-types@15.7.11':
     resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
 
-  '@types/react-dom@18.2.18':
-    resolution: {integrity: sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==}
+  '@types/react-dom@18.3.1':
+    resolution: {integrity: sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==}
 
   '@types/react-helmet@6.1.11':
     resolution: {integrity: sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==}
@@ -1711,7 +1711,7 @@ snapshots:
 
   '@types/prop-types@15.7.11': {}
 
-  '@types/react-dom@18.2.18':
+  '@types/react-dom@18.3.1':
     dependencies:
       '@types/react': 18.3.3
 

frontend/src/components/DownloadDialog.tsx

@@ -40,6 +40,8 @@ import { useRPC } from '../hooks/useRPC'
 import type { DLMetadata } from '../types'
 import { toFormatArgs } from '../utils'
 import ExtraDownloadOptions from './ExtraDownloadOptions'
+import { useToast } from '../hooks/toast'
+import LoadingBackdrop from './LoadingBackdrop'
 
 const Transition = forwardRef(function Transition(
   props: TransitionProps & {
@@ -67,6 +69,7 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
   const [pickedVideoFormat, setPickedVideoFormat] = useState('')
   const [pickedAudioFormat, setPickedAudioFormat] = useState('')
   const [pickedBestFormat, setPickedBestFormat] = useState('')
+  const [isFormatsLoading, setIsFormatsLoading] = useState(false)
 
   const [customArgs, setCustomArgs] = useRecoilState(customArgsState)
 
@@ -82,6 +85,7 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
 
   const { i18n } = useI18n()
   const { client } = useRPC()
+  const { pushMessage } = useToast()
 
   const urlInputRef = useRef<HTMLInputElement>(null)
   const customFilenameInputRef = useRef<HTMLInputElement>(null)
@@ -129,11 +133,28 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
     setPickedVideoFormat('')
     setPickedBestFormat('')
 
+
+    if (isPlaylist) {
+      pushMessage('Format selection on playlist is not supported', 'warning')
+      resetInput()
+      onClose()
+      return
+    }
+
+    setIsFormatsLoading(true)
+
     client.formats(url)
       ?.then(formats => {
+        if (formats.result._type === 'playlist') {
+          pushMessage('Format selection on playlist is not supported. Downloading as playlist.', 'info')
+          resetInput()
+          onClose()
+          return
+        }
         setDownloadFormats(formats.result)
         resetInput()
       })
+      .then(() => setIsFormatsLoading(false))
   }
 
   const handleUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -175,10 +196,7 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
       onClose={onClose}
       TransitionComponent={Transition}
     >
-      <Backdrop
-        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-        open={isPending}
-      />
+      <LoadingBackdrop isLoading={isPending || isFormatsLoading} />
       <AppBar sx={{ position: 'relative' }}>
         <Toolbar>
           <IconButton

frontend/src/types/index.ts

@@ -69,9 +69,11 @@ export type RPCParams = {
 
 export type DLMetadata = {
   formats: Array<DLFormat>
+  _type: string
   best: DLFormat
   thumbnail: string
   title: string
+  entries: Array<DLMetadata>
 }
 
 export type DLFormat = {