RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

use new carrusel

Browse Source
This commit is contained in:
srgooglo 2022-06-04 06:07:43 +02:00
parent 4ca1d27138
commit dbd483e768
2 changed files with 111 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
packages/app/src/components/PostCard/index.jsx
View File

@ -111,6 +111,24 @@ function PostHeader(props) {
const PostContent = React.memo((props) => {
let { message, additions } = props.data
let carruselRef = React.useRef(null)
const onClickController = (direction) => {
if (carruselRef.current) {
switch (direction) {
case "left": {
return carruselRef.current.prev()
}
case "right": {
return carruselRef.current.next()
}
default: {
return null
}
}
}
}
// first filter if is an string
additions = additions.filter(file => typeof file === "string")
@ -173,7 +191,7 @@ const PostContent = React.memo((props) => {
key={index}
>
<div className="addition">
<React.Suspense fallback={<div>Loading</div>} >
<React.Suspense ref={carruselRef} fallback={<div>Loading</div>} >
<MediaRender />
</React.Suspense>
</div>
@ -205,22 +223,15 @@ const PostContent = React.memo((props) => {
{additions.length > 0 &&
<div className="additions">
<Swiper
//direction="vertical"
indicatorProps={{
style: {
"--dot-color": "rgba(0, 0, 0, 0.4)",
"--active-dot-color": "var(--primaryColor)",
"--dot-size": "10px",
"--active-dot-size": "30px",
"--dot-border-radius": "50%",
"--active-dot-border-radius": "15px",
"--dot-spacing": "8px",
}
}}
<antd.Carousel
ref={carruselRef}
arrows={true}
nextArrow={<Icons.ArrowRight />}
prevArrow={<Icons.ArrowLeft />}
autoplay
>
{additions}
</Swiper>
</antd.Carousel>
</div>
}
</div>

87
packages/app/src/components/PostCard/index.less
View File

@ -128,12 +128,12 @@
flex-direction: column;
align-items: flex-start;
//background-color: var(--background-color-primary);
//background-color: rgba(var(--background-color-primary));
padding: 0 10px 10px 10px;
border-radius: 8px;
color: var(--background-color-contrast);
color: rgba(var(--background-color-contrast));
overflow: hidden;
@ -148,6 +148,72 @@
width: 100%;
height: 28vh;
.slick-slider {
.slick-prev {
display: inline !important;
color: rgba(var(--background-color-contrast), 0.5);
z-index: 100;
top: 0;
left: 0;
height: 100%;
width: 5vw;
opacity: 0;
transition: all 150ms ease-in-out;
&:hover {
opacity: 1;
width: 7vw;
}
}
.slick-next {
display: inline !important;
color: rgba(var(--background-color-contrast), 0.5);
z-index: 100;
top: 0;
right: 0;
height: 100%;
width: 5vw;
opacity: 0;
transition: all 150ms ease-in-out;
&:hover {
opacity: 1;
width: 7vw;
}
}
}
.slick-track {
display: flex;
align-items: center;
}
.slick-slide {
height: 100%;
div {
height: 100%;
}
}
.ant-carousel,
.slick-slider,
.slick-list,
.slick-track {
height: 100%;
}
.addition {
width: 100%;
height: 100%;
@ -155,28 +221,45 @@
// fixtures for media content
img {
width: 100%;
height: 100%;
border-radius: 12px;
user-select: none;
-webkit-user-drag: none;
object-fit: cover;
}
video {
width: 100%;
height: 100%;
border-radius: 12px;
user-select: none;
-webkit-user-drag: none;
object-fit: cover;
}
audio {
width: 100%;
height: 100%;
user-select: none;
-webkit-user-drag: none;
}
>div {
height: 100%;
}
}
}
>div {
margin-bottom: 10px;
}
}
>div {