@frkntmbs/strapi-plugin-video-optimizer 1.0.0

package/admin/src/components/OptimizationVideoFields.tsx

@@ -0,0 +1,217 @@
+import React, { useEffect } from 'react';
+import { Field, Grid, SingleSelect, SingleSelectOption, TextInput, Typography } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import {
+  codecForFormat,
+  getTranslationKey,
+  type AudioMode,
+  type FfmpegPreset,
+  type OptimizationSettings,
+  type VideoFormat,
+} from '../pluginId';
+import { OptimizationResizeFields } from './OptimizationResizeFields';
+
+interface OptimizationVideoFieldsProps {
+  value: Pick<
+    OptimizationSettings,
+    'defaultFormat' | 'videoCodec' | 'crf' | 'preset' | 'audioMode' | 'audioBitrate'
+  >;
+  onChange: (patch: Partial<OptimizationSettings>) => void;
+  disabled?: boolean;
+  namePrefix?: string;
+}
+
+const FORMATS: VideoFormat[] = ['mp4', 'webm'];
+const PRESETS: FfmpegPreset[] = [
+  'ultrafast',
+  'superfast',
+  'veryfast',
+  'faster',
+  'fast',
+  'medium',
+  'slow',
+  'slower',
+  'veryslow',
+];
+const AUDIO_MODES: AudioMode[] = ['keep', 'remove', 'compress'];
+
+export const OptimizationVideoFields = ({
+  value,
+  onChange,
+  disabled = false,
+  namePrefix = '',
+}: OptimizationVideoFieldsProps) => {
+  const { formatMessage } = useIntl();
+
+  const handleFormatChange = (format: VideoFormat) => {
+    onChange({
+      defaultFormat: format,
+      videoCodec: codecForFormat(format),
+    });
+  };
+
+  return (
+    <>
+      <Grid.Item col={6} xs={12} direction="column" alignItems="stretch">
+        <Field.Root name={`${namePrefix}defaultFormat`}>
+          <Field.Label>
+            {formatMessage({ id: getTranslationKey('settings.global.defaultFormat') })}
+          </Field.Label>
+          <SingleSelect
+            value={value.defaultFormat}
+            onChange={handleFormatChange}
+            disabled={disabled}
+          >
+            {FORMATS.map((format) => (
+              <SingleSelectOption key={format} value={format}>
+                {formatMessage({ id: getTranslationKey(`settings.format.${format}`) })}
+              </SingleSelectOption>
+            ))}
+          </SingleSelect>
+        </Field.Root>
+      </Grid.Item>
+
+      <Grid.Item col={6} xs={12} direction="column" alignItems="stretch">
+        <Field.Root name={`${namePrefix}crf`}>
+          <Field.Label>
+            {formatMessage({ id: getTranslationKey('settings.global.crf') })}
+          </Field.Label>
+          <TextInput
+            type="number"
+            min={0}
+            max={51}
+            value={value.crf}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              onChange({ crf: Number(e.target.value) })
+            }
+            disabled={disabled}
+          />
+          <Field.Hint>
+            {formatMessage({ id: getTranslationKey('settings.global.crfHint') })}
+          </Field.Hint>
+        </Field.Root>
+      </Grid.Item>
+
+      <Grid.Item col={6} xs={12} direction="column" alignItems="stretch">
+        <Field.Root name={`${namePrefix}preset`}>
+          <Field.Label>
+            {formatMessage({ id: getTranslationKey('settings.global.preset') })}
+          </Field.Label>
+          <SingleSelect
+            value={value.preset}
+            onChange={(preset: FfmpegPreset) => onChange({ preset })}
+            disabled={disabled}
+          >
+            {PRESETS.map((preset) => (
+              <SingleSelectOption key={preset} value={preset}>
+                {preset}
+              </SingleSelectOption>
+            ))}
+          </SingleSelect>
+        </Field.Root>
+      </Grid.Item>
+
+      <Grid.Item col={6} xs={12} direction="column" alignItems="stretch">
+        <Field.Root name={`${namePrefix}audioMode`}>
+          <Field.Label>
+            {formatMessage({ id: getTranslationKey('settings.global.audioMode') })}
+          </Field.Label>
+          <SingleSelect
+            value={value.audioMode}
+            onChange={(audioMode: AudioMode) => onChange({ audioMode })}
+            disabled={disabled}
+          >
+            {AUDIO_MODES.map((mode) => (
+              <SingleSelectOption key={mode} value={mode}>
+                {formatMessage({ id: getTranslationKey(`settings.audioMode.${mode}`) })}
+              </SingleSelectOption>
+            ))}
+          </SingleSelect>
+        </Field.Root>
+      </Grid.Item>
+
+      {value.audioMode === 'compress' && (
+        <Grid.Item col={6} xs={12} direction="column" alignItems="stretch">
+          <Field.Root name={`${namePrefix}audioBitrate`}>
+            <Field.Label>
+              {formatMessage({ id: getTranslationKey('settings.global.audioBitrate') })}
+            </Field.Label>
+            <TextInput
+              value={value.audioBitrate}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                onChange({ audioBitrate: e.target.value })
+              }
+              disabled={disabled}
+            />
+          </Field.Root>
+        </Grid.Item>
+      )}
+
+      <Grid.Item col={12} direction="column" alignItems="stretch">
+        <Typography variant="pi" textColor="neutral600">
+          {formatMessage({
+            id: getTranslationKey('settings.global.codecHint'),
+            defaultMessage: 'Codec is selected automatically based on the output format.',
+          })}{' '}
+          ({value.videoCodec.toUpperCase()})
+        </Typography>
+      </Grid.Item>
+    </>
+  );
+};
+
+interface OptimizationCustomFormProps {
+  value: OptimizationSettings;
+  onChange: (value: OptimizationSettings) => void;
+  sourceWidth?: number;
+  sourceHeight?: number;
+  disabled?: boolean;
+}
+
+export const OptimizationCustomForm = ({
+  value,
+  onChange,
+  sourceWidth,
+  sourceHeight,
+  disabled = false,
+}: OptimizationCustomFormProps) => {
+  const update = (patch: Partial<OptimizationSettings>) => {
+    onChange({ ...value, ...patch });
+  };
+
+  useEffect(() => {
+    if (!sourceWidth || !sourceHeight) {
+      return;
+    }
+
+    if (value.maxWidth > 0 && value.maxHeight > 0) {
+      return;
+    }
+
+    onChange({
+      ...value,
+      maxWidth: sourceWidth,
+      maxHeight: sourceHeight,
+    });
+  }, [sourceWidth, sourceHeight]);
+
+  return (
+    <Grid.Root gap={4}>
+      <OptimizationVideoFields
+        value={value}
+        onChange={update}
+        disabled={disabled}
+        namePrefix="custom"
+      />
+
+      <OptimizationResizeFields
+        value={value}
+        sourceWidth={sourceWidth}
+        sourceHeight={sourceHeight}
+        onChange={update}
+        disabled={disabled}
+        namePrefix="custom"
+      />
+    </Grid.Root>
+  );
+};

package/admin/src/components/UploadEnhancerBridge.tsx

@@ -0,0 +1,205 @@
+import React, { useEffect, useSyncExternalStore, type MouseEvent, type PointerEvent } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  Box,
+  Button,
+  Flex,
+  IconButton,
+  Typography,
+} from '@strapi/design-system';
+import { Cross, Sparkle } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { AssetOptimizationLabel } from './AssetOptimizationLabel';
+import { OptimizationChoicePicker } from './OptimizationChoicePicker';
+import { OptimizationCustomForm } from './OptimizationVideoFields';
+import { getTranslationKey } from '../pluginId';
+import {
+  closeAssetEditor,
+  createCustomForAsset,
+  getAssetPreference,
+  getDraftPreference,
+  getEditingAssetId,
+  getSourceDimensionsForAsset,
+  getUploadAssetCards,
+  getUploadDialogElement,
+  openAssetEditor,
+  resolveCustomSettingsForAsset,
+  saveAssetEditor,
+  setDraftChoice,
+  setDraftCustom,
+  subscribeUploadAssets,
+} from '../utils/uploadAssetStore';
+
+const stopEventPropagation = (event: MouseEvent | PointerEvent) => {
+  event.stopPropagation();
+};
+
+export const UploadEnhancerBridge = () => {
+  const { formatMessage } = useIntl();
+  const cards = useSyncExternalStore(subscribeUploadAssets, getUploadAssetCards);
+  const editingAssetId = useSyncExternalStore(subscribeUploadAssets, getEditingAssetId);
+  const draftPreference = useSyncExternalStore(subscribeUploadAssets, getDraftPreference);
+  const dialogElement = useSyncExternalStore(subscribeUploadAssets, getUploadDialogElement);
+
+  const editingCard = cards.find((card) => card.assetId === editingAssetId);
+  const sourceDimensions = editingAssetId ? getSourceDimensionsForAsset(editingAssetId) : undefined;
+  const resolvedCustom =
+    editingAssetId && draftPreference.choice === 'custom'
+      ? resolveCustomSettingsForAsset(editingAssetId, draftPreference.custom)
+      : draftPreference.custom;
+
+  useEffect(() => {
+    if (!dialogElement || !editingAssetId) {
+      return;
+    }
+
+    const previousOverflow = dialogElement.style.overflow;
+    dialogElement.style.overflow = 'visible';
+
+    return () => {
+      dialogElement.style.overflow = previousOverflow;
+    };
+  }, [dialogElement, editingAssetId]);
+
+  const editorPanel =
+    editingAssetId && dialogElement ? (
+      <Box
+        position="fixed"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        style={{ zIndex: 10, pointerEvents: 'auto' }}
+        onPointerDown={stopEventPropagation}
+        onMouseDown={stopEventPropagation}
+        onClick={stopEventPropagation}
+      >
+        <Box
+          position="absolute"
+          top={0}
+          left={0}
+          right={0}
+          bottom={0}
+          background="neutral800"
+          style={{ opacity: 0.2 }}
+          onClick={closeAssetEditor}
+        />
+
+        <Flex
+          direction="column"
+          alignItems="stretch"
+          background="neutral0"
+          hasRadius
+          shadow="popupShadow"
+          style={{
+            position: 'fixed',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: 'min(520px, calc(100% - 32px))',
+            maxHeight: 'min(90vh, 640px)',
+            overflow: 'hidden',
+            zIndex: 11,
+          }}
+        >
+          <Flex
+            tag="header"
+            padding={4}
+            paddingLeft={5}
+            paddingRight={5}
+            background="neutral100"
+            justifyContent="space-between"
+            alignItems="center"
+            borderColor="neutral150"
+            borderWidth="0 0 1px"
+            borderStyle="solid"
+          >
+            <Typography variant="omega" fontWeight="bold" textColor="neutral800">
+              {formatMessage({ id: getTranslationKey('upload.modal.title') })}
+            </Typography>
+            <IconButton
+              label={formatMessage({ id: getTranslationKey('upload.modal.cancel') })}
+              onClick={closeAssetEditor}
+            >
+              <Cross />
+            </IconButton>
+          </Flex>
+
+          <Box padding={7} style={{ overflow: 'auto' }}>
+            <Flex direction="column" alignItems="stretch" gap={5}>
+              {editingCard?.assetName && (
+                <Typography variant="pi" textColor="neutral600">
+                  {editingCard.assetName}
+                </Typography>
+              )}
+              <OptimizationChoicePicker
+                value={draftPreference.choice}
+                onChange={setDraftChoice}
+              />
+              {draftPreference.choice === 'custom' && (
+                <Box background="neutral100" padding={5} hasRadius>
+                  <OptimizationCustomForm
+                    value={resolvedCustom ?? createCustomForAsset(editingAssetId)}
+                    onChange={setDraftCustom}
+                    sourceWidth={editingCard?.width ?? sourceDimensions?.width}
+                    sourceHeight={editingCard?.height ?? sourceDimensions?.height}
+                  />
+                </Box>
+              )}
+            </Flex>
+          </Box>
+
+          <Flex
+            tag="footer"
+            gap={2}
+            justifyContent="flex-end"
+            padding={4}
+            paddingLeft={5}
+            paddingRight={5}
+            background="neutral100"
+            borderColor="neutral150"
+            borderWidth="1px 0 0"
+            borderStyle="solid"
+          >
+            <Button onClick={closeAssetEditor} variant="tertiary">
+              {formatMessage({ id: getTranslationKey('upload.modal.cancel') })}
+            </Button>
+            <Button onClick={saveAssetEditor}>
+              {formatMessage({ id: getTranslationKey('upload.modal.save') })}
+            </Button>
+          </Flex>
+        </Flex>
+      </Box>
+    ) : null;
+
+  return (
+    <>
+      {cards.map((card) => (
+        <React.Fragment key={card.assetId}>
+          {createPortal(
+            <IconButton
+              label={formatMessage({ id: getTranslationKey('upload.button.label') })}
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                openAssetEditor(card.assetId);
+              }}
+            >
+              <Sparkle />
+            </IconButton>,
+            card.actionsContainer
+          )}
+
+          {card.footerHost
+            ? createPortal(
+                <AssetOptimizationLabel preference={getAssetPreference(card.assetId)} />,
+                card.footerHost
+              )
+            : null}
+        </React.Fragment>
+      ))}
+
+      {editorPanel ? createPortal(editorPanel, dialogElement) : null}
+    </>
+  );
+};

package/admin/src/components/upload/PendingAssetStep.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Box, Flex, Typography } from '@strapi/design-system';
+import { Sparkle } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { AssetOptimizationLabel } from '../AssetOptimizationLabel';
+import { OptimizationChoicePicker } from '../OptimizationChoicePicker';
+import { OptimizationCustomForm } from '../OptimizationVideoFields';
+import {
+  createCustomForAsset,
+  getAssetPreference,
+  getSourceDimensionsForAsset,
+  resolveCustomSettingsForAsset,
+  type UploadAssetEntry,
+} from '../../utils/uploadAssetStore';
+import { getTranslationKey, type AssetOptimizationPreference } from '../../pluginId';
+
+interface PendingAssetStepProps {
+  asset: UploadAssetEntry;
+  preference: AssetOptimizationPreference;
+  onPreferenceChange: (preference: AssetOptimizationPreference) => void;
+}
+
+export const PendingAssetStep = ({
+  asset,
+  preference,
+  onPreferenceChange,
+}: PendingAssetStepProps) => {
+  const { formatMessage } = useIntl();
+
+  const sourceDimensions = getSourceDimensionsForAsset(asset.assetId);
+  const resolvedCustom = resolveCustomSettingsForAsset(asset.assetId, preference.custom);
+
+  const handleChoiceChange = (choice: AssetOptimizationPreference['choice']) => {
+    onPreferenceChange({
+      choice,
+      custom:
+        choice === 'custom'
+          ? resolveCustomSettingsForAsset(asset.assetId, preference.custom)
+          : undefined,
+    });
+  };
+
+  return (
+    <Box padding={4} background="neutral100" hasRadius>
+      <Flex direction="column" gap={4} alignItems="stretch">
+        <Flex alignItems="center" gap={2}>
+          <Sparkle />
+          <Typography variant="omega" fontWeight="bold">
+            {formatMessage({ id: getTranslationKey('upload.modal.title') })}
+          </Typography>
+        </Flex>
+
+        <Typography variant="pi" textColor="neutral600">
+          {asset.assetName}
+        </Typography>
+
+        <OptimizationChoicePicker value={preference.choice} onChange={handleChoiceChange} />
+
+        {preference.choice === 'custom' && (
+          <OptimizationCustomForm
+            value={resolvedCustom}
+            onChange={(custom) => onPreferenceChange({ choice: 'custom', custom })}
+            sourceWidth={asset.width ?? sourceDimensions?.width}
+            sourceHeight={asset.height ?? sourceDimensions?.height}
+          />
+        )}
+
+        <AssetOptimizationLabel preference={getAssetPreference(asset.assetId)} />
+      </Flex>
+    </Box>
+  );
+};
+
+export const createPendingPreference = (assetId: string): AssetOptimizationPreference => ({
+  choice: 'original',
+  custom: createCustomForAsset(assetId),
+});
+
+export const mergePendingPreference = (
+  assetId: string,
+  preference?: AssetOptimizationPreference
+): AssetOptimizationPreference => {
+  if (!preference) {
+    return { choice: 'original' };
+  }
+
+  if (preference.choice === 'custom') {
+    return {
+      choice: 'custom',
+      custom: preference.custom ?? createCustomForAsset(assetId),
+    };
+  }
+
+  return {
+    choice: preference.choice,
+  };
+};

package/admin/src/defaultGlobalSettings.ts

@@ -0,0 +1,32 @@
+import {
+  clampMaxConcurrentJobs,
+  clampMaxFfmpegThreads,
+  type GlobalOptimizationSettings,
+} from './pluginId';
+
+export const DEFAULT_GLOBAL_SETTINGS: GlobalOptimizationSettings = {
+  defaultChoice: 'original',
+  defaultFormat: 'mp4',
+  videoCodec: 'h264',
+  crf: 23,
+  preset: 'medium',
+  maxWidth: 1920,
+  maxHeight: 1080,
+  audioMode: 'compress',
+  audioBitrate: '128k',
+  maxConcurrentJobs: 1,
+  maxFfmpegThreads: 2,
+};
+
+export const mergeGlobalSettings = (
+  partial?: Partial<GlobalOptimizationSettings> | null
+): GlobalOptimizationSettings => ({
+  ...DEFAULT_GLOBAL_SETTINGS,
+  ...partial,
+  maxConcurrentJobs: clampMaxConcurrentJobs(
+    partial?.maxConcurrentJobs ?? DEFAULT_GLOBAL_SETTINGS.maxConcurrentJobs
+  ),
+  maxFfmpegThreads: clampMaxFfmpegThreads(
+    partial?.maxFfmpegThreads ?? DEFAULT_GLOBAL_SETTINGS.maxFfmpegThreads
+  ),
+});

package/admin/src/hooks/useDefaultOptimizationMode.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import { useFetchClient } from '@strapi/strapi/admin';
+import { PLUGIN_ID, type GlobalOptimizationSettings } from '../pluginId';
+
+export const useDefaultOptimizationMode = () => {
+  const { get } = useFetchClient();
+  const [settings, setSettings] = useState<GlobalOptimizationSettings | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const { data } = await get(`/${PLUGIN_ID}/default-mode`);
+        setSettings(data);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    void load();
+  }, [get]);
+
+  return { settings, isLoading };
+};

package/admin/src/hooks/useUploadWithOptimizer.ts

@@ -0,0 +1,45 @@
+import { useMutation } from '@tanstack/react-query';
+import { useFetchClient } from '@strapi/strapi/admin';
+import type { AssetOptimizationPreference } from '../pluginId';
+
+interface UploadFilePayload {
+  file: File;
+  fileInfo?: Record<string, unknown>;
+  preference?: AssetOptimizationPreference;
+}
+
+export const useUploadWithOptimizer = () => {
+  const { post } = useFetchClient();
+
+  return useMutation({
+    mutationFn: async ({ file, fileInfo = {}, preference }: UploadFilePayload) => {
+      const formData = new FormData();
+      formData.append('files', file);
+
+      const payload = {
+        ...fileInfo,
+        optimizationChoice: preference?.choice ?? 'original',
+        ...(preference?.choice === 'custom' && preference.custom
+          ? { optimizationCustom: preference.custom }
+          : {}),
+      };
+
+      formData.append('fileInfo', JSON.stringify(payload));
+
+      if (preference) {
+        formData.append(
+          'videoOptimizerPreferences',
+          JSON.stringify([
+            {
+              fileName: file.name,
+              preference,
+            },
+          ])
+        );
+      }
+
+      const { data } = await post('/upload', formData);
+      return data;
+    },
+  });
+};