Merge pull request #54 from QortalSeth/main

Mobile support for Home, Video, and Channel pages.
Qortal · Dec 13, 2024 · 29de8a8 · 29de8a8
2 parents da07474 + 49a2321
commit 29de8a8
Show file tree

Hide file tree

Showing 35 changed files with 1,254 additions and 1,025 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "qtube",
   "private": true,
-  "version": "2.0.0",
+  "version": "2.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/src/components/Playlists/Playlists.tsx b/src/components/Playlists/Playlists.tsx
@@ -1,10 +1,11 @@
 import React from "react";
+import { smallScreenSizeString } from "../../constants/Misc.ts";
 import { CardContentContainerComment } from "../common/Comments/Comments-styles";
 import {
   CrowdfundSubTitle,
   CrowdfundSubTitleRow,
 } from "../Publish/PublishVideo/PublishVideo-styles.tsx";
-import { Box, Typography, useTheme } from "@mui/material";
+import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 
 export const Playlists = ({
@@ -13,15 +14,16 @@ export const Playlists = ({
   onClick,
 }) => {
   const theme = useTheme();
-  const navigate = useNavigate();
+  const isScreenSmall = !useMediaQuery(`(min-width:700px)`);
+  const videoPlayerHeight = "33.75vw"; // This is videoplayer width * 9/16 (inverse of aspect ratio)
 
   return (
     <Box
       sx={{
         display: "flex",
         flexDirection: "column",
         width: "100%",
-        maxHeight: "30.94vw",
+        height: isScreenSmall ? "200px" : videoPlayerHeight,
       }}
     >
       <CardContentContainerComment
@@ -32,7 +34,7 @@ export const Playlists = ({
         }}
       >
         {playlistData?.videos?.map((vid, index) => {
-          const isCurrentVidPlayling =
+          const isCurrentVidPlaying =
             vid?.identifier === currentVideoIdentifier;
 
           return (
@@ -42,15 +44,15 @@ export const Playlists = ({
                 display: "flex",
                 gap: "10px",
                 width: "100%",
-                background: isCurrentVidPlayling && theme.palette.primary.main,
+                background: isCurrentVidPlaying && theme.palette.primary.main,
                 alignItems: "center",
                 padding: "10px",
                 borderRadius: "5px",
-                cursor: isCurrentVidPlayling ? "default" : "pointer",
+                cursor: isCurrentVidPlaying ? "default" : "pointer",
                 userSelect: "none",
               }}
               onClick={() => {
-                if (isCurrentVidPlayling) return;
+                if (isCurrentVidPlaying) return;
                 onClick(vid.name, vid.identifier);
                 // navigate(`/video/${vid.name}/${vid.identifier}`)
               }}

diff --git a/src/components/Publish/PublishVideo/PublishVideo.tsx b/src/components/Publish/PublishVideo/PublishVideo.tsx
@@ -15,8 +15,10 @@ import {
   Typography,
   useTheme,
 } from "@mui/material";
+import { useSignal } from "@preact/signals-react";
+import { useSignals } from "@preact/signals-react/runtime";
 import Compressor from "compressorjs";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { useDispatch, useSelector } from "react-redux";
 import ShortUniqueId from "short-unique-id";
@@ -27,6 +29,7 @@ import {
 } from "../../../constants/Identifiers.ts";
 import {
   maxSize,
+  menuIconSize,
   titleFormatter,
   videoMaxSize,
 } from "../../../constants/Misc.ts";
@@ -38,7 +41,6 @@ import {
 
 import { setNotification } from "../../../state/features/notificationsSlice.ts";
 import { RootState } from "../../../state/store.ts";
-import { formatBytes } from "../../../utils/numberFunctions.ts";
 import { objectToBase64 } from "../../../utils/PublishFormatter.ts";
 import { getFileName } from "../../../utils/stringFunctions.ts";
 import { CardContentContainerComment } from "../../common/Comments/Comments-styles.tsx";
@@ -66,8 +68,7 @@ import {
   StyledButton,
   TimesIcon,
 } from "./PublishVideo-styles.tsx";
-import { signal, Signal, useSignal } from "@preact/signals-react";
-import { useSignals } from "@preact/signals-react/runtime";
+import VideoLibraryIcon from "@mui/icons-material/VideoLibrary";
 
 export const toBase64 = (file: File): Promise<string | ArrayBuffer | null> =>
   new Promise((resolve, reject) => {
@@ -82,13 +83,14 @@ export const toBase64 = (file: File): Promise<string | ArrayBuffer | null> =>
 const uid = new ShortUniqueId();
 const shortuid = new ShortUniqueId({ length: 5 });
 
-interface NewCrowdfundProps {
+interface PublishVideoProps {
   editId?: string;
   editContent?: null | {
     title: string;
     user: string;
     coverImage: string | null;
   };
+  afterClose?: () => void;
 }
 
 interface VideoFile {
@@ -97,7 +99,11 @@ interface VideoFile {
   description: string;
   coverImage?: string;
 }
-export const PublishVideo = ({ editId, editContent }: NewCrowdfundProps) => {
+export const PublishVideo = ({
+  editId,
+  editContent,
+  afterClose,
+}: PublishVideoProps) => {
   const theme = useTheme();
   const dispatch = useDispatch();
   const [isOpenMultiplePublish, setIsOpenMultiplePublish] = useState(false);
@@ -188,13 +194,9 @@ export const PublishVideo = ({ editId, editContent }: NewCrowdfundProps) => {
     },
   });
 
-  // useEffect(() => {
-  //   if (editContent) {
-  //   }
-  // }, [editContent]);
-
   const onClose = () => {
     setIsOpen(false);
+    if (afterClose) afterClose();
   };
 
   const search = async () => {
@@ -633,12 +635,20 @@ export const PublishVideo = ({ editId, editContent }: NewCrowdfundProps) => {
           {editId ? null : (
             <StyledButton
               color="primary"
-              startIcon={<AddBoxIcon />}
+              startIcon={
+                <VideoLibraryIcon
+                  sx={{
+                    color: "#FF0033",
+                    width: menuIconSize,
+                    height: menuIconSize,
+                  }}
+                />
+              }
               onClick={() => {
                 setIsOpen(true);
               }}
             >
-              add video
+              Video
             </StyledButton>
           )}
         </>

diff --git a/src/components/common/Comments/Comments-styles.tsx b/src/components/common/Comments/Comments-styles.tsx
@@ -159,7 +159,7 @@ export const BlockIconContainer = styled(Box)({
 });
 
 export const CommentsContainer = styled(Box)({
-  width: "70%",
+  width: "90%",
   maxWidth: "1000px",
   display: "flex",
   flexDirection: "column",

diff --git a/src/components/common/ContentButtons/LikeAndDislike.tsx b/src/components/common/ContentButtons/LikeAndDislike.tsx
@@ -160,10 +160,10 @@ export const LikeAndDislike = ({ name, identifier }: LikeAndDislikeProps) => {
             sx={{
               padding: "5px",
               borderRadius: "7px",
-              gap: "5px",
+              gap: "10px",
               display: "flex",
               alignItems: "center",
-              marginRight: "10px",
+              marginRight: "20px",
               height: "53px",
             }}
           >

diff --git a/src/components/common/ContentButtons/SuperLike.tsx b/src/components/common/ContentButtons/SuperLike.tsx
@@ -1,49 +1,37 @@
-import React, { useEffect, useState } from "react";
 import ThumbUpIcon from "@mui/icons-material/ThumbUp";
 import {
   Box,
-  Button,
-  Dialog,
-  DialogActions,
   DialogContent,
-  DialogTitle,
-  FormControl,
-  Input,
   InputAdornment,
   InputLabel,
-  MenuItem,
   Modal,
-  Select,
   Tooltip,
 } from "@mui/material";
-import qortImg from "../../../assets/img/qort.png";
-import { MultiplePublish } from "../../Publish/MultiplePublish/MultiplePublishAll.tsx";
+import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { setNotification } from "../../../state/features/notificationsSlice.ts";
 import ShortUniqueId from "short-unique-id";
+import qortImg from "../../../assets/img/qort.png";
 import {
-  objectToBase64,
-  objectToFile,
-} from "../../../utils/PublishFormatter.ts";
+  FOR,
+  FOR_SUPER_LIKE,
+  SUPER_LIKE_BASE,
+} from "../../../constants/Identifiers.ts";
 import { minPriceSuperlike } from "../../../constants/Misc.ts";
-import { CommentInput } from "../Comments/Comments-styles.tsx";
+import { setNotification } from "../../../state/features/notificationsSlice.ts";
+import { RootState } from "../../../state/store.ts";
+import BoundedNumericTextField from "../../../utils/BoundedNumericTextField.tsx";
+import { numberToInt, truncateNumber } from "../../../utils/numberFunctions.ts";
+import { objectToBase64 } from "../../../utils/PublishFormatter.ts";
+import { getUserBalance } from "../../../utils/qortalRequestFunctions.ts";
+import { MultiplePublish } from "../../Publish/MultiplePublish/MultiplePublishAll.tsx";
 import {
   CrowdfundActionButton,
   CrowdfundActionButtonRow,
   ModalBody,
   NewCrowdfundTitle,
   Spacer,
 } from "../../Publish/PublishVideo/PublishVideo-styles.tsx";
-import { utf8ToBase64 } from "../SuperLikesList/CommentEditor.tsx";
-import { RootState } from "../../../state/store.ts";
-import {
-  FOR,
-  FOR_SUPER_LIKE,
-  SUPER_LIKE_BASE,
-} from "../../../constants/Identifiers.ts";
-import BoundedNumericTextField from "../../../utils/BoundedNumericTextField.tsx";
-import { numberToInt, truncateNumber } from "../../../utils/numberFunctions.ts";
-import { getUserBalance } from "../../../utils/qortalRequestFunctions.ts";
+import { CommentInput } from "../Comments/Comments-styles.tsx";
 
 const uid = new ShortUniqueId({ length: 4 });