Root: ui|v2.5|src|components|Dialogs: GenerateDialog.tsx

GenerateDialog.tsx

This TypeScript/React component (GenerateDialog.tsx) represents a dialog for generating metadata for selected scenes. It allows users to customize generation options and initiate the generation process.

Features:

• Modal Component: Utilizes a custom modal component (ModalComponent) for rendering the dialog.
• State Management: Uses React's useState hook to manage the dialog's state, including options for generating metadata.
• Configuration Context: Accesses configuration data using the ConfigurationContext context hook.
• Settings Context: Utilizes the SettingsContext to manage and apply settings related to metadata generation.
• Manual Help: Allows users to access a manual (Manual component) for help and guidance.
• Generation Functionality: Initiates the metadata generation process when the user confirms their selection.
• Toast Notifications: Displays toast notifications (Toast) to provide feedback on the generation process.

Example Usage:

import React, { useState, useEffect, useMemo } from "react";
import { Form, Button } from "react-bootstrap";
import { mutateMetadataGenerate } from "src/core/StashService";
import { ModalComponent } from "../Shared/Modal";
import { Icon } from "src/components/Shared/Icon";
import { useToast } from "src/hooks/Toast";
import * as GQL from "src/core/generated-graphql";
import { FormattedMessage, useIntl } from "react-intl";
import { ConfigurationContext } from "src/hooks/Config";
import { Manual } from "../Help/Manual";
import { withoutTypename } from "src/utils/data";
import { GenerateOptions } from "../Settings/Tasks/GenerateOptions";
import { SettingSection } from "../Settings/SettingSection";
import { faCogs, faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
import { SettingsContext } from "../Settings/context";

interface ISceneGenerateDialog {
  selectedIds?: string[];
  onClose: () => void;
  type: "scene"; // TODO - add image generate
}

export const GenerateDialog: React.FC<ISceneGenerateDialog> = ({
  selectedIds,
  onClose,
  type,
}) => {
  const { configuration } = React.useContext(ConfigurationContext);

  function getDefaultOptions(): GQL.GenerateMetadataInput {
    return {
      sprites: true,
      phashes: true,
      previews: true,
      markers: true,
      previewOptions: {
        previewSegments: 0,
        previewSegmentDuration: 0,
        previewPreset: GQL.PreviewPreset.Slow,
      },
    };
  }

  const [options, setOptions] = useState<GQL.GenerateMetadataInput>(
    getDefaultOptions()
  );
  const [configRead, setConfigRead] = useState(false);
  const [showManual, setShowManual] = useState(false);
  const [animation, setAnimation] = useState(true);

  const intl = useIntl();
  const Toast = useToast();

  useEffect(() => {
    // Effect to read configuration data
  }, [configuration, configRead]);

  const selectionStatus = useMemo(() => {
    // Memoized function to display selection status
  }, [selectedIds, intl]);

  async function onGenerate() {
    // Function to handle metadata generation
  }

  function onShowManual() {
    // Function to show manual help
  }

  if (showManual) {
    return (
      // Render Manual component
    );
  }

  return (
    // Render ModalComponent
  );
};

export default GenerateDialog;

Explanation:

This example demonstrates the GenerateDialog component, which provides a dialog for generating metadata for selected scenes. It allows users to configure generation options and initiate the generation process.