Added lighbox using react-image-lightbox
This commit is contained in:
DrMint
parent
f4c2e2cba5
commit
8b28e794b4
96
package-lock.json
generated
96
package-lock.json
generated
@ -16,6 +16,7 @@
|
||||
"next": "^12.1.0",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"react-image-lightbox": "^5.1.4",
|
||||
"react-swipeable": "^6.2.0",
|
||||
"turndown": "^7.1.1"
|
||||
},
|
||||
@ -1707,6 +1708,11 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/exenv": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
|
||||
"integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
|
||||
},
|
||||
"node_modules/fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
@ -2982,7 +2988,6 @@
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
@ -3055,11 +3060,46 @@
|
||||
"react": "17.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/react-image-lightbox": {
|
||||
"version": "5.1.4",
|
||||
"resolved": "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.4.tgz",
|
||||
"integrity": "sha512-kTiAODz091bgT7SlWNHab0LSMZAPJtlNWDGKv7pLlLY1krmf7FuG1zxE0wyPpeA8gPdwfr3cu6sPwZRqWsc3Eg==",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.7.2",
|
||||
"react-modal": "^3.11.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "16.x || 17.x",
|
||||
"react-dom": "16.x || 17.x"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/react-lifecycles-compat": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"node_modules/react-modal": {
|
||||
"version": "3.14.4",
|
||||
"resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.14.4.tgz",
|
||||
"integrity": "sha512-8surmulejafYCH9wfUmFyj4UfbSJwjcgbS9gf3oOItu4Hwd6ivJyVBETI0yHRhpJKCLZMUtnhzk76wXTsNL6Qg==",
|
||||
"dependencies": {
|
||||
"exenv": "^1.2.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-lifecycles-compat": "^3.0.0",
|
||||
"warning": "^4.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^0.14.0 || ^15.0.0 || ^16 || ^17",
|
||||
"react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17"
|
||||
}
|
||||
},
|
||||
"node_modules/react-swipeable": {
|
||||
"version": "6.2.0",
|
||||
@ -3577,6 +3617,14 @@
|
||||
"integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
@ -4858,6 +4906,11 @@
|
||||
"integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
|
||||
"dev": true
|
||||
},
|
||||
"exenv": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
|
||||
"integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
|
||||
},
|
||||
"fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
@ -5761,7 +5814,6 @@
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
@ -5805,11 +5857,35 @@
|
||||
"scheduler": "^0.20.2"
|
||||
}
|
||||
},
|
||||
"react-image-lightbox": {
|
||||
"version": "5.1.4",
|
||||
"resolved": "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.4.tgz",
|
||||
"integrity": "sha512-kTiAODz091bgT7SlWNHab0LSMZAPJtlNWDGKv7pLlLY1krmf7FuG1zxE0wyPpeA8gPdwfr3cu6sPwZRqWsc3Eg==",
|
||||
"requires": {
|
||||
"prop-types": "^15.7.2",
|
||||
"react-modal": "^3.11.1"
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"react-lifecycles-compat": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"react-modal": {
|
||||
"version": "3.14.4",
|
||||
"resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.14.4.tgz",
|
||||
"integrity": "sha512-8surmulejafYCH9wfUmFyj4UfbSJwjcgbS9gf3oOItu4Hwd6ivJyVBETI0yHRhpJKCLZMUtnhzk76wXTsNL6Qg==",
|
||||
"requires": {
|
||||
"exenv": "^1.2.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-lifecycles-compat": "^3.0.0",
|
||||
"warning": "^4.0.3"
|
||||
}
|
||||
},
|
||||
"react-swipeable": {
|
||||
"version": "6.2.0",
|
||||
@ -6171,6 +6247,14 @@
|
||||
"integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
|
||||
"dev": true
|
||||
},
|
||||
"warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
"next": "^12.1.0",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"react-image-lightbox": "^5.1.4",
|
||||
"react-swipeable": "^6.2.0",
|
||||
"turndown": "^7.1.1"
|
||||
},
|
||||
|
||||
@ -111,6 +111,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
|
||||
|
||||
return (
|
||||
<div
|
||||
id="MyAppLayout"
|
||||
className={`${
|
||||
appLayout.darkMode ? "set-theme-dark" : "set-theme-light"
|
||||
} ${
|
||||
|
||||
@ -1,31 +1,36 @@
|
||||
import { StrapiImage } from "graphql/operations-types";
|
||||
import { Dispatch, SetStateAction } from "react";
|
||||
import Img, { ImageQuality } from "./Img";
|
||||
import Popup from "./Popup";
|
||||
import Lightbox from "react-image-lightbox";
|
||||
|
||||
export type LightBoxProps = {
|
||||
setState:
|
||||
| Dispatch<SetStateAction<boolean>>
|
||||
| Dispatch<SetStateAction<boolean | undefined>>;
|
||||
state: boolean;
|
||||
image?: StrapiImage;
|
||||
images: string[];
|
||||
index: number;
|
||||
setIndex: Dispatch<SetStateAction<number>>;
|
||||
};
|
||||
|
||||
export default function LightBox(props: LightBoxProps): JSX.Element {
|
||||
const { state, setState, images, index, setIndex } = props;
|
||||
return (
|
||||
<Popup
|
||||
setState={props.setState}
|
||||
state={props.state}
|
||||
fillViewport
|
||||
hideBackground
|
||||
>
|
||||
<Img
|
||||
className="rounded-lg"
|
||||
image={props.image}
|
||||
layout="fill"
|
||||
objectFit="contain"
|
||||
quality={ImageQuality.Large}
|
||||
/>
|
||||
</Popup>
|
||||
<>
|
||||
{state && (
|
||||
<Lightbox
|
||||
reactModalProps={{
|
||||
parentSelector: () => document.getElementById("MyAppLayout"),
|
||||
}}
|
||||
mainSrc={images[index]}
|
||||
prevSrc={index > 0 ? images[index - 1] : undefined}
|
||||
nextSrc={index < images.length ? images[index + 1] : undefined}
|
||||
onMovePrevRequest={() => setIndex(index - 1)}
|
||||
onMoveNextRequest={() => setIndex(index + 1)}
|
||||
imageCaption=""
|
||||
imageTitle=""
|
||||
onCloseRequest={() => setState(false)}
|
||||
imagePadding={50}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import HorizontalLine from "components/HorizontalLine";
|
||||
import Img, { ImageQuality } from "components/Img";
|
||||
import Img, { getAssetURL, ImageQuality } from "components/Img";
|
||||
import InsetBox from "components/InsetBox";
|
||||
import LightBox from "components/LightBox";
|
||||
import ToolTip from "components/ToolTip";
|
||||
import { useAppLayout } from "contexts/AppLayoutContext";
|
||||
import Markdown from "markdown-to-jsx";
|
||||
import { slugify } from "queries/helpers";
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
|
||||
type ScenBreakProps = {
|
||||
className?: string;
|
||||
@ -16,233 +17,262 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
|
||||
const appLayout = useAppLayout();
|
||||
const text = preprocessMarkDawn(props.text);
|
||||
|
||||
const [lightboxOpen, setLightboxOpen] = useState(false);
|
||||
const [lightboxImages, setLightboxImages] = useState([""]);
|
||||
const [lightboxIndex, setLightboxIndex] = useState(0);
|
||||
|
||||
if (text) {
|
||||
return (
|
||||
<Markdown
|
||||
className={`formatted ${props.className}`}
|
||||
options={{
|
||||
slugify: slugify,
|
||||
overrides: {
|
||||
h1: {
|
||||
component: (props: {
|
||||
id: string;
|
||||
style: React.CSSProperties;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-row place-items-center place-content-center gap-3">
|
||||
<h1 id={props.id} style={props.style}>
|
||||
<>
|
||||
<LightBox
|
||||
state={lightboxOpen}
|
||||
setState={setLightboxOpen}
|
||||
images={lightboxImages}
|
||||
index={lightboxIndex}
|
||||
setIndex={setLightboxIndex}
|
||||
/>
|
||||
<Markdown
|
||||
className={`formatted ${props.className}`}
|
||||
options={{
|
||||
slugify: slugify,
|
||||
overrides: {
|
||||
h1: {
|
||||
component: (props: {
|
||||
id: string;
|
||||
style: React.CSSProperties;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-row place-items-center place-content-center gap-3">
|
||||
<h1 id={props.id} style={props.style}>
|
||||
{props.children}
|
||||
</h1>
|
||||
<HeaderToolTip id={props.id} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
h2: {
|
||||
component: (props: {
|
||||
id: string;
|
||||
style: React.CSSProperties;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-row place-items-center place-content-center gap-3">
|
||||
<h2 id={props.id} style={props.style}>
|
||||
{props.children}
|
||||
</h2>
|
||||
<HeaderToolTip id={props.id} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
h3: {
|
||||
component: (props: {
|
||||
id: string;
|
||||
style: React.CSSProperties;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-row place-items-center place-content-center gap-3">
|
||||
<h3 id={props.id} style={props.style}>
|
||||
{props.children}
|
||||
</h3>
|
||||
<HeaderToolTip id={props.id} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
h4: {
|
||||
component: (props: {
|
||||
id: string;
|
||||
style: React.CSSProperties;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-row place-items-center place-content-center gap-3">
|
||||
<h4 id={props.id} style={props.style}>
|
||||
{props.children}
|
||||
</h4>
|
||||
<HeaderToolTip id={props.id} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
h5: {
|
||||
component: (props: {
|
||||
id: string;
|
||||
style: React.CSSProperties;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-row place-items-center place-content-center gap-3">
|
||||
<h5 id={props.id} style={props.style}>
|
||||
{props.children}
|
||||
</h5>
|
||||
<HeaderToolTip id={props.id} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
h6: {
|
||||
component: (props: {
|
||||
id: string;
|
||||
style: React.CSSProperties;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-row place-items-center place-content-center gap-3">
|
||||
<h6 id={props.id} style={props.style}>
|
||||
{props.children}
|
||||
</h6>
|
||||
<HeaderToolTip id={props.id} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
Sep: {
|
||||
component: () => {
|
||||
return <div className="my-24"></div>;
|
||||
},
|
||||
},
|
||||
SceneBreak: {
|
||||
component: (props: { id: string }) => {
|
||||
return (
|
||||
<div
|
||||
id={props.id}
|
||||
className={
|
||||
"h-0 text-center text-3xl text-dark mt-16 mb-20"
|
||||
}
|
||||
>
|
||||
* * *
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
player: {
|
||||
component: () => {
|
||||
return (
|
||||
<span className="text-dark opacity-70">
|
||||
{appLayout.playerName ? appLayout.playerName : "<player>"}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
Transcript: {
|
||||
component: (props) => {
|
||||
return (
|
||||
<div className="grid grid-cols-[auto_1fr] mobile:grid-cols-1 gap-x-6 gap-y-2">
|
||||
{props.children}
|
||||
</h1>
|
||||
<HeaderToolTip id={props.id} />
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
h2: {
|
||||
component: (props: {
|
||||
id: string;
|
||||
style: React.CSSProperties;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-row place-items-center place-content-center gap-3">
|
||||
<h2 id={props.id} style={props.style}>
|
||||
Line: {
|
||||
component: (props) => {
|
||||
return (
|
||||
<>
|
||||
<strong className="text-dark opacity-60 mobile:!-mb-4">
|
||||
{props.name}
|
||||
</strong>
|
||||
<p className="whitespace-pre-line">{props.children}</p>
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
InsetBox: {
|
||||
component: (props) => {
|
||||
return (
|
||||
<InsetBox className="my-12">{props.children}</InsetBox>
|
||||
);
|
||||
},
|
||||
},
|
||||
li: {
|
||||
component: (props: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<li
|
||||
className={
|
||||
props.children &&
|
||||
props.children?.toString().length > 100
|
||||
? "my-4"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
{props.children}
|
||||
</h2>
|
||||
<HeaderToolTip id={props.id} />
|
||||
</div>
|
||||
);
|
||||
</li>
|
||||
);
|
||||
},
|
||||
},
|
||||
Highlight: {
|
||||
component: (props: { children: React.ReactNode }) => {
|
||||
return <mark>{props.children}</mark>;
|
||||
},
|
||||
},
|
||||
footer: {
|
||||
component: (props: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<>
|
||||
<HorizontalLine />
|
||||
<div>{props.children}</div>
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
img: {
|
||||
component: (props: {
|
||||
alt: string;
|
||||
src: string;
|
||||
width?: number;
|
||||
height?: number;
|
||||
caption?: string;
|
||||
name?: string;
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className="my-8 cursor-pointer"
|
||||
onClick={() => {
|
||||
setLightboxOpen(true);
|
||||
setLightboxImages([
|
||||
props.src.startsWith("/uploads/")
|
||||
? getAssetURL(props.src, ImageQuality.Large)
|
||||
: props.src,
|
||||
]);
|
||||
setLightboxIndex(0);
|
||||
}}
|
||||
>
|
||||
{props.src.startsWith("/uploads/") ? (
|
||||
<div className="relative w-full aspect-video">
|
||||
<Img
|
||||
image={{
|
||||
__typename: "UploadFile",
|
||||
alternativeText: props.alt,
|
||||
url: props.src,
|
||||
width: props.width || 1500,
|
||||
height: props.height || 1000,
|
||||
caption: props.caption || "",
|
||||
name: props.name || "",
|
||||
}}
|
||||
layout="fill"
|
||||
objectFit="contain"
|
||||
quality={ImageQuality.Medium}
|
||||
></Img>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid place-content-center">
|
||||
<img {...props} className="max-h-[50vh] " />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
h3: {
|
||||
component: (props: {
|
||||
id: string;
|
||||
style: React.CSSProperties;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-row place-items-center place-content-center gap-3">
|
||||
<h3 id={props.id} style={props.style}>
|
||||
{props.children}
|
||||
</h3>
|
||||
<HeaderToolTip id={props.id} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
h4: {
|
||||
component: (props: {
|
||||
id: string;
|
||||
style: React.CSSProperties;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-row place-items-center place-content-center gap-3">
|
||||
<h4 id={props.id} style={props.style}>
|
||||
{props.children}
|
||||
</h4>
|
||||
<HeaderToolTip id={props.id} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
h5: {
|
||||
component: (props: {
|
||||
id: string;
|
||||
style: React.CSSProperties;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-row place-items-center place-content-center gap-3">
|
||||
<h5 id={props.id} style={props.style}>
|
||||
{props.children}
|
||||
</h5>
|
||||
<HeaderToolTip id={props.id} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
h6: {
|
||||
component: (props: {
|
||||
id: string;
|
||||
style: React.CSSProperties;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-row place-items-center place-content-center gap-3">
|
||||
<h6 id={props.id} style={props.style}>
|
||||
{props.children}
|
||||
</h6>
|
||||
<HeaderToolTip id={props.id} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
Sep: {
|
||||
component: () => {
|
||||
return <div className="my-24"></div>;
|
||||
},
|
||||
},
|
||||
SceneBreak: {
|
||||
component: (props: { id: string }) => {
|
||||
return (
|
||||
<div
|
||||
id={props.id}
|
||||
className={"h-0 text-center text-3xl text-dark mt-16 mb-20"}
|
||||
>
|
||||
* * *
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
player: {
|
||||
component: () => {
|
||||
return (
|
||||
<span className="text-dark opacity-70">
|
||||
{appLayout.playerName ? appLayout.playerName : "<player>"}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
Transcript: {
|
||||
component: (props) => {
|
||||
return (
|
||||
<div className="grid grid-cols-[auto_1fr] mobile:grid-cols-1 gap-x-6 gap-y-2">
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
Line: {
|
||||
component: (props) => {
|
||||
return (
|
||||
<>
|
||||
<strong className="text-dark opacity-60 mobile:!-mb-4">
|
||||
{props.name}
|
||||
</strong>
|
||||
<p className="whitespace-pre-line">{props.children}</p>
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
InsetBox: {
|
||||
component: (props) => {
|
||||
return <InsetBox className="my-12">{props.children}</InsetBox>;
|
||||
},
|
||||
},
|
||||
li: {
|
||||
component: (props: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<li
|
||||
className={
|
||||
props.children && props.children?.toString().length > 100
|
||||
? "my-4"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
{props.children}
|
||||
</li>
|
||||
);
|
||||
},
|
||||
},
|
||||
Highlight: {
|
||||
component: (props: { children: React.ReactNode }) => {
|
||||
return <mark>{props.children}</mark>;
|
||||
},
|
||||
},
|
||||
footer: {
|
||||
component: (props: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<>
|
||||
<HorizontalLine />
|
||||
<div>{props.children}</div>
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
img: {
|
||||
component: (props: {
|
||||
alt: string;
|
||||
src: string;
|
||||
width?: number;
|
||||
height?: number;
|
||||
caption?: string;
|
||||
name?: string;
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
{props.src.startsWith("/uploads/") ? (
|
||||
<div className="relative w-full aspect-video my-8">
|
||||
<Img
|
||||
image={{
|
||||
__typename: "UploadFile",
|
||||
alternativeText: props.alt,
|
||||
url: props.src,
|
||||
width: props.width || 1500,
|
||||
height: props.height || 1000,
|
||||
caption: props.caption || "",
|
||||
name: props.name || "",
|
||||
}}
|
||||
layout="fill"
|
||||
objectFit="contain"
|
||||
quality={ImageQuality.Medium}
|
||||
></Img>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid place-content-center my-8">
|
||||
<img {...props} className="max-h-[50vh] " />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</Markdown>
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</Markdown>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return <></>;
|
||||
@ -334,3 +364,6 @@ function markdawnHeadersParser(
|
||||
visitedSlugs.push(newSlug);
|
||||
return `<${headerLevels[headerLevel]} id="${newSlug}">${lineText}</${headerLevels[headerLevel]}>`;
|
||||
}
|
||||
function getAssetUrl(): React.SetStateAction<string[]> {
|
||||
throw new Error("Function not implemented.");
|
||||
}
|
||||
|
||||
@ -7,7 +7,6 @@ import {
|
||||
Enum_Componentmetadatabooks_Binding_Type,
|
||||
Enum_Componentmetadatabooks_Page_Order,
|
||||
GetLibraryItemQuery,
|
||||
StrapiImage,
|
||||
} from "graphql/operations-types";
|
||||
import {
|
||||
convertMmToInch,
|
||||
@ -30,13 +29,12 @@ import Button from "components/Button";
|
||||
import AppLayout from "components/AppLayout";
|
||||
import LibraryItemsPreview from "components/Library/LibraryItemsPreview";
|
||||
import InsetBox from "components/InsetBox";
|
||||
import Img, { ImageQuality } from "components/Img";
|
||||
import Img, { getAssetURL, ImageQuality } from "components/Img";
|
||||
import { useAppLayout } from "contexts/AppLayoutContext";
|
||||
import { useRouter } from "next/router";
|
||||
import ContentTOCLine from "components/Library/ContentTOCLine";
|
||||
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
|
||||
import { useState } from "react";
|
||||
import Popup from "components/Popup";
|
||||
import LightBox from "components/LightBox";
|
||||
|
||||
interface LibrarySlugProps extends AppStaticProps {
|
||||
@ -56,8 +54,9 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||
|
||||
sortContent(item.contents);
|
||||
|
||||
const [lightboxOpened, setLightboxOpened] = useState(false);
|
||||
const [lightboxImage, setLightboxImage] = useState<StrapiImage>();
|
||||
const [lightboxOpen, setLightboxOpen] = useState(false);
|
||||
const [lightboxImages, setLightboxImages] = useState([""]);
|
||||
const [lightboxIndex, setLightboxIndex] = useState(0);
|
||||
|
||||
const subPanel = (
|
||||
<SubPanel>
|
||||
@ -112,9 +111,11 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||
const contentPanel = (
|
||||
<ContentPanel width={ContentPanelWidthSizes.large}>
|
||||
<LightBox
|
||||
image={lightboxImage}
|
||||
setState={setLightboxOpened}
|
||||
state={lightboxOpened}
|
||||
state={lightboxOpen}
|
||||
setState={setLightboxOpen}
|
||||
images={lightboxImages}
|
||||
index={lightboxIndex}
|
||||
setIndex={setLightboxIndex}
|
||||
/>
|
||||
|
||||
<ReturnButton
|
||||
@ -128,16 +129,20 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||
<div
|
||||
className="drop-shadow-shade-xl w-full h-[50vh] mobile:h-[60vh] desktop:mb-16 relative cursor-pointer"
|
||||
onClick={() => {
|
||||
if (item.thumbnail.data) {
|
||||
setLightboxImage(item.thumbnail.data.attributes);
|
||||
setLightboxOpened(true);
|
||||
}
|
||||
setLightboxOpen(true);
|
||||
setLightboxImages([
|
||||
getAssetURL(
|
||||
item.thumbnail.data.attributes.url,
|
||||
ImageQuality.Large
|
||||
),
|
||||
]);
|
||||
setLightboxIndex(0);
|
||||
}}
|
||||
>
|
||||
{item.thumbnail.data ? (
|
||||
<Img
|
||||
image={item.thumbnail.data.attributes}
|
||||
quality={ImageQuality.Medium}
|
||||
quality={ImageQuality.Large}
|
||||
layout="fill"
|
||||
objectFit="contain"
|
||||
priority
|
||||
@ -177,13 +182,21 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||
<div id="gallery" className="grid place-items-center gap-8 w-full">
|
||||
<h2 className="text-2xl">{langui.gallery}</h2>
|
||||
<div className="grid w-full gap-8 items-end grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
|
||||
{item.gallery.data.map((galleryItem) => (
|
||||
{item.gallery.data.map((galleryItem, index) => (
|
||||
<div
|
||||
key={galleryItem.id}
|
||||
className="relative aspect-square hover:scale-[1.02] transition-transform cursor-pointer"
|
||||
onClick={() => {
|
||||
setLightboxImage(galleryItem.attributes);
|
||||
setLightboxOpened(true);
|
||||
setLightboxOpen(true);
|
||||
setLightboxImages(
|
||||
item.gallery.data.map((image) => {
|
||||
return getAssetURL(
|
||||
image.attributes.url,
|
||||
ImageQuality.Large
|
||||
);
|
||||
})
|
||||
);
|
||||
setLightboxIndex(index);
|
||||
}}
|
||||
>
|
||||
<div className="bg-light absolute inset-0 rounded-lg drop-shadow-shade-md"></div>
|
||||
|
||||
296
src/tailwind.css
296
src/tailwind.css
@ -143,6 +143,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* TIPPY */
|
||||
|
||||
.tippy-box[data-animation="fade"][data-state="hidden"] {
|
||||
@apply opacity-0;
|
||||
}
|
||||
@ -205,3 +207,297 @@
|
||||
.tippy-content {
|
||||
@apply relative px-6 py-4 z-10;
|
||||
}
|
||||
|
||||
/* LIGHTBOX */
|
||||
|
||||
@keyframes closeWindow {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ril__outer {
|
||||
@apply h-full w-full touch-none outline-none bg-shade bg-opacity-50 [backdrop-filter:blur(2px)];
|
||||
}
|
||||
|
||||
.ril__outerClosing {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ril__inner {
|
||||
@apply absolute inset-0;
|
||||
}
|
||||
|
||||
.ril__image,
|
||||
.ril__imagePrev,
|
||||
.ril__imageNext {
|
||||
@apply absolute inset-0 m-auto max-w-none touch-none;
|
||||
}
|
||||
|
||||
.ril__image {
|
||||
@apply drop-shadow-shade-2xl;
|
||||
}
|
||||
|
||||
.ril__navButtons {
|
||||
@apply absolute inset-y-0 w-5 h-8 px-10 py-8 cursor-pointer m-auto;
|
||||
}
|
||||
.ril__navButtons:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.ril__navButtons:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.ril__navButtonPrev {
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.2)
|
||||
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==")
|
||||
no-repeat center;
|
||||
}
|
||||
|
||||
.ril__navButtonNext {
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.2)
|
||||
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+")
|
||||
no-repeat center;
|
||||
}
|
||||
|
||||
.ril__caption,
|
||||
.ril__toolbar {
|
||||
@apply bg-shade bg-opacity-50 absolute inset-x-0 flex justify-between;
|
||||
}
|
||||
|
||||
.ril__caption {
|
||||
bottom: 0;
|
||||
max-height: 150px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ril__captionContent {
|
||||
padding: 10px 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ril__toolbar {
|
||||
@apply top-0 h-12;
|
||||
}
|
||||
|
||||
.ril__toolbarSide {
|
||||
height: 50px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ril__toolbarLeftSide {
|
||||
padding-left: 20px;
|
||||
padding-right: 0;
|
||||
flex: 0 1 auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ril__toolbarRightSide {
|
||||
padding-left: 0;
|
||||
padding-right: 20px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.ril__toolbarItem {
|
||||
display: inline-block;
|
||||
line-height: 50px;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
font-size: 120%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ril__toolbarItemChild {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ril__builtinButton {
|
||||
width: 40px;
|
||||
height: 35px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.ril__builtinButton:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.ril__builtinButton:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.ril__builtinButtonDisabled {
|
||||
cursor: default;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.ril__builtinButtonDisabled:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.ril__closeButton {
|
||||
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=")
|
||||
no-repeat center;
|
||||
}
|
||||
|
||||
.ril__zoomInButton {
|
||||
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+")
|
||||
no-repeat center;
|
||||
}
|
||||
|
||||
.ril__zoomOutButton {
|
||||
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=")
|
||||
no-repeat center;
|
||||
}
|
||||
|
||||
.ril__outerAnimating {
|
||||
animation-name: closeWindow;
|
||||
}
|
||||
|
||||
@keyframes pointFade {
|
||||
0%,
|
||||
19.999%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.ril__loadingCircle {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ril__loadingCirclePoint {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.ril__loadingCirclePoint::before {
|
||||
content: "";
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 11%;
|
||||
height: 30%;
|
||||
background-color: #fff;
|
||||
border-radius: 30%;
|
||||
animation: pointFade 800ms infinite ease-in-out both;
|
||||
}
|
||||
.ril__loadingCirclePoint:nth-of-type(1) {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
.ril__loadingCirclePoint:nth-of-type(7) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.ril__loadingCirclePoint:nth-of-type(1)::before,
|
||||
.ril__loadingCirclePoint:nth-of-type(7)::before {
|
||||
animation-delay: -800ms;
|
||||
}
|
||||
.ril__loadingCirclePoint:nth-of-type(2) {
|
||||
transform: rotate(30deg);
|
||||
}
|
||||
.ril__loadingCirclePoint:nth-of-type(8) {
|
||||
transform: rotate(210deg);
|
||||
}
|
||||
.ril__loadingCirclePoint:nth-of-type(2)::before,
|
||||
.ril__loadingCirclePoint:nth-of-type(8)::before {
|
||||
animation-delay: -666ms;
|
||||
}
|
||||
.ril__loadingCirclePoint:nth-of-type(3) {
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
.ril__loadingCirclePoint:nth-of-type(9) {
|
||||
transform: rotate(240deg);
|
||||
}
|
||||
.ril__loadingCirclePoint:nth-of-type(3)::before,
|
||||
.ril__loadingCirclePoint:nth-of-type(9)::before {
|
||||
animation-delay: -533ms;
|
||||
}
|
||||
.ril__loadingCirclePoint:nth-of-type(4) {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.ril__loadingCirclePoint:nth-of-type(10) {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
.ril__loadingCirclePoint:nth-of-type(4)::before,
|
||||
.ril__loadingCirclePoint:nth-of-type(10)::before {
|
||||
animation-delay: -400ms;
|
||||
}
|
||||
.ril__loadingCirclePoint:nth-of-type(5) {
|
||||
transform: rotate(120deg);
|
||||
}
|
||||
.ril__loadingCirclePoint:nth-of-type(11) {
|
||||
transform: rotate(300deg);
|
||||
}
|
||||
.ril__loadingCirclePoint:nth-of-type(5)::before,
|
||||
.ril__loadingCirclePoint:nth-of-type(11)::before {
|
||||
animation-delay: -266ms;
|
||||
}
|
||||
.ril__loadingCirclePoint:nth-of-type(6) {
|
||||
transform: rotate(150deg);
|
||||
}
|
||||
.ril__loadingCirclePoint:nth-of-type(12) {
|
||||
transform: rotate(330deg);
|
||||
}
|
||||
.ril__loadingCirclePoint:nth-of-type(6)::before,
|
||||
.ril__loadingCirclePoint:nth-of-type(12)::before {
|
||||
animation-delay: -133ms;
|
||||
}
|
||||
.ril__loadingCirclePoint:nth-of-type(7) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.ril__loadingCirclePoint:nth-of-type(13) {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
.ril__loadingCirclePoint:nth-of-type(7)::before,
|
||||
.ril__loadingCirclePoint:nth-of-type(13)::before {
|
||||
animation-delay: 0ms;
|
||||
}
|
||||
|
||||
.ril__loadingContainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.ril__imagePrev .ril__loadingContainer,
|
||||
.ril__imageNext .ril__loadingContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ril__errorContainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
}
|
||||
.ril__imagePrev .ril__errorContainer,
|
||||
.ril__imageNext .ril__errorContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ril__loadingContainer__icon {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user