@atlaskit/spotlight/dist/esm/utils/use-preload-media/index.js

A spotlight introduces users to points of interest, from focused messages to multi-step tours.

import { useEffect } from 'react';
import { getDocument } from '@atlaskit/browser-apis';
import __noop from '@atlaskit/ds-lib/noop';

// eslint-disable-next-line @repo/internal/react/consistent-types-definitions

/**
 * Preloads media (video/image) files to be cached by the browser.
 * Once loaded, the browser cache will be used when rendering the actual media element.
 *
 * @param src - The media source URL to preload
 * @param options - Configuration options including the MIME type
 */
export var usePreloadMedia = function usePreloadMedia(src, options) {
  useEffect(function () {
    var handler = mimeTypeHandlers[options.mimetype];
    return handler(src);
  }, [src, options.mimetype]);
};
var preloadVideo = function preloadVideo(src) {
  var doc = getDocument();
  if (!doc) {
    return __noop;
  }
  var video = doc.createElement('video');
  video.src = src;
  video.preload = 'auto';
  video.load();
  return function () {
    video.src = '';
    video.load();
  };
};
var preloadImage = function preloadImage(src) {
  var doc = getDocument();
  if (!doc) {
    return __noop;
  }
  var img = new Image();
  img.src = src;
  return function () {
    img.src = '';
  };
};
var mimeTypeHandlers = {
  'video/mp4': preloadVideo,
  'video/webm': preloadVideo,
  'video/ogg': preloadVideo,
  'video/mpeg': preloadVideo,
  'video/x-matroska': preloadVideo,
  'image/jpeg': preloadImage,
  'image/png': preloadImage,
  'image/gif': preloadImage,
  'image/webp': preloadImage,
  'image/svg+xml': preloadImage
};