mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 18:44:16 +00:00
rework post additions
This commit is contained in:
parent
c8b9dee2fd
commit
b6624bf645
@ -1,8 +1,7 @@
|
||||
import React from "react"
|
||||
import * as antd from "antd"
|
||||
import loadable from "@loadable/component"
|
||||
|
||||
import { Icons } from "components/Icons"
|
||||
import { Carousel } from "react-responsive-carousel"
|
||||
import Plyr from "plyr-react"
|
||||
|
||||
import ContentFailed from "../contentFailed"
|
||||
|
||||
@ -25,6 +24,7 @@ const mediaTypes = {
|
||||
"m4a": "audio",
|
||||
}
|
||||
|
||||
import "react-responsive-carousel/lib/styles/carousel.min.css"
|
||||
import "plyr-react/dist/plyr.css"
|
||||
import "./index.less"
|
||||
|
||||
@ -71,16 +71,23 @@ export default class PostAdditions extends React.PureComponent {
|
||||
return () => <img src={url} />
|
||||
}
|
||||
case "video": {
|
||||
return () => <video controls>
|
||||
<source src={url} type={mimeType} />
|
||||
</video>
|
||||
return () => <Plyr
|
||||
source={{
|
||||
type: "video",
|
||||
sources: [{
|
||||
src: url,
|
||||
}],
|
||||
}}
|
||||
options={{
|
||||
controls: ["play", "progress", "current-time", "mute", "volume"],
|
||||
}}
|
||||
/>
|
||||
}
|
||||
case "audio": {
|
||||
return () => <audio controls>
|
||||
<source src={url} type={mimeType} />
|
||||
</audio>
|
||||
}
|
||||
|
||||
default: {
|
||||
return () => <h4>
|
||||
Unsupported media type [{mediaType}/{mediaTypeExt}]
|
||||
@ -103,14 +110,14 @@ export default class PostAdditions extends React.PureComponent {
|
||||
|
||||
render() {
|
||||
return <div className="post_additions">
|
||||
<antd.Carousel
|
||||
arrows={true}
|
||||
nextArrow={<Icons.ChevronRight />}
|
||||
prevArrow={<Icons.ChevronLeft />}
|
||||
autoplay={this.props.autoCarrousel}
|
||||
<Carousel
|
||||
showArrows={true}
|
||||
showStatus={false}
|
||||
showThumbs={false}
|
||||
showIndicators={this.props.additions?.length > 1 ?? false}
|
||||
>
|
||||
{this.getAdditions(this.props.additions)}
|
||||
</antd.Carousel>
|
||||
</Carousel>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@ -1,114 +1,75 @@
|
||||
.post_additions {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
height: 28vh;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
.slick-slider {
|
||||
.slick-prev {
|
||||
display: inline !important;
|
||||
color: #ffffff;
|
||||
.carousel-root {
|
||||
position: relative;
|
||||
|
||||
z-index: 100;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
height: 100%;
|
||||
width: 5vw;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
transition: all 150ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
width: 7vw;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
display: inline !important;
|
||||
color: #ffffff;
|
||||
|
||||
z-index: 100;
|
||||
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
height: 100%;
|
||||
width: 5vw;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
transition: all 150ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
width: 7vw;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-track {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.slick-slide {
|
||||
height: 100%;
|
||||
|
||||
div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-list {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ant-carousel,
|
||||
.slick-slider,
|
||||
.slick-list,
|
||||
.slick-track {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.adm-swiper-track-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: "DM Mono", monospace;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
.carousel {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.adm-swiper-slide {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.control-prev,
|
||||
.control-next {
|
||||
color: #ffffff;
|
||||
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
height: 100%;
|
||||
width: 30px;
|
||||
|
||||
.adm-swiper-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
|
||||
height: fit-content;
|
||||
transition: all 150ms ease-in-out;
|
||||
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.5);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::before {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.control-dots {
|
||||
&:hover {
|
||||
.dot {
|
||||
height: 8px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.dot {
|
||||
transition: all 100ms ease-in;
|
||||
|
||||
height: 3px;
|
||||
width: 15px;
|
||||
|
||||
border-radius: 2px;
|
||||
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-status {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -116,6 +77,10 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
max-height: 50vh;
|
||||
|
||||
background-color: black;
|
||||
|
||||
// fixtures for media content
|
||||
img {
|
||||
width: 100%;
|
||||
@ -128,7 +93,6 @@
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
user-select: none;
|
||||
@ -149,4 +113,25 @@
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plyr__controls {
|
||||
.plyr__control {
|
||||
&:hover {
|
||||
background-color: var(--primaryColor);
|
||||
}
|
||||
|
||||
svg {
|
||||
color: white;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.plyr__progress,
|
||||
.plyr__volume {
|
||||
input {
|
||||
color: var(--primaryColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user