From b6624bf64573e990ac5075b18da4455f8f357bce Mon Sep 17 00:00:00 2001
From: srgooglo <srgooglo@ragestudio.net>
Date: Tue, 11 Oct 2022 13:01:45 +0200
Subject: [PATCH] rework post additions

---
 .../PostCard/components/additions/index.jsx   |  33 ++--
 .../PostCard/components/additions/index.less  | 177 ++++++++----------
 2 files changed, 101 insertions(+), 109 deletions(-)

diff --git a/packages/app/src/components/PostCard/components/additions/index.jsx b/packages/app/src/components/PostCard/components/additions/index.jsx
index 6edbd17d..5a144a76 100644
--- a/packages/app/src/components/PostCard/components/additions/index.jsx
+++ b/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 { 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>
     }
 }
\ No newline at end of file
diff --git a/packages/app/src/components/PostCard/components/additions/index.less b/packages/app/src/components/PostCard/components/additions/index.less
index 48155797..996c7bbf 100644
--- a/packages/app/src/components/PostCard/components/additions/index.less
+++ b/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 {
-        .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);
+        }
+    }
 }
\ No newline at end of file