From 88594840b65e638c10fd380df5e87c0ca7d0e447 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Sun, 6 Feb 2022 12:48:52 -0600
Subject: [PATCH] color scheme and visual style improved

---
 src/App.css                           | 10 +++++----
 src/features/discussion/Discussion.js | 19 +++++++++-------
 src/features/posts/Feed.js            |  2 ++
 src/features/posts/Post.css           | 21 ++++++++++++++++++
 src/features/posts/Post.js            | 31 +++++++++++++++++++--------
 5 files changed, 62 insertions(+), 21 deletions(-)

diff --git a/src/App.css b/src/App.css
index a791397..795b920 100644
--- a/src/App.css
+++ b/src/App.css
@@ -23,11 +23,13 @@
   align-items: center;
   margin: 0;
   padding: 0;
+  overflow-y: hidden;
 }
 
 .loading-message {
-  color:rgb(111, 30, 151);
+  color:white;
   font-family: 'Indie Flower', sans-serif;
+  font-size: 2.5rem;
   height: 100vh;
 }
 
@@ -138,6 +140,8 @@
   width: 90vw;
 }
 
+/* Page handling */
+
 .page-handling {
   display: inline-flex;
   flex-direction: row;
@@ -175,9 +179,7 @@
 }
 
 #bottom-page-handling {
-  margin-top: 5rem;
-  position: relative;
-  bottom: 6rem;
+  margin-bottom: 10rem;
 }
 
 /* Media queries (tablet) */
diff --git a/src/features/discussion/Discussion.js b/src/features/discussion/Discussion.js
index b2dc6e2..89502c2 100644
--- a/src/features/discussion/Discussion.js
+++ b/src/features/discussion/Discussion.js
@@ -55,13 +55,14 @@ export default function Discussion({permalink, isVisible}) {
                     console.log(comment.data.replies.data.children[0].data.author)
 
                     return (
-                        <>
-                        <p>THIS IS A REPLY:</p>
-                        <p>Nested {comment.data.replies.data.children[0].data.depth} layers deep</p>
-                        <p>{comment.data.replies.data.children[0].data.is_submitter ? 'OP posted' : ''}</p>
-                        <p>u/{comment.data.replies.data.children[0].data.author}</p>
-                        <p>{comment.data.replies.data.children[0].data.body}</p>
-                        </>
+                        <div className={comment.data.replies.data.children ? `indiv-comment nested` : "indiv-comment"}>
+                            <p className="comment-author">
+                                u/{comment.data.replies.data.children[0].data.author}
+                                {comment.data.replies.data.children[0].data.is_submitter ? ' (OP)' : ''}
+                                {comment.data.replies.data.children ? ' replied:' : ''}
+                            </p>
+                            <p className="comment-body">{comment.data.replies.data.children[0].data.body}</p>
+                        </div>
                     )
                 } else {
                     return;
@@ -72,11 +73,13 @@ export default function Discussion({permalink, isVisible}) {
 
             setThread(comments.map((comment) => {
                 return (
+                    <>
                     <div className="indiv-comment" key={v4()}>
                         <p>u/{comment.data.author}</p>
                         <p>{comment.data.body}</p>
-                        {getReplies(comment)}
                     </div>
+                    {getReplies(comment)}
+                    </>
                 )
             }))
         }
diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js
index 951823b..1852296 100644
--- a/src/features/posts/Feed.js
+++ b/src/features/posts/Feed.js
@@ -82,6 +82,8 @@ export default function Feed() {
 
                 let sortedPosts = extractedPosts.sort(comparePosts);        // implements sorting function
 
+                console.log(sortedPosts);
+                
                 let newFeed = sortedPosts.map((post) => {
                     return (
                         <Post 
diff --git a/src/features/posts/Post.css b/src/features/posts/Post.css
index 185b989..3395be0 100644
--- a/src/features/posts/Post.css
+++ b/src/features/posts/Post.css
@@ -76,6 +76,10 @@ img, video {
     background-color: #064486;
 }
 
+.crosspost-from {
+    color:rgb(228, 180, 226);
+}
+
 /* Handles comment styles on toggle */
 
 .comments-visible {
@@ -88,6 +92,23 @@ img, video {
     display: none;
 }
 
+/* Comment styling */
+
+.indiv-comment {
+    background-color: #7196be;
+    border-radius: 15px;
+}
+
+.nested {
+    position: relative;
+    width: calc(100% - 2.5rem);
+    left: 2.5rem;
+}
+
+.indiv-comment p {
+    padding: 1rem;
+}
+
 /* Queries */
 
 @media only screen and (max-width: 1050px) {        /* for tablets */
diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js
index 23a4396..3882398 100644
--- a/src/features/posts/Post.js
+++ b/src/features/posts/Post.js
@@ -14,7 +14,11 @@ export default function Post({data, key}) {
     let media = data.post_hint === 'image' && data.url;
     let permalink = data.permalink;
     let selftext = data.selftext;
-    let video = data.is_video ? data.media.reddit_video.fallback_url : null;       // to do: handle media edge cases, especially video
+    let video = data.is_video ? `${data.url}/DASH_1080.mp4` : null;       // to do: handle media edge cases, especially video
+
+    // fallback_url: "https://v.redd.it/0rditq5l49g81/DASH_1080.mp4?source=fallback"
+    // url: "https://v.redd.it/0rditq5l49g81"
+    // id: "sm2wym"
 
     const limit = 300;
     const [body, setBody] = useState(selftext);
@@ -71,10 +75,17 @@ export default function Post({data, key}) {
         if (data.crosspost_parent_list[0].is_video) {
             return (
                 <>
-                <video src={data.crosspost_parent_list[0].url}>This video is not supported by your browser.</video>
-                <p>Crosspost from {data.crosspost_parent_list[0].subreddit_name_prefixed}</p>
+                <video controls src={data.crosspost_parent_list[0].media.reddit_video.fallback_url}>This video is not supported by your browser.</video>
+                <p className="crosspost-from">Crosspost from {data.crosspost_parent_list[0].subreddit_name_prefixed}</p>
                 </>
             );
+        } else if (data.crosspost_parent_list[0].url && !data.url) {
+            return (
+                <>
+                <img alt={title} src={data.crosspost_parent_list[0].url} />
+                <p className="crosspost-from">Crosspost from {data.crosspost_parent_list[0].subreddit_name_prefixed}</p>
+                </>
+            )
         } else {
             return;
         }
@@ -90,18 +101,20 @@ export default function Post({data, key}) {
 
             {media ? <img alt={title} src={media} /> : ''}
             {data.crosspost_parent_list ? handleCrosspost() : ''}
-            {data.crosspost_parent_list ? 
-                (data.crosspost_parent_list[0].is_video ?
-                    <video src={data.crosspost_parent_list[0].url}></video>
-                : null)
-            : null}
 
             {data.gallery_data ?
                 <p>View the gallery of photos corresponding to this post <a href={data.url}>here</a>.</p>
             : null}
 
             {video ?
-                <video controls type="video/mp4" src={video}></video>
+                <video
+                    controls
+                    poster={data.thumbnail}
+                    preload="auto"
+                    src={video}>
+                    
+                    Your video is not supported by the browser.
+                </video>
             : ''}
 
             {body ?