Merge pull request #6 from quead/1.x-develop

1.4 - Adding history of your watched content

Author: quead

README.md

@@ -4,7 +4,7 @@
 </p>
 
 # About Player
-[![Version](https://img.shields.io/badge/Current%20version-v1.3-brightgreen.svg?style=flat)](https://github.com/quead/angular2-yt-player)
+[![Version](https://img.shields.io/badge/Current%20version-v1.4`-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)
@@ -28,7 +28,7 @@ This player is compatible only with Chrome/webkit browsers because in future I w
 
 `npm install` in root folder
 
-4. Run the player by
+4. Run the player by`
 
 `npm start` in root folder
 
@@ -58,6 +58,11 @@ Just take files from ***dist*** folder
 
 ## Changelog
 
+
+Angular2 YT Player v1.4
+- History of your watched videos
+- Small fixes
+
 Angular2 YT Player v1.3
  - Show/hide video player
  - Repeat video
@@ -113,6 +118,9 @@ Angular2 YT Player v1.0.0
 - Next/prev video from your playlist **(in v1.9)**
 - Adding support for NW.js to export the app for desktop compatible: Windows/Mac OS X/Linux **(in v2.0)**
 - Hotkeys for application in desktop (play/pause/next/prev) **(in v2.0)**
+- Save your playlists **(unversioned)**
+- **Settings**
+- *Save your settings **(unversioned)***
 
 #### Roadmap to 3.0
 - **Rooms**

dist/assets/css/main.css

@@ -815,6 +815,11 @@ nav a.is-active:hover {
   overflow-y: auto;
 }
 
+.video-list-info {
+  text-align: center;
+  margin: 5px;
+}
+
 #search-video-list {
   z-index: 10;
   max-height: 430px;
@@ -944,6 +949,65 @@ iframe {
   transition: height 0.1s ease-out 0s;
 }
 
+#history-video-list {
+  display: flex;
+  flex-wrap: wrap;
+  top: inherit;
+  bottom: 0;
+  max-height: none;
+  height: calc(100% - 150px);
+  width: 100%;
+  transition: height 0.1s ease-out 0.1s;
+}
+
+#history-video-list .video-item-head {
+  background-color: #191919;
+}
+
+#history-video-list .video-item {
+  display: flex;
+  background-color: transparent;
+  flex-wrap: nowrap;
+  border-bottom: none;
+  transition: box-shadow 0.1s ease-out;
+  padding: 5px;
+}
+
+#history-video-list .video-item-image {
+  flex: inherit;
+  margin: 0 10px 0 0;
+  position: relative;
+}
+
+#history-video-list .video-item-image img {
+  width: 60px;
+  height: auto;
+}
+
+#history-video-list .history-video-content {
+  position: absolute;
+  bottom: 0;
+  height: calc(100% - 39px);
+  width: 100%;
+  overflow: auto;
+  background-color: #111111;
+  color: #ffffff;
+}
+
+#history-video-list .history-video-content::-webkit-scrollbar-track {
+  border-radius: 2px;
+}
+
+#history-video-list .history-video-content::-webkit-scrollbar {
+  width: 5px;
+  background-color: transparent;
+}
+
+#history-video-list .history-video-content::-webkit-scrollbar-thumb {
+  border-radius: 20px;
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
 #feed-video-list {
   top: inherit;
   bottom: 0;

dist/assets/scss/_videos.scss

@@ -5,6 +5,11 @@
     overflow-y: auto;
 }
 
+.video-list-info {
+    text-align: center;
+    margin: 5px;
+}
+
 #search-video-list {
     z-index: 10;
     max-height: 430px;
@@ -122,6 +127,59 @@ iframe {
     }
 }
 
+#history-video-list {
+    display: flex;
+    flex-wrap: wrap;
+    top: inherit;
+    bottom: 0;
+    max-height: none;
+    height: calc(100% - 150px);
+    width: 100%;
+    transition: height 0.1s ease-out 0.1s;
+    .video-item-head {
+        background-color: lighten($c-gray, 3%);
+    }
+    .video-item {
+        display: flex;
+        background-color: transparent;
+        flex-wrap: nowrap;
+        border-bottom: none;
+        transition: box-shadow 0.1s ease-out;
+        padding: 5px;
+    }
+    .video-item-image {
+        flex: inherit;
+        margin: 0 10px 0 0;
+        position: relative;
+        img {
+            width: 60px;
+            height: auto;
+        }
+    }
+    .history-video-content {
+        position: absolute;
+        bottom: 0;
+        height: calc(100% - 39px);
+        width: 100%;
+        overflow: auto;
+        background-color: $c-gray;
+        color: $c-white;
+        &::-webkit-scrollbar-track {
+            border-radius: 2px;
+        }
+
+        &::-webkit-scrollbar {
+            width: 5px;
+            background-color: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            border-radius: 20px;
+            background-color: rgba($c-white, 0.3);
+        }
+    }
+}
+
 #feed-video-list {
     top: inherit;
     bottom: 0;

dist/index.html

@@ -2,7 +2,7 @@
 <html>
     <head>
         <base href="/">
-        <title>YouTube Player v1.3</title>
+        <title>YouTube Player v1.4</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">
@@ -39,7 +39,7 @@
                 win.minimize();
             };
 
-            document.getElementById('win-maximize').onclick = function(){
+            document.getElementById('win-maximize').o`nclick = function(){
                 win.maximize();
             };