updated README.md, fixed undefined views

Cheetary · Jul 7, 2020 · f96a9d4 · f96a9d4
1 parent ea6242d
commit f96a9d4
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -58,6 +58,10 @@ Then run <code>npm i</code> and <code>npm start</code> to see the youtube clone
 
 ![Watch](screenshots/video.png)
 
+### Suggestions
+
+![Suggestions](screenshots/suggestions.png)
+
 ### Channel
 
 ![Trending](screenshots/profile.png)

diff --git a/screenshots/suggestions.png b/screenshots/suggestions.png
diff --git a/src/components/TrendingCard.js b/src/components/TrendingCard.js
@@ -85,14 +85,8 @@ const TrendingCard = ({ video }) => {
 					<span>{video.User.username}</span>
 
 					<span>•</span>
-					{video.views === 0 && <span>No views</span>}
-
-					{video.views !== 0 && (
-						<span>
-							{video.views > 1 ? `${video.views} views` : `${video.views} view`}
-						</span>
-					)}
-					<span>•</span>
+					<span>{video.views || 0} views</span>
+					<span>•</span>{" "}
 
 					<span>{timeSince(video.createdAt)} ago</span>
 				</p>

diff --git a/src/components/VideoCard.js b/src/components/VideoCard.js
@@ -64,14 +64,7 @@ const VideoCard = ({ nousername, hideavatar, video }) => {
 						<span className="secondary">{video.User.username}</span>
 					)}
 					<p className="secondary">
-						{video.views === 0 && <span>No views</span>}
-						{video.views !== 0 && (
-							<span>
-								{video.views > 1
-									? `${video.views} views`
-									: `${video.views} view`}
-							</span>
-						)}{" "}
+						<span>{video.views || 0} views</span>{" "}
 						<span>•</span> <span>{timeSince(video.createdAt)} ago</span>
 					</p>
 				</div>

diff --git a/src/pages/Subscriptions.js b/src/pages/Subscriptions.js
@@ -23,6 +23,7 @@ const Subscriptions = ({ isFetching, videos, getFeed }) => {
 
 	return (
 		<StyledHome>
+			<div style={{ marginTop: "1.5rem" }}></div>
 			<VideoGrid>
 				{!isFetching && videos.map(video => (
 					<Link key={video.id} to={`/watch/${video.id}`}>

diff --git a/src/styles/Skeleton.js b/src/styles/Skeleton.js
@@ -1,5 +1,4 @@
 import styled, { keyframes } from "styled-components";
-
 const pulse = keyframes`
 	0% {
 		background-position: 0% 0%;
@@ -14,9 +13,9 @@ const SkeletonPulse = styled.div`
 	display: block;
 	height: 100%;
 	width: 100%;
-	background: linear-gradient(-90deg, #121212 0%, #191818 50%, #121212 100%);
+	background: linear-gradient(-90deg, #121212 0%, #161616 50%, #121212 100%);
 	background-size: 400% 400%;
-	animation: ${pulse} 1.2s ease-in-out infinite;
+	animation: ${pulse} 1s linear;
 `;
 
 export const SkeletonLine = styled(SkeletonPulse)`