cover image tweaks

tdjsnelling · Oct 29, 2023 · c49c8e7 · c49c8e7
1 parent ae0735d
commit c49c8e7
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 61 deletions.
diff --git a/client/components/Input.js b/client/components/Input.js
@@ -56,18 +56,40 @@ export const WrapLabel = ({ label, children, as = "label", ...rest }) =>
     children
   );
 
-const Input = ({ label, rows, my, mt, mb, width, forwardedRef, ...rest }) => {
+const Input = ({
+  label,
+  rows,
+  my,
+  mt,
+  mb,
+  width,
+  forwardedRef,
+  required,
+  ...rest
+}) => {
   return (
-    <WrapLabel label={label} my={my} mt={mt} mb={mb} width={width}>
+    <WrapLabel
+      label={label && required ? `${label} *` : label}
+      my={my}
+      mt={mt}
+      mb={mb}
+      width={width}
+    >
       {rows ? (
         <StyledTextarea
           ref={forwardedRef}
           rows={rows}
           width={width}
+          required={required}
           {...rest}
         />
       ) : (
-        <StyledInput ref={forwardedRef} width={width} {...rest} />
+        <StyledInput
+          ref={forwardedRef}
+          width={width}
+          required={required}
+          {...rest}
+        />
       )}
     </WrapLabel>
   );

diff --git a/client/components/Select.js b/client/components/Select.js
@@ -31,11 +31,11 @@ const StyledSelect = styled.select(
   typography
 );
 
-const Select = ({ label, fRef, ...rest }) => {
+const Select = ({ label, required, fRef, ...rest }) => {
   return (
-    <WrapLabel label={label}>
+    <WrapLabel label={label && required ? `${label} *` : label}>
       <Box position="relative" display="inline-block">
-        <StyledSelect {...rest} ref={fRef} />
+        <StyledSelect {...rest} ref={fRef} required={required} />
         <Box
           position="absolute"
           top="7px"

diff --git a/client/locales/en.json b/client/locales/en.json
@@ -242,7 +242,7 @@
   "uploadCouldNotUploadTorrent": "Could not upload .torrent",
   "uploadDescription": "Description",
   "uploadDragDropClickSelect": "Drag and drop .torrent file here, or click to select",
-  "uploadDragDropClickSelectPoster": "Drag and drop your poster file here, or click to select",
+  "uploadDragDropClickSelectPoster": "Drag and drop your cover image here, or click to select",
   "uploadDropFileHere": "Drop the file here...",
   "uploadGroupWith": "Group with",
   "uploadGroupWithThisTorrent": "Group with this torrent",
@@ -252,7 +252,6 @@
   "uploadMarkdownSupport": "Markdown supported",
   "uploadMediaInfo": "MediaInfo",
   "uploadName": "Name",
-  "uploadPosterImage": "Poster file",
   "uploadSource": "Source",
   "uploadTags": "Tags",
   "uploadTorrentFile": "Torrent file",

diff --git a/client/locales/eo.json b/client/locales/eo.json
@@ -250,7 +250,6 @@
   "uploadMarkdownSupport": "Markdown subtenata",
   "uploadMediaInfo": "MediaInfo",
   "uploadName": "Nomo",
-  "uploadPosterImage": "Alŝuti afiŝo-dosieron",
   "uploadSource": "Fonto",
   "uploadTags": "Etikedoj",
   "uploadTorrentFile": "Torenta dosiero",

diff --git a/client/locales/fr.json b/client/locales/fr.json
@@ -244,7 +244,6 @@
   "uploadDragDropClickSelect": "Faites glisser et déposez un fichier .torrent ici, ou cliquez pour sélectionner",
   "uploadDragDropClickSelectPoster": "Glissez et déposez votre fichier d'affiche ici, ou cliquez pour sélectionner",
   "uploadDropFileHere": "Déposez le fichier ici...",
-  "uploadPosterImage": "Uploader le fichier d'affiche",
   "uploadGroupWith": "Regrouper avec",
   "uploadGroupWithThisTorrent": "Regrouper avec ce torrent",
   "uploadInfoBox1": "Les extensions de fichier suivantes sont interdites. Tout torrent contenant des fichiers de ces types ne sera pas téléchargé.",

diff --git a/client/locales/ru.json b/client/locales/ru.json
@@ -249,7 +249,6 @@
   "uploadMarkdownSupport": "Поддержка Markdown",
   "uploadMediaInfo": "Медиаинфо",
   "uploadName": "Имя",
-  "uploadPosterImage": "Загрузить файл плаката",
   "uploadSource": "Источник",
   "uploadTags": "Метки",
   "uploadTorrentFile": "Торрент файл",

diff --git a/client/locales/zh.json b/client/locales/zh.json
@@ -242,7 +242,6 @@
   "uploadMarkdownSupport": "支持 Markdown",
   "uploadMediaInfo": "MediaInfo",
   "uploadName": "名称",
-  "uploadPosterImage": "上传海报文件",
   "uploadSource": "来源",
   "uploadTags": "标签",
   "uploadTorrentFile": "Torrent 文件",

diff --git a/client/pages/torrent/[infoHash].js b/client/pages/torrent/[infoHash].js
@@ -675,13 +675,16 @@ const Torrent = ({ token, torrent = {}, userId, userRole, uid, userStats }) => {
           >
             {getLocaleString("posterImage")}
           </Text>
-          <img
+          <Box
+            as="img"
             src={`data:image/${
               isPngImage(torrent.poster) ? "png" : "jpeg"
             };base64,${torrent.poster}`}
-            alt="Poster"
+            alt={`Cover image for “${torrent.name}”`}
             width="auto"
-            height={200}
+            height="auto"
+            maxWidth="500px"
+            maxHeight="500px"
           />
         </Infobox>
       )}

diff --git a/client/pages/upload.js b/client/pages/upload.js
@@ -235,6 +235,7 @@ const Upload = ({ token, userId }) => {
       setDropError(e.message);
     }
   }, []);
+
   const onPosterDrop = useCallback((acceptedFiles) => {
     try {
       const [file] = acceptedFiles;
@@ -395,59 +396,66 @@ const Upload = ({ token, userId }) => {
         </Infobox>
       )}
       <form onSubmit={handleUpload}>
-        <Box mb={4}>
-          <WrapLabel label={getLocaleString("uploadTorrentFile")} as="div">
-            <FileUpload {...getRootProps()}>
-              <input {...getInputProps()} />
-              {torrentFile ? (
-                <Text icon={Check} iconColor="success" iconSize={24} ml={2}>
-                  {torrentFile.name}
-                </Text>
-              ) : isDragActive ? (
-                <Text color="grey">
-                  {getLocaleString("uploadDropFileHere")}
-                </Text>
-              ) : (
-                <Text color="grey">
-                  {getLocaleString("uploadDragDropClickSelect")}
-                </Text>
-              )}
-            </FileUpload>
-          </WrapLabel>
-          {dropError && (
-            <Text color="error" mt={3}>
-              {getLocaleString("uploadCouldNotUploadTorrent")}: {dropError}
-            </Text>
-          )}
-        </Box>
-        <Box mb={4}>
-          <WrapLabel label={getLocaleString("uploadPosterImage")} as="div">
-            <FileUpload {...getPosterRootProps()}>
-              <input {...getPosterInputProps()} />
-              {posterFile ? (
-                <img
-                  src={`data:image/${
-                    isPngImage(posterFile.b64) ? "png" : "jpeg"
-                  };base64,${posterFile.b64}`}
-                  alt="Poster"
-                  width={"auto"}
-                  height={200}
-                />
-              ) : (
-                isPosterDragActive ? (
+        <Box
+          display="grid"
+          gridTemplateColumns={["1fr", "repeat(2, 1fr)"]}
+          gridGap={4}
+          mb={4}
+        >
+          <Box>
+            <WrapLabel
+              label={`${getLocaleString("uploadTorrentFile")} *`}
+              as="div"
+            >
+              <FileUpload {...getRootProps()}>
+                <input {...getInputProps()} />
+                {torrentFile ? (
+                  <Text icon={Check} iconColor="success" iconSize={24} ml={2}>
+                    {torrentFile.name}
+                  </Text>
+                ) : isDragActive ? (
+                  <Text color="grey">
+                    {getLocaleString("uploadDropFileHere")}
+                  </Text>
+                ) : (
+                  <Text color="grey">
+                    {getLocaleString("uploadDragDropClickSelect")}
+                  </Text>
+                )}
+              </FileUpload>
+            </WrapLabel>
+            {dropError && (
+              <Text color="error" mt={3}>
+                {getLocaleString("uploadCouldNotUploadTorrent")}: {dropError}
+              </Text>
+            )}
+          </Box>
+          <Box>
+            <WrapLabel label={getLocaleString("posterImage")} as="div">
+              <FileUpload {...getPosterRootProps()}>
+                <input {...getPosterInputProps()} />
+                {posterFile ? (
+                  <img
+                    src={`data:image/${
+                      isPngImage(posterFile.b64) ? "png" : "jpeg"
+                    };base64,${posterFile.b64}`}
+                    alt="Poster"
+                    width={"auto"}
+                    height={200}
+                  />
+                ) : isPosterDragActive ? (
                   <Text color="grey">
                     {getLocaleString("uploadDropImageHere")}
                   </Text>
                 ) : (
                   <Text color="grey">
                     {getLocaleString("uploadDragDropClickSelectPoster")}
                   </Text>
-                )
-              )}
-            </FileUpload>
-          </WrapLabel>
+                )}
+              </FileUpload>
+            </WrapLabel>
+          </Box>
         </Box>
-
         <TorrentFields
           categories={SQ_TORRENT_CATEGORIES}
           handleGroupSearch={handleGroupSearch}
@@ -512,7 +520,6 @@ const Upload = ({ token, userId }) => {
             ) : undefined
           }
         />
-
         {groupWith && (
           <Box display="flex" alignItems="flex-end" mb={4}>
             <Input