Merge pull request #4015 from nulib/4736-ui-audio-download-button

First start on Audio download button for a Fileset

app/assets/__mocks__/@samvera/image-downloader.js

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const ImageDownloader = () => <span>Mocked ImageDownloader</span>;

app/assets/js/components/Work/Fileset/ActionButtons/Access.jsx

@@ -1,19 +1,19 @@
 import React, { useContext } from "react";
+import { useWorkDispatch, useWorkState } from "@js/context/work-context";
 
+import { AuthContext } from "@js/components/Auth/Auth";
 import { Button } from "@nulib/design-system";
+import { GET_DCAPI_ENDPOINT } from "@js/components/UI/ui.gql";
 import { IIIFContext } from "@js/components/IIIF/IIIFProvider";
 import { IIIF_SIZES } from "@js/services/global-vars";
 import { IconDownload } from "@js/components/Icon";
 import { ImageDownloader } from "@samvera/image-downloader";
 import PropTypes from "prop-types";
+import { getApiResponse } from "@js/services/get-api-response";
 import { toastWrapper } from "@js/services/helpers";
 import useFileSet from "@js/hooks/useFileSet";
 import useIsAuthorized from "@js/hooks/useIsAuthorized";
-import { useWorkDispatch, useWorkState } from "@js/context/work-context";
-import { getApiResponse } from "@js/services/get-api-response";
 import { useQuery } from "@apollo/client";
-import { AuthContext } from "@js/components/Auth/Auth";
-import { GET_DCAPI_ENDPOINT } from "@js/components/UI/ui.gql";
 
 export function MediaButtons({ fileSet }) {
  const [downloadStarted, setDownloadStarted] = React.useState(false);
@@ -78,7 +78,10 @@ export function MediaButtons({ fileSet }) {
 
 export function ImageButtons({ iiifServerUrl, fileSet }) {
  return (
- <div className="field has-addons is-flex is-justify-content-flex-end">
+ <div
+ data-testid="download-image-fileset"
+ className="field has-addons is-flex is-justify-content-flex-end"
+ >
  <p className="control">
  <a
  href={`${iiifServerUrl}${fileSet.id}${IIIF_SIZES.IIIF_FULL_TIFF}`}
@@ -106,14 +109,12 @@ export function ImageButtons({ iiifServerUrl, fileSet }) {
 
 const WorkFilesetActionButtonsAccess = ({ fileSet }) => {
  const iiifServerUrl = useContext(IIIFContext);
- const { coreMetadata } = fileSet;
- const isImageType = coreMetadata.mimeType?.includes("image");
- const isVideoType = coreMetadata.mimeType?.includes("video");
+ const { isImage, isMedia } = useFileSet();
 
- if (isImageType) {
+ if (isImage(fileSet)) {
  return <ImageButtons iiifServerUrl={iiifServerUrl} fileSet={fileSet} />;
  }
- if (isVideoType) {
+ if (isMedia(fileSet)) {
  return <MediaButtons fileSet={fileSet} />;
  }
 };

app/assets/js/components/Work/Fileset/ActionButtons/Access.test.jsx

@@ -0,0 +1,124 @@
+import React from "react";
+import WorkFilesetActionButtonsAccess from "@js/components/Work/Fileset/ActionButtons/Access";
+import { WorkProvider } from "@js/context/work-context";
+import { dcApiEndpointMock } from "@js/components/UI/ui.gql.mock";
+import { mockUser } from "@js/components/Auth/auth.gql.mock";
+import { renderWithRouterApollo } from "@js/services/testing-helpers";
+import { screen } from "@testing-library/react";
+import useIsAuthorized from "@js/hooks/useIsAuthorized";
+
+const mocks = [dcApiEndpointMock];
+
+jest.mock("@js/hooks/useIsAuthorized");
+useIsAuthorized.mockReturnValue({
+ user: mockUser,
+ isAuthorized: () => true,
+});
+
+const mockFileSet = {
+ __typename: "FileSet",
+ id: "120da9c2-abb3-4492-a62c-e4f0beb2bb6f",
+ accessionNumber: "Donohue_002_01",
+ coreMetadata: {
+ __typename: "FileSetCoreMetadata",
+ description: "Photo, man with two children",
+ label: "The label",
+ location: "s3://testing",
+ mimeType: "video/x-m4v",
+ originalFilename: "small.m4v",
+ digests: {
+ __typename: "Digests",
+ md5: "a036e18dad7b0deab383454ec1d32f87",
+ sha1: null,
+ sha256: null,
+ },
+ },
+ extractedMetadata: "",
+ insertedAt: "2023-05-04T20:31:27.097298Z",
+ role: {
+ __typename: "CodedTerm",
+ id: "A",
+ label: "Access",
+ },
+ representativeImageUrl: null,
+ streamingUrl: "https://testings/120da9c2-abb3-4492-a62c-e4f0beb2bb6f.m4v",
+ structuralMetadata: {
+ __typename: "FileSetStructuralMetadata",
+ type: "WEBVTT",
+ value:
+ "WEBVTT - Translation of that film I like\n\nNOTE\nThis translation was done by Kyle so that\nsome friends can watch it with their parents.\n\n1\n00:02:15.000 --> 00:02:20.000\n- Ta en kopp varmt te.\n- Det är inte varmt.\n\n2\n00:02:20.000 --> 00:02:25.000\n- Har en kopp te.\n- Det smakar som te.\n\nNOTE This last line may not translate well.\n\n3\n00:02:25.000 --> 00:02:30.000\n- Ta en kopp",
+ },
+ updatedAt: "2023-05-04T20:32:03.571707Z",
+};
+
+const initialState = {
+ activeMediaFileSet: mockFileSet,
+ webVttModal: {
+ fileSetId: null,
+ isOpen: false,
+ webVttString: "",
+ },
+ workType: "VIDEO",
+ dcApiToken: "abcZ4323823092mccas999",
+};
+
+describe("WorkFilesetActionButtonsAccess", () => {
+ it("renders a download button for a Video Work Fileset", () => {
+ renderWithRouterApollo(
+ <WorkProvider
+ initialState={{
+ ...initialState,
+ workType: "VIDEO",
+ }}
+ >
+ <WorkFilesetActionButtonsAccess fileSet={mockFileSet} />
+ </WorkProvider>,
+ { mocks },
+ );
+ expect(screen.getByTestId("download-fileset-button")).toBeInTheDocument();
+ });
+
+ it("renders a download button for an Audio Work Fileset", () => {
+ const audioFileSet = {
+ ...mockFileSet,
+ coreMetadata: {
+ ...mockFileSet.coreMetadata,
+ mimeType: "audio/mp3",
+ },
+ };
+ renderWithRouterApollo(
+ <WorkProvider
+ initialState={{
+ ...initialState,
+ workType: "AUDIO",
+ }}
+ >
+ <WorkFilesetActionButtonsAccess fileSet={audioFileSet} />
+ </WorkProvider>,
+ { mocks },
+ );
+ expect(screen.getByTestId("download-fileset-button")).toBeInTheDocument();
+ });
+
+ it("renders a download button for an Image Work Fileset", () => {
+ const imageFileSet = {
+ ...mockFileSet,
+ coreMetadata: {
+ ...mockFileSet.coreMetadata,
+ mimeType: "image/jpeg",
+ },
+ };
+ renderWithRouterApollo(
+ <WorkProvider
+ initialState={{
+ ...initialState,
+ workType: "IMAGE",
+ }}
+ >
+ <WorkFilesetActionButtonsAccess fileSet={imageFileSet} />
+ </WorkProvider>,
+ { mocks },
+ );
+ expect(screen.getByTestId("download-image-fileset")).toBeInTheDocument();
+ });
+});

app/assets/js/components/Work/Fileset/ActionButtons/MediaButtons.test.jsx

@@ -1,12 +1,11 @@
-import { screen } from "@testing-library/react";
-
 import { MediaButtons } from "./Access";
 import React from "react";
 import { WorkProvider } from "@js/context/work-context";
-import { mockUser } from "@js/components/Auth/auth.gql.mock";
-import useIsAuthorized from "@js/hooks/useIsAuthorized";
 import { dcApiEndpointMock } from "@js/components/UI/ui.gql.mock";
+import { mockUser } from "@js/components/Auth/auth.gql.mock";
 import { renderWithRouterApollo } from "@js/services/testing-helpers";
+import { screen } from "@testing-library/react";
+import useIsAuthorized from "@js/hooks/useIsAuthorized";
 
 const mocks = [dcApiEndpointMock];