fix: attempt to make mobile support better

Zibbp · Dec 24, 2023 · 1bc5040 · 1bc5040
1 parent c2a7af2
commit 1bc5040
Show file tree

Hide file tree

Showing 13 changed files with 192 additions and 110 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -19,6 +19,7 @@ const TheaterModeIcon = () => {
           size="xl"
           variant="transparent"
           onClick={toggleTheaterMode}
+          onTouchStart={toggleTheaterMode}
           className={classes.customFullScreenButton}
         >
           <IconMaximize size="1.8rem" />

diff --git 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
@@ -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%;
+
 }
diff --git 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
       >
 
         <MediaProvider >

diff --git 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 <div>Failed to load</div>;
@@ -39,15 +41,31 @@ const WorkflowsActiveTable = (props: Props) => {
       <Table.Td>
         {workflow.status == 1 && <WorkflowStatusRunning />}
         {workflow.status == 2 && <WorkflowStatusCompleted />}
+        {workflow.status == 3 && <WorkflowStatusFailed />}
         {workflow.status == 4 && <WorkflowStatusCancelled />}
         {workflow.status == 5 && <WorkflowStatusTerminated />}
       </Table.Td>
-      <Table.Td>{workflow.execution.workflow_id}</Table.Td>
-      <Link href={`/workflows/${workflow.execution.workflow_id}/${workflow.execution.run_id}`}>
-        <span>
-          {workflow.execution.run_id}
-        </span>
-      </Link>      <Table.Td>{workflow.type.name}</Table.Td>
+      <Table.Td>
+        <Link href={`/workflows/${workflow.execution.workflow_id}/${workflow.execution.run_id}`}>
+          <span>
+            {workflow.execution.workflow_id}
+          </span>
+        </Link>
+      </Table.Td>
+      <Table.Td>
+        <Link href={`/workflows/${workflow.execution.workflow_id}/${workflow.execution.run_id}`}>
+          <span>
+            {workflow.execution.run_id}
+          </span>
+        </Link>
+      </Table.Td>
+      <Table.Td>
+        <Link href={`/workflows/${workflow.execution.workflow_id}/${workflow.execution.run_id}`}>
+          <span>
+            {workflow.type.name}
+          </span>
+        </Link>
+      </Table.Td>
       <Table.Td>{dayjs(workflow.start_time).format("YYYY/MM/DD HH:mm:ss")}</Table.Td>
     </Table.Tr>
   ));

diff --git 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 <div>Failed to load</div>;
@@ -39,18 +41,31 @@ const WorkflowsClosedTable = (props: Props) => {
       <Table.Td>
         {workflow.status == 1 && <WorkflowStatusRunning />}
         {workflow.status == 2 && <WorkflowStatusCompleted />}
+        {workflow.status == 3 && <WorkflowStatusFailed />}
         {workflow.status == 4 && <WorkflowStatusCancelled />}
         {workflow.status == 5 && <WorkflowStatusTerminated />}
       </Table.Td>
-      <Table.Td>{workflow.execution.workflow_id}</Table.Td>
+      <Table.Td>
+        <Link href={`/workflows/${workflow.execution.workflow_id}/${workflow.execution.run_id}`}>
+          <span>
+            {workflow.execution.workflow_id}
+          </span>
+        </Link>
+      </Table.Td>
       <Table.Td>
         <Link href={`/workflows/${workflow.execution.workflow_id}/${workflow.execution.run_id}`}>
           <span>
             {workflow.execution.run_id}
           </span>
         </Link>
       </Table.Td>
-      <Table.Td>{workflow.type.name}</Table.Td>
+      <Table.Td>
+        <Link href={`/workflows/${workflow.execution.workflow_id}/${workflow.execution.run_id}`}>
+          <span>
+            {workflow.type.name}
+          </span>
+        </Link>
+      </Table.Td>
       <Table.Td>{dayjs(workflow.close_time).format("YYYY/MM/DD HH:mm:ss")}</Table.Td>
     </Table.Tr>
   ));

diff --git a/src/components/Workflows/Status/Failed.tsx b/src/components/Workflows/Status/Failed.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+
+type Props = {}
+
+const WorkflowStatusFailed = (props: Props) => {
+  return (
+    <div style={{
+      backgroundColor: "#fba0a1",
+      padding: "5px 10px",
+      borderRadius: "5px",
+      width: "fit-content",
+      color: "#a90003",
+      opacity: 0.8,
+      fontWeight: 600,
+    }}>Failed</div>
+  )
+}
+
+export default WorkflowStatusFailed
diff --git 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
@@ -216,7 +216,7 @@ export function HeaderMegaMenu() {
 
           </Group>
 
-          <Group visibleFrom="sm" className={classes.groupRight}>
+          <Group visibleFrom="md" className={classes.groupRight}>
             <TextInput
               className={classes.search}
               value={search}