initial UI changes

server/app.py

@@ -12,8 +12,10 @@
 # app.config['CORS_HEADERS'] = 'Content-Type'
 
 DUMMY_DICT = {
-    'car': [[5, 10], [30, 35]],
-    'bicycle': [[15, 35]]
+    'boat': [[5, 10], [30, 45]],
+    'fish': [[15, 500]],
+    'kite': [[15, 20], [50, 80]],
+    'chair': [[60, 200]]
 }
 
 

src/App.js

@@ -9,11 +9,12 @@ import {youtubeLibraryLoaded} from './store/actions/api';
 import Trending from './containers/Trending/Trending';
 import Search from './containers/Search/Search';
 
-import API_KEY_YOUTUBE from './keys.js'
+import API_KEY_YOUTUBE from './keys.js';
 
 const API_KEY = process.env.REACT_APP_YT_API_KEY || API_KEY_YOUTUBE;
-// const API_KEY = API_KEY_YOUTUBE;
-console.log('API key: ' + JSON.stringify(API_KEY))
+//const API_KEY = API_KEY_YOUTUBE;
+
+console.log('API key: ' + JSON.stringify(API_KEY));
 
 class App extends Component {
   render() {

src/components/RelatedVideos/RelatedVideos.js

@@ -4,6 +4,7 @@ import './RelatedVideos.scss';
 import {NextUpVideo} from './NextUpVideo/NextUpVideo';
 
 export function RelatedVideos(props) {
+  /*
   if (!props.videos || !props.videos.length) {
     return <div className='related-videos'/>;
   }
@@ -19,11 +20,19 @@ export function RelatedVideos(props) {
                     search={`?v=${relatedVideo.id}`}
                     horizontal={true}/>
   ));
-
+*/
   return (
+
+
+    <div> 
+
+    </div> 
+
+    /*
     <div className='related-videos'>
       <NextUpVideo video={nextUpVideo}/>
       {relatedVideosPreviews}
     </div>
+    */
   );
 }

src/components/Video/Video.js

@@ -26,8 +26,8 @@ export function Video(props) {
   // console.log('video.js this: ' + player)
 
   const opts = {
-    height: '390',
-    width: '640',
+    height: '400',
+    width: '700',
     playerVars: {
       // https://developers.google.com/youtube/player_parameters
       autoplay: 1,
@@ -96,10 +96,10 @@ export function Video(props) {
               <button disabled={!range.occur} onMouseOver={'pointer'}
                       style={{
                         width: Math.floor((opts.width / duration) * (range.end - range.start)),
-                        height: 25,
+                        height: 40,
                         display: 'inline',
-                        padding: 0,
-                        margin: 0,
+                        padding: 10,
+                        margin: 5,
                         border: 0,
                         backgroundColor: range.occur ? color : 'white'
                       }}

src/components/Video/Video.scss

@@ -17,6 +17,8 @@
     left: 0;
     bottom: 0;
     right: 0;
+    padding: 70px;
+    margin: 50px;
 
     .video-player {
       min-height: 480px;

src/components/VideoInfoBox/VideoInfoBox.js

@@ -37,12 +37,15 @@ export class VideoInfoBox extends React.Component {
           </div>
           <Button className='subscribe' color='youtube'>{buttonText}</Button> */}
           <div className="video-description">
+
             {/* <div className={descriptionTextClass}>
               {descriptionParagraphs}
             </div> */}
-            <h1>Summary</h1>
-            <h2>0:00 - Item 1 Display...</h2>
-            <h2>1:02 - Item 2 Appears...</h2>
+
+
+
+
+
             {/* <Button compact onClick={this.onToggleCollapseButtonClick}>{buttonTitle}</Button> */}
           </div>
         </div>

src/components/VideoMetadata/VideoMetadata.js

@@ -11,6 +11,7 @@ export function VideoMetadata(props) {
 
   return (
     <div className='video-metadata'>
+
       <h3>{props.video.snippet.title}</h3>
       {/* <div className='video-stats'>
         <span>{viewCount} views</span>

src/components/VideoMetadata/VideoMetadata.scss

@@ -7,6 +7,7 @@
     h3 {
         font-weight: 400;
         color: $text-color-dark;
+        align-items: center;
     }
 
     .video-stats {