feat: package upgrades & temporal support

Dockerfile

@@ -1,13 +1,13 @@
 # Install dependencies only when needed
-FROM node:16-alpine AS deps
+FROM node:18-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
 COPY package.json package-lock.json ./
 RUN npm install
 
 # Rebuild the source code only when needed
-FROM node:16-alpine AS builder
+FROM node:18-alpine AS builder
 RUN apk add --no-cache git
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
@@ -20,7 +20,7 @@ RUN npm run build
 
 
 # Production image, copy all the files and run next
-FROM node:16-alpine AS runner
+FROM node:18-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV production

package.json

@@ -9,36 +9,39 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.6",
-    "@emotion/server": "^11.10.0",
-    "@mantine/core": "^6.0.15",
-    "@mantine/dates": "^6.0.15",
-    "@mantine/ds": "^6.0.15",
-    "@mantine/form": "^6.0.15",
-    "@mantine/hooks": "^6.0.15",
-    "@mantine/next": "^6.0.15",
-    "@mantine/notifications": "^6.0.15",
-    "@tabler/icons": "^1.119.0",
-    "@tanstack/react-query": "^4.29.19",
-    "@tanstack/react-query-devtools": "^4.29.19",
-    "@types/node": "18.14.0",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.11",
-    "@vidstack/react": "^0.6.13",
-    "axios": "^1.4.0",
+    "@mantine/carousel": "^7.3.2",
+    "@mantine/core": "^7.3.2",
+    "@mantine/dates": "^7.3.2",
+    "@mantine/form": "^7.3.2",
+    "@mantine/hooks": "^7.3.2",
+    "@mantine/notifications": "^7.3.2",
+    "@tabler/icons-react": "^2.44.0",
+    "@tanstack/react-query": "^5.14.1",
+    "@tanstack/react-query-devtools": "^5.14.1",
+    "@types/node": "20.10.5",
+    "@types/react": "18.2.45",
+    "@types/react-dom": "18.2.18",
+    "@vidstack/react": "^1.5.7",
+    "axios": "^1.6.2",
+    "clsx": "^2.0.0",
     "cookies-next": "^2.1.1",
-    "dayjs": "^1.11.8",
+    "dayjs": "^1.11.10",
+    "embla-carousel-react": "^7.1.0",
     "events": "^3.3.0",
     "lodash": "^4.17.21",
-    "mantine-datatable": "^2.7.1",
+    "mantine-datatable": "^7.3.0",
     "media-icons": "^0.10.0",
-    "next": "13.4.4",
-    "plyr-react": "^5.2.0",
+    "next": "^14.0.4",
+    "plyr-react": "^5.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "^7.45.1",
-    "typescript": "5.1.6",
-    "vidstack": "^0.6.13",
-    "zustand": "^4.3.8"
+    "react-hook-form": "^7.49.2",
+    "typescript": "5.3.3",
+    "zustand": "^4.4.7"
+  },
+  "devDependencies": {
+    "postcss": "^8.4.32",
+    "postcss-preset-mantine": "^1.12.0",
+    "postcss-simple-vars": "^7.0.1"
   }
 }

postcss.config.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    "postcss-preset-mantine": {},
+    "postcss-simple-vars": {
+      variables: {
+        "mantine-breakpoint-xs": "36em",
+        "mantine-breakpoint-sm": "48em",
+        "mantine-breakpoint-md": "62em",
+        "mantine-breakpoint-lg": "75em",
+        "mantine-breakpoint-xl": "88em",
+      },
+    },
+  },
+};

src/components/Admin/Channels/Channels.module.css

@@ -0,0 +1,6 @@
+.actionButton {
+  cursor: pointer;
+}
+.actionButtons {
+  display: flex;
+}

src/components/Admin/Channels/Drawer.tsx

@@ -13,7 +13,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useApi } from "../../../hooks/useApi";
-import { IconQuestionCircle } from "@tabler/icons";
+import { IconHelpCircle, IconQuestionMark } from "@tabler/icons-react";
 
 const AdminChannelDrawer = ({ handleClose, channel, mode }) => {
   const { handleSubmit } = useForm();
@@ -167,8 +167,8 @@ const AdminChannelDrawer = ({ handleClose, channel, mode }) => {
           certain amount of time. 'Lock' a video to prevent it from being
           deleted."
           >
-            <ActionIcon color="dark">
-              <IconQuestionCircle size="1.125rem" />
+            <ActionIcon variant="transparent">
+              <IconHelpCircle size="1.125rem" />
             </ActionIcon>
           </Tooltip>
         </div>

src/components/Admin/Channels/Table.tsx

@@ -7,28 +7,18 @@ import GanymedeLoader from "../../Utils/GanymedeLoader";
 import sortBy from "lodash/sortBy";
 import {
   ActionIcon,
-  createStyles,
   Drawer,
   Group,
   Modal,
   TextInput,
 } from "@mantine/core";
-import { IconPencil, IconSearch, IconTrash } from "@tabler/icons";
+import { IconPencil, IconSearch, IconTrash } from "@tabler/icons-react";
 import { useDebouncedValue } from "@mantine/hooks";
 import AdminChannelDrawer from "./Drawer";
 import AdminChannelsDelete from "./Delete";
-
-const useStyles = createStyles((theme) => ({
-  actionButton: {
-    cursor: "pointer",
-  },
-  actionButtons: {
-    display: "flex",
-  },
-}));
+import classes from "./Channels.module.css"
 
 const AdminChannelsTable = () => {
-  const { classes, cx, theme } = useStyles();
   const [drawerOpened, setDrawerOpened] = useState(false);
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(20);
@@ -116,7 +106,7 @@ const AdminChannelsTable = () => {
         />
       </div>
       <DataTable
-        withBorder
+        withTableBorder
         borderRadius="sm"
         withColumnBorders
         striped
@@ -140,16 +130,18 @@ const AdminChannelsTable = () => {
             title: "Actions",
             textAlignment: "right",
             render: (channel) => (
-              <Group spacing={4} position="right" noWrap>
+              <Group position="right" noWrap>
                 <ActionIcon
                   onClick={() => openDrawer(channel)}
                   className={classes.actionButton}
+                  variant="light"
                 >
                   <IconPencil size={18} />
                 </ActionIcon>
                 <ActionIcon
                   onClick={() => openDeleteModal(channel)}
                   className={classes.actionButton}
+                  variant="light" color="red"
                 >
                   <IconTrash size={18} />
                 </ActionIcon>

src/components/Admin/Queue/Drawer.tsx

@@ -113,30 +113,35 @@ const AdminQueueDrawer = ({ handleClose, queue, mode }) => {
           label="Is Processing"
           checked={processing}
           onChange={(e) => setProcessing(e.currentTarget.checked)}
+          mb={5}
         />
 
         <Switch
           label="On Hold"
           checked={onHold}
           onChange={(e) => setOnHold(e.currentTarget.checked)}
+          mb={5}
         />
 
         <Switch
           label="Video Processing"
           checked={videoProcessing}
           onChange={(e) => setVideoProcessing(e.currentTarget.checked)}
+          mb={5}
         />
 
         <Switch
           label="Chat Processing"
           checked={chatProcessing}
           onChange={(e) => setChatProcessing(e.currentTarget.checked)}
+          mb={5}
         />
 
         <Switch
           label="Live Archive"
           checked={liveArchive}
           onChange={(e) => setLiveArchive(e.currentTarget.checked)}
+          mb={5}
         />
 
         <Select

src/components/Admin/Queue/Queue.module.css

@@ -0,0 +1,9 @@
+.actionButton {
+  cursor: pointer;
+}
+.actionButtons {
+  display: flex;
+}
+.queueDrawer {
+  overflow-y: scroll;
+}

src/components/Admin/Queue/Table.tsx

@@ -8,35 +8,22 @@ import sortBy from "lodash/sortBy";
 import {
   ActionIcon,
   Button,
-  createStyles,
   Drawer,
   Group,
   Modal,
   TextInput,
 } from "@mantine/core";
-import { IconEye, IconPencil, IconSearch, IconTrash } from "@tabler/icons";
+import { IconEye, IconPencil, IconSearch, IconTrash } from "@tabler/icons-react";
 import { useDebouncedValue } from "@mantine/hooks";
 
 import AdminMultiUserDelete from "../Users/MultiDelete";
 import AdminQueueDrawer from "./Drawer";
 import AdminQueueDelete from "./Delete";
 import AdminMultiQueueDelete from "./MultiDelete";
 import Link from "next/link";
-
-const useStyles = createStyles((theme) => ({
-  actionButton: {
-    cursor: "pointer",
-  },
-  actionButtons: {
-    display: "flex",
-  },
-  queueDrawer: {
-    overflowY: "scroll",
-  },
-}));
+import classes from "./Queue.module.css";
 
 const AdminQueueTable = () => {
-  const { classes, cx, theme } = useStyles();
   const [drawerOpened, setDrawerOpened] = useState(false);
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(20);
@@ -142,11 +129,10 @@ const AdminQueueTable = () => {
             }}
           >
             {selectedRecords.length
-              ? `Delete ${
-                  selectedRecords.length === 1
-                    ? "one selected queue"
-                    : `${selectedRecords.length} selected queues`
-                }`
+              ? `Delete ${selectedRecords.length === 1
+                ? "one selected queue"
+                : `${selectedRecords.length} selected queues`
+              }`
               : "Select queues to delete"}
           </Button>
         )}
@@ -213,19 +199,22 @@ const AdminQueueTable = () => {
             render: (queue) => (
               <Group spacing={4} position="right" noWrap>
                 <Link href={"/queue/" + queue.id}>
-                  <ActionIcon className={classes.actionButton}>
+                  <ActionIcon className={classes.actionButton}
+                    variant="light" >
                     <IconEye size={18} />
                   </ActionIcon>
                 </Link>
                 <ActionIcon
                   onClick={() => openDrawer(queue)}
                   className={classes.actionButton}
+                  variant="light"
                 >
                   <IconPencil size={18} />
                 </ActionIcon>
                 <ActionIcon
                   onClick={() => openDeleteModal(queue)}
                   className={classes.actionButton}
+                  variant="light" color="red"
                 >
                   <IconTrash size={18} />
                 </ActionIcon>

src/components/Admin/Settings/NotificationsDrawer.tsx

@@ -3,39 +3,22 @@ import {
   Button,
   Code,
   Collapse,
-  createStyles,
   Switch,
   Text,
   Textarea,
   TextInput,
   ThemeIcon,
   Title,
 } from "@mantine/core";
-import { IconChevronDown, IconChevronUp } from "@tabler/icons";
+import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useApi } from "../../../hooks/useApi";
 import GanymedeLoader from "../../Utils/GanymedeLoader";
-
-const useStyles = createStyles((theme) => ({
-  notificationRow: {
-    display: "flex",
-    marginTop: "0.5rem",
-    marginBottom: "0.5rem",
-  },
-  notificationRight: {
-    marginTop: "0.5rem",
-    marginLeft: "auto",
-    order: 2,
-  },
-  link: {
-    color: theme.colors.blue[6],
-  },
-}));
+import classes from "./Settings.module.css"
 
 const AdminNotificationsDrawer = ({ handleClose }) => {
-  const { classes, cx, theme } = useStyles();
 
   const { handleSubmit } = useForm();
 

src/components/Admin/Settings/Settings.module.css

@@ -0,0 +1,13 @@
+.notificationRow {
+  display: flex;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.notificationRight {
+  margin-top: 0.5rem;
+  margin-left: auto;
+  order: 2;
+}
+.link {
+  color: var(--mantine-color-blue-6);
+}