Merge pull request #31 from Zibbp/audio-only

feat: audio only
Zibbp · May 27, 2024 · 872cc98 · 872cc98
2 parents 6ab8a0a + 79f5fb2
commit 872cc98
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 38 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.12.7",
     "@types/react": "18.2.79",
     "@types/react-dom": "18.2.25",
-    "@vidstack/react": "^1.11.17",
+    "@vidstack/react": "^1.11.21",
     "axios": "^1.6.8",
     "clsx": "^2.1.0",
     "cookies-next": "^2.1.1",
@@ -44,4 +44,4 @@
     "postcss-preset-mantine": "^1.14.4",
     "postcss-simple-vars": "^7.0.1"
   }
-}
+}
diff --git a/src/components/Admin/Watched/Drawer.tsx b/src/components/Admin/Watched/Drawer.tsx
@@ -57,6 +57,7 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
     { label: "480p", value: "480p30" },
     { label: "360p", value: "360p30" },
     { label: "160p", value: "160p30" },
+    { label: "audio", value: "audio" }
   ];
 
   useEffect(() => {

diff --git a/src/pages/archive/index.tsx b/src/pages/archive/index.tsx
@@ -64,6 +64,7 @@ const ArchivePage = () => {
     { label: "480p", value: "480p30" },
     { label: "360p", value: "360p30" },
     { label: "160p", value: "160p30" },
+    { label: "audio", value: "audio" }
   ];
 
   const archiveVodSubmit = useMutation({

diff --git a/src/pages/vods/[vodId].tsx b/src/pages/vods/[vodId].tsx
@@ -96,7 +96,7 @@ const VodPage = (props: any) => {
         <div>
           {!isMobile && (
             <Box className={classes.container} >
-              <div className={classes.leftColumn} ref={leftColumnRef}>
+              <div className={!data.chat_path ? classes.leftColumnNoChat : classes.leftColumn} ref={leftColumnRef}>
                 <div
                   className={
                     isFullscreen
@@ -106,39 +106,41 @@ const VodPage = (props: any) => {
                   <NewVideoPlayer vod={data} />
                 </div>
               </div>
-              <div className={classes.rightColumn}
-                style={{ height: "auto", maxHeight: "auto" }}>
-                {data.chat_video_path &&
-                  !useUserStore.getState().settings.useNewChatPlayer && (
-                    <div>
-                      <div
-                        ref={rightColumnRef}
-                        className={
-                          isFullscreen || fullscreen
-                            ? classes.chatColumnNoHeader
-                            : classes.chatColumn
-                        }
-                      >
-                        <VodChatPlayer vod={data} />
+              {data.chat_path && (
+                <div className={classes.rightColumn}
+                  style={{ height: "auto", maxHeight: "auto" }}>
+                  {data.chat_video_path &&
+                    !useUserStore.getState().settings.useNewChatPlayer && (
+                      <div>
+                        <div
+                          ref={rightColumnRef}
+                          className={
+                            isFullscreen || fullscreen
+                              ? classes.chatColumnNoHeader
+                              : classes.chatColumn
+                          }
+                        >
+                          <VodChatPlayer vod={data} />
+                        </div>
                       </div>
-                    </div>
-                  )}
-                {data.chat_path &&
-                  useUserStore.getState().settings.useNewChatPlayer && (
-                    <div>
-                      <div
-                        ref={rightColumnRef}
-                        className={
-                          isFullscreen || fullscreen
-                            ? classes.chatColumnNoHeader
-                            : classes.chatColumn
-                        }
-                      >
-                        <ExperimentalChatPlayer vod={data} />
+                    )}
+                  {data.chat_path &&
+                    useUserStore.getState().settings.useNewChatPlayer && (
+                      <div>
+                        <div
+                          ref={rightColumnRef}
+                          className={
+                            isFullscreen || fullscreen
+                              ? classes.chatColumnNoHeader
+                              : classes.chatColumn
+                          }
+                        >
+                          <ExperimentalChatPlayer vod={data} />
+                        </div>
                       </div>
-                    </div>
-                  )}
-              </div>
+                    )}
+                </div>
+              )}
             </Box>
           )}
           {isMobile && (

diff --git a/src/pages/vods/vodId.module.css b/src/pages/vods/vodId.module.css
@@ -39,6 +39,10 @@
   flex-grow: 1;
   width: calc(100vw - 340px);
 }
+.leftColumnNoChat {
+  flex-grow: 1;
+  width: 100vw;
+}
 .leftColumnMobile {
   flex-grow: 1;
   width: calc(100vw - 200px);