@frkntmbs/strapi-plugin-video-optimizer 1.0.0

package/admin/src/utils/debugMediaLibraryProgress.ts

@@ -0,0 +1,70 @@
+import type { VideoOptimizerJob } from '../pluginId';
+import { adminGet } from './adminFetch';
+import { getProgressEntries, getWatchedJobs } from './jobProgressStore';
+import { isMediaLibraryPath } from './mediaLibraryRoute';
+
+const VIDEO_EXT_PATTERN =
+  /\.(mp4|webm|mov|avi|mkv|m4v|ogv|wmv|flv|3gp)/i;
+
+const CARD_SELECTOR = [
+  'article[role="button"]',
+  'article[aria-labelledby]',
+  '[role="listitem"]',
+  '[class*="CardContainer"]',
+].join(', ');
+
+const extractFileName = (card: Element): string | null => {
+  const titleNode = card.querySelector('[id$="-title"]');
+
+  if (titleNode?.textContent && VIDEO_EXT_PATTERN.test(titleNode.textContent)) {
+    return titleNode.textContent.trim();
+  }
+
+  const figcaption = card.querySelector('figcaption');
+
+  if (figcaption?.textContent && VIDEO_EXT_PATTERN.test(figcaption.textContent)) {
+    return figcaption.textContent.trim();
+  }
+
+  const match = card.textContent?.match(/[\w.-]+\.(mp4|webm|mov|avi|mkv|m4v|ogv|wmv|flv|3gp)/i);
+  return match?.[0] ?? null;
+};
+
+export const collectVideoCardsDebug = () => {
+  const root = document.querySelector('main') ?? document.body;
+  return Array.from(root.querySelectorAll(CARD_SELECTOR)).map((card) => ({
+    fileName: extractFileName(card),
+    hasProgressHost: Boolean(card.querySelector('[data-video-optimizer-progress-host]')),
+    fileIdStamp: card.getAttribute('data-video-optimizer-file-id'),
+  }));
+};
+
+export const debugMediaLibraryProgress = async () => {
+  const api = await adminGet<{ jobs?: VideoOptimizerJob[] }>('/video-optimizer/jobs/active');
+
+  return {
+    path: window.location.pathname,
+    isMediaLibraryRoute: isMediaLibraryPath(window.location.pathname),
+    watchedJobs: getWatchedJobs(),
+    progressEntries: getProgressEntries().map((entry) => ({
+      fileId: entry.fileId,
+      jobId: entry.job.id,
+      progress: entry.job.progress,
+      status: entry.job.status,
+      fileName: entry.job.fileName,
+      hostConnected: entry.host.isConnected,
+    })),
+    apiJobs: api?.jobs ?? null,
+    cards: collectVideoCardsDebug(),
+    bridgeMounted: Boolean(document.getElementById('video-optimizer-media-library-progress')),
+  };
+};
+
+export const installDebugMediaLibraryProgress = () => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  (window as Window & { __videoOptimizerDebug?: typeof debugMediaLibraryProgress }).__videoOptimizerDebug =
+    debugMediaLibraryProgress;
+};

package/admin/src/utils/extractAssetDimensions.ts

@@ -0,0 +1,22 @@
+export const extractAssetDimensions = (card: Element) => {
+  const video = card.querySelector('video');
+
+  if (video instanceof HTMLVideoElement && video.videoWidth > 0 && video.videoHeight > 0) {
+    return { width: video.videoWidth, height: video.videoHeight };
+  }
+
+  const img = card.querySelector('img');
+
+  if (img instanceof HTMLImageElement && img.naturalWidth > 0 && img.naturalHeight > 0) {
+    return { width: img.naturalWidth, height: img.naturalHeight };
+  }
+
+  const cardText = card.textContent ?? '';
+  const match = cardText.match(/(\d+)\s*[×✕xX]\s*(\d+)/);
+
+  if (match) {
+    return { width: Number(match[1]), height: Number(match[2]) };
+  }
+
+  return undefined;
+};

package/admin/src/utils/initJobPoller.ts

@@ -0,0 +1,173 @@
+import type { VideoOptimizerJob } from '../pluginId';
+import { adminGet } from './adminFetch';
+import {
+  invalidateMediaLibraryCache,
+} from './invalidateMediaLibrary';
+import { syncMediaLibraryProgress } from './initMediaLibraryProgress';
+import { syncMediaLibraryCardActions } from './initMediaLibraryCardActions';
+import { setWatchedJobs } from './jobProgressStore';
+import { isMediaLibraryPath } from './mediaLibraryRoute';
+
+const ACTIVE_POLL_INTERVAL_MS = 3000;
+const ROUTE_CHECK_INTERVAL_MS = 1000;
+
+let activePollTimer: ReturnType<typeof setInterval> | null = null;
+let routeCheckTimer: ReturnType<typeof setInterval> | null = null;
+let started = false;
+let pollInFlight = false;
+let lastPathname = '';
+const trackedJobs = new Map<string, VideoOptimizerJob>();
+
+const isActiveJob = (job: VideoOptimizerJob) =>
+  job.status === 'queued' || job.status === 'processing';
+
+const hasActiveJobs = (jobs: VideoOptimizerJob[]) => jobs.some(isActiveJob);
+
+const stopActivePolling = () => {
+  if (!activePollTimer) {
+    return;
+  }
+
+  clearInterval(activePollTimer);
+  activePollTimer = null;
+};
+
+const startActivePolling = () => {
+  if (activePollTimer) {
+    return;
+  }
+
+  activePollTimer = setInterval(() => {
+    void pollActiveJobs();
+  }, ACTIVE_POLL_INTERVAL_MS);
+};
+
+const clearJobProgress = () => {
+  stopActivePolling();
+  trackedJobs.clear();
+  setWatchedJobs([]);
+  syncMediaLibraryProgress();
+};
+
+const handleFinishedJob = async (
+  jobId: string,
+  fallbackFileId: number,
+  remainingActiveCount: number
+) => {
+  const previous = trackedJobs.get(jobId);
+  trackedJobs.delete(jobId);
+
+  const finished = await adminGet<VideoOptimizerJob>(`/video-optimizer/jobs/${jobId}`);
+  const fileId = finished?.fileId ?? fallbackFileId;
+
+  await invalidateMediaLibraryCache(fileId || undefined, previous?.fileName, {
+    forceFullRefresh: remainingActiveCount === 0,
+  });
+};
+
+const reconcileFinishedJobs = async (activeJobs: VideoOptimizerJob[]) => {
+  const activeIds = new Set(activeJobs.map((job) => job.id));
+  const pendingFinished: Array<Promise<void>> = [];
+
+  for (const [jobId, previous] of trackedJobs.entries()) {
+    if (activeIds.has(jobId)) {
+      continue;
+    }
+
+    if (previous.status !== 'queued' && previous.status !== 'processing') {
+      trackedJobs.delete(jobId);
+      continue;
+    }
+
+    pendingFinished.push(
+      handleFinishedJob(jobId, previous.fileId, activeJobs.length)
+    );
+  }
+
+  if (pendingFinished.length) {
+    await Promise.all(pendingFinished);
+  }
+
+  for (const job of activeJobs) {
+    trackedJobs.set(job.id, job);
+  }
+};
+
+export const pollActiveJobs = async () => {
+  if (pollInFlight) {
+    return;
+  }
+
+  const pathname = window.location.pathname;
+
+  if (!isMediaLibraryPath(pathname)) {
+    clearJobProgress();
+    return;
+  }
+
+  pollInFlight = true;
+
+  try {
+    const data = await adminGet<{ jobs?: VideoOptimizerJob[] }>('/video-optimizer/jobs/active');
+    const jobs = data?.jobs ?? [];
+
+    await reconcileFinishedJobs(jobs);
+
+    if (!hasActiveJobs(jobs)) {
+      stopActivePolling();
+      trackedJobs.clear();
+      setWatchedJobs([]);
+      syncMediaLibraryProgress();
+      return;
+    }
+
+    setWatchedJobs(jobs);
+    syncMediaLibraryProgress();
+    startActivePolling();
+  } catch {
+    stopActivePolling();
+  } finally {
+    pollInFlight = false;
+  }
+};
+
+export const wakeJobPoller = () => {
+  void pollActiveJobs();
+};
+
+const handleRouteChange = (pathname: string) => {
+  if (pathname === lastPathname) {
+    return;
+  }
+
+  lastPathname = pathname;
+
+  if (isMediaLibraryPath(pathname)) {
+    void pollActiveJobs();
+    syncMediaLibraryCardActions();
+    return;
+  }
+
+  clearJobProgress();
+};
+
+export const initJobPoller = () => {
+  if (started || typeof window === 'undefined') {
+    return;
+  }
+
+  started = true;
+  lastPathname = window.location.pathname;
+
+  window.addEventListener('popstate', () => {
+    handleRouteChange(window.location.pathname);
+  });
+
+  routeCheckTimer = setInterval(() => {
+    handleRouteChange(window.location.pathname);
+  }, ROUTE_CHECK_INTERVAL_MS);
+
+  if (isMediaLibraryPath(lastPathname)) {
+    void pollActiveJobs();
+  }
+};

package/admin/src/utils/initMediaLibraryCardActions.ts

@@ -0,0 +1,308 @@
+import {
+  collectVideoCards,
+  isVideoAssetCard,
+  prepareCardsForMatching,
+  resolveFileIdForCard,
+} from './mediaLibraryCardMatch';
+import { setMediaLibraryCards, type MediaLibraryCardEntry } from './mediaLibraryCardStore';
+import { ensureUploadAssets, type UploadAssetRecord } from './mediaLibraryQueryBridge';
+import { isMediaLibraryPath } from './mediaLibraryRoute';
+import { extractAssetDimensions } from './extractAssetDimensions';
+
+let domObserver: MutationObserver | null = null;
+let domObserverTimer: ReturnType<typeof setTimeout> | null = null;
+let started = false;
+let syncInFlight = false;
+
+const isMediaLibraryRoute = () => isMediaLibraryPath(window.location.pathname);
+
+const getButtonLabel = (button: Element) => {
+  const aria = button.getAttribute('aria-label') ?? '';
+  const text = button.textContent ?? '';
+  const title = button.getAttribute('title') ?? '';
+
+  return `${aria} ${text} ${title}`.toLowerCase();
+};
+
+const isEditButton = (button: Element) => {
+  const label = getButtonLabel(button);
+
+  return label.includes('edit') || label.includes('düzenle');
+};
+
+const isPluginActionButton = (button: Element) => {
+  const label = getButtonLabel(button);
+
+  return (
+    label.includes('optimization') ||
+    label.includes('optimizasyon') ||
+    label.includes('cancel optimization') ||
+    label.includes('optimizasyonu iptal')
+  );
+};
+
+const isInsideDialog = (element: Element) =>
+  Boolean(element.closest('[role="dialog"], [aria-modal="true"]'));
+
+const isPluginMutationNode = (node: Node) => {
+  if (!(node instanceof Element)) {
+    return false;
+  }
+
+  return Boolean(
+    node.id === 'video-optimizer-media-library-card-actions' ||
+      node.closest(
+        '#video-optimizer-media-library-card-actions, [data-video-optimizer-ml-optimize-host], [data-video-optimizer-ml-cancel-host]'
+      )
+  );
+};
+
+const shouldSyncForMutations = (mutations: MutationRecord[]) =>
+  mutations.some((mutation) => {
+    if (isPluginMutationNode(mutation.target)) {
+      return false;
+    }
+
+    for (const node of mutation.addedNodes) {
+      if (!isPluginMutationNode(node)) {
+        return true;
+      }
+    }
+
+    for (const node of mutation.removedNodes) {
+      if (!isPluginMutationNode(node)) {
+        return true;
+      }
+    }
+
+    return mutation.type === 'characterData';
+  });
+
+const findCardRoot = (button: Element) => {
+  let element = button.parentElement;
+  const root = document.querySelector('main') ?? document.body;
+
+  while (element && element !== root) {
+    if (element.getAttribute('role') === 'button') {
+      return element;
+    }
+
+    if (element.tagName === 'ARTICLE' || element.querySelector('[id$="-title"], h2')) {
+      return element;
+    }
+
+    element = element.parentElement;
+  }
+
+  return null;
+};
+
+const ensureHost = (
+  actionsContainer: HTMLElement,
+  afterElement: Element,
+  attribute: 'data-video-optimizer-ml-optimize-host' | 'data-video-optimizer-ml-cancel-host',
+  fileId: number
+) => {
+  const selector = `[${attribute}="${fileId}"]`;
+  let host = actionsContainer.querySelector(selector) as HTMLElement | null;
+
+  if (!host) {
+    host = document.createElement('span');
+    host.setAttribute(attribute, String(fileId));
+    afterElement.insertAdjacentElement('afterend', host);
+  }
+
+  host.style.cssText = 'display:contents;';
+
+  return host;
+};
+
+const cleanupCardActionHosts = (activeFileIds: Set<number>) => {
+  for (const host of document.querySelectorAll('[data-video-optimizer-ml-optimize-host]')) {
+    const fileId = Number(host.getAttribute('data-video-optimizer-ml-optimize-host'));
+
+    if (!activeFileIds.has(fileId)) {
+      host.remove();
+    }
+  }
+
+  for (const host of document.querySelectorAll('[data-video-optimizer-ml-cancel-host]')) {
+    const fileId = Number(host.getAttribute('data-video-optimizer-ml-cancel-host'));
+
+    if (!activeFileIds.has(fileId)) {
+      host.remove();
+    }
+  }
+};
+
+const collectCardActions = (uploadAssets: UploadAssetRecord[]): MediaLibraryCardEntry[] => {
+  if (!isMediaLibraryRoute()) {
+    return [];
+  }
+
+  const cards = collectVideoCards();
+  prepareCardsForMatching(cards);
+  const entries: MediaLibraryCardEntry[] = [];
+  const seenCards = new Set<Element>();
+  const seenFileIds = new Set<number>();
+  const root = document.querySelector('main') ?? document.body;
+
+  root.querySelectorAll('button').forEach((button) => {
+    if (isInsideDialog(button) || !isEditButton(button) || isPluginActionButton(button)) {
+      return;
+    }
+
+    const card = findCardRoot(button);
+
+    if (!card || seenCards.has(card) || !isVideoAssetCard(card)) {
+      return;
+    }
+
+    const fileId = resolveFileIdForCard(card, uploadAssets);
+
+    if (!fileId || seenFileIds.has(fileId)) {
+      return;
+    }
+
+    const actionsContainer = button.parentElement as HTMLElement | null;
+
+    if (!actionsContainer) {
+      return;
+    }
+
+    seenCards.add(card);
+    seenFileIds.add(fileId);
+
+    const htmlCard = card as HTMLElement;
+    htmlCard.dataset.videoOptimizerFileId = String(fileId);
+
+    const asset = uploadAssets.find((item) => item.id === fileId);
+
+    if (asset?.hash) {
+      htmlCard.dataset.videoOptimizerMediaHash = asset.hash;
+    }
+
+    const optimizeHost = ensureHost(
+      actionsContainer,
+      button,
+      'data-video-optimizer-ml-optimize-host',
+      fileId
+    );
+    const cancelHost = ensureHost(
+      actionsContainer,
+      optimizeHost,
+      'data-video-optimizer-ml-cancel-host',
+      fileId
+    );
+
+    const dimensions = extractAssetDimensions(card);
+
+    entries.push({
+      fileId,
+      fileName: asset?.name ?? card.querySelector('[id$="-title"]')?.textContent?.trim() ?? '',
+      width: dimensions?.width,
+      height: dimensions?.height,
+      optimizeHost,
+      cancelHost,
+    });
+  });
+
+  return entries;
+};
+
+const syncDomObserver = () => {
+  if (!isMediaLibraryRoute()) {
+    domObserver?.disconnect();
+    domObserver = null;
+    return;
+  }
+
+  if (!collectVideoCards().length) {
+    domObserver?.disconnect();
+    domObserver = null;
+    return;
+  }
+
+  if (domObserver) {
+    return;
+  }
+
+  const root = document.querySelector('main') ?? document.body;
+
+  domObserver = new MutationObserver((mutations) => {
+    if (!shouldSyncForMutations(mutations)) {
+      return;
+    }
+
+    if (domObserverTimer) {
+      return;
+    }
+
+    domObserverTimer = setTimeout(() => {
+      domObserverTimer = null;
+      syncCardActions();
+    }, 250);
+  });
+
+  domObserver.observe(root, { childList: true, subtree: true });
+};
+
+const syncCardActions = async () => {
+  if (syncInFlight) {
+    return;
+  }
+
+  syncInFlight = true;
+
+  try {
+    if (!isMediaLibraryRoute()) {
+      setMediaLibraryCards([]);
+      domObserver?.disconnect();
+      domObserver = null;
+      return;
+    }
+
+    const videoCards = collectVideoCards();
+
+    if (!videoCards.length) {
+      cleanupCardActionHosts(new Set());
+      setMediaLibraryCards([]);
+      domObserver?.disconnect();
+      domObserver = null;
+      return;
+    }
+
+    prepareCardsForMatching(videoCards);
+    const uploadAssets = await ensureUploadAssets();
+    const entries = collectCardActions(uploadAssets);
+    cleanupCardActionHosts(new Set(entries.map((entry) => entry.fileId)));
+    setMediaLibraryCards(entries);
+    syncDomObserver();
+  } finally {
+    syncInFlight = false;
+  }
+};
+
+export const syncMediaLibraryCardActions = () => {
+  void syncCardActions();
+};
+
+export const initMediaLibraryCardActions = () => {
+  if (started || typeof window === 'undefined') {
+    return;
+  }
+
+  started = true;
+
+  const boot = () => {
+    if (isMediaLibraryRoute()) {
+      void syncCardActions();
+    }
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', boot);
+  } else {
+    boot();
+  }
+};