From 16ed0449ab4a9f16cb42bfc2ea6c6c1d005108f9 Mon Sep 17 00:00:00 2001 From: Oleksandra Okhotnykova Date: Sat, 7 Sep 2024 11:57:46 +0200 Subject: [PATCH 1/5] OV-194: * fix menu styling --- .../studio/components/video-menu/components/menu/menu.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu/menu.tsx b/frontend/src/bundles/studio/components/video-menu/components/menu/menu.tsx index 09e1c4a72..133dcd594 100644 --- a/frontend/src/bundles/studio/components/video-menu/components/menu/menu.tsx +++ b/frontend/src/bundles/studio/components/video-menu/components/menu/menu.tsx @@ -45,6 +45,7 @@ const Menu: React.FC = ({ color: 'white', borderTopRightRadius: 'xl', borderBottomRightRadius: 'xl', + zIndex: 1000, }} > From e5b02e72f4e750261f2f3ab29b2ff0cfe3a59e9c Mon Sep 17 00:00:00 2001 From: Oleksandra Okhotnykova Date: Sat, 7 Sep 2024 11:59:06 +0200 Subject: [PATCH 2/5] OV-194: * make player responsive when schrinking page --- .../common/components/player/player.tsx | 9 ++++--- frontend/src/bundles/studio/pages/studio.tsx | 25 ++++++++++++------- .../bundles/studio/pages/styles.module.css | 6 ----- 3 files changed, 21 insertions(+), 19 deletions(-) delete mode 100644 frontend/src/bundles/studio/pages/styles.module.css diff --git a/frontend/src/bundles/common/components/player/player.tsx b/frontend/src/bundles/common/components/player/player.tsx index aa74cde54..de78fc20e 100644 --- a/frontend/src/bundles/common/components/player/player.tsx +++ b/frontend/src/bundles/common/components/player/player.tsx @@ -50,11 +50,12 @@ const Player = ({ compositionWidth={size.width} compositionHeight={size.height} fps={30} - style={ - orientation === VideoPreview.LANDSCAPE + style={{ + maxHeight: '100%', + ...(orientation === VideoPreview.LANDSCAPE ? LandscapeStyle - : PortraitStyle - } + : PortraitStyle), + }} /> ); diff --git a/frontend/src/bundles/studio/pages/studio.tsx b/frontend/src/bundles/studio/pages/studio.tsx index 1ee8d4323..742a78879 100644 --- a/frontend/src/bundles/studio/pages/studio.tsx +++ b/frontend/src/bundles/studio/pages/studio.tsx @@ -26,7 +26,6 @@ import { } from '../components/components.js'; import { mockItems } from '../mocks/mock.helper.js'; import { actions as studioActionCreator } from '../store/studio.js'; -import styles from './styles.module.css'; const initialRange: Range = { start: minutesToMilliseconds(0), @@ -42,7 +41,13 @@ const Studio: React.FC = () => { }, [dispatch]); return ( - +
{ /> - + + + + + { /> - - ); }; diff --git a/frontend/src/bundles/studio/pages/styles.module.css b/frontend/src/bundles/studio/pages/styles.module.css deleted file mode 100644 index c0d69e215..000000000 --- a/frontend/src/bundles/studio/pages/styles.module.css +++ /dev/null @@ -1,6 +0,0 @@ -.timeline { - position: fixed; - left: 0; - bottom: 0; - width: 100%; -} From d5be4bfdaf12a5f3b43cd27a61ae4c8bfefa207e Mon Sep 17 00:00:00 2001 From: Oleksandra Okhotnykova Date: Sat, 7 Sep 2024 12:00:36 +0200 Subject: [PATCH 3/5] OV-194: * remove space at the bottom of the page --- frontend/src/routes/routes.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/routes/routes.tsx b/frontend/src/routes/routes.tsx index 30fdc4cac..1b90fa746 100644 --- a/frontend/src/routes/routes.tsx +++ b/frontend/src/routes/routes.tsx @@ -23,7 +23,7 @@ const routes = [ path: AppRoute.ROOT, element: ( - , + ), }, @@ -31,7 +31,7 @@ const routes = [ path: AppRoute.STUDIO, element: ( - , + ), }, @@ -39,7 +39,7 @@ const routes = [ path: AppRoute.MY_AVATAR, element: ( - , + ), }, From 910443b6ca4877df9200e8d2ac8a7e716e6eb042 Mon Sep 17 00:00:00 2001 From: Oleksandra Okhotnykova Date: Sun, 8 Sep 2024 11:31:00 +0200 Subject: [PATCH 4/5] OV-194: * fix z-index --- .../studio/components/video-menu/components/menu/menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu/menu.tsx b/frontend/src/bundles/studio/components/video-menu/components/menu/menu.tsx index 133dcd594..bc3d10491 100644 --- a/frontend/src/bundles/studio/components/video-menu/components/menu/menu.tsx +++ b/frontend/src/bundles/studio/components/video-menu/components/menu/menu.tsx @@ -45,7 +45,7 @@ const Menu: React.FC = ({ color: 'white', borderTopRightRadius: 'xl', borderBottomRightRadius: 'xl', - zIndex: 1000, + zIndex: 100, }} > From 4e0260da96266a12fe709ae14a01ffa168611588 Mon Sep 17 00:00:00 2001 From: Oleksandra Okhotnykova Date: Sun, 8 Sep 2024 11:32:07 +0200 Subject: [PATCH 5/5] OV-194: * remove maxHeight from props --- frontend/src/bundles/common/components/player/player.tsx | 9 ++++----- .../common/components/player/styles/landscape.style.ts | 1 + .../common/components/player/styles/portrait.style.ts | 1 + 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/src/bundles/common/components/player/player.tsx b/frontend/src/bundles/common/components/player/player.tsx index de78fc20e..aa74cde54 100644 --- a/frontend/src/bundles/common/components/player/player.tsx +++ b/frontend/src/bundles/common/components/player/player.tsx @@ -50,12 +50,11 @@ const Player = ({ compositionWidth={size.width} compositionHeight={size.height} fps={30} - style={{ - maxHeight: '100%', - ...(orientation === VideoPreview.LANDSCAPE + style={ + orientation === VideoPreview.LANDSCAPE ? LandscapeStyle - : PortraitStyle), - }} + : PortraitStyle + } /> ); diff --git a/frontend/src/bundles/common/components/player/styles/landscape.style.ts b/frontend/src/bundles/common/components/player/styles/landscape.style.ts index 1e5863486..a817dfc51 100644 --- a/frontend/src/bundles/common/components/player/styles/landscape.style.ts +++ b/frontend/src/bundles/common/components/player/styles/landscape.style.ts @@ -2,6 +2,7 @@ const LandscapeStyle = { width: '40%', minWidth: '400px', objectFit: 'contain', + maxHeight: '100%', } as const; export { LandscapeStyle }; diff --git a/frontend/src/bundles/common/components/player/styles/portrait.style.ts b/frontend/src/bundles/common/components/player/styles/portrait.style.ts index a13875a94..ce23f3143 100644 --- a/frontend/src/bundles/common/components/player/styles/portrait.style.ts +++ b/frontend/src/bundles/common/components/player/styles/portrait.style.ts @@ -2,6 +2,7 @@ const PortraitStyle = { width: '10%', minWidth: '200px', objectFit: 'contain', + maxHeight: '100%', } as const; export { PortraitStyle };