adserver-dashboard 1.0.0

package/client/src/components/content-hub/bulk-transcode-dialog.tsx

@@ -0,0 +1,379 @@
+import { useState } from "react";
+import { useTranslation } from "@/lib/i18n";
+import { Button } from '@moving-walls/design-system';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@moving-walls/design-system';
+import { FormLabel } from '@moving-walls/design-system';
+import { Checkbox } from '@moving-walls/design-system';
+import { Badge } from '@moving-walls/design-system';
+import { Progress } from '@moving-walls/design-system';
+import { Wand2, Info, CheckCircle, XCircle, Loader2 } from "lucide-react";
+import {
+  TRANSCODE_PROFILES,
+  getSuggestedFormats,
+  getFormatLabel,
+  type TranscodeProfile,
+  type TranscodeFormat,
+} from "@/types/transcoding";
+import type { Creative } from "@/types/content-hub";
+import { Alert } from '@moving-walls/design-system';
+import { RadioGroup, RadioGroupItem } from '@moving-walls/design-system';
+import { ScrollArea } from '@moving-walls/design-system';
+
+const AlertDescription = ({ children }: any) => <div>{children}</div>;
+
+interface BulkTranscodeDialogProps {
+  creatives: Creative[];
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onTranscode: (
+    creativeIds: string[],
+    profiles: TranscodeProfile[],
+    formats?: TranscodeFormat[]
+  ) => Promise<void>;
+}
+
+interface TranscodeResult {
+  creativeId: string;
+  filename: string;
+  status: "pending" | "success" | "error";
+  error?: string;
+}
+
+export function BulkTranscodeDialog({
+  creatives,
+  open,
+  onOpenChange,
+  onTranscode,
+}: BulkTranscodeDialogProps) {
+  const { t } = useTranslation('contentHub');
+  const [selectedProfile, setSelectedProfile] = useState<TranscodeProfile>("medium");
+  const [selectedFormats, setSelectedFormats] = useState<TranscodeFormat[]>([]);
+  const [useAutoFormats, setUseAutoFormats] = useState(true);
+  const [isTranscoding, setIsTranscoding] = useState(false);
+  const [results, setResults] = useState<TranscodeResult[]>([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const mimeTypes = creatives.map((c) => c.mime_type);
+  const mostCommonMimeType = mimeTypes.sort(
+    (a, b) =>
+      mimeTypes.filter((v) => v === b).length -
+      mimeTypes.filter((v) => v === a).length
+  )[0] || "video/";
+
+  const suggestedFormats = getSuggestedFormats(mostCommonMimeType);
+
+  const allFormats = new Set<TranscodeFormat>();
+  creatives.forEach((creative) => {
+    const formats = getSuggestedFormats(creative.mime_type);
+    formats.forEach((f) => allFormats.add(f));
+  });
+  const availableFormats = Array.from(allFormats);
+
+  const handleFormatToggle = (format: TranscodeFormat) => {
+    setSelectedFormats((prev) =>
+      prev.includes(format)
+        ? prev.filter((f) => f !== format)
+        : [...prev, format]
+    );
+  };
+
+  const handleTranscode = async () => {
+    setIsTranscoding(true);
+    setResults([]);
+    setCurrentIndex(0);
+
+    const formats = useAutoFormats ? undefined : selectedFormats;
+    const initialResults: TranscodeResult[] = creatives.map((c) => ({
+      creativeId: c.id,
+      filename: c.filename,
+      status: "pending",
+    }));
+    setResults(initialResults);
+
+    for (let i = 0; i < creatives.length; i++) {
+      setCurrentIndex(i);
+      const creative = creatives[i];
+
+      try {
+        await onTranscode([creative.id], [selectedProfile], formats);
+
+        setResults((prev) =>
+          prev.map((r, idx) =>
+            idx === i ? { ...r, status: "success" } : r
+          )
+        );
+      } catch (error: any) {
+        setResults((prev) =>
+          prev.map((r, idx) =>
+            idx === i
+              ? { ...r, status: "error", error: error.message || t('common.failed') }
+              : r
+          )
+        );
+      }
+
+      if (i < creatives.length - 1) {
+        await new Promise((resolve) => setTimeout(resolve, 500));
+      }
+    }
+
+    setIsTranscoding(false);
+  };
+
+  const handleClose = () => {
+    if (!isTranscoding) {
+      onOpenChange(false);
+      setTimeout(() => {
+        setSelectedProfile("medium");
+        setSelectedFormats([]);
+        setUseAutoFormats(true);
+        setResults([]);
+        setCurrentIndex(0);
+      }, 300);
+    }
+  };
+
+  const estimatedJobs = useAutoFormats
+    ? suggestedFormats.length * creatives.length
+    : selectedFormats.length * creatives.length;
+
+  const successCount = results.filter((r) => r.status === "success").length;
+  const errorCount = results.filter((r) => r.status === "error").length;
+  const progress = results.length > 0 ? ((currentIndex + 1) / creatives.length) * 100 : 0;
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>{t('transcode.bulkTitle')}</DialogTitle>
+          <DialogDescription>
+            {creatives.length === 1 
+              ? t('transcode.configureSettingsCount', { count: creatives.length })
+              : t('transcode.configureSettingsCountPlural', { count: creatives.length })}
+          </DialogDescription>
+        </DialogHeader>
+
+        {!isTranscoding && results.length === 0 ? (
+          <div className="space-y-6 py-4">
+            <div className="space-y-2">
+              <FormLabel className="text-sm font-medium">{t('transcode.selectedCreatives')}</FormLabel>
+              <ScrollArea className="h-32 rounded-md border p-3">
+                <div className="space-y-1">
+                  {creatives.map((creative) => (
+                    <div
+                      key={creative.id}
+                      className="text-xs text-mw-gray-600 dark:text-mw-gray-400 flex items-center justify-between"
+                    >
+                      <span className="truncate flex-1">{creative.filename}</span>
+                      <Badge variant="outline" className="ml-2 text-xs">
+                        {creative.mime_type.split("/")[0]}
+                      </Badge>
+                    </div>
+                  ))}
+                </div>
+              </ScrollArea>
+            </div>
+
+            <div className="space-y-3">
+              <FormLabel className="text-sm font-medium">{t('transcode.qualityProfile')}</FormLabel>
+              <RadioGroup
+                name="transcodeProfile"
+                value={selectedProfile}
+                onValueChange={(value) =>
+                  setSelectedProfile(value as TranscodeProfile)
+                }
+              >
+                {TRANSCODE_PROFILES.map((profile) => (
+                  <div
+                    key={profile.value}
+                    className="flex items-start space-x-3 space-y-0"
+                  >
+                    <RadioGroupItem value={profile.value} id={`bulk-${profile.value}`} />
+                    <div className="space-y-1 leading-none flex-1">
+                      <FormLabel
+                        htmlFor={`bulk-${profile.value}`}
+                        className="text-sm font-medium cursor-pointer"
+                      >
+                        {profile.label}
+                        {profile.value === "medium" && (
+                          <Badge variant="secondary" className="ml-2 text-xs">
+                            {t('transcode.recommended')}
+                          </Badge>
+                        )}
+                      </FormLabel>
+                      <p className="text-xs text-mw-gray-600 dark:text-mw-gray-400">
+                        {profile.description}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </RadioGroup>
+            </div>
+
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <FormLabel className="text-sm font-medium">{t('transcode.outputFormats')}</FormLabel>
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="bulk-auto-formats"
+                    checked={useAutoFormats}
+                    onChange={(e) =>
+                      setUseAutoFormats(e.target.checked)
+                    }
+                  />
+                  <FormLabel
+                    htmlFor="bulk-auto-formats"
+                    className="text-xs font-normal cursor-pointer"
+                  >
+                    {t('transcode.autoDetect')}
+                  </FormLabel>
+                </div>
+              </div>
+
+              {useAutoFormats ? (
+                <Alert>
+                  <Info className="h-4 w-4" />
+                  <AlertDescription className="text-xs">
+                    {t('transcode.autoDetectBulkDescription')}
+                  </AlertDescription>
+                </Alert>
+              ) : (
+                <div className="space-y-2">
+                  {availableFormats.length > 0 ? (
+                    <div className="grid grid-cols-2 gap-2">
+                      {availableFormats.map((format) => (
+                        <div key={format} className="flex items-center space-x-2">
+                          <Checkbox
+                            id={`bulk-format-${format}`}
+                            checked={selectedFormats.includes(format)}
+                            onChange={() => handleFormatToggle(format)}
+                          />
+                          <FormLabel
+                            htmlFor={`bulk-format-${format}`}
+                            className="text-sm font-normal cursor-pointer"
+                          >
+                            {getFormatLabel(format)}
+                            {suggestedFormats.includes(format) && (
+                              <Badge variant="outline" className="ml-1 text-xs">
+                                {t('transcode.suggested')}
+                              </Badge>
+                            )}
+                          </FormLabel>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <p className="text-xs text-mw-gray-600 dark:text-mw-gray-400">
+                      {t('transcode.noCommonFormats')}
+                    </p>
+                  )}
+                </div>
+              )}
+            </div>
+
+            <div className="rounded-lg bg-muted p-3 text-xs">
+              <div className="flex items-center justify-between mb-1">
+                <span className="text-mw-gray-600 dark:text-mw-gray-400">{t('transcode.estimatedJobs')}</span>
+                <span className="font-medium">
+                  {estimatedJobs} {estimatedJobs === 1 ? t('transcode.job') : t('transcode.jobs')}
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-mw-gray-600 dark:text-mw-gray-400">{t('transcode.creatives')}</span>
+                <span className="font-medium">{creatives.length}</span>
+              </div>
+              <p className="mt-2 text-mw-gray-600 dark:text-mw-gray-400">
+                {t('transcode.jobsProcessedSequentially')}
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-mw-gray-600 dark:text-mw-gray-400">{t('transcode.progress')}</span>
+                <span className="font-medium">
+                  {currentIndex + 1} / {creatives.length}
+                </span>
+              </div>
+              <Progress value={progress} className="h-2" />
+            </div>
+
+            {results.length > 0 && (
+              <div className="flex items-center gap-4 text-sm">
+                <div className="flex items-center gap-1">
+                  <CheckCircle className="h-4 w-4 text-emerald-600" />
+                  <span>{successCount} {t('transcode.succeeded')}</span>
+                </div>
+                {errorCount > 0 && (
+                  <div className="flex items-center gap-1">
+                    <XCircle className="h-4 w-4 text-red-600" />
+                    <span>{errorCount} {t('upload.failed')}</span>
+                  </div>
+                )}
+              </div>
+            )}
+
+            <ScrollArea className="h-64 rounded-md border p-3">
+              <div className="space-y-2">
+                {results.map((result, idx) => (
+                  <div
+                    key={result.creativeId}
+                    className="flex items-start justify-between text-xs"
+                  >
+                    <span className="truncate flex-1">{result.filename}</span>
+                    <div className="ml-2">
+                      {result.status === "pending" && idx === currentIndex && (
+                        <Loader2 className="h-4 w-4 animate-spin text-mw-primary-500" />
+                      )}
+                      {result.status === "pending" && idx !== currentIndex && (
+                        <div className="h-4 w-4 rounded-full border-2 border-muted" />
+                      )}
+                      {result.status === "success" && (
+                        <CheckCircle className="h-4 w-4 text-emerald-600" />
+                      )}
+                      {result.status === "error" && (
+                        <XCircle
+                          className="h-4 w-4 text-red-600"
+                          title={result.error}
+                        />
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
+          </div>
+        )}
+
+        <DialogFooter>
+          {!isTranscoding && results.length === 0 ? (
+            <>
+              <Button variant="outline" onClick={handleClose}>
+                {t('transcode.cancel')}
+              </Button>
+              <Button
+                onClick={handleTranscode}
+                disabled={!useAutoFormats && selectedFormats.length === 0}
+              >
+                <Wand2 className="h-4 w-4 mr-2" />
+                {t('transcode.startBulkTranscoding')}
+              </Button>
+            </>
+          ) : (
+            <Button onClick={handleClose} disabled={isTranscoding}>
+              {isTranscoding ? t('transcode.processing') : t('transcode.close')}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}