Youtube Search UI imitated mostly

2 files changed, 159 insertions, 4 deletions

diff --git a/src/client/apis/youtube/YoutubeBox.scss b/src/client/apis/youtube/YoutubeBox.scss
index 23f264b95..5b539b463 100644
--- a/src/client/apis/youtube/YoutubeBox.scss
+++ b/src/client/apis/youtube/YoutubeBox.scss
@@ -1,5 +1,6 @@
 ul {
     list-style-type: none;
+    padding-inline-start: 10px;
 }
 
 
@@ -13,7 +14,74 @@ li:hover {
     opacity: 0.8;
 }
 
-.videoTitle {
-    margin-left: 4px;
-    font-family: Arial, Helvetica, sans-serif;
+.search_wrapper {
+    width: 100%;
+    display: inline-flex;
+    height: 175px;
+
+    .textual_info {
+        font-family: Arial, Helvetica, sans-serif;
+
+        .videoTitle {
+            margin-left: 4px;
+            // display: inline-block;
+            color: #0D0D0D;
+            -webkit-line-clamp: 2;
+            display: block;
+            max-height: 4.8rem;
+            overflow: hidden;
+            font-size: 1.8rem;
+            font-weight: 400;
+            line-height: 2.4rem;
+            -webkit-box-orient: vertical;
+            text-overflow: ellipsis;
+            white-space: normal;
+            display: -webkit-box;
+        }
+
+        .channelName {
+            color:#606060;
+            margin-left: 4px;
+            font-size: 1.3rem;
+            font-weight: 400;
+            line-height: 1.8rem;
+            text-transform: none;
+            margin-top: 0px;
+            display: inline-block;
+        }
+
+        .video_description {
+            margin-left: 4px;
+            // font-size: 12px;
+            color: #606060;
+            padding-top: 8px;
+            margin-bottom: 8px;
+            display: block;
+            line-height: 1.8rem;
+            max-height: 4.2rem;
+            overflow: hidden;
+            font-size: 1.3rem;
+            font-weight: 400;
+            text-transform: none;
+        }
+
+        .publish_time {
+            //display: inline-block;
+            margin-left: 8px;
+            padding: 0;
+            border: 0;
+            background: transparent;
+            color: #606060;
+            max-width: 100%;
+            line-height: 1.8rem;
+            max-height: 3.6rem;
+            overflow: hidden;
+            font-size: 1.3rem;
+            font-weight: 400;
+            text-transform: none;
+        }
+        
+            
+        
+    }
 }
\ No newline at end of file
diff --git a/src/client/apis/youtube/YoutubeBox.tsx b/src/client/apis/youtube/YoutubeBox.tsx
index da3c4b851..7ac8d06f6 100644
--- a/src/client/apis/youtube/YoutubeBox.tsx
+++ b/src/client/apis/youtube/YoutubeBox.tsx
@@ -121,13 +121,100 @@ export class YoutubeBox extends React.Component<FieldViewProps> {
         return processedTitle;
     }
 
+    roundPublishTime = (publishTime: string) => {
+        let date = new Date(publishTime);
+        let curDate = new Date();
+        let videoYearDif = curDate.getFullYear() - date.getFullYear();
+        let videoMonthDif = curDate.getMonth() - date.getMonth();
+        let videoDayDif = curDate.getDay() - date.getDay();
+        console.log("video day dif: ", videoDayDif, " first day: ", curDate.getDay(), " second day: ", date.getDay());
+        let videoHoursDif = curDate.getHours() - date.getHours();
+        let videoMinutesDif = curDate.getMinutes() - date.getMinutes();
+        let videoSecondsDif = curDate.getSeconds() - date.getSeconds();
+        if (videoYearDif !== 0) {
+            return videoYearDif + " years ago";
+        } else if (videoMonthDif !== 0) {
+            return videoMonthDif + " months ago";
+        } else if (videoDayDif !== 0) {
+            return videoDayDif + " days ago";
+        } else if (videoHoursDif !== 0) {
+            return videoHoursDif + " hours ago";
+        } else if (videoMinutesDif) {
+            return videoMinutesDif + " minutes ago";
+        } else if (videoSecondsDif) {
+            return videoSecondsDif + " seconds ago";
+        }
+
+        console.log("Date : ", date);
+    }
+
+    roundPublishTime2 = (publishTime: string) => {
+        let date = new Date(publishTime).getTime();
+        let curDate = new Date().getTime();
+        let timeDif = curDate - date;
+        let totalSeconds = timeDif / 1000;
+        let totalMin = totalSeconds / 60;
+        let totalHours = totalMin / 60;
+        let totalDays = totalHours / 24;
+        let totalMonths = totalDays / 30.417;
+        let totalYears = totalMonths / 12;
+
+
+        let truncYears = Math.trunc(totalYears);
+        let truncMonths = Math.trunc(totalMonths);
+        let truncDays = Math.trunc(totalDays);
+        let truncHours = Math.trunc(totalHours);
+        let truncMin = Math.trunc(totalMin);
+        let truncSec = Math.trunc(totalSeconds);
+
+        let pluralCase = "";
+
+        if (truncYears !== 0) {
+            truncYears > 1 ? pluralCase = "s" : pluralCase = "";
+            return truncYears + " year" + pluralCase + " ago";
+        } else if (truncMonths !== 0) {
+            truncMonths > 1 ? pluralCase = "s" : pluralCase = "";
+            return truncMonths + " month" + pluralCase + " ago";
+        } else if (truncDays !== 0) {
+            truncDays > 1 ? pluralCase = "s" : pluralCase = "";
+            return truncDays + " day" + pluralCase + " ago";
+        } else if (truncHours !== 0) {
+            truncHours > 1 ? pluralCase = "s" : pluralCase = "";
+            return truncHours + " hour" + pluralCase + " ago";
+        } else if (truncMin !== 0) {
+            truncMin > 1 ? pluralCase = "s" : pluralCase = "";
+            return truncMin + " minute" + pluralCase + " ago";
+        } else if (truncSec !== 0) {
+            truncSec > 1 ? pluralCase = "s" : pluralCase = "";
+            return truncSec + " second" + pluralCase + " ago";
+        }
+    }
+
     renderSearchResultsOrVideo = () => {
         if (this.searchResultsFound) {
             if (this.searchResults.length !== 0) {
                 return <ul>
                     {this.searchResults.map((video) => {
                         let filteredTitle = this.filterYoutubeTitleResult(video.snippet.title);
-                        return <li onClick={() => this.embedVideoOnClick(video.id.videoId, filteredTitle)} key={Utils.GenerateGuid()}><img src={video.snippet.thumbnails.medium.url} /> <span className="videoTitle">{filteredTitle}</span>  </li>;
+                        let channelTitle = video.snippet.channelTitle;
+                        let videoDescription = video.snippet.description;
+                        let pusblishDate = this.roundPublishTime2(video.snippet.publishedAt);
+                        // let duration = video.contentDetails.duration;
+                        //let viewCount = video.statistics.viewCount;
+                        //this.roundPublishTime(pusblishDate);
+                        //this.roundPublishTime2(video.snippet.publishedAt);
+                        return <li onClick={() => this.embedVideoOnClick(video.id.videoId, filteredTitle)} key={Utils.GenerateGuid()}>
+                            <div className="search_wrapper">
+                                <img src={video.snippet.thumbnails.medium.url} />
+                                <div className="textual_info">
+                                    <span className="videoTitle">{filteredTitle}</span>
+                                    <span className="channelName">{channelTitle}</span>
+                                    <span className="publish_time">{pusblishDate}</span>
+                                    {/* <h6 className="viewCount">{viewCount}</h6> */}
+                                    <p className="video_description">{videoDescription}</p>
+                                </div>
+                            </div>
+                        </li>;
                     })}
                 </ul>;
             } else if (this.lisOfBackUp.length !== 0) {