Make Preview/Download Media export settings multi-select with 'Images…

…', 'Videos', and 'Audio' as options

src/components/attachment-mock.tsx

@@ -11,14 +11,15 @@ import { useExportSlice } from "../features/export/use-export-slice";
 import Attachment from "../classes/attachment";
 import MuiImg from "../common-components/mui-img/mui-img";
 import {
-  attachmentIsAudio,
-  attachmentIsImage,
-  attachmentIsVideo,
   entityContainsMedia,
-  stringToBool,
+  entityIsAudio,
+  entityIsImage,
+  entityIsVideo,
+  stringToTypedArray,
 } from "../utils";
 import { useAppSlice } from "../features/app/use-app-slice";
 import { ResolutionType } from "../enum/resolution-type";
+import { MediaType } from "../enum/media-type";
 
 type AttachmentMockProps = {
   attachment: Attachment;
@@ -79,12 +80,23 @@ const AttachmentMock = ({ attachment }: AttachmentMockProps) => {
   const settings = appState.settings();
   const { state: exportState } = useExportSlice();
   const mediaMap = exportState.mediaMap();
-  const previewImages = stringToBool(settings.exportPreviewMedia);
+  const previewMedia = stringToTypedArray<MediaType>(
+    settings.exportPreviewMedia_2
+  );
+  const isPreviewingImages = previewMedia.some((mt) => mt === MediaType.IMAGES);
+  const isPreviewingVideos = previewMedia.some((mt) => mt === MediaType.VIDEOS);
+  const isPreviewingAudio = previewMedia.some((mt) => mt === MediaType.AUDIO);
   const resMode = settings.exportImageResMode;
 
-  const isImg = attachmentIsImage(attachment);
-  const isVid = attachmentIsVideo(attachment);
-  const isAudio = attachmentIsAudio(attachment);
+  const isImg = entityIsImage(attachment);
+  const isVid = entityIsVideo(attachment);
+  const isAudio = entityIsAudio(attachment);
+
+  const shouldPreventPreview =
+    !entityContainsMedia(attachment) ||
+    (isImg && !isPreviewingImages) ||
+    (isVid && !isPreviewingVideos) ||
+    (isAudio && !isPreviewingAudio);
 
   const url = entityContainsMedia(attachment)
     ? mediaMap[attachment.proxy_url] || attachment.proxy_url
@@ -95,7 +107,7 @@ const AttachmentMock = ({ attachment }: AttachmentMockProps) => {
 
   return (
     <Stack direction="column" justifyContent="center" alignItems="flex-start">
-      {isImg && previewImages && url && (
+      {isImg && isPreviewingImages && url && (
         <a target="_blank" rel="noopener noreferrer" href={url}>
           <MuiImg
             props={{
@@ -112,7 +124,7 @@ const AttachmentMock = ({ attachment }: AttachmentMockProps) => {
           />
         </a>
       )}
-      {previewImages && isVid && (
+      {isPreviewingVideos && isVid && (
         <video
           style={{
             borderRadius: "10px",
@@ -132,12 +144,12 @@ const AttachmentMock = ({ attachment }: AttachmentMockProps) => {
           }
         />
       )}
-      {previewImages && isAudio && (
+      {isPreviewingAudio && isAudio && (
         <audio controls>
           <source src={url} />
         </audio>
       )}
-      {(!entityContainsMedia(attachment) || !previewImages) && (
+      {shouldPreventPreview && (
         <Stack
           sx={{
             backgroundColor: theme.palette.background.paper,

src/components/attachment-modal.tsx

@@ -19,7 +19,7 @@ import Attachment from "../classes/attachment";
 import { isMessage } from "../app/guards";
 import Tooltip from "../common-components/tooltip/tooltip";
 import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
-import { attachmentIsImage } from "../utils";
+import { entityIsImage } from "../utils";
 
 type AttachmentModalProps = {
   task: AppTask;
@@ -75,7 +75,7 @@ const AttachmentModal = ({
             variant="square"
             sx={{
               cursor: "pointer",
-              ...(attachmentIsImage(attachment)
+              ...(entityIsImage(attachment)
                 ? {
                     width: width < 100 ? width : 100,
                     height: height < 100 ? height : 100,

src/components/embed-mock.tsx

@@ -4,7 +4,8 @@ import Embed from "../classes/embed";
 import { useExportSlice } from "../features/export/use-export-slice";
 import { EmbedType } from "../enum/embed-type";
 import { useAppSlice } from "../features/app/use-app-slice";
-import { stringToBool } from "../utils";
+import { stringToTypedArray } from "../utils";
+import { MediaType } from "../enum/media-type";
 
 type EmbedMockProps = {
   embed: Embed;
@@ -17,7 +18,11 @@ const EmbedMock = ({ embed, index }: EmbedMockProps) => {
   const { state: appState } = useAppSlice();
   const settings = appState.settings();
   const { state: exportState } = useExportSlice();
-  const previewImages = stringToBool(settings.exportPreviewMedia);
+  const previewMedia = stringToTypedArray<MediaType>(
+    settings.exportPreviewMedia_2
+  );
+  const isPreviewingImages = previewMedia.some((mt) => mt === MediaType.IMAGES);
+  const isPreviewingVideos = previewMedia.some((mt) => mt === MediaType.VIDEOS);
   const mediaMap = exportState.mediaMap();
 
   const supportedVideoHosts = ["youtube"];
@@ -31,7 +36,7 @@ const EmbedMock = ({ embed, index }: EmbedMockProps) => {
 
   return (
     <>
-      {previewImages && type === "gifv" && video && (
+      {isPreviewingVideos && type === EmbedType.GIFV && video && (
         <video
           style={{
             borderRadius: "10px",
@@ -48,8 +53,8 @@ const EmbedMock = ({ embed, index }: EmbedMockProps) => {
           poster={embed.thumbnail?.proxy_url || "resources/media/discrub.png"}
         />
       )}
-      {previewImages &&
-        type === "video" &&
+      {isPreviewingVideos &&
+        type === EmbedType.VIDEO &&
         video &&
         supportedVideoHosts.some((host) =>
           video?.url?.toLowerCase()?.includes(host)
@@ -69,7 +74,7 @@ const EmbedMock = ({ embed, index }: EmbedMockProps) => {
             allowFullScreen
           ></iframe>
         )}
-      {previewImages && type === EmbedType.IMAGE && thumbnail && (
+      {isPreviewingImages && type === EmbedType.IMAGE && thumbnail && (
         <AttachmentMock
           attachment={
             new Attachment({

src/containers/discrub-dialog/components/config.tsx

@@ -16,9 +16,7 @@ import { SortDirection } from "../../../enum/sort-direction";
 import BrushIcon from "@mui/icons-material/Brush";
 import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";
 import DownloadIcon from "@mui/icons-material/Download";
-import FileDownloadOffIcon from "@mui/icons-material/FileDownloadOff";
 import ImageIcon from "@mui/icons-material/Image";
-import HideImageIcon from "@mui/icons-material/HideImage";
 import VerticalAlignBottomIcon from "@mui/icons-material/VerticalAlignBottom";
 import VerticalAlignTopIcon from "@mui/icons-material/VerticalAlignTop";
 import FolderIcon from "@mui/icons-material/Folder";
@@ -29,6 +27,8 @@ import AutoDeleteIcon from "@mui/icons-material/AutoDelete";
 import YoutubeSearchedForIcon from "@mui/icons-material/YoutubeSearchedFor";
 import { stringToBool } from "../../../utils";
 import { ResolutionType } from "../../../enum/resolution-type";
+import { MediaType } from "../../../enum/media-type";
+import MultiValueSelect from "../../../common-components/multi-value-select/multi-value-select";
 
 type ConfigProps = {
   settings: AppSettings;
@@ -131,34 +131,28 @@ function Config({
     {
       name: DiscrubSetting.EXPORT_DOWNLOAD_MEDIA,
       label: "Download Media",
+      multiselect: true,
       options: [
-        { value: "true", name: "Yes" },
-        { value: "false", name: "No" },
+        { value: MediaType.IMAGES, name: "Images" },
+        { value: MediaType.VIDEOS, name: "Videos" },
+        { value: MediaType.AUDIO, name: "Audio" },
       ],
       description:
         "Exports may be performed more slowly when downloading media.",
-      icon: () =>
-        stringToBool(settings.exportDownloadMedia) ? (
-          <DownloadIcon />
-        ) : (
-          <FileDownloadOffIcon />
-        ),
+      icon: () => <DownloadIcon />,
     },
     {
       name: DiscrubSetting.EXPORT_PREVIEW_MEDIA,
       label: "Preview Media (HTML)",
+      multiselect: true,
       options: [
-        { value: "true", name: "Yes" },
-        { value: "false", name: "No" },
+        { value: MediaType.IMAGES, name: "Images" },
+        { value: MediaType.VIDEOS, name: "Videos" },
+        { value: MediaType.AUDIO, name: "Audio" },
       ],
       description:
         "Previewing Media on a large number of messages can negatively affect the speed of the export.",
-      icon: () =>
-        stringToBool(settings.exportPreviewMedia) ? (
-          <ImageIcon />
-        ) : (
-          <HideImageIcon />
-        ),
+      icon: () => <ImageIcon />,
     },
     {
       name: DiscrubSetting.EXPORT_IMAGE_RES_MODE,
@@ -272,7 +266,7 @@ function Config({
                     InputProps={{ endAdornment: Icon }}
                   />
                 )}
-                {control.options?.length && (
+                {control.options?.length && !control.multiselect && (
                   <>
                     <InputLabel variant="filled">{control.label}</InputLabel>
                     <Select
@@ -299,6 +293,23 @@ function Config({
                     </Select>
                   </>
                 )}
+                {control.multiselect && (
+                  <MultiValueSelect
+                    label={control.label}
+                    onChange={(values) => {
+                      handleChange(control.name, values.join());
+                    }}
+                    value={
+                      getValue(control.name)
+                        ? getValue(control.name)?.split(",") || []
+                        : []
+                    }
+                    values={control.options.map((o) => o.value)}
+                    displayNameMap={control.options.reduce((acc, curr) => {
+                      return { ...acc, [curr.value]: curr.name };
+                    }, {})}
+                  />
+                )}
               </FormControl>
             </Tooltip>
           );

src/containers/export-button/export-button.tsx

@@ -13,7 +13,12 @@ import DefaultContent from "./components/default-content";
 import { useMessageSlice } from "../../features/message/use-message-slice";
 import BulkContent from "./components/bulk-content";
 import ExportMessages from "./components/export-messages";
-import { punctuateStringArr, stringToBool } from "../../utils";
+import {
+  punctuateStringArr,
+  stringToBool,
+  stringToTypedArray,
+} from "../../utils";
+import { MediaType } from "../../enum/media-type";
 
 type ExportButtonProps = {
   bulk?: boolean;
@@ -51,8 +56,23 @@ const ExportButton = ({
     settings.exportSeparateThreadAndForumPosts
   );
   const artistMode = stringToBool(settings.exportUseArtistMode);
-  const previewImages = stringToBool(settings.exportPreviewMedia);
-  const downloadImages = stringToBool(settings.exportDownloadMedia);
+  const previewMedia = stringToTypedArray<MediaType>(
+    settings.exportPreviewMedia_2
+  );
+  const isPreviewingImages = previewMedia.some((mt) => mt === MediaType.IMAGES);
+  const isPreviewingVideos = previewMedia.some((mt) => mt === MediaType.VIDEOS);
+  const isPreviewingAudio = previewMedia.some((mt) => mt === MediaType.AUDIO);
+
+  const downloadMedia = stringToTypedArray<MediaType>(
+    settings.exportDownloadMedia_2
+  );
+  const isDownloadingImages = downloadMedia.some(
+    (mt) => mt === MediaType.IMAGES
+  );
+  const isDownloadingVideos = downloadMedia.some(
+    (mt) => mt === MediaType.VIDEOS
+  );
+  const isDownloadingAudio = downloadMedia.some((mt) => mt === MediaType.AUDIO);
 
   const { state: channelState, setSelectedExportChannels } = useChannelSlice();
   const channels = channelState.channels();
@@ -178,8 +198,20 @@ const ExportButton = ({
         `${exportType.toUpperCase()} Format`,
       ];
 
-      if (previewImages && exportType === ExportType.HTML) {
-        exportAccessories.push("Media Previewed");
+      if (exportType === ExportType.HTML) {
+        const previewArr = [];
+        if (isPreviewingImages) {
+          previewArr.push("Images");
+        }
+        if (isPreviewingVideos) {
+          previewArr.push("Videos");
+        }
+        if (isPreviewingAudio) {
+          previewArr.push("Audio");
+        }
+        if (previewArr.length) {
+          exportAccessories.push(`${punctuateStringArr(previewArr)} Previewed`);
+        }
       }
 
       if (folderingThreads) {
@@ -192,9 +224,21 @@ const ExportButton = ({
       );
     }
 
-    if (downloadImages) {
+    if (downloadMedia.length) {
+      const downloadArr = [];
+      if (isDownloadingImages) {
+        downloadArr.push("Images");
+      }
+      if (isDownloadingVideos) {
+        downloadArr.push("Videos");
+      }
+      if (isDownloadingAudio) {
+        downloadArr.push("Audio");
+      }
       descriptionArr.push(
-        `Attached & Embedded Media${artistMode ? " (Artist Mode)" : ""}`
+        `Attached & Embedded ${punctuateStringArr(downloadArr)}${
+          artistMode ? " (Artist Mode)" : ""
+        }`
       );
     }
     if (!isDm) {

src/enum/discrub-setting.ts

@@ -8,8 +8,8 @@ export enum DiscrubSetting {
   EXPORT_SEPARATE_THREAD_AND_FORUM_POSTS = "exportSeparateThreadAndForumPosts",
   EXPORT_ARTIST_MODE = "exportUseArtistMode",
   EXPORT_MESSAGE_SORT_ORDER = "exportMessageSortOrder",
-  EXPORT_PREVIEW_MEDIA = "exportPreviewMedia",
-  EXPORT_DOWNLOAD_MEDIA = "exportDownloadMedia",
+  EXPORT_PREVIEW_MEDIA = "exportPreviewMedia_2",
+  EXPORT_DOWNLOAD_MEDIA = "exportDownloadMedia_2",
   EXPORT_MESSAGES_PER_PAGE = "exportMessagesPerPage",
   EXPORT_IMAGE_RES_MODE = "exportImageResMode",
 }

src/enum/media-type.ts

@@ -0,0 +1,5 @@
+export enum MediaType {
+  VIDEOS = "videos",
+  IMAGES = "images",
+  AUDIO = "audio",
+}

src/features/app/app-slice.ts

@@ -17,8 +17,8 @@ const defaultSettings: AppSettings = {
   [DiscrubSetting.EXPORT_SEPARATE_THREAD_AND_FORUM_POSTS]: "false",
   [DiscrubSetting.EXPORT_ARTIST_MODE]: "false",
   [DiscrubSetting.EXPORT_MESSAGE_SORT_ORDER]: SortDirection.DESCENDING,
-  [DiscrubSetting.EXPORT_PREVIEW_MEDIA]: "false",
-  [DiscrubSetting.EXPORT_DOWNLOAD_MEDIA]: "false",
+  [DiscrubSetting.EXPORT_PREVIEW_MEDIA]: "",
+  [DiscrubSetting.EXPORT_DOWNLOAD_MEDIA]: "",
   [DiscrubSetting.EXPORT_MESSAGES_PER_PAGE]: "1000",
   [DiscrubSetting.EXPORT_IMAGE_RES_MODE]: ResolutionType.HOVER_LIMITED,
 };