1.6 - Updating to latest version

Author: quead

README.md

@@ -1,10 +1,10 @@
 <p align="center">
   <a href="https://quead.github.io/demo/" title="YouTube Player Demo">View Demo</a>
-  <img alt="Angular YouTube Player Logo" src="http://i.imgur.com/HciUBN3.jpg" style="height: auto; max-width:100%;" />
+  <img alt="Angular YouTube Player Logo" src="http://i.imgur.com/2HIN6MY.jpg" style="height: auto; max-width:100%;" />
 </p>
 
 # About Player
-[![Version](https://img.shields.io/badge/Current%20version-v1.4-brightgreen.svg?style=flat)](https://github.com/quead/angular2-yt-player)
+[![Version](https://img.shields.io/badge/Current%20version-v1.6-brightgreen.svg?style=flat)](https://github.com/quead/angular2-yt-player)
 
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/quead/angular2-yt-player/master/LICENSE)
 [![GitHub forks](https://img.shields.io/github/forks/quead/angular2-yt-player.svg)](https://github.com/quead/angular2-yt-player/network)
@@ -58,6 +58,12 @@ Just take files from ***dist*** folder
 
 ## Changelog
 
+Angular2 YT Player v1.6
+- History of your watched videos
+- Video details for current video and trending videos like number of views, likes and dislikes
+- Share link for current video
+- Added new setting for hiding all thumbnails
+- Custom player buttons shows now only when you hide video
 
 Angular2 YT Player v1.4
 - History of your watched videos
@@ -68,7 +74,7 @@ Angular2 YT Player v1.3
  - Repeat video
  - Grid/list mode for trending videos
 - **Settings (you can set default from "assets/settings.json", soon will be directly from settings)**
-- *Change country for trending feed (currently only three countries, US, UK and RO)*
+- *Change country for trending videos (currently only three countries, US, UK and RO)*
 - *Max results show in search (0 to 50)*
 - *YOUR_API Key*
 - *Max related videos (0 to 50)*
@@ -108,9 +114,6 @@ Angular2 YT Player v1.0.0
 - *Save your settings **(unversioned)***
 
 #### Roadmap to 2.0
-- Video details for current video, related videos and trending feed like number of views, likes and dislikes **(in v1.6)**
-- Share link for current video and related videos **(in v1.6)** 
-- Share link for current video at your playing time **(in v1.6)**
 - Notifications for important actions you do **(in v1.7)**
 - Change and create theme **(in v1.7)**
 - Add your videos in playlist **(in v1.9)**
@@ -122,6 +125,7 @@ Angular2 YT Player v1.0.0
 - *Save your settings **(unversioned)***
 
 #### Roadmap to 3.0
+- Categories with videos like (music, gaming, autos, films, sports, much more) **(in 2.1)**
 - **Rooms**
 - *Create room where you can watch videos with others in sync by sharing the room link **(in v3.0)***
 - *Set private/public room **(in v3.0)***

dist/assets/css/main.css

@@ -27,7 +27,6 @@ body {
   line-height: 1.5;
   margin: 0;
   padding: 0;
-  user-select: none;
   cursor: default;
   color: #ffffff;
   -webkit-app-region: drag;
@@ -299,6 +298,28 @@ a:active {
   transition: opacity 0.1s ease-out 0.3s, visibility 0.1s ease-out 0.1s, height 0.1s ease-out;
 }
 
+.notif {
+  position: absolute;
+  bottom: -41px;
+  background-color: #111111;
+  color: #ffffff;
+  left: 50%;
+  transform: translateX(-50%);
+  min-width: 300px;
+  padding: 10px 15px;
+  text-align: center;
+  transition: all 0.1s ease-in-out;
+  z-index: 1;
+}
+
+.notif p {
+  margin: 0;
+}
+
+.notif.active {
+  bottom: 0;
+}
+
 .current-video-all {
   padding: 0px 10px;
   display: inline-block;
@@ -325,10 +346,56 @@ a:active {
   color: #000;
 }
 
+.current-video-stats {
+  display: flex;
+}
+
+.current-video-stats .stats-views {
+  margin-right: auto;
+}
+
+.current-video-stats p {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  color: #5a5a5a;
+}
+
+.current-video-stats p + p {
+  margin-left: 15px;
+}
+
+.current-video-stats .fa {
+  margin-right: 3px;
+  color: #000;
+}
+
+.current-video-share {
+  display: flex;
+  margin-top: 3px;
+}
+
+.current-video-share label {
+  margin: 0 15px 0 0;
+  white-space: nowrap;
+  padding: 7px 0;
+  cursor: pointer;
+}
+
+.current-video-share input[type=text] {
+  width: 100%;
+  border: none;
+  padding: 3px 20px;
+  background: #efefef;
+  margin: 0;
+  outline: 0;
+  border-radius: 30px;
+}
+
 .player-buttons {
   display: flex;
   align-items: center;
   justify-content: center;
+  padding-top: 5px;
 }
 
 .player-buttons button {
@@ -891,13 +958,29 @@ iframe {
   height: auto;
 }
 
+.video-item-details {
+  display: flex;
+}
+
+.video-item-details p {
+  margin: 0 15px 0 0;
+  line-height: 14px;
+  font-size: 12px;
+  color: #5a5a5a;
+}
+
+.video-item-details .fa {
+  margin-right: 3px;
+  color: #000;
+}
+
 #related-video-list {
   display: flex;
   flex-wrap: wrap;
   top: inherit;
   bottom: 0;
   max-height: none;
-  height: calc(100% - 110px);
+  height: calc(100% - 190px);
   width: 100%;
   transition: height 0.1s ease-out 0.1s;
 }
@@ -961,7 +1044,7 @@ iframe {
 }
 
 #history-video-list .video-item-head {
-  background-color: #191919;
+  background-color: #111111;
 }
 
 #history-video-list .video-item {
@@ -990,7 +1073,7 @@ iframe {
   height: calc(100% - 39px);
   width: 100%;
   overflow: auto;
-  background-color: #111111;
+  background-color: #0c0c0c;
   color: #ffffff;
 }
 
@@ -1059,3 +1142,15 @@ iframe {
 #feed-video-list.grid-list .video-item .video-item-content {
   margin: 5px 0 15px 0;
 }
+
+#feed-video-list.grid-list .video-item-details {
+  flex-wrap: wrap;
+  margin-top: 8px;
+}
+
+#feed-video-list.grid-list .video-item-details p {
+  font-size: 14px;
+  width: 100%;
+  margin-right: 0;
+  margin-bottom: 5px;
+}

dist/assets/scss/_common.scss

@@ -133,3 +133,23 @@
         transition: opacity 0.1s ease-out 0.3s, visibility 0.1s ease-out 0.1s, height 0.1s ease-out;
     }
 }
+
+.notif {
+    position: absolute;
+    bottom: -41px;
+    background-color: $c-gray;
+    color: $c-white;
+    left: 50%;
+    transform: translateX(-50%);
+    min-width: 300px;
+    padding: 10px 15px;
+    text-align: center;
+    transition: all 0.1s ease-in-out;
+    z-index: 1;
+    p {
+        margin: 0;
+    }
+    &.active {
+        bottom: 0;
+    }
+}

dist/assets/scss/_controls.scss

@@ -24,10 +24,50 @@
     color: $c-black;
 }
 
+.current-video-stats {
+    display: flex;
+    .stats-views {
+        margin-right: auto;
+    }
+    p {
+        margin-top: 5px;
+        margin-bottom: 5px;
+        color: $c-light-gray;
+    }
+    p + p {
+        margin-left: 15px;
+    }
+    .fa {
+        margin-right: 3px;
+        color: $c-black;
+    }
+}
+
+.current-video-share {
+    display: flex;
+    margin-top: 3px;
+    label {
+        margin: 0 15px 0 0;
+        white-space: nowrap;
+        padding: 7px 0;
+        cursor: pointer;
+    }
+    input[type=text] {
+        width: 100%;
+        border: none;
+        padding: 3px 20px;
+        background: #efefef;
+        margin: 0;
+        outline: 0;
+        border-radius: 30px;
+    }
+}
+
 .player-buttons {
     display: flex;
     align-items: center;
     justify-content: center;
+    padding-top: 5px;
     button {
         background: transparent;
         position: relative;

dist/assets/scss/_global.scss

@@ -15,7 +15,6 @@ body {
     line-height: 1.5;
     margin: 0;
     padding: 0;
-    user-select: none;
     cursor: default;
     color: $c-white;
     -webkit-app-region: drag;

dist/assets/scss/_variables.scss

@@ -7,6 +7,7 @@ $c-primary-active: darken(#e52d27, 10%);
 $c-secondary: #167ac6;
 
 $c-gray: #111111;
+$c-light-gray: #5a5a5a;
 $c-black: #000;
 $c-white: #ffffff;
 

dist/assets/scss/_videos.scss

@@ -75,13 +75,27 @@ iframe {
     }
 }
 
+.video-item-details {
+    display: flex;
+    p {
+        margin: 0 15px 0 0;
+        line-height: 14px;
+        font-size: 12px;
+        color: $c-light-gray;
+    }
+    .fa {
+        margin-right: 3px;
+        color: $c-black;
+    }
+}
+
 #related-video-list {
     display: flex;
     flex-wrap: wrap;
     top: inherit;
     bottom: 0;
     max-height: none;
-    height: calc(100% - 110px);
+    height: calc(100% - 190px);
     width: 100%;
     transition: height 0.1s ease-out 0.1s;
     .video-item {
@@ -137,7 +151,7 @@ iframe {
     width: 100%;
     transition: height 0.1s ease-out 0.1s;
     .video-item-head {
-        background-color: lighten($c-gray, 3%);
+        background-color: $c-gray;
     }
     .video-item {
         display: flex;
@@ -162,7 +176,7 @@ iframe {
         height: calc(100% - 39px);
         width: 100%;
         overflow: auto;
-        background-color: $c-gray;
+        background-color: darken($c-gray, 2%);
         color: $c-white;
         &::-webkit-scrollbar-track {
             border-radius: 2px;
@@ -222,5 +236,15 @@ iframe {
                 margin: 5px 0 15px 0;
             }
         }
+        .video-item-details {
+            flex-wrap: wrap;
+            margin-top: 8px;
+            p {
+                font-size: 14px;
+                width: 100%;
+                margin-right: 0;
+                margin-bottom: 5px;
+            }
+        }
     }
 }

dist/assets/settings.json

@@ -1,10 +1,10 @@
 {
   "form_settings": [
     {
-      "name": "Toggle Debugging Info",
+      "name": "Show Debugging Info",
       "value": false
     }, {
-      "name": "Toggle Search Thumbnails",
+      "name": "Show Thumbnails",
       "value": true
     }
   ],
@@ -14,7 +14,7 @@
       "value": "AIzaSyDcMvWlqPTHg7rHm-CTVXJwpaVGXKu7cBc"
     }, {
       "name": "Country trending",
-      "value": "RO"
+      "value": "US"
     }, {
       "name": "Number of search results",
       "value": 15

dist/index.html

@@ -2,7 +2,7 @@
 <html>
     <head>
         <base href="/">
-        <title>YouTube Player v1.4</title>
+        <title>YouTube Player v1.6</title>
         <link rel="icon" href="favicon.ico">
         <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,400i,700,900" rel="stylesheet">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">