From d26baf129ecb8edc59996d45f381eafda16ce076 Mon Sep 17 00:00:00 2001 From: BFlat Date: Mon, 16 Oct 2023 14:03:39 +0700 Subject: [PATCH] more updates and comment section --- .../src/components/common/Button/Button.scss | 18 +++- .../src/components/common/Button/Button.tsx | 95 ++++++++++--------- .../fakeyou.com/src/scss/site-refresh.scss | 21 +++- .../view/pages/media/MediaAudioComponent.tsx | 4 +- .../src/v2/view/pages/media/MediaPage.tsx | 34 ++++++- yarn.lock | 2 +- 6 files changed, 113 insertions(+), 61 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/Button/Button.scss b/packages/fakeyou.com/src/components/common/Button/Button.scss index 2b77945926..17ba047172 100644 --- a/packages/fakeyou.com/src/components/common/Button/Button.scss +++ b/packages/fakeyou.com/src/components/common/Button/Button.scss @@ -11,6 +11,16 @@ align-items: center; justify-content: center; color: $white !important; + + &-square { + width: 46.5px; + height: 46.5px; + } + + &-square-small { + width: 37.5px; + height: 37.5px; + } } .button-primary, @@ -45,9 +55,9 @@ border-color: lighten($secondary, 5%); } -.button-destructive, -.button-destructive:focus, -.button-destructive:active { +.button-danger, +.button-danger:focus, +.button-danger:active { background-color: $danger; color: $white !important; border: 2.5px solid; @@ -55,7 +65,7 @@ transition: 0.2s; } -.button-destructive:hover { +.button-danger:hover { background-color: lighten($danger, 5%); color: $white !important; border: 2.5px solid; diff --git a/packages/fakeyou.com/src/components/common/Button/Button.tsx b/packages/fakeyou.com/src/components/common/Button/Button.tsx index b67196aa13..cc68fe70a7 100644 --- a/packages/fakeyou.com/src/components/common/Button/Button.tsx +++ b/packages/fakeyou.com/src/components/common/Button/Button.tsx @@ -3,15 +3,20 @@ import { Link } from "react-router-dom"; import "./Button.scss"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; +import Tippy from "@tippyjs/react"; +import "tippy.js/dist/tippy.css"; interface ButtonProps extends ButtonHTMLAttributes { - label?: string; + label?: string | null; icon?: IconDefinition; small?: boolean; variant?: "primary" | "secondary" | "danger"; - to?: string; // for internal links - href?: string; // for external links + to?: string; + href?: string; target?: "_blank" | "_self"; + square?: boolean; + tooltip?: string; + full?: boolean; } export default function Button({ @@ -22,56 +27,52 @@ export default function Button({ to, href, target = "_self", + square, + tooltip, + full = false, ...rest }: ButtonProps) { - let buttonClass = `button`; + let IconComponent = icon ? ( + + ) : null; + let LabelComponent = !square ? label : null; - if (small) { - buttonClass += ` button-small`; - } + const externalClass = rest.className || ""; - switch (variant) { - case "primary": - buttonClass += " button-primary"; - break; - case "secondary": - buttonClass += " button-secondary"; - break; - case "danger": - buttonClass += " button-destructive"; - break; - default: - buttonClass += " button-primary"; - break; - } + const commonProps = { + className: `${externalClass} button ${small ? "button-small" : ""} ${ + square ? (small ? "button-square-small" : "button-square") : "" + } button-${variant} ${full ? "w-100" : ""}`, + }; - if (to) { - return ( - - {icon && } - {label} - - ); - } - if (href) { - return ( - - {icon && } - {label} - - ); - } + delete rest.className; - // If neither 'to' nor 'href' are provided (regular button) - return ( - ); + + return tooltip ? ( + + {WrappedButton} + + ) : ( + WrappedButton + ); } diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index 49acbb1051..b2b3462e19 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/packages/fakeyou.com/src/scss/site-refresh.scss @@ -926,10 +926,6 @@ styles with important tags: color: $white; } - .tippy-box[data-theme~="fakeyou"] > .tippy-svg-arrow { - fill: lighten($secondary, 5%); - } - .tippy-box[data-theme~="range-slider"] { margin-top: -5px; background-color: lighten($panel, 10%); @@ -937,6 +933,23 @@ styles with important tags: font-size: 13px !important; } + .tippy-box[data-theme~="fakeyou"][data-placement^="top"] + > .tippy-arrow::before { + border-top-color: lighten($secondary, 5%); + } + .tippy-box[data-theme~="fakeyou"][data-placement^="bottom"] + > .tippy-arrow::before { + border-bottom-color: lighten($secondary, 5%); + } + .tippy-box[data-theme~="fakeyou"][data-placement^="left"] + > .tippy-arrow::before { + border-left-color: lighten($secondary, 5%); + } + .tippy-box[data-theme~="fakeyou"][data-placement^="right"] + > .tippy-arrow::before { + border-right-color: lighten($secondary, 5%); + } + .sliding-content { overflow: hidden; opacity: 0; diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaAudioComponent.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaAudioComponent.tsx index 38c09fae4a..3c4ca809e6 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaAudioComponent.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaAudioComponent.tsx @@ -1,6 +1,6 @@ import MediaData from "./MediaDataTypes"; import React from "react"; -import AudioPlayer from "./MediaAudioPlayer"; +import MediaAudioPlayer from "./MediaAudioPlayer"; interface MediaAudioComponentProps { mediaData: MediaData; @@ -11,7 +11,7 @@ export default function MediaAudioComponent({ }: MediaAudioComponentProps) { return (
- +
); } diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx index 0b64c6023a..7b2cbb258f 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx @@ -13,11 +13,14 @@ import Button from "components/common/Button"; import { faCircleExclamation, faArrowDownToLine, + faCirclePlay, + faShare, } from "@fortawesome/pro-solid-svg-icons"; import Accordion from "components/common/Accordion"; import DataTable from "components/common/DataTable"; import { Gravatar } from "@storyteller/components/src/elements/Gravatar"; import useTimeAgo from "hooks/useTimeAgo"; +import { CommentComponent } from "v2/view/_common/comments/CommentComponent"; // import { RatingButtons } from "v2/view/_common/ratings/RatingButtons"; // import { RatingStats } from "v2/view/_common/ratings/RatingStats"; @@ -28,7 +31,7 @@ interface MediaPageProps { // Dummy media data (replace with actual API data) let dummyMediaData = { token: "m_v032bt6ecm0rwhebbhgdmk5rexf7cij", - media_type: "video", // Change to somthing like "video" or "image" to test different types + media_type: "audio", // Change to somthing like "video" or "image" to test different types public_bucket_path: "/media/8/p/c/h/h/8pchhrgc0ayawn09s9gmtfec2mcft0xk/fakeyou_8pchhrgc0ayawn09s9gmtfec2mcft0xk.mp4", // Replace with actual URLs maybe_creator_user: { @@ -230,18 +233,43 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) { -
+
{mediaDetails} + +

Comments

+ + ); } diff --git a/yarn.lock b/yarn.lock index 16f51c2909..12b7c816ce 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4442,7 +4442,7 @@ __metadata: axios: ^0.21.0 bulma: ^0.9.0 craco: ^0.0.3 - date-fns: ^2.22.1 + date-fns: 2.22.1 framer-motion: ^6.5.1 howler: ^2.2.0 i18next: ^21.6.11