Add golden downvote icon for locked

ajayyy · Jan 24, 2024 · 623a423 · 623a423
1 parent 98be791
commit 623a423
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 14 deletions.
diff --git a/src/submission/SubmissionComponent.tsx b/src/submission/SubmissionComponent.tsx
@@ -82,34 +82,40 @@ export const SubmissionComponent = (props: SubmissionComponentProps) => {
             setTitles([{
                 title: originalTitle,
                 original: true,
-                votable: true
+                votable: true,
+                locked: props.submissions.titles.some((s) => s.title === originalTitle && s.locked)
             }, {
                 title: "",
                 original: false,
-                votable: false
+                votable: false,
+                locked: false
             }, ...props.submissions.titles
             .filter((s) => s.title !== originalTitle)
             .map((s) => ({
                 title: s.title,
                 original: s.original,
-                votable: true
+                votable: true,
+                locked: s.locked
             }))]);
         })();
     }, []);
 
     const defaultThumbnails: RenderedThumbnailSubmission[] = [{
         type: ThumbnailType.Original,
-        votable: true
+        votable: true,
+        locked: props.submissions.thumbnails.some((s) => s.original && s.locked)
     }, {
         type: ThumbnailType.CurrentTime,
-        votable: false
+        votable: false,
+        locked: false
     }];
     const downloadedThumbnails: RenderedThumbnailSubmission[] = props.submissions.thumbnails
     .filter((s) => !s.original)
     .map((s: CustomThumbnailResult) => ({
         timestamp: s.timestamp,
         type: ThumbnailType.SpecifiedTime,
-        votable: true
+        votable: true,
+        locked: s.locked
     }));
     const thumbnails = defaultThumbnails.concat(downloadedThumbnails);
 
@@ -359,7 +365,8 @@ function updateUnsubmitted(unsubmitted: UnsubmittedSubmission,
                 .map((t) => ({
                 type: ThumbnailType.SpecifiedTime,
                 timestamp: (t as CustomThumbnailResult).timestamp,
-                votable: false
+                votable: false,
+                locked: false
             }));
 
             setExtraUnsubmittedThumbnails(thumbnailsResult);
@@ -372,7 +379,8 @@ function updateUnsubmitted(unsubmitted: UnsubmittedSubmission,
                 .map((t) => ({
                     title: t.title,
                     original: false,
-                    votable: false
+                    votable: false,
+                    locked: false
                 }));
 
             setExtraUnsubmittedTitles?.(titlesResult);

diff --git a/src/submission/ThumbnailDrawerComponent.tsx b/src/submission/ThumbnailDrawerComponent.tsx
@@ -23,6 +23,7 @@ interface TimeRenderedThumbnailSubmission {
 
 export type RenderedThumbnailSubmission = (NoTimeRenderedThumbnailSubmission | TimeRenderedThumbnailSubmission) & {
     votable: boolean;
+    locked: boolean;
 };
 
 export const ThumbnailDrawerComponent = (props: ThumbnailDrawerComponentProps) => {
@@ -52,6 +53,7 @@ function getThumbnails(props: ThumbnailDrawerComponentProps,
                 videoID={props.videoId}
                 time={time}
                 votable={props.existingSubmissions[i].votable}
+                locked={props.existingSubmissions[i].locked}
                 key={time ? `T${time}` : `I${i}`}
             ></ThumbnailSelectionComponent>
         );

diff --git a/src/submission/ThumbnailSelectionComponent.tsx b/src/submission/ThumbnailSelectionComponent.tsx
@@ -8,6 +8,7 @@ import UpvoteIcon from "../svgIcons/upvoteIcon";
 import DownvoteIcon from "../svgIcons/downvoteIcon";
 import { submitVideoBrandingAndHandleErrors } from "../dataFetching";
 import { AnimationUtils } from "../../maze-utils/src/animationUtils";
+import Config from "../config/config";
 
 export interface ThumbnailSelectionComponentProps {
     video: HTMLVideoElement;
@@ -20,6 +21,7 @@ export interface ThumbnailSelectionComponentProps {
     larger?: boolean;
     votable?: boolean;
     submission?: ThumbnailSubmission;
+    locked?: boolean;
 }
 
 /**
@@ -86,7 +88,7 @@ export const ThumbnailSelectionComponent = (props: ThumbnailSelectionComponentPr
                                 const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.3);
                                 submitVideoBrandingAndHandleErrors(null, createThumbnailSubmission(), true).then(stopAnimation);
                             }}>
-                            <DownvoteIcon/>
+                            <DownvoteIcon locked={ Config.config!.vip && props.locked }/>
                         </button>
                     </div>
                 </>

diff --git a/src/submission/TitleComponent.tsx b/src/submission/TitleComponent.tsx
@@ -119,7 +119,7 @@ export const TitleComponent = (props: TitleComponentProps) => {
                         const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.3);
                         submitVideoBrandingAndHandleErrors(props.submission, null, true).then(stopAnimation);
                     }}>
-                    <DownvoteIcon/>
+                    <DownvoteIcon locked={ Config.config!.vip && props.submission.locked }/>
                 </button>
             </div>
 

diff --git a/src/submission/TitleDrawerComponent.tsx b/src/submission/TitleDrawerComponent.tsx
@@ -12,6 +12,7 @@ export interface RenderedTitleSubmission {
     title: string;
     votable: boolean;
     original: boolean;
+    locked: boolean;
 }
 
 export const TitleDrawerComponent = (props: TitleDrawerComponentProps) => {

diff --git a/src/svgIcons/downvoteIcon.tsx b/src/svgIcons/downvoteIcon.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 
 export interface DownvoteIconProps {
-  fill?: string;
+  locked?: boolean;
   className?: string;
   width?: string;
   height?: string;
@@ -10,7 +10,7 @@ export interface DownvoteIconProps {
 }
 
 const DownvoteIcon = ({
-  fill = "#ffffff",
+  locked = false,
   className = "",
   width = "16",
   height = "16",
@@ -23,7 +23,6 @@ const DownvoteIcon = ({
     height={width}
     width={height}
     className={className}
-    fill={fill}
     style={style}
     onClick={onClick} >
       <path
@@ -33,7 +32,7 @@ const DownvoteIcon = ({
       <path
         d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"
         id="path4"
-        style={{ fill }} />
+        style={{ fill: locked ? "#ffc83d" : "#ffffff" }} />
   </svg>
 );