Merge pull request #811 from WatchItDev/app/perf

geolffreym · web-flow · commit 4e9909570535 · 2025-08-08T09:28:03.000-06:00
feat: added views count to the videos
diff --git a/index.html b/index.html
@@ -95,7 +95,7 @@
 
     #splash img {
       z-index: 10;
-      width: clamp(104px, calc(18vw * 0.8), 160px);
+      width: clamp(85px, calc(18vw * 0.8), 120px);
       height: auto;
       transform-origin: center;
       will-change: transform, filter;
diff --git a/src/components/login-modal/profile-form-view.tsx b/src/components/login-modal/profile-form-view.tsx
@@ -389,9 +389,6 @@ export const ProfileFormView: React.FC<ProfileFormProps> = ({
             <TextMaxLine line={1} variant="caption" fontWeight="bold" color="text.secondary">
               * Click the profile or cover image to select one
             </TextMaxLine>
-            <TextMaxLine line={1} variant="caption" fontWeight="bold" color="text.secondary">
-              * Images are optional (current images are placeholders)
-            </TextMaxLine>
           </Box>
         </Box>
 
diff --git a/src/components/subscribe-profile-modal.tsx b/src/components/subscribe-profile-modal.tsx
@@ -188,7 +188,7 @@ export const SubscribeProfileModal = ({
   return (
     <>
       <Dialog open={isOpen} onClose={onClose} fullWidth maxWidth="xs">
-        <DialogTitle sx={{ pb: 2 }}>Join to {profile?.displayName} content</DialogTitle>
+        <DialogTitle sx={{ pb: 2 }}>Access {profile?.displayName}'s content</DialogTitle>
         <Divider sx={{ mb: 2, borderStyle: 'dashed' }} />
         <DialogContent>
           {loadingTerms ? (
diff --git a/src/components/video-player/video-player.tsx b/src/components/video-player/video-player.tsx
@@ -21,7 +21,7 @@ import useGetSubtitles from '@src/hooks/protocol/use-get-subtitles.ts';
 import { useResponsive } from '@src/hooks/use-responsive';
 import Label from '../label';
 import {ErrorData} from "hls.js"
-import { useLogEventMutation } from '@src/graphql/generated/hooks.tsx';
+import { useIncrementPostViewMutation, useLogEventMutation } from '@src/graphql/generated/hooks.tsx';
 import { useAuth } from '@src/hooks/use-auth.ts';
 
 export interface VideoPlayerProps {
@@ -41,6 +41,7 @@ export const VideoPlayer: FC<VideoPlayerProps> = ({ src, cid, titleMovie, postId
   const controlsVisible = useMediaState('controlsVisible', player);
   const { tracks, getSubtitles } = useGetSubtitles();
   const [logEvent] = useLogEventMutation();
+  const [incrementView] = useIncrementPostViewMutation();
   const { session } = useAuth();
 
   const watchedSeconds = useRef<Set<number>>(new Set())    // distinct seconds already counted
@@ -69,7 +70,11 @@ export const VideoPlayer: FC<VideoPlayerProps> = ({ src, cid, titleMovie, postId
     }
   };
 
-  const handlePlay = () => emit('VIDEO_START');
+  const handlePlay = () => {
+    emit('VIDEO_START');
+    incrementView({ variables: { postId } });
+  };
+
   const handleEnded = () => emit('VIDEO_WATCH_FULL');
 
   const handleTimeUpdate = () => {
diff --git a/src/graphql/generated/graphql.ts b/src/graphql/generated/graphql.ts
@@ -871,7 +871,7 @@ export type IncrementPostViewMutationVariables = Exact<{
 }>;
 
 
-export type IncrementPostViewMutation = { __typename?: 'Mutation', incrementPostView: { __typename?: 'Post', id: string } };
+export type IncrementPostViewMutation = { __typename?: 'Mutation', incrementPostView: { __typename?: 'Post', id: string, viewCount: number } };
 
 export type UpdatePostMutationVariables = Exact<{
   input: UpdatePostInput;
@@ -1151,7 +1151,7 @@ export const LogAnonymousEventDocument = {"kind":"Document","definitions":[{"kin
 export const LogEventDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"LogEvent"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"LogEventInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"logEvent"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}]}]}}]} as unknown as DocumentNode<LogEventMutation, LogEventMutationVariables>;
 export const CreatePostDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreatePost"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreatePostInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createPost"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}}]}}]}}]} as unknown as DocumentNode<CreatePostMutation, CreatePostMutationVariables>;
 export const HidePostDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"HidePost"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"postId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"hidePost"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"postId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"postId"}}}]}]}}]} as unknown as DocumentNode<HidePostMutation, HidePostMutationVariables>;
-export const IncrementPostViewDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"IncrementPostView"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"postId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"incrementPostView"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"postId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"postId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<IncrementPostViewMutation, IncrementPostViewMutationVariables>;
+export const IncrementPostViewDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"IncrementPostView"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"postId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"incrementPostView"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"postId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"postId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"viewCount"}}]}}]}}]} as unknown as DocumentNode<IncrementPostViewMutation, IncrementPostViewMutationVariables>;
 export const UpdatePostDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdatePost"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdatePostInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updatePost"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]}}]} as unknown as DocumentNode<UpdatePostMutation, UpdatePostMutationVariables>;
 export const CreateTipDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateTip"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreateTipInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createTip"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"}},{"kind":"Field","name":{"kind":"Name","value":"baker"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"creator"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"message"}},{"kind":"Field","name":{"kind":"Name","value":"postId"}},{"kind":"Field","name":{"kind":"Name","value":"txHash"}}]}}]}}]} as unknown as DocumentNode<CreateTipMutation, CreateTipMutationVariables>;
 export const CreateUserDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateUser"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UserInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createUser"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"address"}},{"kind":"Field","name":{"kind":"Name","value":"username"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"xpBalance"}}]}}]}}]} as unknown as DocumentNode<CreateUserMutation, CreateUserMutationVariables>;
diff --git a/src/graphql/generated/hooks.tsx b/src/graphql/generated/hooks.tsx
@@ -375,6 +375,7 @@ export const IncrementPostViewDocument = gql`
     mutation IncrementPostView($postId: String!) {
   incrementPostView(postId: $postId) {
     id
+    viewCount
   }
 }
     `;
diff --git a/src/graphql/mutations/posts/incrementPostView.gql b/src/graphql/mutations/posts/incrementPostView.gql
@@ -1,5 +1,6 @@
 mutation IncrementPostView($postId: String!) {
   incrementPostView(postId: $postId) {
     id
+    viewCount
   }
 }
diff --git a/src/layouts/dashboard/header.tsx b/src/layouts/dashboard/header.tsx
@@ -64,7 +64,7 @@ export default function Header({ children }: PropsWithChildren) {
       >
         {sessionData?.authenticated && (
           <>
-            <HeaderXpBalance />
+            {/*<HeaderXpBalance />*/}
             <HeaderMmcBalance />
             <NotificationsPopover />
           </>
diff --git a/src/sections/publication/components/publication-description.tsx b/src/sections/publication/components/publication-description.tsx
@@ -46,6 +46,14 @@ export const PublicationTitleDescription: FC<PublicationTitleDescriptionProps> =
           {publication?.title}
         </Typography>
       </m.div>
+      <m.div variants={variants}>
+        <Typography
+          variant="body1"
+          sx={{ mt: 1, width: '100%', opacity: 0.48 }}
+        >
+          {publication?.viewCount} views
+        </Typography>
+      </m.div>
       <Box sx={{ mt: 2, position: 'relative' }}>
         <m.div variants={variants}>
           <Box

Original file line number	Diff line number	Diff line change
@@ -375,6 +375,7 @@ export const IncrementPostViewDocument = gql`
`375`	`375`	`mutation IncrementPostView($postId: String!) {`
`376`	`376`	`incrementPostView(postId: $postId) {`
`377`	`377`	`id`
	`378`	`+ viewCount`
`378`	`379`	`}`
`379`	`380`	`}`
`380`	`381`	`;
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`mutation IncrementPostView($postId: String!) {`
`2`	`2`	`incrementPostView(postId: $postId) {`
`3`	`3`	`id`
	`4`	`+ viewCount`
`4`	`5`	`}`
`5`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,7 @@ export default function Header({ children }: PropsWithChildren) {`
`64`	`64`	`>`
`65`	`65`	`{sessionData?.authenticated && (`
`66`	`66`	`<>`
`67`		`- <HeaderXpBalance />`
	`67`	`+ {/<HeaderXpBalance />/}`
`68`	`68`	`<HeaderMmcBalance />`
`69`	`69`	`<NotificationsPopover />`
`70`	`70`	`</>`