시작하기

다음 명령어를 사용해 React Video Thumbnail Extractor를 설치하세요.

yarn

yarn add @devskyui/react-video-thumbnail-extractor

npm

npm install @devskyui/react-video-thumbnail-extractor

pnpm

pnpm add @devskyui/react-video-thumbnail-extractor

기본 사용법

설치를 완료했다면, package.json 파일 "dependencies": 목록에 모듈이 추가됩니다.

"dependencies": {
  ...
  "@devskyui/react-video-thumbnail-extractor": "^0.1.0",
  "react-icons": "^5.3.0",
  ...
},

컴포넌트에서 React Video Thumbnail Extractor를 import 해서 사용하세요.

import { useState } from 'react';

import '@devskyui/react-video-thumbnail-extractor/style.css';
import type { Thumbnail } from '@devskyui/react-video-thumbnail-extractor';
import { VideoThumbnailExtractor } from '@devskyui/react-video-thumbnail-extractor';

레이어 팝업으로 사용하기

다음은 기본적인 사용 예제입니다. <VideoThumbnailExtractorModal /> 컴포넌트의 isOpen 속성에 true/false 값을 전달하여 레이어 팝업(모달창) 노출 여부를 제어합니다. 썸네일을 추출한 후 확인 버튼을 눌러 썸네일 목록을 리스트에 바로 노출하거나 외부 API와 연동하여 업로드할 수 있습니다.

import '@devskyui/react-video-thumbnail-extractor/style.css';

import type { Thumbnail, ThumbnailValidationResult } from '@devskyui/react-video-thumbnail-extractor';
import { VideoThumbnailExtractorModal } from '@devskyui/react-video-thumbnail-extractor';
import { useState } from 'react';

export const DemoModal = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [images, setImages] = useState<string[]>([]);

  const handleSuccess = (thumbnails: Thumbnail[]) => {
    const thumbnailUrls = thumbnails.map((thumbnail) => thumbnail.base64Url);
    setImages(thumbnailUrls);
    setIsOpen(false);
  };

  const handleError = (result: ThumbnailValidationResult) => {
    console.log(result); // { hasError: true, code: 'INVALID_THUMBNAIL_DUPLICATED' }
  };

  return (
    <>
      <button onClick={() => setIsOpen(true)}>동영상에서 썸네일 모듈 열기</button>
      <ul className="grid grid-cols-4 gap-2">
        {images.map((url, index) => (
          <li key={`image_${index}`} className="overflow-hidden rounded-md">
            <img src={url} />
          </li>
        ))}
      </ul>
      <VideoThumbnailExtractorModal
        isOpen={isOpen}
        onError={handleError}
        onSuccess={handleSuccess}
        onCancel={() => setIsOpen(false)}
      />
    </>
  );
};

페이지에 바로 노출하기

레이어 팝업 형태가 아닌 페이지에 바로 모듈을 노출하려면 <VideoThumbnailExtractor /> 컴포넌트를 사용하세요. 아래는 확인 버튼을 누르면 모듈이 사라지고 이미지 목록을 노출하는 간단한 예제입니다.

import '@devskyui/react-video-thumbnail-extractor/style.css';

import type { Thumbnail, ThumbnailValidationResult } from '@devskyui/react-video-thumbnail-extractor';
import { VideoThumbnailExtractor } from '@devskyui/react-video-thumbnail-extractor';
import { useState } from 'react';

export const DemoInPage = () => {
  const [isModuleVisible, setIsModuleVisible] = useState(true);
  const [images, setImages] = useState<string[]>([]);

  const handleSuccess = (thumbnails: Thumbnail[]) => {
    const thumbnailUrls = thumbnails.map((thumbnail) => thumbnail.base64Url);
    setImages(thumbnailUrls);

    // 썸네일 추출 성공 시, 페이지에서 모듈 미노출
    setIsModuleVisible(false);
  };

  const handleError = (result: ThumbnailValidationResult) => {
    console.log(result); // { hasError: true, code: 'INVALID_THUMBNAIL_DUPLICATED' }
  };

  return (
    <>
      <ul className="grid grid-cols-4 gap-2">
        {images.map((url, index) => (
          <li key={`image_${index}`} className="overflow-hidden rounded-md">
            <img src={url} />
          </li>
        ))}
      </ul>
      {isModuleVisible && <VideoThumbnailExtractor onSuccess={handleSuccess} onError={handleError} />}
    </>
  );
};