From 17adb324891c1d69259cd9af5da0e099796893fb Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Wed, 12 Jun 2024 11:57:36 +0200 Subject: [PATCH 1/3] =?UTF-8?q?=E2=9C=A8=20feat(player):=20add=20CutStart?= =?UTF-8?q?=20component=20to=20show=20start=20point=20when=20cutting=20vid?= =?UTF-8?q?eo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/player/parts/CutStart.tsx | 30 +++++++++++++++++++++++++++ src/stories/player/parts/controls.tsx | 12 ++++++++++- 2 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 src/stories/player/parts/CutStart.tsx diff --git a/src/stories/player/parts/CutStart.tsx b/src/stories/player/parts/CutStart.tsx new file mode 100644 index 00000000..9bca1b96 --- /dev/null +++ b/src/stories/player/parts/CutStart.tsx @@ -0,0 +1,30 @@ +import { styled } from "styled-components"; + +const Pin = styled.div<{ left: number }>` + width: 2px; + bottom: 0; + left: ${({ left }) => `${left}%`}; + position: absolute; + height: 250%; + z-index: 2; + background-color: ${({ theme }) => theme.palette.kale[600]}; + margin-left: -2px; // To not override the current time marker + + &:after { + content: ""; + position: absolute; + bottom: 100%; + left: 50%; + width: 10px; + height: 10px; + border-radius: 50%; + transform: translate(-50%, 0); + background-color: ${({ theme }) => theme.palette.kale[600]}; + } +`; + +const CutStart = ({ left }: { left: number; }) => { + return ; +}; + +export { CutStart }; \ No newline at end of file diff --git a/src/stories/player/parts/controls.tsx b/src/stories/player/parts/controls.tsx index 32b23537..3236077c 100644 --- a/src/stories/player/parts/controls.tsx +++ b/src/stories/player/parts/controls.tsx @@ -13,6 +13,7 @@ import { TimeLabel } from "./timeLabel"; import { PlayerTooltip } from "./tooltip"; import { formatDuration } from "../utils"; import useDebounce from "../../../hooks/useDebounce"; +import { CutStart } from "./CutStart"; export const ControlsWrapper = styled.div` ${({ showControls }) => showControls ? "position: relative;" : "position: absolute;"} @@ -85,6 +86,7 @@ export const Controls = ({ const progressRef = useRef(null); const { context, setCurrentTime } = useVideoContext() const debouncedMark = useDebounce(updatedMark, 500); + const [cutStart, setCutStart] = useState(0); const { reset, isGrabbing, activeBookmark, fromEnd } = useProgressContext(); @@ -197,6 +199,13 @@ export const Controls = ({ } }, [debouncedMark, onBookMarkUpdated]); + useEffect(() => { + if (isCutting) { + setCutStart(progress); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isCutting]); + return ( + /> + {isCutting && } From 3a0d3da54796c053270b65967eb977f05f06b723 Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Wed, 12 Jun 2024 16:39:20 +0200 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=94=A8=20refactor(CutStart.tsx):=20up?= =?UTF-8?q?date=20color=20theme=20from=20kale=20to=20grey=20in=20Pin=20com?= =?UTF-8?q?ponent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/player/parts/CutStart.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stories/player/parts/CutStart.tsx b/src/stories/player/parts/CutStart.tsx index 9bca1b96..217b675c 100644 --- a/src/stories/player/parts/CutStart.tsx +++ b/src/stories/player/parts/CutStart.tsx @@ -7,7 +7,7 @@ const Pin = styled.div<{ left: number }>` position: absolute; height: 250%; z-index: 2; - background-color: ${({ theme }) => theme.palette.kale[600]}; + background-color: ${({ theme }) => theme.palette.grey[600]}; margin-left: -2px; // To not override the current time marker &:after { @@ -19,7 +19,7 @@ const Pin = styled.div<{ left: number }>` height: 10px; border-radius: 50%; transform: translate(-50%, 0); - background-color: ${({ theme }) => theme.palette.kale[600]}; + background-color: ${({ theme }) => theme.palette.grey[600]}; } `; From 77d4eb9400c018141c1e0623ae22adc25850ecea Mon Sep 17 00:00:00 2001 From: Marco Bonomo Date: Wed, 12 Jun 2024 17:00:23 +0200 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=94=A7=20refactor(player):=20add=20sh?= =?UTF-8?q?owControls=20prop=20to=20FloatingControls=20component=20?= =?UTF-8?q?=F0=9F=94=A7=20refactor(player):=20update=20Container=20styles?= =?UTF-8?q?=20based=20on=20showControls=20prop=20=F0=9F=94=A7=20refactor(p?= =?UTF-8?q?layer):=20update=20FloatingContainer=20styles=20based=20on=20sh?= =?UTF-8?q?owControls=20prop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/player/index.tsx | 1 + src/stories/player/parts/container.tsx | 4 +++- src/stories/player/parts/floatingControls.tsx | 9 +++++---- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/stories/player/index.tsx b/src/stories/player/index.tsx index fc2fff87..ff2d0623 100644 --- a/src/stories/player/index.tsx +++ b/src/stories/player/index.tsx @@ -57,6 +57,7 @@ const PlayerCore = forwardRef( ) : ( )} diff --git a/src/stories/player/parts/container.tsx b/src/stories/player/parts/container.tsx index f4e6101d..87ef4dbd 100644 --- a/src/stories/player/parts/container.tsx +++ b/src/stories/player/parts/container.tsx @@ -6,10 +6,12 @@ import { VideoStyle } from "./video"; export const Container = styled.div` position: relative; - ${({ showControls }) => !showControls && ` + ${({ showControls }) => !showControls ? ` display: flex; flex-direction: column; justify-content: center; + `: ` + margin-bottom: 80px; `} height: 100%; width: 100%; diff --git a/src/stories/player/parts/floatingControls.tsx b/src/stories/player/parts/floatingControls.tsx index 97130e25..e887f5e4 100644 --- a/src/stories/player/parts/floatingControls.tsx +++ b/src/stories/player/parts/floatingControls.tsx @@ -9,9 +9,9 @@ export const FloatingContainer = styled.div` top: 0; left: 0; right: 0; - ${({ isPlaying }) => isPlaying && "display: none;"} z-index: 1; - height: calc(100% - 80px); + ${({ isPlaying }) => isPlaying && "display: none;"} + ${({ showControls }) => showControls ? "height: 100%" : "height: calc(100% - 80px)"}; `; const PlayIcon = styled(PlayIconComponent)``; @@ -40,12 +40,13 @@ const ButtonsContainer = styled.div` export const FloatingControls = (props: { isPlaying?: boolean; + showControls?: boolean; onClick?: () => void; }) => { - const { isPlaying, onClick } = props; + const { isPlaying, showControls, onClick } = props; return ( - + {!isPlaying && (