From 1bc50404f51ab84ef94b7c00e4a57795d3ec8c90 Mon Sep 17 00:00:00 2001 From: Zibbp Date: Sun, 24 Dec 2023 18:17:42 +0000 Subject: [PATCH] fix: attempt to make mobile support better --- package-lock.json | 20 ++- package.json | 3 +- src/components/Vod/TheaterModeIcon.tsx | 1 + src/components/Vod/TitleBar.module.css | 1 + src/components/Vod/VideoPlayer.module.css | 14 +- src/components/Vod/VideoPlayer.tsx | 1 + src/components/Workflows/ActiveTable.tsx | 30 +++- src/components/Workflows/ClosedTable.tsx | 19 ++- src/components/Workflows/Status/Failed.tsx | 19 +++ src/components/layouts/Main.tsx | 1 + src/components/layouts/Navbar.tsx | 2 +- src/pages/vods/[vodId].tsx | 171 +++++++++++---------- src/pages/vods/vodId.module.css | 20 ++- 13 files changed, 192 insertions(+), 110 deletions(-) create mode 100644 src/components/Workflows/Status/Failed.tsx diff --git a/package-lock.json b/package-lock.json index cb0489c..c557ace 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,7 @@ "@types/node": "20.10.5", "@types/react": "18.2.45", "@types/react-dom": "18.2.18", - "@vidstack/react": "^1.5.7", + "@vidstack/react": "^1.9.8", "axios": "^1.6.2", "clsx": "^2.0.0", "cookies-next": "^2.1.1", @@ -36,6 +36,7 @@ "react-dom": "18.2.0", "react-hook-form": "^7.49.2", "typescript": "5.3.3", + "vidstack": "^1.9.8", "zustand": "^4.4.7" }, "devDependencies": { @@ -490,9 +491,9 @@ "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==" }, "node_modules/@vidstack/react": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/@vidstack/react/-/react-1.6.1.tgz", - "integrity": "sha512-ABWEBxrgl6NaA0F5nXmbMgydnhNL1Wx1ta6b748guHqcjW+vjNgjI4mRGxUKoglBaVNnkswxe8icctDpSZ7GmQ==", + "version": "1.9.8", + "resolved": "https://registry.npmjs.org/@vidstack/react/-/react-1.9.8.tgz", + "integrity": "sha512-1gGlCXpmGriKZ+sgP1WLgm4tpkU2buXeAIPFoh8t7V4X3jV1l15oZS4whfPswCY6/9jAwVKq0jQBLryAuBYZww==", "dependencies": { "media-captions": "^1.0.1" }, @@ -1697,6 +1698,17 @@ "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", "dev": true }, + "node_modules/vidstack": { + "version": "1.9.8", + "resolved": "https://registry.npmjs.org/vidstack/-/vidstack-1.9.8.tgz", + "integrity": "sha512-0N5XqsvRHz4zO8nWnZ+ggSNkf65BkkjfDikJv1M8QCEovziSdnocBoIKuG1qQCHrcOxqwB8Z5/se8c1PrW98fQ==", + "dependencies": { + "media-captions": "^1.0.1" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", diff --git a/package.json b/package.json index 4aa9a90..9a7cc23 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "@types/node": "20.10.5", "@types/react": "18.2.45", "@types/react-dom": "18.2.18", - "@vidstack/react": "^1.5.7", + "@vidstack/react": "^1.9.8", "axios": "^1.6.2", "clsx": "^2.0.0", "cookies-next": "^2.1.1", @@ -37,6 +37,7 @@ "react-dom": "18.2.0", "react-hook-form": "^7.49.2", "typescript": "5.3.3", + "vidstack": "^1.9.8", "zustand": "^4.4.7" }, "devDependencies": { diff --git a/src/components/Vod/TheaterModeIcon.tsx b/src/components/Vod/TheaterModeIcon.tsx index 33fe29a..118f62b 100644 --- a/src/components/Vod/TheaterModeIcon.tsx +++ b/src/components/Vod/TheaterModeIcon.tsx @@ -19,6 +19,7 @@ const TheaterModeIcon = () => { size="xl" variant="transparent" onClick={toggleTheaterMode} + onTouchStart={toggleTheaterMode} className={classes.customFullScreenButton} > diff --git a/src/components/Vod/TitleBar.module.css b/src/components/Vod/TitleBar.module.css index decce82..38cdd34 100644 --- a/src/components/Vod/TitleBar.module.css +++ b/src/components/Vod/TitleBar.module.css @@ -2,6 +2,7 @@ width: 100%; height: 60px; position: relative; + overflow: scroll; } .titleBar { display: flex; diff --git a/src/components/Vod/VideoPlayer.module.css b/src/components/Vod/VideoPlayer.module.css index ae0ca5b..be39a9f 100644 --- a/src/components/Vod/VideoPlayer.module.css +++ b/src/components/Vod/VideoPlayer.module.css @@ -7,9 +7,9 @@ } @media (max-width: em(1000px)) { - height: auto !important; + height: 100%; video { - height: auto !important; + height: 100%; } } } @@ -20,11 +20,7 @@ video { height: 100vh; } - - @media (max-width: em(1000px)) { - height: auto !important; - video { - height: auto !important; - } - } + + width: 100%; + } \ No newline at end of file diff --git a/src/components/Vod/VideoPlayer.tsx b/src/components/Vod/VideoPlayer.tsx index 6c66e34..f30a290 100644 --- a/src/components/Vod/VideoPlayer.tsx +++ b/src/components/Vod/VideoPlayer.tsx @@ -266,6 +266,7 @@ const NewVideoPlayer = ({ vod }: any) => { onMouseEnter={handleHover} onMouseLeave={handleMouseLeave} onTouchStart={handleTouch} + playsinline > diff --git a/src/components/Workflows/ActiveTable.tsx b/src/components/Workflows/ActiveTable.tsx index 9489999..1fb2e36 100644 --- a/src/components/Workflows/ActiveTable.tsx +++ b/src/components/Workflows/ActiveTable.tsx @@ -9,6 +9,7 @@ import dayjs from 'dayjs'; import WorkflowStatusCancelled from './Status/Cancelled'; import WorkflowStatusTerminated from './Status/Terminated'; import Link from 'next/link'; +import WorkflowStatusFailed from './Status/Failed'; type Props = {} @@ -25,6 +26,7 @@ const WorkflowsActiveTable = (props: Props) => { }, false ).then((res) => res?.data), + refetchInterval: 2000, }); if (error) return
Failed to load
; @@ -39,15 +41,31 @@ const WorkflowsActiveTable = (props: Props) => { {workflow.status == 1 && } {workflow.status == 2 && } + {workflow.status == 3 && } {workflow.status == 4 && } {workflow.status == 5 && } - {workflow.execution.workflow_id} - - - {workflow.execution.run_id} - - {workflow.type.name} + + + + {workflow.execution.workflow_id} + + + + + + + {workflow.execution.run_id} + + + + + + + {workflow.type.name} + + + {dayjs(workflow.start_time).format("YYYY/MM/DD HH:mm:ss")} )); diff --git a/src/components/Workflows/ClosedTable.tsx b/src/components/Workflows/ClosedTable.tsx index 7940016..6efe885 100644 --- a/src/components/Workflows/ClosedTable.tsx +++ b/src/components/Workflows/ClosedTable.tsx @@ -9,6 +9,7 @@ import dayjs from 'dayjs'; import Link from 'next/link'; import WorkflowStatusCancelled from './Status/Cancelled'; import WorkflowStatusTerminated from './Status/Terminated'; +import WorkflowStatusFailed from './Status/Failed'; type Props = {} @@ -25,6 +26,7 @@ const WorkflowsClosedTable = (props: Props) => { }, false ).then((res) => res?.data), + refetchInterval: 2000, }); if (error) return
Failed to load
; @@ -39,10 +41,17 @@ const WorkflowsClosedTable = (props: Props) => { {workflow.status == 1 && } {workflow.status == 2 && } + {workflow.status == 3 && } {workflow.status == 4 && } {workflow.status == 5 && } - {workflow.execution.workflow_id} + + + + {workflow.execution.workflow_id} + + + @@ -50,7 +59,13 @@ const WorkflowsClosedTable = (props: Props) => { - {workflow.type.name} + + + + {workflow.type.name} + + + {dayjs(workflow.close_time).format("YYYY/MM/DD HH:mm:ss")} )); diff --git a/src/components/Workflows/Status/Failed.tsx b/src/components/Workflows/Status/Failed.tsx new file mode 100644 index 0000000..d53f46d --- /dev/null +++ b/src/components/Workflows/Status/Failed.tsx @@ -0,0 +1,19 @@ +import React from 'react' + +type Props = {} + +const WorkflowStatusFailed = (props: Props) => { + return ( +
Failed
+ ) +} + +export default WorkflowStatusFailed \ No newline at end of file diff --git a/src/components/layouts/Main.tsx b/src/components/layouts/Main.tsx index 06f1b40..c1e6cb9 100644 --- a/src/components/layouts/Main.tsx +++ b/src/components/layouts/Main.tsx @@ -11,6 +11,7 @@ export default function MainLayout({ children }) { // Theater mode support useEffect(() => { eventBus.on("theaterMode", (data) => { + console.log("toggling theater mode") setFullscreen(data); }); }, []); diff --git a/src/components/layouts/Navbar.tsx b/src/components/layouts/Navbar.tsx index a9b09ed..b49a2c6 100644 --- a/src/components/layouts/Navbar.tsx +++ b/src/components/layouts/Navbar.tsx @@ -216,7 +216,7 @@ export function HeaderMegaMenu() { - + { const liveChatPlayer = useRef(null); const [leftColumnHeight, setLeftColumnHeight] = useState(0); - const isMobile = useMediaQuery(`(max-width: ${em(1000)})`); + const isMobile = useMediaQuery(`(max-width: 1000px)`); + const [isMobileLandScape, setIsMobileLandScape] = useState(false); // Mobile screen / devices smaller than 1000px @@ -55,9 +56,18 @@ const VodPage = (props: any) => { // and set the height of the right column to the remaining height // which is 100vh - 120px - leftColumnHeight const handleResize = () => { - if (isMobile && leftColumnRef.current) { + console.debug("hi") + if (leftColumnRef.current) { + console.debug(`leftColumnRef.current.offsetHeight: ${leftColumnRef.current.offsetHeight}`) setLeftColumnHeight(leftColumnRef.current.offsetHeight); } + + if (isMobile && window.innerWidth > window.innerHeight) { + console.debug("mobile landscape") + setIsMobileLandScape(true); + } else { + setIsMobileLandScape(false); + } }; useEffect(() => { if (!isMobile) { @@ -70,6 +80,7 @@ const VodPage = (props: any) => { // set 1 second interval to check if the user is on a mobile device const interval = setInterval(() => { + handleResize(); if (rightColumnRef.current?.offsetHeight == 0) { handleResize(); } else { @@ -100,14 +111,23 @@ const VodPage = (props: any) => { // Theater mode support useEffect(() => { eventBus.on("theaterMode", (data) => { - setIsFullscreen(data); - // if (isMobile) { - // try { - // toggle(); - // } catch (error) { - // console.error(`Error toggling fullscreen: ${error}`); - // } - // } + console.debug(`vodId: toggling theater mode: ${data}`) + console.debug(`theaterMode: is mobile: ${isMobile} is fullscreen: ${isFullscreen} is landscape ${isMobileLandScape}`) + setIsFullscreen(!isFullscreen); + handleResize() + if (window.innerWidth < 1000) { + try { + toggle(); + } catch (error) { + console.error(`Error toggling fullscreen: ${error}`); + } + } + // sleep 1 second to wait for the video player to resize + setTimeout(() => { + handleResize(); + }, 1000); + + }); }, []); @@ -133,83 +153,68 @@ const VodPage = (props: any) => { {checkLoginRequired() && } {!checkLoginRequired() && ( - -
-
- -
-
-
- - {data.chat_video_path && - !useUserStore.getState().settings.useNewChatPlayer && ( -
- {isMobile ? ( -
- -
- ) : ( -
- -
- )} +
+ {!isMobile && ( + +
+
+
- - )} - {data.chat_path && - useUserStore.getState().settings.useNewChatPlayer && ( -
- {isMobile ? ( -
- +
+
+ {data.chat_video_path && + !useUserStore.getState().settings.useNewChatPlayer && ( +
+
+ +
- ) : ( -
- + )} + {data.chat_path && + useUserStore.getState().settings.useNewChatPlayer && ( +
+
+ +
)} -
- )} - -
- - +
+ + )} + {isMobile && ( + +
+ +
+
+ +
+ + )} +
)} {!isFullscreen && }
diff --git a/src/pages/vods/vodId.module.css b/src/pages/vods/vodId.module.css index 6aa7f19..3b8ba16 100644 --- a/src/pages/vods/vodId.module.css +++ b/src/pages/vods/vodId.module.css @@ -24,14 +24,26 @@ } .container { display: flex; - @media (max-width: em(1000px)) { - flex-wrap: wrap; - } +} +.containerMobile { + display: flex; + width: 100vw; } .leftColumn { flex-grow: 1; + width: calc(100vw - 340px); +} +.leftColumnMobile { + flex-grow: 1; + width: calc(100vw - 200px); } .rightColumn { min-width: 340px; width: 340px; -} \ No newline at end of file + max-width: 340px; +} +.rightColumnMobile { + min-width: 200px; + width: 200px; + max-width: 200px; +}