[javascript] Universal Viewer를 활용한 사진 및 동영상 필터링 기능

30 Nov 2023

javascript

이번 글에서는 Universal Viewer를 사용하여 사진 및 동영상 필터링 기능을 구현하는 방법에 대해 알아보겠습니다.

Universal Viewer란?

Universal Viewer는 오픈 소스 라이브러리로서, 다양한 유형의 디지털 콘텐츠를 웹 브라우저에서 표시하는 데 사용됩니다. 그 중에서도 사진 및 동영상을 웹에서 효율적으로 보여주는 데에 특화되어 있습니다.

필터링 기능 추가하기

Universal Viewer에서 제공하는 기능 중 하나인 필터링 기능을 활용하면, 특정 조건에 부합하는 콘텐츠만을 보여줄 수 있습니다. 아래는 필터링 기능을 추가하는 예제 코드입니다.

const viewer = new UniversalViewer({
  // Viewer 설정
});

const filterInput = document.getElementById('filterInput');

filterInput.addEventListener('input', () => {
  const filterValue = filterInput.value.toLowerCase();
  const items = viewer.getItems();

  for (let i = 0; i < items.length; i++) {
    const item = items[i];
    const title = item.getMetadata().title.toLowerCase();

    if (title.includes(filterValue)) {
      item.show();
    } else {
      item.hide();
    }
  }
});

위의 코드에서는 필터 입력란에 입력된 값과 콘텐츠의 제목을 비교하여 일치하는 콘텐츠만을 표시하도록 구현하였습니다. 필터 입력란의 값이 변경될 때마다 입력된 값과 콘텐츠 제목을 비교하고, 일치하지 않는 콘텐츠는 숨깁니다.

사용 예시

위의 코드를 웹페이지에 적용하면, 사용자는 필터 입력란에 원하는 키워드를 입력하여 일치하는 콘텐츠만을 볼 수 있는 기능을 사용할 수 있습니다.

<body>
  <input type="text" id="filterInput" placeholder="검색어를 입력하세요">
  
  <div id="viewer"></div>

  <!-- Universal Viewer를 초기화하고 필터링 기능을 추가하는 스크립트 -->
  <script src="universal-viewer.js"></script>
  <script>
    const viewerContainer = document.getElementById('viewer');

    const viewer = new UniversalViewer({
      // Viewer 설정
    });

    viewer.attachTo(viewerContainer);
  </script>
</body>

위의 예시 코드에서 filterInput은 필터 입력란을 의미하며, viewerContainer는 Universal Viewer가 표시될 영역입니다. 이렇게 설정된 웹페이지에서는 필터 입력란에 키워드를 입력하면 해당하는 콘텐츠만이 표시됩니다.

마무리

이렇게 Universal Viewer를 활용하여 사진 및 동영상 필터링 기능을 구현할 수 있습니다. 필터링 기능을 추가하여 사용자가 원하는 콘텐츠를 쉽게 찾을 수 있도록 도움이 되기를 바랍니다.

참고: Universal Viewer 공식 GitHub 페이지