improve HLS disclaimer

src/assets/locales/en.json

@@ -232,7 +232,7 @@
         "downloadSubtitle": "Download current subtitle",
         "downloadPlaylist": "Download playlist",
         "downloadVideo": "Download video",
-        "hlsDisclaimer": "Downloads are taken directly from the provider. movie-web does not have control over how the downloads are provided. Please note that you are downloading an HLS playlist, this is intended for users familiar with advanced multimedia streaming.",
+        "hlsDisclaimer": "Downloads are taken directly from the provider. movie-web does not have control over how the downloads are provided.<br /><br />Please note that you are downloading an HLS playlist, it is <bold>not recommended to download if you are not familiar for advanced streaming formats</bold>. Try different sources for different formats.",
         "onAndroid": {
           "1": "To download on Android, click the download button then, on the new page, <bold>tap and hold</bold> on the video, then select <bold>save</bold>.",
           "shortTitle": "Download / Android",

src/components/player/atoms/settings/Downloads.tsx

@@ -27,6 +27,7 @@ function StyleTrans(props: { k: string }) {
       i18nKey={props.k}
       components={{
         bold: <Menu.Highlight />,
+        br: <br />,
         ios_share: (
           <Icon icon={Icons.IOS_SHARE} className="inline-block text-xl -mb-1" />
         ),
@@ -123,24 +124,6 @@ export function DownloadView({ id }: { id: string }) {
   );
 }
 
-export function CantDownloadView({ id }: { id: string }) {
-  const router = useOverlayRouter(id);
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <Menu.BackLink onClick={() => router.navigate("/")}>
-        {t("player.menus.downloads.title")}
-      </Menu.BackLink>
-      <Menu.Section>
-        <Menu.Paragraph>
-          <StyleTrans k="player.menus.downloads.hlsExplanation" />
-        </Menu.Paragraph>
-      </Menu.Section>
-    </>
-  );
-}
-
 function AndroidExplanationView({ id }: { id: string }) {
   const router = useOverlayRouter(id);
   const { t } = useTranslation();
@@ -202,11 +185,6 @@ export function DownloadRoutes({ id }: { id: string }) {
           <DownloadView id={id} />
         </Menu.CardWithScrollable>
       </OverlayPage>
-      <OverlayPage id={id} path="/download/unable" width={343} height={440}>
-        <Menu.CardWithScrollable>
-          <CantDownloadView id={id} />
-        </Menu.CardWithScrollable>
-      </OverlayPage>
       <OverlayPage id={id} path="/download/ios" width={343} height={440}>
         <Menu.CardWithScrollable>
           <IOSExplanationView id={id} />