Skip to content

Commit 9370c49

Browse files
adamjarlingadamjarling
authored
Merge pull request #298 from nulib/deploy/staging
Production push
2 parents a8689e8 + 0a3df0d commit 9370c49

39 files changed

+841
-406
lines changed

‎components/Clover/SliderWrapper.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ const StyledSliderIIIFWrapper = styled("div", {
1111
position: "relative",
1212
zIndex: "0",
1313

14+
".clover-slider-header-view-all": {
15+
color: "$white",
16+
},
17+
1418
".swiper-slide[data-type='collection']": {
1519
display: "none",
1620
},

‎components/Clover/ViewerWrapper.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@ import {
22
AnnouncementContent,
33
ViewerWrapperStyled,
44
} from "@/components/Clover/ViewerWrapper.styled";
5+
56
import Announcement from "@/components/Shared/Announcement";
67
import { IconInfo } from "@/components/Shared/SVG/Icons";
78
import React from "react";
89
import { UserContext } from "@/context/user-context";
9-
import { type Work } from "@nulib/dcapi-types";
10+
import type { ViewerConfigOptions } from "@samvera/clover-iiif";
11+
import type { Work } from "@nulib/dcapi-types";
1012
import dynamic from "next/dynamic";
11-
import { useRouter } from "next/router";
1213

1314
export const CloverViewer = dynamic(
1415
() => import("@samvera/clover-iiif/viewer"),
@@ -20,14 +21,15 @@ export const CloverViewer = dynamic(
2021
interface WrapperProps {
2122
manifestId: Work["iiif_manifest"];
2223
isWorkRestricted?: boolean;
24+
viewerOptions?: ViewerConfigOptions;
2325
}
2426

2527
const WorkViewerWrapper: React.FC<WrapperProps> = ({
2628
manifestId,
2729
isWorkRestricted,
30+
viewerOptions = {},
2831
}) => {
2932
const userAuth = React.useContext(UserContext);
30-
const router = useRouter();
3133

3234
const customTheme = {
3335
colors: {
@@ -47,28 +49,28 @@ const WorkViewerWrapper: React.FC<WrapperProps> = ({
4749
},
4850
};
4951

50-
const options = {
52+
const defaultOptions: ViewerConfigOptions = {
5153
canvasBackgroundColor: "$gray6",
5254
canvasHeight: "640px",
55+
informationPanel: {
56+
open: false,
57+
renderAbout: false,
58+
renderToggle: false,
59+
},
5360
openSeadragon: {
5461
gestureSettingsMouse: {
5562
scrollToZoom: false,
5663
},
5764
},
58-
renderAbout: false,
5965
showIIIFBadge: false,
60-
showInformationToggle: false,
6166
showTitle: false,
6267
withCredentials: true,
6368
};
6469

65-
// On an "embedded-viewer" route, show the metadata drawer in the viewer
66-
if (router.pathname === "/embedded-viewer/[manifestId]") {
67-
options["renderAbout"] = true;
68-
options["showInformationToggle"] = true;
69-
options["showIIIFBadge"] = true;
70-
options["showTitle"] = true;
71-
}
70+
const options = {
71+
...defaultOptions,
72+
...viewerOptions,
73+
};
7274

7375
return (
7476
<ViewerWrapperStyled data-testid="work-viewer-wrapper">

‎components/Collection/Item/Item.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import {
44
ItemImageWrapper,
55
ItemStyled,
66
} from "@/components/Collection/Item/Item.styled";
7-
import { type CollectionListShape } from "@/lib/collection-helpers";
7+
8+
import type { CollectionListShape } from "@/lib/collection-helpers";
89
import Figure from "@/components/Figure/Figure";
910
import Heading from "@/components/Heading/Heading";
1011
import Link from "next/link";

‎components/Facets/WorkType/RadioGroup.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import * as Radio from "@radix-ui/react-radio-group";
2+
23
import { Highlight, StyledWorkType, Wrapper } from "./WorkType.styled";
34
import { MouseEvent, useRef, useState } from "react";
5+
46
import { FACETS_WORK_TYPE } from "@/lib/constants/facets-model";
5-
import { type WorkTypeWithAll } from "@/components/Facets/WorkType/WorkType";
7+
import type { WorkTypeWithAll } from "@/components/Facets/WorkType/WorkType";
68

79
interface RadioGroupProps {
810
currentValue: WorkTypeWithAll;

‎components/SharedLink/SharedLink.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import ErrorFallback from "@/components/Shared/ErrorFallback";
55
import { Manifest } from "@iiif/presentation-3";
66
import React from "react";
77
import RelatedItems from "@/components/Shared/RelatedItems";
8-
import { type Work } from "@nulib/dcapi-types";
8+
import type { Work } from "@nulib/dcapi-types";
99
import WorkTopInfo from "@/components/Work/TopInfo";
1010
import WorkViewerWrapper from "@/components/Clover/ViewerWrapper";
1111
import { formatDateLong } from "@/lib/utils/date-helpers";

‎components/Work/ActionsDialog/ActionsDialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ActionsDialog } from "@/components/Work/TopInfo";
2-
import DownloadAndShare from "@/components/Work/ActionsDialog/DownloadAndShare";
2+
import DownloadAndShare from "@/components/Work/ActionsDialog/DownloadAndShare/DownloadAndShare";
33
import React from "react";
44
import SharedDialog from "@/components/Shared/Dialog";
55
import WorkDialogCite from "@/components/Work/ActionsDialog/Cite";

‎components/Work/ActionsDialog/DownloadAndShare.styled.ts‎ renamed to ‎components/Work/ActionsDialog/DownloadAndShare/DownloadAndShare.styled.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,56 @@ const ItemStyled = styled("div", {
111111
margin: "$4 0 0",
112112
});
113113

114+
const LayoutImg = styled("img", {
115+
width: "100%",
116+
opacity: "0.8",
117+
marginBottom: "$gr3",
118+
});
119+
120+
const EmbedLayoutPreview = styled("div", {
121+
border: "1px solid $black10",
122+
height: "250px",
123+
position: "relative",
124+
display: "flex",
125+
width: "100%",
126+
flexDirection: "column",
127+
marginBottom: "$gr3",
128+
});
129+
130+
const EmbedLayoutPreviewTitle = styled("div", {
131+
padding: "$gr2",
132+
display: "flex",
133+
width: "100%",
134+
alignItems: "center",
135+
justifyContent: "space-between",
136+
137+
"& span:last-of-type": {
138+
borderRadius: "30px",
139+
width: "$gr5",
140+
height: "$gr3",
141+
backgroundColor: "$black20",
142+
},
143+
});
144+
145+
const EmbedLayoutPreviewContent = styled("div", {
146+
flexGrow: "1",
147+
display: "flex",
148+
width: "100%",
149+
150+
"& > span": {
151+
display: "block",
152+
backgroundSize: "cover",
153+
height: "100%",
154+
width: "100%",
155+
},
156+
});
157+
158+
const EmbedLayoutPreviewInfoPanel = styled("div", {
159+
backgroundColor: "$black10",
160+
padding: "$gr3",
161+
width: "$gr9",
162+
});
163+
114164
const ShareURL = styled(EmbedHTML, {
115165
"> a": {
116166
fontSize: "$gr3",
@@ -136,12 +186,17 @@ const ShareURLActions = styled(EmbedHTMLActionRow, {
136186
export {
137187
EmbedHTML,
138188
EmbedHTMLActionRow,
189+
EmbedLayoutPreview,
190+
EmbedLayoutPreviewContent,
191+
EmbedLayoutPreviewTitle,
192+
EmbedLayoutPreviewInfoPanel,
139193
EmbedViewer,
140194
ItemActions,
141195
ItemContent,
142196
ItemRow,
143197
ItemStyled,
144198
ItemThumbnail,
199+
LayoutImg,
145200
ShareURL,
146201
ShareURLActions,
147202
};

‎components/Work/ActionsDialog/DownloadAndShare.test.tsx‎ renamed to ‎components/Work/ActionsDialog/DownloadAndShare/DownloadAndShare.test.tsx‎

File renamed without changes.

‎components/Work/ActionsDialog/DownloadAndShare/DownloadAndShare.tsx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import {
2+
ActionsDialogStyled,
3+
Content,
4+
} from "@/components/Work/ActionsDialog/ActionsDialog.styled";
5+
import React, { useEffect, useState } from "react";
6+
7+
import ActionsDialogAside from "@/components/Work/ActionsDialog/Aside";
8+
import { Canvas } from "@iiif/presentation-3";
9+
import EmbedImages from "./EmbedImages";
10+
import EmbedViewer from "@/components/Work/ActionsDialog/DownloadAndShare/EmbedViewer";
11+
import IIIFManifest from "./IIIFManifest";
12+
import SharedSocial from "@/components/Shared/Social";
13+
import { getAnnotationBodyType } from "@/lib/iiif/manifest-helpers";
14+
import { useRouter } from "next/router";
15+
import useWorkAuth from "@/hooks/useWorkAuth";
16+
import { useWorkState } from "@/context/work-context";
17+
18+
export const embedWarningMessage =
19+
"Embed is not available for works restricted to the Northwestern University community";
20+
21+
const DownloadAndShare: React.FC = () => {
22+
const { workState } = useWorkState();
23+
const { manifest, work } = workState;
24+
const [imageCanvases, setImageCanvases] = useState<Canvas[]>([]);
25+
const router = useRouter();
26+
const isSharedLinkPage = router.pathname.includes("/shared");
27+
const { isUserLoggedIn, isWorkInstitution, isWorkRestricted } =
28+
useWorkAuth(work);
29+
30+
const showEmbedWarning = Boolean(
31+
isWorkRestricted || (isUserLoggedIn && isWorkInstitution)
32+
);
33+
34+
useEffect(() => {
35+
if (manifest?.items && Array.isArray(manifest?.items)) {
36+
const imageCanvases = manifest.items.filter(
37+
(item) => getAnnotationBodyType(item) === "Image"
38+
);
39+
setImageCanvases(imageCanvases);
40+
}
41+
}, [manifest]);
42+
43+
if (!manifest || !work) return <></>;
44+
45+
return (
46+
<ActionsDialogStyled>
47+
<ActionsDialogAside>
48+
{work.title && work.thumbnail && (
49+
<SharedSocial
50+
title={work.title}
51+
media={work.thumbnail}
52+
description={work.description}
53+
/>
54+
)}
55+
</ActionsDialogAside>
56+
<Content>
57+
{!isSharedLinkPage && <IIIFManifest manifest={manifest} work={work} />}
58+
59+
<EmbedViewer
60+
manifestId={work.iiif_manifest}
61+
showEmbedWarning={showEmbedWarning}
62+
work={work}
63+
/>
64+
65+
{imageCanvases.length > 0 && (
66+
<EmbedImages
67+
manifest={manifest}
68+
showEmbedWarning={showEmbedWarning}
69+
work={work}
70+
/>
71+
)}
72+
</Content>
73+
</ActionsDialogStyled>
74+
);
75+
};
76+
77+
export default DownloadAndShare;

0 commit comments

Comments
 (0)