@frkntmbs/strapi-plugin-video-optimizer 1.0.0

package/admin/src/components/MediaLibraryCardActionsBridge.tsx

@@ -0,0 +1,249 @@
+import React, { 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, Stop } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { OptimizationChoicePicker } from './OptimizationChoicePicker';
+import { OptimizationCustomForm } from './OptimizationVideoFields';
+import { getTranslationKey } from '../pluginId';
+import {
+  getActiveJobFileIds,
+  subscribeJobProgress,
+} from '../utils/jobProgressStore';
+import {
+  cancelMediaLibraryJob,
+  closeMediaLibraryEditor,
+  createCustomForMediaLibraryFile,
+  getEditingMediaLibraryDimensions,
+  getEditingMediaLibraryFileId,
+  getEditingMediaLibraryFileName,
+  getMediaLibraryCards,
+  getMediaLibraryDraftPreference,
+  getMediaLibraryStoreRevision,
+  isMediaLibraryCancelInFlight,
+  isMediaLibraryEnqueueInFlight,
+  openMediaLibraryEditor,
+  saveMediaLibraryEditor,
+  setMediaLibraryDraftChoice,
+  setMediaLibraryDraftCustom,
+  subscribeMediaLibraryCards,
+} from '../utils/mediaLibraryCardStore';
+
+const stopEventPropagation = (event: MouseEvent | PointerEvent) => {
+  event.stopPropagation();
+};
+
+export const MediaLibraryCardActionsBridge = () => {
+  const { formatMessage } = useIntl();
+  const cards = useSyncExternalStore(subscribeMediaLibraryCards, getMediaLibraryCards);
+  const activeJobFileIds = useSyncExternalStore(subscribeJobProgress, getActiveJobFileIds);
+  const editingFileId = useSyncExternalStore(subscribeMediaLibraryCards, getEditingMediaLibraryFileId);
+  const editingFileName = useSyncExternalStore(subscribeMediaLibraryCards, getEditingMediaLibraryFileName);
+  const editingDimensions = useSyncExternalStore(
+    subscribeMediaLibraryCards,
+    getEditingMediaLibraryDimensions
+  );
+  const draftPreference = useSyncExternalStore(
+    subscribeMediaLibraryCards,
+    getMediaLibraryDraftPreference
+  );
+  const enqueueInFlight = useSyncExternalStore(
+    subscribeMediaLibraryCards,
+    isMediaLibraryEnqueueInFlight
+  );
+  useSyncExternalStore(subscribeMediaLibraryCards, getMediaLibraryStoreRevision);
+
+  const activeJobIdSet = React.useMemo(
+    () => new Set(activeJobFileIds),
+    [activeJobFileIds]
+  );
+
+  const canEnqueue = draftPreference.choice !== 'original';
+
+  const resolvedCustom =
+    draftPreference.choice === 'custom'
+      ? draftPreference.custom ?? createCustomForMediaLibraryFile()
+      : undefined;
+
+  const editorPanel =
+    editingFileId !== null ? (
+      <Box
+        position="fixed"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        style={{ zIndex: 100, 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={closeMediaLibraryEditor}
+        />
+
+        <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: 101,
+          }}
+        >
+          <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('mediaLibrary.modal.title') })}
+            </Typography>
+            <IconButton
+              label={formatMessage({ id: getTranslationKey('upload.modal.cancel') })}
+              onClick={closeMediaLibraryEditor}
+            >
+              <Cross />
+            </IconButton>
+          </Flex>
+
+          <Box padding={7} style={{ overflow: 'auto' }}>
+            <Flex direction="column" alignItems="stretch" gap={5}>
+              {editingFileName && (
+                <Typography variant="pi" textColor="neutral600">
+                  {editingFileName}
+                </Typography>
+              )}
+              <OptimizationChoicePicker
+                value={draftPreference.choice}
+                onChange={setMediaLibraryDraftChoice}
+              />
+              {draftPreference.choice === 'custom' && (
+                <Box background="neutral100" padding={5} hasRadius>
+                  <OptimizationCustomForm
+                    value={resolvedCustom ?? createCustomForMediaLibraryFile()}
+                    onChange={setMediaLibraryDraftCustom}
+                    sourceWidth={editingDimensions?.width}
+                    sourceHeight={editingDimensions?.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={closeMediaLibraryEditor} variant="tertiary">
+              {formatMessage({ id: getTranslationKey('upload.modal.cancel') })}
+            </Button>
+            <Button
+              onClick={() => {
+                void saveMediaLibraryEditor();
+              }}
+              disabled={!canEnqueue || enqueueInFlight}
+              loading={enqueueInFlight}
+            >
+              {formatMessage({ id: getTranslationKey('mediaLibrary.modal.start') })}
+            </Button>
+          </Flex>
+        </Flex>
+      </Box>
+    ) : null;
+
+  return (
+    <>
+      {cards.map((card) => {
+        const hasActiveJob = activeJobIdSet.has(card.fileId);
+        const cancelInFlight = isMediaLibraryCancelInFlight(card.fileId);
+
+        if (!card.optimizeHost.isConnected || !card.cancelHost.isConnected) {
+          return null;
+        }
+
+        return (
+          <React.Fragment key={card.fileId}>
+            {!hasActiveJob
+              ? createPortal(
+                  <IconButton
+                    label={formatMessage({
+                      id: getTranslationKey('mediaLibrary.button.optimize'),
+                    })}
+                    onClick={(event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      openMediaLibraryEditor(card.fileId, card.fileName, {
+                        width: card.width,
+                        height: card.height,
+                      });
+                    }}
+                  >
+                    <Sparkle />
+                  </IconButton>,
+                  card.optimizeHost
+                )
+              : null}
+
+            {hasActiveJob
+              ? createPortal(
+                  <IconButton
+                    label={formatMessage({
+                      id: getTranslationKey('mediaLibrary.button.cancel'),
+                    })}
+                    onClick={(event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      void cancelMediaLibraryJob(card.fileId);
+                    }}
+                    disabled={cancelInFlight}
+                  >
+                    <Stop />
+                  </IconButton>,
+                  card.cancelHost
+                )
+              : null}
+          </React.Fragment>
+        );
+      })}
+
+      {editorPanel ? createPortal(editorPanel, document.body) : null}
+    </>
+  );
+};

package/admin/src/components/MediaLibraryJobWatcher.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { adminApi, useFetchClient, useNotification } from '@strapi/strapi/admin';
+import { useIntl } from 'react-intl';
+import { getTranslationKey, type VideoOptimizerJob } from '../pluginId';
+import { isMediaLibraryPath } from '../utils/mediaLibraryRoute';
+import { syncMediaLibraryProgress } from '../utils/initMediaLibraryProgress';
+import { setWatchedJobs } from '../utils/jobProgressStore';
+
+const POLL_INTERVAL_MS = 3000;
+
+const invalidateMediaLibrary = (dispatch: ReturnType<typeof useDispatch>, fileId?: number) => {
+  dispatch(
+    adminApi.util.invalidateTags([
+      { type: 'Asset', id: 'LIST' },
+      ...(fileId ? [{ type: 'Asset' as const, id: fileId }] : []),
+      { type: 'Folder', id: 'LIST' },
+    ])
+  );
+};
+
+export const MediaLibraryJobWatcher = () => {
+  const { formatMessage } = useIntl();
+  const { get } = useFetchClient();
+  const { toggleNotification } = useNotification();
+  const dispatch = useDispatch();
+  const location = useLocation();
+  const trackedJobs = useRef(new Map<string, VideoOptimizerJob>());
+  const notifiedCompletedJobs = useRef(new Set<string>());
+  const hadActiveJobs = useRef(false);
+  const pollInFlight = useRef(false);
+
+  const isMediaLibrary = isMediaLibraryPath(location.pathname);
+
+  useEffect(() => {
+    if (!isMediaLibrary) {
+      setWatchedJobs([]);
+      hadActiveJobs.current = false;
+      return;
+    }
+
+    let cancelled = false;
+
+    const poll = async () => {
+      if (pollInFlight.current) {
+        return;
+      }
+
+      pollInFlight.current = true;
+
+      try {
+        const { data } = await get<{ jobs?: VideoOptimizerJob[] }>('/video-optimizer/jobs/active');
+        const jobs = data?.jobs ?? [];
+
+        if (cancelled) {
+          return;
+        }
+
+        setWatchedJobs(jobs);
+        syncMediaLibraryProgress();
+
+        if (jobs.length > 0) {
+          hadActiveJobs.current = true;
+        } else if (hadActiveJobs.current) {
+          invalidateMediaLibrary(dispatch);
+          hadActiveJobs.current = false;
+        }
+
+        const activeIds = new Set(jobs.map((job) => job.id));
+
+        for (const [jobId, previous] of trackedJobs.current.entries()) {
+          if (activeIds.has(jobId)) {
+            continue;
+          }
+
+          if (previous.status !== 'queued' && previous.status !== 'processing') {
+            trackedJobs.current.delete(jobId);
+            continue;
+          }
+
+          const { data: finishedJob } = await get<VideoOptimizerJob>(`/video-optimizer/jobs/${jobId}`);
+
+          if (cancelled || !finishedJob) {
+            continue;
+          }
+
+          if (finishedJob.status === 'completed' && !notifiedCompletedJobs.current.has(jobId)) {
+            notifiedCompletedJobs.current.add(jobId);
+            invalidateMediaLibrary(dispatch, finishedJob.fileId);
+
+            toggleNotification({
+              type: 'success',
+              message: formatMessage(
+                { id: getTranslationKey('jobs.notification.completed') },
+                { fileId: finishedJob.fileId, progress: finishedJob.progress }
+              ),
+            });
+          } else if (finishedJob.status === 'failed' && !notifiedCompletedJobs.current.has(jobId)) {
+            notifiedCompletedJobs.current.add(jobId);
+            toggleNotification({
+              type: 'danger',
+              message: formatMessage(
+                { id: getTranslationKey('jobs.notification.failed') },
+                { error: finishedJob.error ?? 'Unknown error' }
+              ),
+            });
+          }
+
+          trackedJobs.current.delete(jobId);
+        }
+
+        for (const job of jobs) {
+          trackedJobs.current.set(job.id, job);
+        }
+      } catch {
+        // Ignore polling errors.
+      } finally {
+        pollInFlight.current = false;
+      }
+    };
+
+    void poll();
+    const timer = window.setInterval(() => {
+      void poll();
+    }, POLL_INTERVAL_MS);
+
+    return () => {
+      cancelled = true;
+      window.clearInterval(timer);
+      setWatchedJobs([]);
+    };
+  }, [dispatch, formatMessage, get, isMediaLibrary, toggleNotification]);
+
+  return null;
+};

package/admin/src/components/MediaLibraryProgressBridge.tsx

@@ -0,0 +1,97 @@
+import React, { useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+import { Box, Flex, Loader, ProgressBar, Typography } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { getTranslationKey, type VideoOptimizerJob } from '../pluginId';
+import { getProgressEntries, subscribeJobProgress } from '../utils/jobProgressStore';
+
+const ProgressSection = styled(Box)`
+  width: 100%;
+  margin-top: ${({ theme }) => theme.spaces[3]};
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
+  background: transparent;
+`;
+
+const ProgressHeader = styled(Flex)`
+  padding-top: ${({ theme }) => theme.spaces[3]};
+  padding-bottom: ${({ theme }) => theme.spaces[2]};
+`;
+
+const StyledProgressBar = styled(ProgressBar)`
+  width: 100%;
+
+  & > div {
+    background-color: ${({ theme }) => theme.colors.primary600};
+  }
+`;
+
+const QueuedLoader = styled(Loader)`
+  width: 20px;
+  height: 20px;
+  margin-top: -5px;
+  margin-bottom: -5px;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
+
+const JobProgressBadge = ({ job }: { job: VideoOptimizerJob }) => {
+  const { formatMessage } = useIntl();
+
+  const isQueued = job.status === 'queued';
+
+  const stageLabel =
+    !isQueued && job.stage && job.status === 'processing'
+      ? formatMessage({
+          id: getTranslationKey(`jobs.stage.${job.stage}`),
+          defaultMessage: job.stage,
+        })
+      : null;
+
+  const formatLabel = job.settings?.defaultFormat?.toUpperCase();
+
+  return (
+    <ProgressSection data-video-optimizer-progress={job.fileId}>
+      <ProgressHeader justifyContent="space-between" alignItems="center" gap={2}>
+        <Typography variant="pi" fontWeight="semiBold" textColor="neutral800">
+          {formatMessage(
+            { id: getTranslationKey('jobs.card.progress') },
+            { progress: job.progress, format: formatLabel ?? '—' }
+          )}
+        </Typography>
+
+        {isQueued ? (
+          <Flex alignItems="center" gap={2}>
+            <QueuedLoader small />
+            <Typography variant="pi" textColor="neutral600">
+              {formatMessage({ id: getTranslationKey('jobs.card.queued') })}
+            </Typography>
+          </Flex>
+        ) : (
+          stageLabel && (
+            <Typography variant="pi" textColor="neutral600">
+              {stageLabel}
+            </Typography>
+          )
+        )}
+      </ProgressHeader>
+
+      <StyledProgressBar value={job.progress} size="M" />
+    </ProgressSection>
+  );
+};
+
+export const MediaLibraryProgressBridge = () => {
+  const entries = useSyncExternalStore(subscribeJobProgress, getProgressEntries);
+
+  return (
+    <>
+      {entries.map((entry) =>
+        createPortal(<JobProgressBadge job={entry.job} />, entry.host, String(entry.fileId))
+      )}
+    </>
+  );
+};

package/admin/src/components/OptimizationChoicePicker.tsx

@@ -0,0 +1,65 @@
+import {
+  Box,
+  Field,
+  Flex,
+  Radio,
+  Typography,
+} from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { getTranslationKey, type OptimizationChoice } from '../pluginId';
+
+interface OptimizationChoicePickerProps {
+  value: OptimizationChoice;
+  onChange: (choice: OptimizationChoice) => void;
+  disabled?: boolean;
+}
+
+const CHOICES: OptimizationChoice[] = ['original', 'global', 'custom'];
+
+export const OptimizationChoicePicker = ({
+  value,
+  onChange,
+  disabled = false,
+}: OptimizationChoicePickerProps) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Field.Root name="optimizationChoice">
+      <Radio.Group
+        value={value}
+        onValueChange={(nextValue) => onChange(nextValue as OptimizationChoice)}
+        disabled={disabled}
+      >
+        <Flex direction="column" gap={3} alignItems="stretch">
+          {CHOICES.map((choice) => {
+            const selected = value === choice;
+
+            return (
+              <Box
+                key={choice}
+                padding={4}
+                hasRadius
+                background={selected ? 'primary100' : 'neutral100'}
+                onClick={() => {
+                  if (!disabled) {
+                    onChange(choice);
+                  }
+                }}
+                style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}
+              >
+                <Radio.Item value={choice} id={`optimizer-choice-${choice}`}>
+                  {formatMessage({ id: getTranslationKey(`choice.${choice}`) })}
+                </Radio.Item>
+                <Box paddingLeft={6} paddingTop={1} style={{ pointerEvents: 'none' }}>
+                  <Typography variant="pi" textColor="neutral600">
+                    {formatMessage({ id: getTranslationKey(`choice.${choice}.description`) })}
+                  </Typography>
+                </Box>
+              </Box>
+            );
+          })}
+        </Flex>
+      </Radio.Group>
+    </Field.Root>
+  );
+};

package/admin/src/components/OptimizationResizeFields.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { Field, Grid, TextInput, Typography } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { getTranslationKey, type OptimizationSettings } from '../pluginId';
+
+interface OptimizationResizeFieldsProps {
+  value: Pick<OptimizationSettings, 'maxWidth' | 'maxHeight'>;
+  sourceWidth?: number;
+  sourceHeight?: number;
+  onChange: (patch: Partial<OptimizationSettings>) => void;
+  disabled?: boolean;
+  namePrefix?: string;
+  variant?: 'custom' | 'global';
+}
+
+export const OptimizationResizeFields = ({
+  value,
+  sourceWidth,
+  sourceHeight,
+  onChange,
+  disabled = false,
+  namePrefix = '',
+  variant = 'custom',
+}: OptimizationResizeFieldsProps) => {
+  const { formatMessage } = useIntl();
+
+  const aspectRatio =
+    sourceWidth && sourceHeight && sourceHeight > 0 ? sourceWidth / sourceHeight : null;
+
+  const handleWidthChange = (rawValue: string) => {
+    const nextWidth = Math.max(1, Number(rawValue) || 1);
+
+    if (!aspectRatio) {
+      onChange({ maxWidth: nextWidth });
+      return;
+    }
+
+    onChange({
+      maxWidth: nextWidth,
+      maxHeight: Math.max(1, Math.round(nextWidth / aspectRatio)),
+    });
+  };
+
+  const handleHeightChange = (rawValue: string) => {
+    const nextHeight = Math.max(1, Number(rawValue) || 1);
+
+    if (!aspectRatio) {
+      onChange({ maxHeight: nextHeight });
+      return;
+    }
+
+    onChange({
+      maxHeight: nextHeight,
+      maxWidth: Math.max(1, Math.round(nextHeight * aspectRatio)),
+    });
+  };
+
+  return (
+    <>
+      <Grid.Item col={12} direction="column" alignItems="stretch">
+        <Typography variant="pi" fontWeight="bold" textColor="neutral800">
+          {formatMessage({
+            id: getTranslationKey('settings.resize.title'),
+            defaultMessage: 'Output dimensions',
+          })}
+        </Typography>
+      </Grid.Item>
+
+      <Grid.Item col={6} xs={12} direction="column" alignItems="stretch">
+        <Field.Root name={`${namePrefix}maxWidth`}>
+          <Field.Label>
+            {formatMessage({
+              id: getTranslationKey('settings.resize.width'),
+              defaultMessage: 'Width (px)',
+            })}
+          </Field.Label>
+          <TextInput
+            type="number"
+            min={1}
+            value={value.maxWidth}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleWidthChange(e.target.value)}
+            disabled={disabled}
+          />
+        </Field.Root>
+      </Grid.Item>
+
+      <Grid.Item col={6} xs={12} direction="column" alignItems="stretch">
+        <Field.Root name={`${namePrefix}maxHeight`}>
+          <Field.Label>
+            {formatMessage({
+              id: getTranslationKey('settings.resize.height'),
+              defaultMessage: 'Height (px)',
+            })}
+          </Field.Label>
+          <TextInput
+            type="number"
+            min={1}
+            value={value.maxHeight}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleHeightChange(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(
+              variant === 'global' ? 'settings.resize.globalHint' : 'settings.resize.hint'
+            ),
+            defaultMessage:
+              variant === 'global'
+                ? 'Videos larger than this are scaled down while preserving aspect ratio.'
+                : 'Defaults to the original video size. Change either value to resize; the other updates to keep aspect ratio.',
+          })}
+        </Typography>
+      </Grid.Item>
+    </>
+  );
+};