Fixes-2024-02

.devcontainer/devcontainer.json

@@ -10,7 +10,16 @@
 
 	// Use 'forwardPorts' to make a list of ports inside the container available locally.
 	// "forwardPorts": [3000]
-	"appPort": ["0.0.0.0:3000:3000"]
+	"appPort": [
+		"0.0.0.0:3000:3000"
+	],
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"eamodio.gitlens"
+			]
+		}
+	}
 
 	// Use 'postCreateCommand' to run commands after the container is created.
 	// "postCreateCommand": "yarn install",

Dockerfile

@@ -16,6 +16,8 @@ COPY . .
 ENV NEXT_TELEMETRY_DISABLED 1
 ENV DOCKER_BUILD 1
 
+RUN npm i sharp -y
+
 RUN npm run build
 
 
@@ -27,10 +29,13 @@ ENV NODE_ENV production
 # Uncomment the following line in case you want to disable telemetry during runtime.
 ENV NEXT_TELEMETRY_DISABLED 1
 
+RUN npm i sharp -y
+
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
-COPY --from=builder /app/ ./
+COPY --from=builder --chown=nextjs:nodejs /app/ ./
+RUN chown nextjs:nodejs /app
 
 USER nextjs
 

package.json

@@ -9,40 +9,40 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@mantine/carousel": "^7.4.0",
-    "@mantine/core": "^7.4.0",
-    "@mantine/dates": "^7.4.0",
-    "@mantine/form": "^7.4.0",
-    "@mantine/hooks": "^7.4.0",
-    "@mantine/notifications": "^7.4.0",
-    "@tabler/icons-react": "^2.45.0",
-    "@tanstack/react-query": "^5.17.1",
-    "@tanstack/react-query-devtools": "^5.17.1",
-    "@types/node": "20.10.6",
-    "@types/react": "18.2.46",
-    "@types/react-dom": "18.2.18",
-    "@vidstack/react": "^1.9.8",
-    "axios": "^1.6.4",
+    "@mantine/carousel": "^7.5.3",
+    "@mantine/core": "^7.5.3",
+    "@mantine/dates": "^7.5.3",
+    "@mantine/form": "^7.5.3",
+    "@mantine/hooks": "^7.5.3",
+    "@mantine/notifications": "^7.5.3",
+    "@tabler/icons-react": "^2.47.0",
+    "@tanstack/react-query": "^5.21.7",
+    "@tanstack/react-query-devtools": "^5.21.7",
+    "@types/node": "20.11.19",
+    "@types/react": "18.2.56",
+    "@types/react-dom": "18.2.19",
+    "@vidstack/react": "^1.10.7",
+    "axios": "^1.6.7",
     "clsx": "^2.1.0",
     "cookies-next": "^2.1.1",
     "dayjs": "^1.11.10",
     "embla-carousel-react": "^7.1.0",
     "events": "^3.3.0",
     "lodash": "^4.17.21",
-    "mantine-datatable": "^7.3.5",
+    "mantine-datatable": "^7.5.1",
     "media-icons": "^0.10.0",
-    "next": "^14.0.4",
+    "next": "^14.1.0",
     "plyr-react": "^5.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "^7.49.2",
+    "react-hook-form": "^7.50.1",
     "typescript": "5.3.3",
-    "vidstack": "^1.9.8",
-    "zustand": "^4.4.7"
+    "vidstack": "^1.10.7",
+    "zustand": "^4.5.1"
   },
   "devDependencies": {
-    "postcss": "^8.4.32",
-    "postcss-preset-mantine": "^1.12.3",
+    "postcss": "^8.4.35",
+    "postcss-preset-mantine": "^1.13.0",
     "postcss-simple-vars": "^7.0.1"
   }
 }

src/components/Vod/ChatMessage.tsx

@@ -4,7 +4,7 @@ import {
   GanymedeFormattedBadge,
   GanymedeFormattedMessageFragments,
 } from "../../ganymede-defs";
-import { Text, Image, Tooltip } from "@mantine/core";
+import { Text, Tooltip } from "@mantine/core";
 import classes from "./ChatMessage.module.css"
 
 

src/components/Vod/TheaterModeIcon.module.css

@@ -1,14 +1,7 @@
 .theaterIcon {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 100;
-  padding: 0.5rem;
   cursor: pointer;
   color: #f5f5f5;
   transition: all 0.2s ease-in-out;
-
-
 }
 .customFullScreenButton {
   color: #f5f5f5;

src/components/Vod/TheaterModeIcon.tsx

@@ -22,7 +22,7 @@ const TheaterModeIcon = () => {
           onTouchStart={toggleTheaterMode}
           className={classes.customFullScreenButton}
         >
-          <IconMaximize size="1.8rem" />
+          <IconMaximize size="1.7rem" />
         </ActionIcon>
       </Tooltip>
     </div>

src/components/Vod/VideoPlayer.module.css

@@ -23,4 +23,8 @@
 
   width: 100%;
 
+}
+
+.ganymedePoster {
+  object-fit: contain;
 }

src/components/Vod/VideoPlayer.tsx

@@ -1,6 +1,5 @@
 import getConfig from "next/config";
 import React, { useEffect, useRef, useState } from "react";
-import { ActionIcon } from "@mantine/core";
 import vodDataBus from "./EventBus";
 import { useApi } from "../../hooks/useApi";
 import useUserStore from "../../store/user";
@@ -11,23 +10,12 @@ import '@vidstack/react/player/styles/default/layouts/video.css';
 
 import { MediaPlayer, MediaPlayerInstance, MediaProvider, Poster, Track } from '@vidstack/react';
 import { defaultLayoutIcons, DefaultVideoLayout } from '@vidstack/react/player/layouts/default';
-import { IconDotsVertical, IconMaximize, IconMinimize } from "@tabler/icons-react";
-import ReactDOM from "react-dom";
 import TheaterModeIcon from "./TheaterModeIcon";
 import { escapeURL } from "../../util/util";
 import { useSearchParams } from 'next/navigation'
 import { showNotification } from "@mantine/notifications";
 import classes from "./VideoPlayer.module.css"
 import eventBus from "../../util/eventBus";
-// const useStyles = createStyles((theme) => ({
-//   playerContainer: {
-//     "--media-max-height": "87vh"
-//   },
-//   playerMediaOutlet: {
-//     paddingBottom: "0",
-//     height: "100%",
-//   },
-// }));
 
 const NewVideoPlayer = ({ vod }: any) => {
   const { publicRuntimeConfig } = getConfig();
@@ -41,31 +29,16 @@ const NewVideoPlayer = ({ vod }: any) => {
   const [videoPoster, setVideoPoster] = useState<string>("");
   const [videoTitle, setVideoTitle] = useState<string>("");
   const startedPlayback = useRef(false);
-  const [playerIsHovered, setPlayerIsHovered] = useState(true);
   const [isFullscreen, setIsFullscreen] = useState(false);
 
   const searchParams = useSearchParams()
 
-  const handleHover = () => {
-    setPlayerIsHovered(true);
-  };
-
-  const handleMouseLeave = () => {
-    setPlayerIsHovered(false);
-  };
-
-  const handleTouch = () => {
-    setPlayerIsHovered(!playerIsHovered);
-  };
-
   useEffect(() => {
     eventBus.on("theaterMode", (data) => {
       setIsFullscreen(data);
     });
   }, []);
 
-
-
   // Fetch playback data
   const { data } = useQuery({
     refetchOnWindowFocus: false,
@@ -141,7 +114,7 @@ const NewVideoPlayer = ({ vod }: any) => {
     // If thumbnail
     if (vod.thumbnail_path) {
       setVideoPoster(
-        `${publicRuntimeConfig.CDN_URL}${escapeURL(vod.video_path)}`
+        `${publicRuntimeConfig.CDN_URL}${escapeURL(vod.thumbnail_path)}`
       );
     }
 
@@ -172,20 +145,6 @@ const NewVideoPlayer = ({ vod }: any) => {
       player.current!.currentTime = parseInt(time);
     }
 
-    // const mediaFullscreenButton = document.querySelector("#media-menu-2");
-    // console.log(mediaFullscreenButton)
-    // const buttonContainer = document.createElement("div");
-
-    // if (mediaFullscreenButton) {
-    //   mediaFullscreenButton.parentNode.insertBefore(
-    //     buttonContainer,
-    //     mediaFullscreenButton.nextSibling
-    //   );
-    //   // Render the button component inside the container
-    //   ReactDOM.render(<TheaterModeIcon />, buttonContainer);
-    // }
-
-
   }, [data, player]);
 
 
@@ -262,26 +221,26 @@ const NewVideoPlayer = ({ vod }: any) => {
         src={videoSource}
         aspect-ratio={16 / 9}
         ref={player}
-        crossorigin
-        onMouseEnter={handleHover}
-        onMouseLeave={handleMouseLeave}
-        onTouchStart={handleTouch}
-        playsinline
+        crossOrigin={true}
+        playsInline={true}
+        load="eager"
+        posterLoad="eager"
       >
 
         <MediaProvider >
-          <Poster className="vds-poster" src={videoPoster} alt={vod.title} />
-          {playerIsHovered && (
-            <TheaterModeIcon />
-          )}
+          <Poster className={`${classes.ganymedePoster} vds-poster`} src={videoPoster} alt={vod.title} />
           <Track
             src={`${publicRuntimeConfig.API_URL}/api/v1/chapter/video/${vod.id}/webvtt`}
             kind="chapters"
             default={true}
           />
         </MediaProvider>
 
-        <DefaultVideoLayout icons={defaultLayoutIcons} > </DefaultVideoLayout>
+        <DefaultVideoLayout icons={defaultLayoutIcons} noScrubGesture={false}
+          slots={{
+            beforeFullscreenButton: <TheaterModeIcon />,
+          }}
+        />
       </MediaPlayer>
     </div>
   );

src/pages/vods/[vodId].tsx

@@ -55,16 +55,12 @@ const VodPage = (props: any) => {
     queryFn: () => fetchVod(props.vodId),
   });
 
-
-
-
-
   // Theater mode support
   useEffect(() => {
     eventBus.on("theaterMode", (data) => {
+      setIsFullscreen(data);
       console.debug(`vodId: toggling theater mode: ${data}`)
       console.debug(`theaterMode: is mobile: ${isMobile} is fullscreen: ${isFullscreen}`)
-      setIsFullscreen(!isFullscreen);
       if (window.innerWidth < 1000) {
         try {
           toggle();