From b7b57eabeb1c540e11995e41b058aedcced534ff Mon Sep 17 00:00:00 2001 From: Albert Folch Date: Fri, 22 Mar 2024 20:07:20 +0100 Subject: [PATCH 1/4] feat: add mute button to videos --- src/components/ui/Video.tsx | 46 ++++++++++++++++++++++++++++++------- 1 file changed, 38 insertions(+), 8 deletions(-) diff --git a/src/components/ui/Video.tsx b/src/components/ui/Video.tsx index 05c90348e..3660ec78e 100644 --- a/src/components/ui/Video.tsx +++ b/src/components/ui/Video.tsx @@ -1,11 +1,13 @@ -import { Loading } from "@bosonprotocol/react-kit"; +import { Loading, MuteButton } from "@bosonprotocol/react-kit"; import * as Sentry from "@sentry/browser"; import { VideoCamera as VideoIcon, VideoCameraSlash } from "phosphor-react"; import React, { + ElementRef, ReactElement, ReactNode, useEffect, useMemo, + useRef, useState, VideoHTMLAttributes } from "react"; @@ -17,7 +19,11 @@ import { fetchIpfsBase64Media } from "../../lib/utils/base64"; import { useIpfsStorage } from "../../lib/utils/hooks/useIpfsStorage"; import { buttonText } from "./styles"; import { Typography } from "./Typography"; - +const StyledMuteButton = styled(MuteButton)` + position: absolute; + top: 1rem; + right: 1rem; +`; const VideoWrapper = styled.div<{ $hasOnClick?: boolean }>` overflow: hidden; position: relative; @@ -97,6 +103,8 @@ const Video: React.FC> = ({ componentWhileLoading: ComponentWhileLoading, ...rest }) => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { muted: _, ...vidProps } = videoProps ?? {}; const [isLoaded, setIsLoaded] = useState(noPreload); const [isError, setIsError] = useState(false); const [videoSrc, setVideoSrc] = useState( @@ -155,7 +163,22 @@ const Video: React.FC> = ({ } return videoSrc || ""; }, [videoSrc]); - + const videoRef = useRef>(null); + const [muted, setMuted] = useState(!!videoProps?.muted); + useEffect(() => { + if (videoRef.current) { + videoRef.current.defaultMuted = muted; + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [videoRef.current?.defaultMuted]); + useEffect(() => { + if (videoRef.current) { + videoRef.current.autoplay = false; + videoRef.current.pause(); + videoRef.current.muted = muted; + videoRef.current.play(); + } + }, [muted]); if (!isLoaded && !isError) { if (ComponentWhileLoading) { return ; @@ -192,11 +215,18 @@ const Video: React.FC> = ({ {children || ""} {videoSrc && ( - + <> + setMuted((prev) => !prev)} + /> + + )} ); From 1114cb1d203f4430e4ba102e4e89e02790ccfd60 Mon Sep 17 00:00:00 2001 From: Albert Folch Date: Mon, 25 Mar 2024 11:19:00 +0100 Subject: [PATCH 2/4] chore: upgrade react-kit --- package-lock.json | 66 +++++++++++++++++++++++------------------------ package.json | 2 +- 2 files changed, 34 insertions(+), 34 deletions(-) diff --git a/package-lock.json b/package-lock.json index dc26718af..b4c12e9cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "dependencies": { "@apollo/client": "^3.8.1", "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", - "@bosonprotocol/react-kit": "^0.29.0-alpha.6", + "@bosonprotocol/react-kit": "^0.29.0-alpha.9", "@davatar/react": "^1.10.4", "@ethersproject/address": "^5.6.1", "@ethersproject/units": "^5.7.0", @@ -2626,9 +2626,9 @@ } }, "node_modules/@bosonprotocol/common": { - "version": "1.27.0-alpha.6", - "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.27.0-alpha.6.tgz", - "integrity": "sha512-iW20ulcQSQrZRtqDAF4E1C2i3NFfAE4BSyHRWf/ZqV/uLxcHnqRDob9Njs5REFargs0hd2Zpu9dH/weD60s4zw==", + "version": "1.27.0-alpha.9", + "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.27.0-alpha.9.tgz", + "integrity": "sha512-2H0UHtO9wQNl12zptF/aeb+3m49SOln+bsBO9ifjazvwiEfdFjHPUHSBhzmyiQ4Dd/U73eC8EuLVcoIIPKj0wQ==", "dependencies": { "@bosonprotocol/metadata": "^1.16.0", "@ethersproject/abi": "^5.5.0", @@ -2640,11 +2640,11 @@ } }, "node_modules/@bosonprotocol/core-sdk": { - "version": "1.40.0-alpha.6", - "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.40.0-alpha.6.tgz", - "integrity": "sha512-CARYtNEM0wH90rf/b+Rdtaa3gxR62WoxOzjM4OUltlFP5Xlx0YHMjwILaItgUB+cGjhTFVmmKsi9EvrjGHUN9Q==", + "version": "1.40.0-alpha.9", + "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.40.0-alpha.9.tgz", + "integrity": "sha512-ssIY/K6Axf6yn/VPI4qBeXfaT7VqhlPc5FZ/giKNT8Q8jazxYEUC+cGPGXk30XK8IVRu1Mo19yKfnrLs5XEpQg==", "dependencies": { - "@bosonprotocol/common": "^1.27.0-alpha.6", + "@bosonprotocol/common": "^1.27.0-alpha.9", "@ethersproject/abi": "^5.5.0", "@ethersproject/address": "^5.5.0", "@ethersproject/bignumber": "^5.5.0", @@ -2660,11 +2660,11 @@ } }, "node_modules/@bosonprotocol/ethers-sdk": { - "version": "1.14.0-alpha.6", - "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.14.0-alpha.6.tgz", - "integrity": "sha512-K+PuyPnMBtn7R3lpumO+GqEQ0jQvLCnfnPqvjjgR9KmtX3U59FbPGb/9QAqQO2Dz59YyIHRw8DZO53qhHfpYVQ==", + "version": "1.14.0-alpha.9", + "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.14.0-alpha.9.tgz", + "integrity": "sha512-AxdDwkWz88FBB5KYlnU/Tq3+E5Oq/9K6rKoI5Y4VK+h7hCOvs+jlNM7W7Gfckyz/mKY0KmDkdn9QtViF3U0NAw==", "dependencies": { - "@bosonprotocol/common": "^1.27.0-alpha.6" + "@bosonprotocol/common": "^1.27.0-alpha.9" }, "peerDependencies": { "ethers": "^5.5.0" @@ -2690,13 +2690,13 @@ } }, "node_modules/@bosonprotocol/react-kit": { - "version": "0.29.0-alpha.6", - "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.29.0-alpha.6.tgz", - "integrity": "sha512-3XdGOmp751mi/8854QF5FLXrUtiJ3eCJ2PVjQ9dPbiKCIPE+nqNPqxydsNRjwJJLKMJ8nJSP8m0471UtjvZbmA==", + "version": "0.29.0-alpha.9", + "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.29.0-alpha.9.tgz", + "integrity": "sha512-VPosThRy7YsQazhTQAH1P/zVHD5HrD9OdnaqfZRRB2VN798TckevyGH7LGI6y09j0wePfQNJfw4E1+RS7HhsYA==", "dependencies": { "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", - "@bosonprotocol/core-sdk": "^1.40.0-alpha.6", - "@bosonprotocol/ethers-sdk": "^1.14.0-alpha.6", + "@bosonprotocol/core-sdk": "^1.40.0-alpha.9", + "@bosonprotocol/ethers-sdk": "^1.14.0-alpha.9", "@bosonprotocol/ipfs-storage": "^1.11.2", "@davatar/react": "1.11.1", "@ethersproject/units": "5.6.0", @@ -50174,9 +50174,9 @@ } }, "@bosonprotocol/common": { - "version": "1.27.0-alpha.6", - "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.27.0-alpha.6.tgz", - "integrity": "sha512-iW20ulcQSQrZRtqDAF4E1C2i3NFfAE4BSyHRWf/ZqV/uLxcHnqRDob9Njs5REFargs0hd2Zpu9dH/weD60s4zw==", + "version": "1.27.0-alpha.9", + "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.27.0-alpha.9.tgz", + "integrity": "sha512-2H0UHtO9wQNl12zptF/aeb+3m49SOln+bsBO9ifjazvwiEfdFjHPUHSBhzmyiQ4Dd/U73eC8EuLVcoIIPKj0wQ==", "requires": { "@bosonprotocol/metadata": "^1.16.0", "@ethersproject/abi": "^5.5.0", @@ -50188,11 +50188,11 @@ } }, "@bosonprotocol/core-sdk": { - "version": "1.40.0-alpha.6", - "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.40.0-alpha.6.tgz", - "integrity": "sha512-CARYtNEM0wH90rf/b+Rdtaa3gxR62WoxOzjM4OUltlFP5Xlx0YHMjwILaItgUB+cGjhTFVmmKsi9EvrjGHUN9Q==", + "version": "1.40.0-alpha.9", + "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.40.0-alpha.9.tgz", + "integrity": "sha512-ssIY/K6Axf6yn/VPI4qBeXfaT7VqhlPc5FZ/giKNT8Q8jazxYEUC+cGPGXk30XK8IVRu1Mo19yKfnrLs5XEpQg==", "requires": { - "@bosonprotocol/common": "^1.27.0-alpha.6", + "@bosonprotocol/common": "^1.27.0-alpha.9", "@ethersproject/abi": "^5.5.0", "@ethersproject/address": "^5.5.0", "@ethersproject/bignumber": "^5.5.0", @@ -50208,11 +50208,11 @@ } }, "@bosonprotocol/ethers-sdk": { - "version": "1.14.0-alpha.6", - "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.14.0-alpha.6.tgz", - "integrity": "sha512-K+PuyPnMBtn7R3lpumO+GqEQ0jQvLCnfnPqvjjgR9KmtX3U59FbPGb/9QAqQO2Dz59YyIHRw8DZO53qhHfpYVQ==", + "version": "1.14.0-alpha.9", + "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.14.0-alpha.9.tgz", + "integrity": "sha512-AxdDwkWz88FBB5KYlnU/Tq3+E5Oq/9K6rKoI5Y4VK+h7hCOvs+jlNM7W7Gfckyz/mKY0KmDkdn9QtViF3U0NAw==", "requires": { - "@bosonprotocol/common": "^1.27.0-alpha.6" + "@bosonprotocol/common": "^1.27.0-alpha.9" } }, "@bosonprotocol/ipfs-storage": { @@ -50235,13 +50235,13 @@ } }, "@bosonprotocol/react-kit": { - "version": "0.29.0-alpha.6", - "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.29.0-alpha.6.tgz", - "integrity": "sha512-3XdGOmp751mi/8854QF5FLXrUtiJ3eCJ2PVjQ9dPbiKCIPE+nqNPqxydsNRjwJJLKMJ8nJSP8m0471UtjvZbmA==", + "version": "0.29.0-alpha.9", + "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.29.0-alpha.9.tgz", + "integrity": "sha512-VPosThRy7YsQazhTQAH1P/zVHD5HrD9OdnaqfZRRB2VN798TckevyGH7LGI6y09j0wePfQNJfw4E1+RS7HhsYA==", "requires": { "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", - "@bosonprotocol/core-sdk": "^1.40.0-alpha.6", - "@bosonprotocol/ethers-sdk": "^1.14.0-alpha.6", + "@bosonprotocol/core-sdk": "^1.40.0-alpha.9", + "@bosonprotocol/ethers-sdk": "^1.14.0-alpha.9", "@bosonprotocol/ipfs-storage": "^1.11.2", "@davatar/react": "1.11.1", "@ethersproject/units": "5.6.0", diff --git a/package.json b/package.json index 6c6a77f2d..d6f423af3 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "dependencies": { "@apollo/client": "^3.8.1", "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", - "@bosonprotocol/react-kit": "^0.29.0-alpha.6", + "@bosonprotocol/react-kit": "^0.29.0-alpha.9", "@davatar/react": "^1.10.4", "@ethersproject/address": "^5.6.1", "@ethersproject/units": "^5.7.0", From 45b72854b188107e50f88600920aebdf3beab30e Mon Sep 17 00:00:00 2001 From: Albert Folch Date: Mon, 25 Mar 2024 14:54:27 +0100 Subject: [PATCH 3/4] prop to mute button video --- package-lock.json | 66 +++++++++---------- package.json | 2 +- .../modal/components/DetailWidget.tsx | 1 + .../modal/components/ProductCreateSuccess.tsx | 1 + src/components/product/Preview.tsx | 1 + src/components/ui/Video.tsx | 16 +++-- src/pages/exchange/Exchange.tsx | 1 + src/pages/offers/OfferDetail.tsx | 1 + src/pages/products/ProductDetail.tsx | 1 + 9 files changed, 49 insertions(+), 41 deletions(-) diff --git a/package-lock.json b/package-lock.json index b4c12e9cb..3853a8563 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "dependencies": { "@apollo/client": "^3.8.1", "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", - "@bosonprotocol/react-kit": "^0.29.0-alpha.9", + "@bosonprotocol/react-kit": "^0.29.0-alpha.11", "@davatar/react": "^1.10.4", "@ethersproject/address": "^5.6.1", "@ethersproject/units": "^5.7.0", @@ -2626,9 +2626,9 @@ } }, "node_modules/@bosonprotocol/common": { - "version": "1.27.0-alpha.9", - "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.27.0-alpha.9.tgz", - "integrity": "sha512-2H0UHtO9wQNl12zptF/aeb+3m49SOln+bsBO9ifjazvwiEfdFjHPUHSBhzmyiQ4Dd/U73eC8EuLVcoIIPKj0wQ==", + "version": "1.27.0-alpha.11", + "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.27.0-alpha.11.tgz", + "integrity": "sha512-KdA+/QV9STi2wCcr2nWzBF8oxAsqeg32NsStimktVbAexOyrptIh+nAura6UGUJAn/zqEVsrXt3Wsd6jrybEQA==", "dependencies": { "@bosonprotocol/metadata": "^1.16.0", "@ethersproject/abi": "^5.5.0", @@ -2640,11 +2640,11 @@ } }, "node_modules/@bosonprotocol/core-sdk": { - "version": "1.40.0-alpha.9", - "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.40.0-alpha.9.tgz", - "integrity": "sha512-ssIY/K6Axf6yn/VPI4qBeXfaT7VqhlPc5FZ/giKNT8Q8jazxYEUC+cGPGXk30XK8IVRu1Mo19yKfnrLs5XEpQg==", + "version": "1.40.0-alpha.11", + "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.40.0-alpha.11.tgz", + "integrity": "sha512-Kp1S9P/fVpjyc48g3iW/lBT3k0DehdxCXuTpf/q2Rkaw4lwUYUhlcHay8A6gHGmhkqjRo7Vs52AWPG2R84+IGg==", "dependencies": { - "@bosonprotocol/common": "^1.27.0-alpha.9", + "@bosonprotocol/common": "^1.27.0-alpha.11", "@ethersproject/abi": "^5.5.0", "@ethersproject/address": "^5.5.0", "@ethersproject/bignumber": "^5.5.0", @@ -2660,11 +2660,11 @@ } }, "node_modules/@bosonprotocol/ethers-sdk": { - "version": "1.14.0-alpha.9", - "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.14.0-alpha.9.tgz", - "integrity": "sha512-AxdDwkWz88FBB5KYlnU/Tq3+E5Oq/9K6rKoI5Y4VK+h7hCOvs+jlNM7W7Gfckyz/mKY0KmDkdn9QtViF3U0NAw==", + "version": "1.14.0-alpha.11", + "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.14.0-alpha.11.tgz", + "integrity": "sha512-F3EuVqQ9J9YvLOQB/ulHIXUEFInubQ9nGKOxChX2ttAX4xXcGup4oRLR+i1rhWWa2KNGwDvN55s4iK8wHnwfGA==", "dependencies": { - "@bosonprotocol/common": "^1.27.0-alpha.9" + "@bosonprotocol/common": "^1.27.0-alpha.11" }, "peerDependencies": { "ethers": "^5.5.0" @@ -2690,13 +2690,13 @@ } }, "node_modules/@bosonprotocol/react-kit": { - "version": "0.29.0-alpha.9", - "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.29.0-alpha.9.tgz", - "integrity": "sha512-VPosThRy7YsQazhTQAH1P/zVHD5HrD9OdnaqfZRRB2VN798TckevyGH7LGI6y09j0wePfQNJfw4E1+RS7HhsYA==", + "version": "0.29.0-alpha.11", + "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.29.0-alpha.11.tgz", + "integrity": "sha512-Nhmmps5mLIlFKdLrVL1fYVYnGQwUeUj3z+cWdNSr2AXT6QSAPIfbXoF+8xfTo0Ln5UdWZFC9D6VZV9Iom7bXyg==", "dependencies": { "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", - "@bosonprotocol/core-sdk": "^1.40.0-alpha.9", - "@bosonprotocol/ethers-sdk": "^1.14.0-alpha.9", + "@bosonprotocol/core-sdk": "^1.40.0-alpha.11", + "@bosonprotocol/ethers-sdk": "^1.14.0-alpha.11", "@bosonprotocol/ipfs-storage": "^1.11.2", "@davatar/react": "1.11.1", "@ethersproject/units": "5.6.0", @@ -50174,9 +50174,9 @@ } }, "@bosonprotocol/common": { - "version": "1.27.0-alpha.9", - "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.27.0-alpha.9.tgz", - "integrity": "sha512-2H0UHtO9wQNl12zptF/aeb+3m49SOln+bsBO9ifjazvwiEfdFjHPUHSBhzmyiQ4Dd/U73eC8EuLVcoIIPKj0wQ==", + "version": "1.27.0-alpha.11", + "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.27.0-alpha.11.tgz", + "integrity": "sha512-KdA+/QV9STi2wCcr2nWzBF8oxAsqeg32NsStimktVbAexOyrptIh+nAura6UGUJAn/zqEVsrXt3Wsd6jrybEQA==", "requires": { "@bosonprotocol/metadata": "^1.16.0", "@ethersproject/abi": "^5.5.0", @@ -50188,11 +50188,11 @@ } }, "@bosonprotocol/core-sdk": { - "version": "1.40.0-alpha.9", - "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.40.0-alpha.9.tgz", - "integrity": "sha512-ssIY/K6Axf6yn/VPI4qBeXfaT7VqhlPc5FZ/giKNT8Q8jazxYEUC+cGPGXk30XK8IVRu1Mo19yKfnrLs5XEpQg==", + "version": "1.40.0-alpha.11", + "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.40.0-alpha.11.tgz", + "integrity": "sha512-Kp1S9P/fVpjyc48g3iW/lBT3k0DehdxCXuTpf/q2Rkaw4lwUYUhlcHay8A6gHGmhkqjRo7Vs52AWPG2R84+IGg==", "requires": { - "@bosonprotocol/common": "^1.27.0-alpha.9", + "@bosonprotocol/common": "^1.27.0-alpha.11", "@ethersproject/abi": "^5.5.0", "@ethersproject/address": "^5.5.0", "@ethersproject/bignumber": "^5.5.0", @@ -50208,11 +50208,11 @@ } }, "@bosonprotocol/ethers-sdk": { - "version": "1.14.0-alpha.9", - "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.14.0-alpha.9.tgz", - "integrity": "sha512-AxdDwkWz88FBB5KYlnU/Tq3+E5Oq/9K6rKoI5Y4VK+h7hCOvs+jlNM7W7Gfckyz/mKY0KmDkdn9QtViF3U0NAw==", + "version": "1.14.0-alpha.11", + "resolved": "https://registry.npmjs.org/@bosonprotocol/ethers-sdk/-/ethers-sdk-1.14.0-alpha.11.tgz", + "integrity": "sha512-F3EuVqQ9J9YvLOQB/ulHIXUEFInubQ9nGKOxChX2ttAX4xXcGup4oRLR+i1rhWWa2KNGwDvN55s4iK8wHnwfGA==", "requires": { - "@bosonprotocol/common": "^1.27.0-alpha.9" + "@bosonprotocol/common": "^1.27.0-alpha.11" } }, "@bosonprotocol/ipfs-storage": { @@ -50235,13 +50235,13 @@ } }, "@bosonprotocol/react-kit": { - "version": "0.29.0-alpha.9", - "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.29.0-alpha.9.tgz", - "integrity": "sha512-VPosThRy7YsQazhTQAH1P/zVHD5HrD9OdnaqfZRRB2VN798TckevyGH7LGI6y09j0wePfQNJfw4E1+RS7HhsYA==", + "version": "0.29.0-alpha.11", + "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.29.0-alpha.11.tgz", + "integrity": "sha512-Nhmmps5mLIlFKdLrVL1fYVYnGQwUeUj3z+cWdNSr2AXT6QSAPIfbXoF+8xfTo0Ln5UdWZFC9D6VZV9Iom7bXyg==", "requires": { "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", - "@bosonprotocol/core-sdk": "^1.40.0-alpha.9", - "@bosonprotocol/ethers-sdk": "^1.14.0-alpha.9", + "@bosonprotocol/core-sdk": "^1.40.0-alpha.11", + "@bosonprotocol/ethers-sdk": "^1.14.0-alpha.11", "@bosonprotocol/ipfs-storage": "^1.11.2", "@davatar/react": "1.11.1", "@ethersproject/units": "5.6.0", diff --git a/package.json b/package.json index d6f423af3..342638cfd 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "dependencies": { "@apollo/client": "^3.8.1", "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", - "@bosonprotocol/react-kit": "^0.29.0-alpha.9", + "@bosonprotocol/react-kit": "^0.29.0-alpha.11", "@davatar/react": "^1.10.4", "@ethersproject/address": "^5.6.1", "@ethersproject/units": "^5.7.0", diff --git a/src/components/modal/components/DetailWidget.tsx b/src/components/modal/components/DetailWidget.tsx index 853fc5236..9014aec28 100644 --- a/src/components/modal/components/DetailWidget.tsx +++ b/src/components/modal/components/DetailWidget.tsx @@ -70,6 +70,7 @@ export default function DetailWidget({ componentWhileLoading={() => ( )} + withMuteButton /> ) : ( diff --git a/src/components/modal/components/ProductCreateSuccess.tsx b/src/components/modal/components/ProductCreateSuccess.tsx index af670ecd0..949cbabd2 100644 --- a/src/components/modal/components/ProductCreateSuccess.tsx +++ b/src/components/modal/components/ProductCreateSuccess.tsx @@ -116,6 +116,7 @@ export default function ProductCreateSuccess({ src={animationUrl} dataTestId="offerAnimationUrl" videoProps={{ muted: true, loop: true, autoPlay: true }} + withMuteButton /> ) : ( OfferImage} + withMuteButton /> ) : ( OfferImage diff --git a/src/components/ui/Video.tsx b/src/components/ui/Video.tsx index 3660ec78e..820def6b0 100644 --- a/src/components/ui/Video.tsx +++ b/src/components/ui/Video.tsx @@ -91,6 +91,7 @@ interface IVideo { showPlaceholderText?: boolean; noPreload?: boolean; videoProps?: VideoHTMLAttributes; + withMuteButton?: boolean; componentWhileLoading?: () => ReactElement; } const Video: React.FC> = ({ @@ -100,11 +101,10 @@ const Video: React.FC> = ({ showPlaceholderText = true, noPreload = false, videoProps, + withMuteButton, componentWhileLoading: ComponentWhileLoading, ...rest }) => { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { muted: _, ...vidProps } = videoProps ?? {}; const [isLoaded, setIsLoaded] = useState(noPreload); const [isError, setIsError] = useState(false); const [videoSrc, setVideoSrc] = useState( @@ -216,14 +216,16 @@ const Video: React.FC> = ({ {children || ""} {videoSrc && ( <> - setMuted((prev) => !prev)} - /> + {withMuteButton && ( + setMuted((prev) => !prev)} + /> + )} diff --git a/src/pages/exchange/Exchange.tsx b/src/pages/exchange/Exchange.tsx index 97018e999..031c92f5e 100644 --- a/src/pages/exchange/Exchange.tsx +++ b/src/pages/exchange/Exchange.tsx @@ -152,6 +152,7 @@ export default function Exchange() { dataTestId="offerAnimationUrl" videoProps={{ muted: true, loop: true, autoPlay: true }} componentWhileLoading={() => OfferImage} + withMuteButton /> ) : ( OfferImage diff --git a/src/pages/offers/OfferDetail.tsx b/src/pages/offers/OfferDetail.tsx index 9e6bd2ef4..febb428a2 100644 --- a/src/pages/offers/OfferDetail.tsx +++ b/src/pages/offers/OfferDetail.tsx @@ -112,6 +112,7 @@ export default function OfferDetail() { dataTestId="offerAnimationUrl" videoProps={{ muted: true, loop: true, autoPlay: true }} componentWhileLoading={() => OfferImage} + withMuteButton /> ) : ( OfferImage diff --git a/src/pages/products/ProductDetail.tsx b/src/pages/products/ProductDetail.tsx index 53f822ac6..2c6fe203e 100644 --- a/src/pages/products/ProductDetail.tsx +++ b/src/pages/products/ProductDetail.tsx @@ -147,6 +147,7 @@ export default function ProductDetail() { autoPlay: true }} componentWhileLoading={() => OfferImage} + withMuteButton /> ) : ( OfferImage From 20134a29d92cc4c9d3e1c52da00c1f9912cb5ce6 Mon Sep 17 00:00:00 2001 From: Albert Folch Date: Mon, 25 Mar 2024 14:57:37 +0100 Subject: [PATCH 4/4] fix: add missing prop overview tab --- src/pages/common/OfferFullDescription.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/common/OfferFullDescription.tsx b/src/pages/common/OfferFullDescription.tsx index e914c895c..92078b1ca 100644 --- a/src/pages/common/OfferFullDescription.tsx +++ b/src/pages/common/OfferFullDescription.tsx @@ -37,6 +37,7 @@ type OfferFullDescriptionProps = Omit< | "onClickBuyOrSwap" | "walletConnectProjectId" | "includeGeneralProductDataTab" + | "includeOverviewTab" >; export const OfferFullDescription: React.FC = ( @@ -52,6 +53,7 @@ export const OfferFullDescription: React.FC = ( return (