0ct0pu5/ente
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Try pure-react-carousel as a replacement of bootstrap's Carousel

Browse source
This commit is contained in:
Manav Rathi 2024-03-31 16:44:55 +05:30
parent ee1eb75bdf
commit 3890373d4a
No known key found for this signature in database
3 changed files with 99 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
web/apps/photos/package.json
View file

@ -45,6 +45,7 @@
"p-queue": "^7.1.0",
"photoswipe": "file:./thirdparty/photoswipe",
"piexifjs": "^1.0.6",
"pure-react-carousel": "^1.30.1",
"react-bootstrap": "^1.3.0",
"react-datepicker": "^4.16.0",
"react-dropzone": "^11.2.4",

69
web/apps/photos/src/pages/index.tsx
View file

@ -22,6 +22,15 @@ import { getKey, SESSION_KEYS } from "@ente/shared/storage/sessionStorage";
import isElectron from "is-electron";
import { Trans } from "react-i18next";
import {
ButtonBack,
ButtonNext,
CarouselProvider,
Slide,
Slider,
} from "pure-react-carousel";
import "pure-react-carousel/dist/react-carousel.es.css";
const Container = styled("div")`
display: flex;
flex: 1;
@ -186,7 +195,7 @@ export default function LandingPage() {
<>
<SlideContainer>
<EnteLogo height={24} sx={{ mb: 8 }} />
<Slideshow />
{true ? <PRSExample /> : <Slideshow />}
</SlideContainer>
<MobileBox>
<Button
@ -258,3 +267,61 @@ const Slideshow: React.FC = () => {
</Carousel>
);
};
const PRSExample: React.FC = () => {
return (
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={125}
totalSlides={3}
>
<Slider>
<Slide index={0}>I am the first Slide.</Slide>
<Slide index={1}>I am the second Slide.</Slide>
<Slide index={2}>I am the third Slide.</Slide>
</Slider>
<ButtonBack>Back</ButtonBack>
<ButtonNext>Next</ButtonNext>
</CarouselProvider>
);
};
export const Slideshow2: React.FC = () => {
return (
<Carousel controls={false}>
<Carousel.Item>
<Img
src="/images/onboarding-lock/1x.png"
srcSet="/images/onboarding-lock/2x.png 2x,
/images/onboarding-lock/3x.png 3x"
/>
<FeatureText>
<Trans i18nKey={"HERO_SLIDE_1_TITLE"} />
</FeatureText>
<TextContainer>{t("HERO_SLIDE_1")}</TextContainer>
</Carousel.Item>
<Carousel.Item>
<Img
src="/images/onboarding-safe/1x.png"
srcSet="/images/onboarding-safe/2x.png 2x,
/images/onboarding-safe/3x.png 3x"
/>
<FeatureText>
<Trans i18nKey={"HERO_SLIDE_2_TITLE"} />
</FeatureText>
<TextContainer>{t("HERO_SLIDE_2")}</TextContainer>
</Carousel.Item>
<Carousel.Item>
<Img
src="/images/onboarding-sync/1x.png"
srcSet="/images/onboarding-sync/2x.png 2x,
/images/onboarding-sync/3x.png 3x"
/>
<FeatureText>
<Trans i18nKey={"HERO_SLIDE_3_TITLE"} />
</FeatureText>
<TextContainer>{t("HERO_SLIDE_3")}</TextContainer>
</Carousel.Item>
</Carousel>
);
};

32
web/yarn.lock
View file

@ -1470,12 +1470,17 @@ debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
dependencies:
ms "2.1.2"
deep-freeze@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/deep-freeze/-/deep-freeze-0.0.1.tgz#3a0b0005de18672819dfd38cd31f91179c893e84"
integrity sha512-Z+z8HiAvsGwmjqlphnHW5oz6yWlOwu6EQfFTjmeTWlDeda3FS2yv3jhq35TX/ewmsnqB+RX2IdsIOyjJCQN5tg==
deep-is@^0.1.3:
version "0.1.4"
resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
deepmerge@^2.1.1:
deepmerge@^2.1.1, deepmerge@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
@ -1587,6 +1592,13 @@ enhanced-resolve@^5.12.0:
graceful-fs "^4.2.4"
tapable "^2.2.0"
equals@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/equals/-/equals-1.0.5.tgz#212062dde5e1a510d955f13598efcc6a621b6ace"
integrity sha512-wI15a6ZoaaXPv+55+Vh2Kqn3+efKRv8QPtcGTjW5xmanMnQzESdAt566jevtMZyt3W/jwLDTzXpMph5ECDJ2zg==
dependencies:
jkroso-type "1"
error-ex@^1.3.1:
version "1.3.2"
resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@ -2688,6 +2700,11 @@ jackspeak@^2.3.5:
optionalDependencies:
"@pkgjs/parseargs" "^0.11.0"
jkroso-type@1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/jkroso-type/-/jkroso-type-1.1.1.tgz#bc4ced6d6c45fe0745282bafc86a9f8c4fc9ce61"
integrity sha512-zZgay+fPG6PgMUrpyFADmQmvLo39+AZa7Gc5pZhev2RhDxwANEq2etwD8d0e6rTg5NkwOIlQmaEmns3draC6Ng==
jpeg-js@^0.4.4:
version "0.4.4"
resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.4.tgz#a9f1c6f1f9f0fa80cdb3484ed9635054d28936aa"
@ -2811,7 +2828,7 @@ libsodium-wrappers@0.7.9:
dependencies:
libsodium "^0.7.0"
libsodium@0.7.9, libsodium@^0.7.0:
libsodium@^0.7.0:
version "0.7.9"
resolved "https://registry.yarnpkg.com/libsodium/-/libsodium-0.7.9.tgz#4bb7bcbf662ddd920d8795c227ae25bbbfa3821b"
integrity sha512-gfeADtR4D/CM0oRUviKBViMGXZDgnFdMKMzHsvBdqLBHd9ySi6EtYnmuhHVDDYgYpAO8eU8hEY+F8vIUAPh08A==
@ -3354,6 +3371,17 @@ punycode@^2.1.0:
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
pure-react-carousel@^1.30.1:
version "1.30.1"
resolved "https://registry.yarnpkg.com/pure-react-carousel/-/pure-react-carousel-1.30.1.tgz#006a333869b51339dafcdee2afa0561eb46d1743"
integrity sha512-B1qi62hZk0OFqRR4cTjtgIeOn/Ls5wo+HsLtrXT4jVf5et8ldBHSt+6LsYRJN86Or8dm+XbnJNEHy6WDJ0/DQw==
dependencies:
"@babel/runtime" "^7.5.5"
deep-freeze "0.0.1"
deepmerge "^2.2.1"
equals "^1.0.5"
prop-types "^15.6.2"
queue-microtask@^1.2.2:
version "1.2.3"
resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"