Skip to content

Commit eaacfad

Browse files
tiller1010tiller1010
committed
Rebased on typescript branch, graphql like api in video component
1 parent cee2301 commit eaacfad

File tree

7 files changed

+261
-736
lines changed

7 files changed

+261
-736
lines changed

‎js/components/AccountProfile.jsx

+55-215
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import React from 'react';
22
import Navigation from './Navigation.jsx';
33
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4-
import { faSignOutAlt, faStar, faTrash, faTimes, faLongArrowAltRight } from '@fortawesome/free-solid-svg-icons';
5-
import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
4+
import { faSignOutAlt, faTrash, faTimes, faLongArrowAltRight } from '@fortawesome/free-solid-svg-icons';
65
import Slider from 'react-slick';
7-
import ReadMore from '@jamespotz/react-simple-readmore';
86
import graphQLFetch from './graphQLFetch.js';
7+
import VideoPlayer from './VideoPlayer.tsx';
98

109
class AccountProfile extends React.Component {
1110
constructor(props){
@@ -19,8 +18,7 @@ class AccountProfile extends React.Component {
1918
openRemovalForm: false
2019
}
2120
this.findAndSyncUser = this.findAndSyncUser.bind(this);
22-
this.sendLike = this.sendLike.bind(this);
23-
this.removeLike = this.removeLike.bind(this);
21+
this.afterToggleLike = this.afterToggleLike.bind(this);
2422
this.currentUserHasLikedVideo = this.currentUserHasLikedVideo.bind(this);
2523
this.handleDeleteVideo = this.handleDeleteVideo.bind(this);
2624
}
@@ -51,123 +49,42 @@ class AccountProfile extends React.Component {
5149
this.setState({ user: userProfile });
5250
}
5351

54-
async sendLike(video, videoList, videoListType){
55-
if(!this.state.user._id){
56-
alert('Must be signed in to send like.');
57-
return;
58-
}
59-
const query = `mutation addLike($userID: ID!, $videoID: ID!){
60-
addLike(userID: $userID, videoID: $videoID){
61-
_id
62-
title
63-
src
64-
originalName
65-
thumbnailSrc
66-
originalThumbnailName
67-
created
68-
likes
69-
uploadedBy {
70-
_id
71-
displayName
72-
}
52+
afterToggleLike(newVideo, likedByCurrentUser){
53+
newVideo.likedByCurrentUser = likedByCurrentUser;
54+
let videoAlreadyLiked = false;
55+
let updatedUser = this.state.user;
56+
updatedUser.likedVideos.forEach((userLikedVideo) => {
57+
if(String(newVideo._id) == String(userLikedVideo._id)){
58+
videoAlreadyLiked = true;
59+
// Restore like to liked video
60+
updatedUser.likedVideos[updatedUser.likedVideos.indexOf(userLikedVideo)] = newVideo;
7361
}
74-
}`;
75-
const data = await graphQLFetch(query, {
76-
userID: this.state.user._id,
77-
videoID: video._id
7862
});
79-
const newLikedVideo = data.addLike;
80-
81-
if(newLikedVideo) {
82-
// Update the video state to be liked by the current user.
83-
newLikedVideo.likedByCurrentUser = true;
84-
let updatedUser = this.state.user;
85-
videoList[videoList.indexOf(video)] = newLikedVideo;
86-
updatedUser[videoListType] = videoList;
87-
// Check if re-sending like from liked videos so duplicate does not show
88-
let videoAlreadyLiked = false;
89-
updatedUser.likedVideos.forEach((userLikedVideo) => {
90-
if(String(video._id) == String(userLikedVideo._id)){
91-
videoAlreadyLiked = true;
92-
// Restore like to liked video
93-
updatedUser.likedVideos[updatedUser.likedVideos.indexOf(userLikedVideo)] = newLikedVideo;
94-
}
95-
});
96-
if(!videoAlreadyLiked && this.props.isCurrentUser){
97-
// If user likes their own video, add to liked videos
98-
updatedUser.likedVideos.push(newLikedVideo);
99-
}
100-
// Update uploaded video likes if restoring like from one in liked videos
101-
updatedUser.uploadedVideos.forEach((userLikedVideo) => {
102-
if(String(video._id) == String(userLikedVideo._id)){
103-
videoAlreadyLiked = true;
104-
// Restore like to liked video
105-
updatedUser.uploadedVideos[updatedUser.uploadedVideos.indexOf(userLikedVideo)] = newLikedVideo;
106-
}
107-
});
108-
this.setState({
109-
user: updatedUser
110-
});
63+
if(!videoAlreadyLiked && this.props.isCurrentUser){
64+
// If user likes their own video, add to liked videos
65+
updatedUser.likedVideos.push(newVideo);
11166
}
112-
}
113-
114-
async removeLike(video, videoList, videoListType){
115-
const query = `mutation removeLike($userID: ID!, $videoID: ID!){
116-
removeLike(userID: $userID, videoID: $videoID){
117-
_id
118-
title
119-
src
120-
originalName
121-
thumbnailSrc
122-
originalThumbnailName
123-
created
124-
likes
125-
uploadedBy {
126-
_id
127-
displayName
128-
}
67+
// Update uploaded video likes if restoring like from one in liked videos
68+
updatedUser.uploadedVideos.forEach((userUploadedVideo) => {
69+
if(String(newVideo._id) == String(userUploadedVideo._id)){
70+
// Restore like to liked video
71+
updatedUser.uploadedVideos[updatedUser.uploadedVideos.indexOf(userUploadedVideo)] = newVideo;
12972
}
130-
}`;
131-
const data = await graphQLFetch(query, {
132-
userID: this.state.user._id,
133-
videoID: video._id
13473
});
135-
const newUnlikedVideo = data.removeLike;
136-
137-
if(newUnlikedVideo.message){
138-
// Display error message if included in response
139-
alert(newUnlikedVideo.message);
140-
} else if(newUnlikedVideo) {
141-
// Update the video state to remove like from the current user. Used immediately after unliking.
142-
newUnlikedVideo.likedByCurrentUser = false;
143-
let updatedUser = this.state.user;
144-
videoList[videoList.indexOf(video)] = newUnlikedVideo;
145-
updatedUser[videoListType] = videoList;
146-
// Update uploaded video likes if removing like from one in liked videos
147-
updatedUser.uploadedVideos.forEach((userUploadedVideo) => {
148-
if(String(video._id) == String(userUploadedVideo._id)){
149-
updatedUser.uploadedVideos[updatedUser.uploadedVideos.indexOf(userUploadedVideo)] = newUnlikedVideo;
150-
}
151-
});
152-
// Update liked video likes if removing like from one in uploaded videos
153-
updatedUser.likedVideos.forEach((userLikedVideo) => {
154-
if(String(video._id) == String(userLikedVideo._id)){
155-
updatedUser.likedVideos[updatedUser.likedVideos.indexOf(userLikedVideo)] = newUnlikedVideo;
156-
}
157-
});
158-
this.setState({
159-
user: updatedUser
160-
});
161-
}
74+
this.setState({
75+
user: updatedUser
76+
});
16277
}
16378

16479
currentUserHasLikedVideo(video, user){
16580
let liked = false;
166-
user.likedVideos.forEach((userLikedVideo) => {
167-
if(userLikedVideo._id === video._id){
168-
liked = true;
169-
}
170-
});
81+
if(user.likedVideos){
82+
user.likedVideos.forEach((userLikedVideo) => {
83+
if(userLikedVideo._id === video._id){
84+
liked = true;
85+
}
86+
});
87+
}
17188
return liked;
17289
}
17390

@@ -197,6 +114,8 @@ class AccountProfile extends React.Component {
197114

198115
render(){
199116

117+
const authenticatedUser = JSON.parse(this.props.authenticatedUser);
118+
200119
document.addEventListener('cssmodal:hide', () => {
201120
this.setState({
202121
openRemovalForm: false
@@ -306,58 +225,18 @@ class AccountProfile extends React.Component {
306225
}}>
307226
{this.state.user.uploadedVideos.map((video) =>
308227
<div key={video._id} className="pure-u-1 pure-u-lg-1-3">
309-
<div className="flex x-center">
310-
<div>
311-
<div className="pure-u-1 flex x-space-between y-center">
312-
<div style={{ maxWidth: '65%' }}>
313-
<ReadMore
314-
fade
315-
minHeight={58}
316-
btnStyles={{
317-
position: 'absolute',
318-
bottom: '-15px',
319-
border: 'none',
320-
margin: 0,
321-
padding: '5px',
322-
zIndex: 1
323-
}}
324-
>
325-
<h3>{video.title}</h3>
326-
</ReadMore>
327-
</div>
328-
{this.props.isCurrentUser ?
329-
<form action="/videos/remove" method="POST">
330-
<input type="hidden" name="videoID" value={video._id}/>
331-
<a className="button" href="#remove-video" onClick={this.handleDeleteVideo}>
332-
Remove Video
333-
<FontAwesomeIcon icon={faTrash}/>
334-
</a>
335-
</form>
336-
:
337-
''
338-
}
339-
</div>
340-
<video type="video/mp4" className="video-preview lozad" height="225" width="400" poster={
341-
`${this.props.pathResolver}${video.thumbnailSrc}` || "/images/videoPlaceholder.png"
342-
} controls>
343-
<source src={`${this.props.pathResolver}${video.src}`}></source>
344-
</video>
345-
</div>
346-
</div>
347-
<div className="flex x-space-around y-center">
348-
<p>Likes: {video.likes || 0}</p>
349-
{video.likedByCurrentUser ?
350-
<button onClick={() => this.removeLike(video, this.state.user.uploadedVideos, 'uploadedVideos')}>
351-
Liked
352-
<FontAwesomeIcon icon={faStar}/>
353-
</button>
354-
:
355-
<button onClick={() => this.sendLike(video, this.state.user.uploadedVideos, 'uploadedVideos')}>
356-
Like
357-
<FontAwesomeIcon icon={farStar}/>
358-
</button>
359-
}
360-
</div>
228+
<VideoPlayer
229+
_id={video._id}
230+
title={video.title}
231+
src={`${this.props.pathResolver}${video.src}`}
232+
thumbnailSrc={`${this.props.pathResolver}${video.thumbnailSrc}`}
233+
uploadedBy={video.uploadedBy}
234+
likes={video.likes}
235+
likedByCurrentUser={video.likedByCurrentUser}
236+
authenticatedUserID={authenticatedUser ? authenticatedUser._id : null}
237+
handleDeleteVideo={this.handleDeleteVideo}
238+
afterToggleLike={this.afterToggleLike}
239+
/>
361240
</div>
362241
)}
363242
</Slider>
@@ -389,56 +268,17 @@ class AccountProfile extends React.Component {
389268
}}>
390269
{this.state.user.likedVideos.map((video) =>
391270
<div key={video._id} className="pure-u-1 pure-u-lg-1-3">
392-
<div className="flex x-center">
393-
<div>
394-
<div className="flex x-space-between y-center">
395-
<div style={{ maxWidth: '65%' }}>
396-
<ReadMore
397-
fade
398-
minHeight={58}
399-
btnStyles={{
400-
position: 'absolute',
401-
bottom: '-15px',
402-
border: 'none',
403-
margin: 0,
404-
padding: '5px',
405-
zIndex: 1
406-
}}
407-
>
408-
<h3>{video.title}</h3>
409-
</ReadMore>
410-
</div>
411-
{video.uploadedBy._id ?
412-
<div>
413-
<p>By: <a href={`/account-profile/${video.uploadedBy._id}`} aria-label={`${video.uploadedBy.displayName} profile`}>{video.uploadedBy.displayName}</a></p>
414-
</div>
415-
:
416-
<div>
417-
<p>By: {video.uploadedBy.displayName}</p>
418-
</div>
419-
}
420-
</div>
421-
<video type="video/mp4" className="video-preview lozad" height="225" width="400" poster={
422-
`${this.props.pathResolver}${video.thumbnailSrc}` || "/images/videoPlaceholder.png"
423-
} controls>
424-
<source src={`${this.props.pathResolver}${video.src}`}></source>
425-
</video>
426-
</div>
427-
</div>
428-
<div className="flex x-space-around y-center">
429-
<p>Likes: {video.likes || 0}</p>
430-
{video.likedByCurrentUser ?
431-
<button onClick={() => this.removeLike(video, this.state.user.likedVideos, 'likedVideos')}>
432-
Liked
433-
<FontAwesomeIcon icon={faStar}/>
434-
</button>
435-
:
436-
<button onClick={() => this.sendLike(video, this.state.user.likedVideos, 'likedVideos')}>
437-
Like
438-
<FontAwesomeIcon icon={farStar}/>
439-
</button>
440-
}
441-
</div>
271+
<VideoPlayer
272+
_id={video._id}
273+
title={video.title}
274+
src={`${this.props.pathResolver}${video.src}`}
275+
thumbnailSrc={`${this.props.pathResolver}${video.thumbnailSrc}`}
276+
uploadedBy={video.uploadedBy}
277+
likes={video.likes}
278+
likedByCurrentUser={video.likedByCurrentUser}
279+
authenticatedUserID={authenticatedUser ? authenticatedUser._id : null}
280+
afterToggleLike={this.afterToggleLike}
281+
/>
442282
</div>
443283
)}
444284
</Slider>

0 commit comments

Comments
 (0)