@frkntmbs/strapi-plugin-video-optimizer 1.0.0

package/admin/src/utils/mediaLibraryCardStore.ts

@@ -0,0 +1,223 @@
+import type { AssetOptimizationPreference, OptimizationSettings, VideoOptimizerJob } from '../pluginId';
+import { adminPost } from './adminFetch';
+import { wakeJobPoller } from './initJobPoller';
+import {
+  createCustomFromGlobal,
+  createDefaultPreference,
+  getGlobalSettings,
+} from './uploadAssetStore';
+
+export interface MediaLibraryCardEntry {
+  fileId: number;
+  fileName: string;
+  width?: number;
+  height?: number;
+  optimizeHost: HTMLElement;
+  cancelHost: HTMLElement;
+}
+
+let cards: MediaLibraryCardEntry[] = [];
+let cardsSnapshot: MediaLibraryCardEntry[] = [];
+const listeners = new Set<() => void>();
+
+let editingFileId: number | null = null;
+let editingFileName: string | null = null;
+let editingDimensions: { width?: number; height?: number } | null = null;
+let draftPreference: AssetOptimizationPreference | null = null;
+let enqueueInFlight = false;
+let cancelInFlight = new Set<number>();
+let storeRevision = 0;
+
+const STABLE_EMPTY_DRAFT: AssetOptimizationPreference = Object.freeze({
+  choice: 'original',
+  custom: undefined,
+});
+
+const notify = () => {
+  storeRevision += 1;
+  listeners.forEach((listener) => listener());
+};
+
+export const getMediaLibraryStoreRevision = () => storeRevision;
+
+export const subscribeMediaLibraryCards = (listener: () => void) => {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+};
+
+export const getMediaLibraryCards = () => cardsSnapshot;
+
+const refreshEntryHosts = (entry: MediaLibraryCardEntry): MediaLibraryCardEntry | null => {
+  const optimizeHost = document.querySelector(
+    `[data-video-optimizer-ml-optimize-host="${entry.fileId}"]`
+  ) as HTMLElement | null;
+  const cancelHost = document.querySelector(
+    `[data-video-optimizer-ml-cancel-host="${entry.fileId}"]`
+  ) as HTMLElement | null;
+
+  if (!optimizeHost?.isConnected || !cancelHost?.isConnected) {
+    return null;
+  }
+
+  return {
+    ...entry,
+    optimizeHost,
+    cancelHost,
+  };
+};
+
+export const setMediaLibraryCards = (nextCards: MediaLibraryCardEntry[]) => {
+  const resolved = nextCards
+    .map((entry) => refreshEntryHosts(entry))
+    .filter((entry): entry is MediaLibraryCardEntry => entry !== null);
+
+  const sameLength = resolved.length === cards.length;
+  const sameEntries =
+    sameLength &&
+    resolved.every(
+      (entry, index) =>
+        entry.fileId === cards[index]?.fileId &&
+        entry.optimizeHost === cards[index]?.optimizeHost &&
+        entry.cancelHost === cards[index]?.cancelHost
+    );
+
+  if (sameEntries) {
+    return;
+  }
+
+  cards = resolved;
+  cardsSnapshot = resolved.slice();
+  notify();
+};
+
+export const getEditingMediaLibraryFileId = () => editingFileId;
+
+export const getEditingMediaLibraryFileName = () => editingFileName;
+
+export const getEditingMediaLibraryDimensions = () => editingDimensions;
+
+export const getMediaLibraryDraftPreference = (): AssetOptimizationPreference => {
+  return draftPreference ?? STABLE_EMPTY_DRAFT;
+};
+
+export const isMediaLibraryEnqueueInFlight = () => enqueueInFlight;
+
+export const isMediaLibraryCancelInFlight = (fileId: number) => cancelInFlight.has(fileId);
+
+export const openMediaLibraryEditor = (
+  fileId: number,
+  fileName: string,
+  dimensions?: { width?: number; height?: number }
+) => {
+  editingFileId = fileId;
+  editingFileName = fileName;
+  editingDimensions = dimensions ?? null;
+  draftPreference = createDefaultPreference();
+
+  if (draftPreference.choice === 'custom') {
+    draftPreference.custom = createCustomForMediaLibraryFile();
+  }
+
+  notify();
+};
+
+export const closeMediaLibraryEditor = () => {
+  editingFileId = null;
+  editingFileName = null;
+  editingDimensions = null;
+  draftPreference = null;
+  notify();
+};
+
+export const setMediaLibraryDraftChoice = (choice: AssetOptimizationPreference['choice']) => {
+  if (!draftPreference) {
+    draftPreference = createDefaultPreference();
+  }
+
+  draftPreference = {
+    choice,
+    custom:
+      choice === 'custom'
+        ? draftPreference.custom ?? createCustomForMediaLibraryFile()
+        : undefined,
+  };
+  notify();
+};
+
+export const setMediaLibraryDraftCustom = (custom: OptimizationSettings) => {
+  if (!draftPreference) {
+    draftPreference = createDefaultPreference();
+  }
+
+  draftPreference = {
+    choice: 'custom',
+    custom,
+  };
+  notify();
+};
+
+export const saveMediaLibraryEditor = async () => {
+  if (!editingFileId || !draftPreference || draftPreference.choice === 'original') {
+    return false;
+  }
+
+  enqueueInFlight = true;
+  notify();
+
+  try {
+    const result = await adminPost<{ job?: VideoOptimizerJob }>('/video-optimizer/jobs/enqueue', {
+      fileId: editingFileId,
+      optimizationChoice: draftPreference.choice,
+      optimizationCustom:
+        draftPreference.choice === 'custom' ? draftPreference.custom : undefined,
+    });
+
+    if (!result?.job) {
+      return false;
+    }
+
+    closeMediaLibraryEditor();
+    wakeJobPoller();
+    return true;
+  } finally {
+    enqueueInFlight = false;
+    notify();
+  }
+};
+
+export const cancelMediaLibraryJob = async (fileId: number) => {
+  if (cancelInFlight.has(fileId)) {
+    return false;
+  }
+
+  cancelInFlight.add(fileId);
+  notify();
+
+  try {
+    const result = await adminPost<{ ok?: boolean }>('/video-optimizer/jobs/cancel', { fileId });
+
+    if (!result?.ok) {
+      return false;
+    }
+
+    wakeJobPoller();
+    return true;
+  } finally {
+    cancelInFlight.delete(fileId);
+    notify();
+  }
+};
+
+export const createCustomForMediaLibraryFile = (): OptimizationSettings => {
+  const base = createCustomFromGlobal();
+  const width = editingDimensions?.width;
+  const height = editingDimensions?.height;
+
+  return {
+    ...base,
+    maxWidth: width ?? base.maxWidth,
+    maxHeight: height ?? base.maxHeight,
+  };
+};
+
+export const getMediaLibraryDefaultChoiceLabel = () => getGlobalSettings().defaultChoice;

package/admin/src/utils/mediaLibraryQueryBridge.ts

@@ -0,0 +1,113 @@
+import type { QueryClient } from 'react-query';
+import { adminGet } from './adminFetch';
+
+const UPLOAD_PLUGIN_ID = 'upload';
+
+export interface UploadAssetRecord {
+  id: number;
+  name?: string;
+  hash?: string;
+  url?: string;
+  mime?: string;
+  ext?: string;
+}
+
+let queryClientRef: QueryClient | null = null;
+let fetchedAssets: UploadAssetRecord[] = [];
+let fetchPromise: Promise<UploadAssetRecord[]> | null = null;
+let uploadAssetsFetchSettled = false;
+
+export const registerMediaLibraryQueryClientBridge = (queryClient: QueryClient | null) => {
+  queryClientRef = queryClient;
+};
+
+export const getMediaLibraryQueryClient = () => queryClientRef;
+
+const readAssetsFromQueryCache = (): UploadAssetRecord[] | null => {
+  if (!queryClientRef) {
+    return null;
+  }
+
+  for (const query of queryClientRef.getQueryCache().findAll([UPLOAD_PLUGIN_ID, 'assets'])) {
+    if (query.state.status !== 'success') {
+      continue;
+    }
+
+    const data = query.state.data as UploadAssetRecord[] | { results?: UploadAssetRecord[] } | undefined;
+
+    if (Array.isArray(data)) {
+      return data;
+    }
+
+    if (data && typeof data === 'object' && 'results' in data) {
+      return Array.isArray(data.results) ? data.results : [];
+    }
+  }
+
+  return null;
+};
+
+const readAssetsFromUploadApi = async (): Promise<UploadAssetRecord[]> => {
+  const params = new URLSearchParams(window.location.search);
+  const page = params.get('page') ?? '1';
+  const pageSize = params.get('pageSize') ?? '10';
+  const sort = params.get('sort') ?? 'createdAt:DESC';
+
+  const data = await adminGet<UploadAssetRecord[] | { results?: UploadAssetRecord[] }>(
+    `/upload/files?sort=${encodeURIComponent(sort)}&page=${page}&pageSize=${pageSize}`
+  );
+
+  if (Array.isArray(data)) {
+    return data;
+  }
+
+  return data?.results ?? [];
+};
+
+export const getUploadAssetsFromCache = (): UploadAssetRecord[] => {
+  const fromQuery = readAssetsFromQueryCache();
+
+  if (fromQuery !== null) {
+    return fromQuery;
+  }
+
+  return fetchedAssets;
+};
+
+export const ensureUploadAssets = async (): Promise<UploadAssetRecord[]> => {
+  const fromQuery = readAssetsFromQueryCache();
+
+  if (fromQuery !== null) {
+    fetchedAssets = fromQuery;
+    uploadAssetsFetchSettled = true;
+    return fromQuery;
+  }
+
+  if (uploadAssetsFetchSettled) {
+    return fetchedAssets;
+  }
+
+  if (fetchPromise) {
+    return fetchPromise;
+  }
+
+  fetchPromise = (async () => {
+    try {
+      fetchedAssets = await readAssetsFromUploadApi();
+      uploadAssetsFetchSettled = true;
+      return fetchedAssets;
+    } catch {
+      return fetchedAssets;
+    } finally {
+      fetchPromise = null;
+    }
+  })();
+
+  return fetchPromise;
+};
+
+export const invalidateFetchedUploadAssets = () => {
+  fetchedAssets = [];
+  fetchPromise = null;
+  uploadAssetsFetchSettled = false;
+};

package/admin/src/utils/mediaLibraryRoute.ts

@@ -0,0 +1,9 @@
+export const isMediaLibraryPath = (pathname: string) => {
+  const path = pathname.toLowerCase();
+
+  return (
+    path.includes('/plugins/upload') ||
+    path.includes('/plugins/unstable-upload') ||
+    path.includes('/media-library')
+  );
+};

package/admin/src/utils/optimizationFields.ts

@@ -0,0 +1,17 @@
+import type { VideoFormat } from '../pluginId';
+
+export const VIDEO_EXTENSIONS = ['mp4', 'webm', 'mov', 'avi', 'mkv', 'm4v', 'ogv', 'wmv', 'flv', '3gp'];
+
+export const getVideoFormatFromName = (name?: string): VideoFormat | 'other' => {
+  const ext = name?.split('.').pop()?.toLowerCase();
+
+  if (ext === 'webm') {
+    return 'webm';
+  }
+
+  if (ext === 'mp4' || ext === 'mov' || ext === 'm4v') {
+    return 'mp4';
+  }
+
+  return 'other';
+};

package/admin/src/utils/probeVideoDimensions.ts

@@ -0,0 +1,94 @@
+export const probeVideoFileDimensions = (
+  file: File
+): Promise<{ width: number; height: number } | undefined> =>
+  new Promise((resolve) => {
+    const url = URL.createObjectURL(file);
+    const video = document.createElement('video');
+    video.preload = 'metadata';
+
+    const cleanup = () => {
+      URL.revokeObjectURL(url);
+      video.removeAttribute('src');
+      video.load();
+    };
+
+    video.onloadedmetadata = () => {
+      const dimensions =
+        video.videoWidth > 0 && video.videoHeight > 0
+          ? { width: video.videoWidth, height: video.videoHeight }
+          : undefined;
+      cleanup();
+      resolve(dimensions);
+    };
+
+    video.onerror = () => {
+      cleanup();
+      resolve(undefined);
+    };
+
+    video.src = url;
+  });
+
+export const findUploadFilesInDialog = (dialog: Element): File[] => {
+  const files: File[] = [];
+
+  dialog.querySelectorAll('input[type="file"]').forEach((input) => {
+    if (input instanceof HTMLInputElement && input.files?.length) {
+      files.push(...Array.from(input.files));
+    }
+  });
+
+  return files;
+};
+
+export const matchUploadFile = (files: File[], assetName: string): File | undefined => {
+  const target = assetName.trim().toLowerCase();
+
+  return files.find((file) => {
+    const name = file.name.trim().toLowerCase();
+    return name === target || target.endsWith(name) || name.endsWith(target);
+  });
+};
+
+export const ensureVideoElementDimensions = (
+  card: Element
+): Promise<{ width: number; height: number } | undefined> => {
+  const video = card.querySelector('video');
+
+  if (!(video instanceof HTMLVideoElement)) {
+    return Promise.resolve(undefined);
+  }
+
+  if (video.videoWidth > 0 && video.videoHeight > 0) {
+    return Promise.resolve({ width: video.videoWidth, height: video.videoHeight });
+  }
+
+  return new Promise((resolve) => {
+    let settled = false;
+
+    const finish = (dimensions?: { width: number; height: number }) => {
+      if (settled) {
+        return;
+      }
+
+      settled = true;
+      resolve(dimensions);
+    };
+
+    video.addEventListener(
+      'loadedmetadata',
+      () => {
+        if (video.videoWidth > 0 && video.videoHeight > 0) {
+          finish({ width: video.videoWidth, height: video.videoHeight });
+          return;
+        }
+
+        finish(undefined);
+      },
+      { once: true }
+    );
+
+    video.load();
+    window.setTimeout(() => finish(undefined), 2500);
+  });
+};