rework post additions

packages/app/src/components/PostCard/components/additions/index.jsx

@@ -1,8 +1,7 @@
 import React from "react"
-import * as antd from "antd"
 import loadable from "@loadable/component"
-
+import { Carousel } from "react-responsive-carousel"
-import { Icons } from "components/Icons"
+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>
+                            return () => <Plyr
-                                <source src={url} type={mimeType} />
+                                source={{
-                            </video>
+                                    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
+            <Carousel
-                arrows={true}
+                showArrows={true}
-                nextArrow={<Icons.ChevronRight />}
+                showStatus={false}
-                prevArrow={<Icons.ChevronLeft />}
+                showThumbs={false}
-                autoplay={this.props.autoCarrousel}
+                showIndicators={this.props.additions?.length > 1 ?? false}
             >
                 {this.getAdditions(this.props.additions)}
-            </antd.Carousel>
+            </Carousel>
         </div>
     }
 }

packages/app/src/components/PostCard/components/additions/index.less

@@ -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 {
+    .carousel-root {
-        .slick-prev {
+        position: relative;
-            display: inline !important;
-            color: #ffffff;
 
-            z-index: 100;
+        font-family: "DM Mono", monospace;
-
-            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;
 
         height: 100%;
         width: 100%;
 
-        user-select: none;
+        .carousel {
-        -webkit-user-drag: none;
+            border-radius: 8px;
+        }
 
-        .adm-swiper-slide {
+        .control-prev,
-            display: flex;
+        .control-next {
-            align-items: center;
+            color: #ffffff;
 
-            user-select: none;
+            height: 100%;
-            -webkit-user-drag: none;
+            width: 30px;
 
-            .adm-swiper-item {
+            opacity: 0;
-                display: flex;
-                align-items: center;
-                justify-content: center;
 
-                height: fit-content;
+            transition: all 150ms ease-in-out;
 
-                user-select: none;
+            &:hover {
-                -webkit-user-drag: none;
+                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;
@@ -150,3 +114,24 @@
         }
     }
 }
+
+.plyr__controls {
+    .plyr__control {
+        &:hover {
+            background-color: var(--primaryColor);
+        }
+
+        svg {
+            color: white;
+
+            margin: 0;
+        }
+    }
+
+    .plyr__progress,
+    .plyr__volume {
+        input {
+            color: var(--primaryColor);
+        }
+    }
+}